/* --- Global Reset & Variables --- */
:root {
    --app-gap: 24px;         
    --app-radius: 20px;      
    --sidebar-width: 280px;  
    --topbar-height: 80px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #111827;
    overflow: hidden; 
}

/* --- Video Background & Overlay --- */
.bg-video {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.bg-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(17,24,39,0.9) 0%, rgba(17,24,39,0.5) 50%, rgba(17,24,39,0.8) 100%);
    z-index: -1;
    pointer-events: none; /* Prevents overlay from blocking button clicks */
}

/* --- Frosted Glass Reusable Class --- */
.glass-panel {
    background-color: rgba(31, 41, 55, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   THE FLOATING ISLAND LAYOUT MATH
   ========================================================================== */

/* 1. The Sidebar Island */
.island-sidebar {
    position: fixed;
    top: var(--app-gap);
    bottom: var(--app-gap);
    left: var(--app-gap);
    width: var(--sidebar-width);
    border-radius: var(--app-radius);
    overflow-y: auto;
    z-index: 100;
}

/* 2. The Top Bar Island */
.island-topbar {
    position: fixed;
    top: var(--app-gap);
    left: calc(var(--sidebar-width) + var(--app-gap) + var(--app-gap)); 
    right: var(--app-gap);
    height: var(--topbar-height);
    border-radius: var(--app-radius);
    z-index: 100;
}

/* 3. The Main Content Island */
.island-content {
    position: absolute;
    top: calc(var(--topbar-height) + var(--app-gap) + var(--app-gap)); 
    bottom: var(--app-gap);
    left: calc(var(--sidebar-width) + var(--app-gap) + var(--app-gap)); 
    right: var(--app-gap);
    border-radius: var(--app-radius);
    overflow-y: auto; 
    scrollbar-width: thin;
    scrollbar-color: #4b5563 transparent;
    z-index: 10; /* Forces content to the front so buttons work */
}

/* Mobile Overrides */
@media (max-width: 768px) {
    body { overflow-y: auto; }
    .island-topbar { height: auto; min-height: var(--topbar-height); padding: 15px 0; left: var(--app-gap); position: relative; top: 0; margin: var(--app-gap); right: auto; width: calc(100% - (var(--app-gap) * 2)); }
    .island-content { left: 0; top: 0; position: relative; margin: var(--app-gap); width: calc(100% - (var(--app-gap) * 2)); overflow-y: visible; }
}

/* --- Navigation Link Styling --- */
.top-link {
    color: #cbd5e1; text-decoration: none; font-weight: 600; padding: 0.5rem; transition: 0.3s;
    border-bottom: 2px solid transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.top-link:hover, .top-link.active {
    color: #fff; border-bottom-color: #60a5fa;
}

.side-link {
    color: #cbd5e1; text-decoration: none; font-weight: 600; transition: 0.3s;
    border-left: 3px solid transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.side-link:hover { background: rgba(255,255,255,0.05); color: #fff; border-left-color: #60a5fa; }
.side-link.active { background: rgba(255,255,255,0.1); color: #fff; border-left-color: #60a5fa; }

/* --- Utilities & Aesthetics --- */
.tracking-widest { letter-spacing: 0.15em; }
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.text-shadow-strong { text-shadow: 0 4px 12px rgba(0,0,0,0.9); }
.custom-tag { box-shadow: 0 4px 6px rgba(0,0,0,0.4); transition: transform 0.2s; }
.custom-tag:hover { transform: scale(1.05); }

.hover-invert:hover { background-color: #fff !important; color: #000 !important; }

/* Scroll Animation Classes */
.transition-fade { transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.translate-y-50 { transform: translateY(30px); }
.translate-middle-y-0 { transform: translateY(0); }

/* --- Your Custom Skyline Animations --- */
.skyline-wrapper { pointer-events: none; } /* Prevents animation from blocking buttons */
.building { background-color: #1f2937; border-radius: 0.5rem 0.5rem 0 0; position: relative; }
.building-roof { position: absolute; top: 0; left: 0; width: 100%; height: 1rem; background-color: rgba(75, 85, 99, 0.8); border-radius: 0.5rem 0.5rem 0 0; }
.building-alt { background-color: #374151; }
.b-sm { width: 4rem; height: 10rem; }
.b-md { width: 5rem; height: 14rem; }
.b-lg { width: 6rem; height: 20rem; }
.b-xl { width: 6rem; height: 24rem; }
.window-light { position: absolute; width: 1rem; height: 1rem; background-color: #fde047; border-radius: 2px; box-shadow: 0 0 15px 2px #fde047; }
.w-1 { top: 2rem; left: 50%; transform: translateX(-50%); }
.w-2 { top: 6rem; left: 1rem; }

@keyframes swing { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }
.crane-base { position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); width: 1rem; height: 6rem; background-color: #4b5563; }
.crane-arm { position: absolute; top: 0; left: -8rem; width: 16rem; height: 0.5rem; background-color: #4b5563; transform-origin: right center; animation: swing 8s ease-in-out infinite alternate; }
.crane-line { position: absolute; top: 100%; left: 2rem; width: 2px; height: 6rem; background-color: #6b7280; }
.crane-hook { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1rem; height: 1rem; background-color: #374151; }