/* CSS Document */

 /* ══════════════════════════════════════════
           CUSTOM CURSOR STYLES
        ══════════════════════════════════════════ */
        /* Hide the default mouse pointer everywhere */

        /* ==========================================
           HOMEPAGE SCROLLYTELLING STYLES
        ========================================== */
        #home-canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            /* BOTTOM LAYER */
            pointer-events: none;
            background-color: #0a0c10;
            /* The background color lives here now! */
        }

        .home-narrative-layer {
            position: relative;
            z-index: 10;
            /* TOP LAYER */
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: transparent;
            /* Transparent so the 3D model shows through */
        }

        .narrative-step {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            padding: 0 5vw;
            opacity: 0;
            visibility: hidden;
        }

        .hero-step {
            opacity: 1;
            visibility: visible;
        }

        /* --- HERO LAYOUT (LEFT ALIGNED) --- */
        .hero-text-wrapper {
            max-width: 600px;
            text-align: left;
        }

        .hero-text-wrapper h1 {
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight: 900;
            line-height: 1.05;
            margin-bottom: 0;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        }


        .hero-text-wrapper h4 {
            font-size: clamp(3rem, 7vw, 3.5rem);
            font-weight: 500;
            line-height: 1.05;
            margin-bottom: 30px;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
        }

        .hero-text-wrapper .hero-glass-text {
            font-size: clamp(1.1rem, 1.5vw, 1.3rem);
            color: #ffffff;
            line-height: 1.6;
            margin: 0 0 40px 0;
            background: rgba(10, 12, 16, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 20px 30px;
            border-radius: 20px;
            border-left: 4px solid white;
            -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        /* ══════════════════════════════════════════
           PREMIUM EDITORIAL TEXT MASKING
        ══════════════════════════════════════════ */
        .reveal-mask {
            overflow: hidden;
            /* This is the invisible wall */
            display: block;
            /* Extra padding so lowercase letters (g, j, y) don't get chopped off */
            padding-bottom: 8px;
            margin-bottom: -8px;
        }

        .reveal-item {
            display: block;
            -webkit-transform: translateY(120%);
                    transform: translateY(120%);
            /* Pushed down completely out of sight */
            opacity: 0;
            will-change: transform, opacity;
            /* Hardware acceleration for smooth slicing */
        }

        /* --- THE THREAT BOX --- */
        .warning-box {
            border: 1px solid rgba(255, 51, 51, 0.3) !important;
            background: rgba(20, 5, 5, 0.8) !important;
        }

        /* --- HIGH-TECH FLOATING BADGES --- */
        .tech-badge {
            position: absolute;
            background: rgba(20, 24, 30, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            padding: 15px 25px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
            -webkit-backdrop-filter: blur(10px);
                    backdrop-filter: blur(10px);
            z-index: 5;
            opacity: 0;
            -webkit-transform: translateY(20px) scale(0.9);
                    transform: translateY(20px) scale(0.9);
        }

        .tech-badge .val {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1;
        }

        .tech-badge .val small {
            font-size: 1rem;
            color: #888;
        }

        .tech-badge .lbl {
            font-size: 0.75rem;
            font-weight: 600;
            color: #888;
            margin-top: 5px;
            letter-spacing: 1px;
        }

        .badge-top-left {
            top: 20%;
            left: 12%;
            border-left: 3px solid rgba(255, 255, 255, 0.5);
        }

        .badge-top-right {
            top: 22%;
            right: 12%;
            border-right: 3px solid rgba(255, 255, 255, 0.5);
            text-align: right;
        }

        .badge-mid-left {
            top: 45%;
            left: 10%;
            border-left: 3px solid rgba(255, 255, 255, 0.5);
        }

        .badge-mid-right {
            top: 48%;
            right: 10%;
            border-right: 3px solid rgba(255, 255, 255, 0.5);
            text-align: right;
        }

        .badge-bottom-left {
            bottom: 28%;
            left: 14%;
            border-left: 3px solid rgba(255, 255, 255, 0.5);
        }

        .badge-bottom-right {
            bottom: 25%;
            right: 14%;
            border-right: 3px solid rgba(255, 255, 255, 0.5);
            text-align: right;
        }

        .bottom-anchored {
            margin-top: auto;
            margin-bottom: 10vh;
            text-align: center;
        }

        /* --- STANDARD TEXT BOXES & SCENARIO IMAGES --- */
        .narrative-text-box {
            background: rgb(10 12 16 / 41%);
            -webkit-backdrop-filter: blur(2px);
                    backdrop-filter: blur(2px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 40px;
            max-width: 600px;
            -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .narrative-text-box h3 {
            font-size: 1rem;
            color: var(--accent-safety);
            letter-spacing: 0.1em;
            margin-bottom: 10px;
        }

        .narrative-text-box h2 {
            font-size: clamp(2rem, 4vw, 2.5rem);
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        .narrative-text-box p {
            font-size: 1.1rem;
            color: var(--text-grey);
            line-height: 1.6;
            margin: 0;
        }

        /* Image styling for real-world scenarios */
        .scenario-img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            margin-top: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            -webkit-filter: grayscale(80%);
                    filter: grayscale(80%);
            -webkit-transition: -webkit-filter 0.4s ease, -webkit-transform 0.4s ease;
            transition: -webkit-filter 0.4s ease, -webkit-transform 0.4s ease;
            transition: filter 0.4s ease, transform 0.4s ease;
            transition: filter 0.4s ease, transform 0.4s ease, -webkit-filter 0.4s ease, -webkit-transform 0.4s ease;
        }

        .scenario-img:hover {
            -webkit-filter: grayscale(0%);
                    filter: grayscale(0%);
            -webkit-transform: scale(1.02);
                    transform: scale(1.02);
        }

        .left-aligned {
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
        }

        .right-aligned {
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
        }

        .center-aligned {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

        .pb-extra {
            padding-bottom: 20vh;
        }


        /* --- HIGH-TECH GRID OVERLAY --- */
        .grid-overlay {
            position: absolute;
            inset: 0;
            /* Stretches to fill the container perfectly */
            /* Faint white lines that work on all your sector colors */
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
            /* Stays firmly behind the 3D model */
        }

        #three-canvas {
            position: relative;
            z-index: 1;
            /* Pulls the 3D model slightly forward so it sits on top of the grid */
            width: 100%;
            height: 100%;
        }

        /* 1. The Heavy Ground Shadow */
        .ground-shadow {
            position: absolute;
            bottom: 5%;
            /* Positioned right under the box */
            left: 50%;
            width: 50vw;
            height: 10vh;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
        }

        /* 2. The Dynamic Sector Glow */
        .dynamic-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 45vw;
            height: 45vw;
            border-radius: 50%;
            background-color: transparent;
            /* GSAP will control the colors */
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 0;
            mix-blend-mode: screen;
            -webkit-filter: blur(80px);
                    filter: blur(80px);
            /* Massive blur creates the glowing aura */
            opacity: 0;
        }

        /* 3. HUD Connecting Lines for the Badges */
     

        /* ══════════════════════════════════════════
           TACTICAL PRELOADER STYLES
        ══════════════════════════════════════════ */
        #tactical-preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #0a0c10;
            /* Matches your dark brand color */
            z-index: 9999;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            font-family: 'Orbitron', sans-serif;
        }

        .preloader-content {
            width: 80%;
            max-width: 500px;
        }

        #terminal-output {
            font-family: 'Inter', monospace;
            font-size: 0.75rem;
            color: #5a5f6d;
            height: 120px;
            overflow: hidden;
            margin-bottom: 20px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            /* Keeps text pushing upward from the bottom */
            line-height: 1.6;
            letter-spacing: 1px;
        }

        .loading-bar-container {
            width: 100%;
            height: 2px;
            background: rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        #loading-bar-fill {
            height: 100%;
            width: 0%;
            /* JS will control this */
            background: #ff3333;
            /* The RACLAN red */
            -webkit-box-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
                    box-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
            -webkit-transition: width 0.1s linear;
            transition: width 0.1s linear;
        }

        .loading-status {
            margin-top: 15px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 3px;
            color: rgba(255, 255, 255, 0.4);
        }

        @media (max-width: 768px) {
            .tech-badge {
                display: none;
            }

            .left-aligned,
            .right-aligned {
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }

            .hero-text-wrapper {
                text-align: center;
                margin-top: auto;
                margin-bottom: 10vh;
            }

            .hero-text-wrapper .hero-glass-text {
                text-align: left;
            }

            .narrative-text-box {
                padding: 30px 20px;
                text-align: center;
                margin-top: auto;
                margin-bottom: 10vh;
            }
        }