/* Reset and Base Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #050505; 
    overflow: hidden; 
}

/* --- FULL SCREEN CONTAINER --- */
.interactive-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw; 
    min-height: 100vh;
    min-width: 177.77vh;
}

.desk-image { width: 100%; height: 100%; display: block; }

/* --- THE MAIN TITLE & HOVER DROPDOWN --- */
.header-container {
    position: absolute;
    top: 5%;
    left: 4%;
    z-index: 20;
    /* Allows you to hover from the title down into the menu without it closing */
    padding-bottom: 20px; 
}

.header-title {
    background: rgba(13, 11, 20, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    cursor: default;
    transition: background 0.3s ease;
}

.header-container:hover .header-title {
    background: rgba(30, 30, 35, 0.85);
}

.header-title h1 { color: #ffffff; font-size: 1.6rem; font-weight: 600; letter-spacing: 1px; }
.header-title .divider { color: #fca311; margin: 0 10px; }

/* The Dropdown Panel */
.header-dropdown {
    margin-top: 10px;
    width: 380px;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.header-container:hover .header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-dropdown p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}

.social-links a {
    display: inline-block;
    color: #fca311;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 15px;
    transition: color 0.2s ease;
}

.social-links a:hover { color: #ffffff; }

/* --- REUSABLE APPLE GLASS CLASS --- */
.glass-panel, .glass-tooltip {
    background: rgba(30, 30, 35, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    color: #ffffff;
}


/* --- THE GLOWING DOTS (Beacons) --- */
.glow-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #fca311; /* Electric Yellow */
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px 2px rgba(252, 163, 17, 0.6);
    animation: pulse 2s infinite;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.glow-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: #ffffff;
    animation: none;
    box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.6);
}

/* Positions for the dots */
#dot-camera { top: 62%; left: 23%; }
#dot-monitor { top: 51%; left: 48%; }
#dot-plant { top: 53%; left: 71%; }
#dot-diary { top: 70%; left: 75%; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(252, 163, 17, 0); }
    100% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0); }
}

/* --- THE TOOLTIPS --- */
.glass-tooltip {
    position: absolute;
    transform: translateX(-50%) translateY(10px);
    width: 250px;
    padding: 16px 20px;
    z-index: 15;
    
    /* Hidden by default, controlled by JS */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.glass-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.glass-tooltip h3 { font-size: 1.1rem; margin-bottom: 6px; font-weight: 600; color: #fca311; }
.glass-tooltip p { font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }