html, body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    background: #000;
    color: #fff;

    font-family: "Courier New", monospace;

}

body.no-scroll {

    overflow: hidden;

}


/* INTRO CONTAINER */

#intro-container {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;

    z-index: 100;

}


/* CLICK OVERLAY */

#click-overlay {

    position: absolute;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;

    cursor: default;

    z-index: 200;

}

#click-overlay span {

    border: 1px solid #333;

    padding: 15px 30px;

    letter-spacing: 2px;

    text-transform: uppercase;

}

/* START BUTTON STYLES */
#start-button {
    background: transparent;
    border: 1px solid #333;
    padding: 15px 30px;
    color: #fff;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

#start-button:hover {
    opacity: 1;
    border-color: #777;
}


/* MAIN CONTENT */

/* MAIN CONTENT */
     #main-content {
     opacity: 0;
     /* Removed transition to ensure content is visible immediately for scroll calculation */
}

/* SCROLL SECTIONS */

.scroll-section {

    position: relative;

    width: 100%;
    height: 500vh;

}


/* STICKY WRAPPER */

.sticky-wrapper {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

}


/* CINEMATIC CONTAINER */

.cinematic-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WEBGL GLOW CANVAS */

.glow-canvas {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    height: 66vh;
    width: auto;

    max-width: 90vw;

    z-index: 1;

    pointer-events: none;

}


/* VIDEO */

#intro-video {

    display: block;

    height: 100%;
    width: auto;

    max-width: 100%;

    object-fit: contain;
}


/* CANVAS */
canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* FIX: Force height and aspect ratio to match image-stack */
    height: 66vh;
    width: calc(66vh * 16 / 9); 

    max-width: 90vw;
    
    object-fit: contain;
    z-index: 2;
}

/* IMAGE STACK */
.image-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* FIX: Force height and aspect ratio to match canvas */
    height: 66vh;
    width: calc(66vh * 16 / 9); 

    max-width: 90vw;
    z-index: 2;
}

.image-stack img {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* TEXT */

/* TEXT CONTAINER */

.content-overlay {
    position: absolute;
    /* MOVED DOWN: Restored to 35vh (was 30vh) to match original placement */
    top: calc(50% + 35vh); 
    left: 0;
    width: 100%;
    height: 0; 
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

/* INDIVIDUAL TEXT LINES */
.text-line {
    position: absolute;
    width: 90vw;
    max-width: 900px;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 1.5rem; 
    line-height: 1.5;
    font-weight: bold;
    color: #fff;
    will-change: transform, opacity;
    /* No 'transition' property here */
}

/* LOADING INDICATOR */

#loading-indicator {

    position: fixed;

    bottom: 20px;
    right: 20px;

    color: #444;

}

/* SKIP INTRO BUTTON */

#skip-button {

    position: absolute;
    top: 20px;
    right: 20px;

    border: 1px solid #333;

    padding: 8px 16px;

    font-size: 12px;
    letter-spacing: 2px;

    cursor: pointer;

    z-index: 300;

    opacity: 0.6;

    transition: opacity 0.2s ease, border-color 0.2s ease;

}

#skip-button:hover {

    opacity: 1;
    border-color: #777;

}


/* VIDEO WRAPPER */

#video-wrapper {

    position: relative;

    display: inline-block;

    height: 66vh;
    width: auto;

    max-width: 90vw;

}


/* CLOSE ICON */

#video-close {

    position: absolute;

    top: 10px;
    right: 10px;

    font-size: 18px;

    color: white;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.2s ease;

    z-index: 400;

}


/* SHOW X ON VIDEO HOVER */

#video-wrapper:hover #video-close {

    opacity: 0.8;

}

#video-close:hover {

    opacity: 1;

}

/* HIDE CURSOR AND CLOSE BUTTON */

#video-wrapper.hide-ui {
    cursor: none;
}

#video-wrapper.hide-ui #video-close {
    opacity: 0 !important;
}

.slide-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
}

/* LOADING SCREEN (GATEKEEPER) */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Above everything */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    cursor: default;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-bar-container {
    width: 200px;
    height: 2px;
    background: #222;
    margin-top: 20px;
}

#loader-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width 0.3s ease;
}

/* Ensure the main content doesn't jitter during jump */
html {
    scroll-behavior: auto; /* Required for instant jumps */
}

/* --- ACTIVE INITIATIVES SECTION --- */

.initiatives-section {
    position: relative;
    width: 100%;
    /* CHANGED: Full viewport containment with centered alignment */
    min-height: 100vh;
    padding: 0; 
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the content */
    overflow: hidden;
    z-index: 10;
    box-sizing: border-box;
}

/* SCANNING EFFECT - SUBTLE ENVIRONMENTAL LAYER */
.initiatives-section::after {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 20%; /* Scanline band height */
    /* Extremely subtle gradient */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.012), transparent);
    /* CHANGED: 18s total cycle (approx 14s move + 4s pause) */
    animation: scan 18s linear infinite; 
    pointer-events: none;
    z-index: 5;
}

/* UPDATED ANIMATION: Observational Timing */
@keyframes scan {
    0% { top: -20%; }
    80% { top: 120%; } /* Movement Phase (~14.4s) */
    100% { top: 120%; } /* Pause Phase (~3.6s) */
}

/* Structural Background Grid - Barely visible */
.initiatives-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* 1px horizontal lines, extremely low contrast */
    background-image: linear-gradient(to bottom, #111 1px, transparent 1px);
    background-size: 100% 40px; 
    opacity: 0.5;
}

.initiatives-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Align with main content width */
    max-width: 90vw; 
    display: flex;
    flex-direction: column;
    /* Left aligned container */
    align-items: flex-start; 
    /* CHANGED: Vertical padding relative to viewport for balance */
    padding: 60px 0;
    justify-content: center;
}

/* SECTION DIVIDER - BOUNDARY LINE */
.initiatives-divider {
    width: 100%;
    height: 1px;
    background: #222;
    margin-bottom: 60px; /* INCREASED: Was 40px */
    margin-top: 0;
}

/* Section Title */
.initiatives-title {
    font-family: "Courier New", monospace;
    font-size: 1.5rem; /* Consistent with existing headers */
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px; 
    color: #fff;
    font-weight: bold;
    border-left: 2px solid #333; /* System accent */
    padding-left: 20px;
}

/* CONTEXT LINE */
.initiatives-context {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 60px; /* INCREASED: Was 40px */
    padding-left: 24px; /* Align with text start (accounting for border-left of title) */
    letter-spacing: 1px;
}

/* Module Stack */
.initiatives-modules {
    display: flex;
    flex-direction: column;
    gap: 50px; /* INCREASED: Was 30px. Redistributed for 100vh balance. */
    width: 100%;
}

/* Individual Module */
.initiative-module {
    position: relative;
    display: block; /* Ensure anchor tags behave like blocks */
    width: 70%; /* 60-75% width */
    border: 1px solid #1a1a1a; /* Low contrast gray border default */
    padding: 30px; 
    background: #000; /* Opaque background to cover grid lines */
    box-sizing: border-box;
    transition: border-color 0.3s ease, background 0.3s ease; /* Added background transition */
    text-decoration: none; /* Remove default link underline */
    color: inherit; /* Maintain text color */
}

/* Active Module Specifics */
.initiative-module.active {
    border-color: #333; /* Priority: Brighter than inactive by default */
    cursor: pointer; /* Behavioral refinement */
}

/* Tablet/Mobile Adjustment */
@media (max-width: 768px) {
    .initiative-module {
        width: 100%;
    }
}

/* Module Typography */
.module-name {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
}

.module-status {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px; 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Courier New", monospace;
}

.status-highlight {
    color: #999; /* Slightly brighter */
}

.status-highlight::after {
    content: "_";
    animation: blink 1s step-end infinite;
    margin-left: 5px;
}

@keyframes blink {
    50% { opacity: 0; }
}

.module-purpose {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px; 
    color: #aaa;
    max-width: 600px;
    transition: color 0.3s ease;
}

.module-capabilities {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6; 
    transition: color 0.3s ease;
}

/* Control Element (Text) */
.module-control {
    display: block; /* Bottom of module */
    margin-top: 25px; 
    padding: 10px 10px 10px 0; /* Adjusted padding */
    color: #ccc; /* INCREASED: Passive visibility (was #aaa) */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease; /* No movement transition */
    width: fit-content;
}

/* Control Arrow Pseudo-element */
.module-control::after {
    content: " \2192"; /* Right Arrow */
    display: none; /* Hidden by default */
    margin-left: 10px;
}

/* HOVER BEHAVIORS */

/* Active Module Hover */
.initiative-module.active:hover {
    border-color: #555; /* Brighter border */
    /* CHANGED: Subtle background luminance increase */
    background: rgba(255, 255, 255, 0.02);
}

.initiative-module.active:hover .module-name {
    /* Slight contrast bump implies focus */
    text-shadow: 0 0 5px rgba(255,255,255,0.1); 
}

/* ENHANCED HOVER: Brighten internal text on module hover */
.initiative-module.active:hover .module-purpose {
    color: #ccc;
}

.initiative-module.active:hover .module-capabilities {
    color: #888;
}

/* Hover State for Control */
.module-control:hover, .initiative-module.active:hover .module-control {
    color: #fff;
}

.module-control:hover::after, .initiative-module.active:hover .module-control::after {
    display: inline; /* Instant appearance */
}

/* Inactive Module Styling */
.initiative-module.inactive {
    opacity: 0.4; 
    border-color: #111;
    cursor: default;
    pointer-events: none; /* Ensure inactive modules are not clickable via styling */
}

.initiative-module.inactive .module-name {
    color: #666;
}

/* Section Termination Text */
.initiatives-termination {
    margin-top: 50px; /* INCREASED: Was 30px */
    font-size: 0.75rem;
    color: #444;
    letter-spacing: 1px;
}

/* Contact Endpoint Styles */
.initiatives-contact {
    margin-top: 20px; /* INCREASED: Was 15px */
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 1px;
}

.initiatives-contact a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.initiatives-contact a:hover {
    color: #fff;
    cursor: pointer;
}

/* Final Closure Line */
.initiatives-closure {
    margin-top: 20px; /* INCREASED: Was 15px */
    font-size: 0.75rem;
    color: #333;
    letter-spacing: 1px;
}

/* NAVIGATION BUTTON - TOP RIGHT */
#nav-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 2000;
    font-family: "Courier New", monospace;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    background: transparent;
    border: 1px solid #333;
    color: #fff;
    opacity: 0.6;
    white-space: nowrap;
}

#nav-button:hover {
    opacity: 1;
    border-color: #777;
}

/* AUDIO TOGGLE - BOTTOM RIGHT */
#audio-toggle {
    position: fixed;
    bottom: 20px; /* Moved to bottom */
    right: 20px;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 2000;
    font-family: "Courier New", monospace;
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    color: #fff;
    white-space: nowrap;
    display: none; /* Managed by JS */
}

#audio-toggle:hover {
    border-color: #777;
    background: rgba(0, 0, 0, 0.8);
}