/* style.css - Retro-Futuristic Design System */

/* ============================================================
   SELF-HOSTED WEBFONTS — latin subset, font-display: swap.
   Manrope and JetBrains Mono are variable woff2 (true weight axis);
   Caveat is a single regular face. Files live in public/fonts/ and
   are git-tracked. Preloads are in the head of index.html.
   ============================================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/Manrope-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/Caveat-Regular.woff2') format('woff2');
}

/* ==========================================
   CSS CUSTOM PROPERTIES (Variables)
   Define the color palette and reusable values
   ========================================== */
:root {
    /* Color Palette - Forest Midnight theme */
    --primary-emerald: #52D68D;   /* Emerald green for accents */
    --primary-forest: #27AE60;    /* Forest green for contrast */
    --sage-text: #8A9B8A;         /* Darker sage green for body text (was #B8C5B8 - too bright) */
    --bg-dark: #0a0f0a;           /* Charcoal black background */

    /* Additional surfaces (Josh Vamos Design System, colors_and_type.css) */
    --bg-dark-deeper: #050a05;    /* services modal / very deep panels */
    --bg-elevated: rgba(20, 20, 30, 0.85);  /* timeline cards, raised surfaces */
    --bg-overlay: rgba(10, 10, 15, 0.9);    /* start-screen backdrop */
    --bg-panel-tint: rgba(0, 0, 0, 0.3);    /* credit cards, form inputs */

    /* Additional brand greens */
    --emerald-bright: #7FFFA0;    /* hovered service-card border */
    --sage-text-soft: #B0D9C0;    /* service-card description */

    /* Accent cyan + magenta (glow-only, never fills) */
    --accent-cyan: #00ccff;
    --accent-cyan-pure: #00ffff;
    --accent-magenta: #ff66cc;

    /* Text */
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-faint: rgba(255, 255, 255, 0.35);
    --text-on-emerald: var(--bg-dark);

    /* Emerald alphas — borders, tints */
    --emerald-border: rgba(82, 214, 141, 0.3);
    --emerald-border-soft: rgba(82, 214, 141, 0.2);
    --emerald-border-strong: rgba(82, 214, 141, 0.6);
    --emerald-tint-10: rgba(82, 214, 141, 0.1);
    --emerald-tint-15: rgba(82, 214, 141, 0.15);

    /* Cyan alphas — glow shadows */
    --cyan-glow-soft: rgba(0, 255, 255, 0.2);
    --cyan-glow: rgba(0, 255, 255, 0.4);
    --cyan-glow-strong: rgba(0, 255, 255, 0.8);

    /* Effects */
    --text-glow: 0 0 15px rgba(82, 214, 141, 0.3);  /* Subtle emerald glow */
    --text-glow-strong: 0 0 20px rgba(82, 214, 141, 0.4);
    --crt-flicker: flicker 0.15s infinite;          /* CRT monitor flicker */

    --glow-emerald-sm: 0 0 10px rgba(82, 214, 141, 0.3);
    --glow-emerald-md: 0 0 20px rgba(82, 214, 141, 0.4);
    --glow-emerald-lg: 0 0 30px rgba(82, 214, 141, 0.6);
    --glow-cyan-sm: 0 0 10px rgba(0, 255, 255, 0.3);
    --glow-cyan-md: 0 0 20px rgba(0, 255, 255, 0.5);
    --glow-cyan-lg: 0 0 40px rgba(0, 255, 255, 0.8);
    --glow-inset: inset 0 0 20px rgba(0, 255, 255, 0.1);
    --glow-button-neon: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
    --glow-button-neon-hover: 0 0 40px rgba(0, 255, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3);

    /* Typography — matches the @font-face families self-hosted above */
    --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
    --font-script: 'Caveat', 'Brush Script MT', cursive; /* signature / handwritten accent */

    --fw-thin: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-hero: clamp(2.5rem, 6vw, 4.5rem);
    --fs-display: clamp(2rem, 5vw, 3rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: 1.3rem;
    --fs-lead: clamp(1rem, 2vw, 1.3rem);
    --fs-body-lg: 1.2rem;
    --fs-body: 1rem;
    --fs-small: 0.9rem;
    --fs-caption: 0.85rem;
    --fs-eyebrow: 0.75rem;

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-normal: 1.6;
    --lh-loose: 1.8;

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-ui: 0.1em;
    --ls-loud: 0.2em;
    --ls-shout: 0.3em;

    /* Borders & radius */
    --border-thin: 1px solid var(--emerald-border-soft);
    --border-std: 1px solid var(--emerald-border);
    --border-strong: 2px solid var(--primary-emerald);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-pill: 50px;
    --radius-full: 9999px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Motion */
    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: ease-out;
    --dur-fast: 0.15s;
    --dur-base: 0.3s;
    --dur-slow: 0.4s;
    --dur-shimmer: 0.5s;
    --dur-holo: 8s;

    /* Gradients */
    --grad-emerald: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-forest) 100%);
    --grad-emerald-reverse: linear-gradient(135deg, var(--primary-forest) 0%, var(--primary-emerald) 100%);
    --grad-emerald-cyan: linear-gradient(135deg, var(--primary-emerald) 0%, var(--accent-cyan) 100%);
    --grad-holographic: linear-gradient(135deg,
      var(--accent-cyan) 0%, var(--accent-magenta) 25%,
      var(--accent-cyan) 50%, var(--accent-magenta) 75%,
      var(--accent-cyan) 100%);
    --grad-badge: linear-gradient(135deg, rgba(82,214,141,0.15), rgba(39,174,96,0.1));
    --grad-card: linear-gradient(135deg, rgba(82,214,141,0.05), rgba(82,214,141,0.1));
    --grad-modal: linear-gradient(135deg, rgba(10,20,15,0.95), rgba(5,15,10,0.98));
    --grad-hero-fade: linear-gradient(180deg, var(--bg-dark) 0%, rgba(10,15,10,0.95) 100%);
    --grad-divider: linear-gradient(90deg, transparent 0%,
      var(--primary-emerald) 20%, var(--primary-emerald) 80%, transparent 100%);

    --bg-scanlines: repeating-linear-gradient(0deg,
      rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 1px,
      transparent 1px, transparent 2px);
    --bg-scanlines-cyan: repeating-linear-gradient(0deg,
      rgba(0,255,255,0.03) 0, rgba(0,255,255,0.03) 1px,
      transparent 1px, transparent 3px);

    /* Z-Index Hierarchy (DO NOT use inline styles - CSS only)
       Kept at their existing production values — do not renumber to
       match colors_and_type.css's z-scale, that would change real
       stacking order sitewide. --z-crt-mask/--z-services/--z-lang/
       --z-loading below are net-new names with no existing collision;
       they aren't wired to any rule yet and are additive only. */
    --z-canvas: 1;               /* WebGL canvas */
    --z-content: 10;             /* Main content sections */
    --z-scroll-indicator: 15;    /* Scroll hint arrow */
    --z-nav: 100;                /* Bottom navigation */
    --z-loading-screen: 1000;    /* Loading/BIOS screen */
    --z-start-screen: 1100;      /* Enter button screen (above loading) */
    --z-services-menu: 1200;     /* Services overlay */
    --z-cookie-banner: 1300;     /* Cookie consent */
    --z-crt-mask: 5;
    --z-services: 10000;
    --z-lang: 10100;
    --z-loading: 99999;
}

/* ==========================================
   RESET & BASE STYLES
   Normalize browser defaults
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Include padding/border in width calculations */
}

html {
    /* DISABLED - Testing scroll behavior */
    /* overflow: hidden !important;      NUCLEAR: Absolutely no scrolling until Enter */
    /* position: fixed !important;       NUCLEAR: Lock entire page position */
    /* top: 0 !important; */
    /* left: 0 !important; */
    /* width: 100% !important; */
    /* height: 100% !important; */
    /* touch-action: none !important;    NUCLEAR: Disable all touch scrolling */
    /* -webkit-user-select: none !important;  Safari support */
    /* user-select: none !important;     NUCLEAR: Prevent text selection */
    max-width: 100vw !important;      /* PREVENT: Horizontal overflow */

    /* Native scroll feel preserved — GSAP ScrollTrigger handles scroll-driven animations */
    /* scroll-behavior: smooth; — DISABLED: kills iOS momentum/rubber-band scrolling */
}

body {
    background: var(--bg-dark);
    color: white;
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;       /* Crisper text on Retina dark backgrounds */
    -moz-osx-font-smoothing: grayscale;
    /* DISABLED - Testing scroll behavior */
    /* overflow: hidden !important;            NUCLEAR: Absolutely no scrolling initially */
    /* position: fixed !important;             NUCLEAR: Lock body position */
    /* top: 0 !important; */
    /* left: 0 !important; */
    /* width: 100% !important; */
    /* height: 100% !important; */
    /* touch-action: none !important;          NUCLEAR: Disable all touch scrolling */
    /* -webkit-user-select: none !important;   Safari support */
    /* user-select: none !important;           NUCLEAR: Prevent text selection */
    min-height: 200vh;                      /* Ensure enough scroll space when enabled */
}

/* NUCLEAR UNLOCK: Complete scroll restoration after Enter button is clicked */
html.scrolling-enabled {
    overflow-x: hidden !important;          /* HIDE: No horizontal scrollbar */
    overflow-y: scroll !important;          /* HIDE: Scrollable but no visible scrollbar */
    position: relative !important;          /* UNLOCK: Normal positioning */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    touch-action: auto !important;          /* UNLOCK: Re-enable touch scrolling */
    -webkit-user-select: auto !important;   /* Safari support */
    user-select: auto !important;           /* UNLOCK: Re-enable text selection */
    /* Hide scrollbar for Webkit browsers */
    scrollbar-width: none;                   /* Firefox */
    -ms-overflow-style: none;                /* IE/Edge */
}

html.scrolling-enabled::-webkit-scrollbar {
    display: none;                          /* Chrome/Safari/Webkit */
}

body.scrolling-enabled {
    overflow-x: hidden !important;          /* Prevent horizontal scrolling only */
    overflow-y: visible !important;         /* FIXED: Allow vertical scrolling */
    position: relative !important;          /* UNLOCK: Normal positioning */
    top: auto !important;
    left: auto !important;
    width: 100% !important;                 /* FIXED: Keep full width coverage */
    min-width: 100vw !important;            /* FIXED: Ensure minimum viewport width */
    height: auto !important;
    touch-action: auto !important;          /* UNLOCK: Re-enable touch scrolling */
    -webkit-user-select: auto !important;   /* Safari support */
    user-select: auto !important;           /* UNLOCK: Re-enable text selection */
    /* Hide scrollbar for Webkit browsers */
    scrollbar-width: none;                   /* Firefox */
    -ms-overflow-style: none;                /* IE/Edge */
}

body.scrolling-enabled::-webkit-scrollbar {
    display: none;                          /* Chrome/Safari/Webkit */
}

/* ==========================================
   CRT MONITOR EFFECT
   Creates scanlines like old CRT displays
   ========================================== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create horizontal scanlines */
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15),      /* Dark line */
            rgba(0, 0, 0, 0.15) 1px,  /* 1px thick */
            transparent 1px,           /* Gap */
            transparent 2px            /* 2px total height */
        );
    pointer-events: none;  /* Click through this layer */
    z-index: 1000;        /* Above everything */
    opacity: 0.3;         /* Subtle effect */
}

/* CRT scanlines too subtle on mobile -- save full-viewport compositing */
@media (max-width: 768px) {
    body::before {
        display: none;
    }
}

/* ==========================================
   THREE.JS CANVAS CONTAINER
   ========================================== */
#three-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* iOS Safari 15.4+ dynamic viewport */
    z-index: 1;  /* Behind UI elements - content layer at z-index: 50 handles scroll */
    /* Canvas receives interactions; scroll works on content layer above */
    pointer-events: none; /* FIXED: Container doesn't intercept scroll - only canvas element does */
    /* NOTE: filter + will-change removed from default state — blur(0px) is NOT free,
       it forces a compositing layer + filter pipeline every frame, causing scroll hitches
       at the canvas/content boundary. Only apply filter in .gpu-parked state. */
}

/* GPU Parking: Blurred state when animation is paused */
#three-container.gpu-parked {
    filter: blur(8px);
    will-change: filter; /* Only hint when actually using filter */
    transition: filter 0.3s ease;
}

/* PERFORMANCE: Hide canvas when scrolled past hero - KEEPS IN MEMORY */
#three-container {
    opacity: 1;
    transition: opacity 0.45s ease-out, visibility 0s linear 0s;
}
#three-container.scrolled-away {
    opacity: 0 !important;
    visibility: hidden !important;    /* Hide visually but stay in DOM */
    pointer-events: none !important;  /* Remove from event flow completely */
    z-index: -1 !important;          /* Move behind all content */
    transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
    /* NOTE: Using visibility instead of display:none keeps WebGL context + Three.js scene in memory */
    /* This enables instant restoration when scrolling back to hero */
}

/* CRITICAL: Also disable canvas element pointer events when scrolled away */
#three-container.scrolled-away canvas {
    pointer-events: none !important;  /* Prevent canvas from intercepting scroll events */
}

/* PERFORMANCE: Remove fixed overlays from compositing tree when canvas is hidden.
   These elements are invisible during Zone 2 scroll anyway (opacity=0, display:none, or removed).
   Removing them saves 2-3 compositor layers during content scroll. */
body.canvas-hidden .brand-text,
body.canvas-hidden .crt-mask,
body.canvas-hidden .scroll-indicator {
    display: none !important;
}

/* Mobile portrait: Use standard positioning to prevent touch conflicts */
@media (orientation: portrait) and (max-width: 768px) {
    #three-container {
        top: 0; /* Standard positioning - no invisible touch-blocking areas */
        height: 100vh; /* Standard height */
        height: 100dvh; /* iOS Safari 15.4+ dynamic viewport */
    }
}

/* SIMPLIFIED: CSS-first approach for reliable mobile scrolling */
#three-container {
    /* Default: Allow natural browser scrolling and zoom */
    touch-action: auto;
}

#three-container canvas {
    /* Canvas: Enable interactions for fluid simulation */
    /* Scroll works because content layer (z-index: 50) is above canvas (z-index: 1) */
    pointer-events: auto;
    /* Allow natural scrolling - JavaScript selectively prevents when needed */
    touch-action: auto;
    display: block;
}

/* ==========================================
   PROXY-FLUID: instant animated fluid backdrop shown the moment the user
   clicks Enter, while the real WebGL scene finishes initializing.
   Sits just above the WebGL canvas (z-index 1), below content (z-index 50)
   and below the start screen (z-index 1100) until it is dismissed.
   See src/performance/proxy-fluid.js.
   ========================================== */
#proxy-fluid-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* iOS Safari 15.4+ dynamic viewport */
    z-index: 2; /* above WebGL canvas, below content */
    pointer-events: none; /* purely a backdrop — never intercepts input */
    display: block;
    background: #111827; /* matches scene.background until first paint */
    opacity: 1;
    transition: opacity 0.8s ease;
}

#proxy-fluid-canvas.fade-out {
    opacity: 0;
}

/* Only disable scroll when definitively interacting (applied by JavaScript) */
.canvas-actively-interacting {
    touch-action: none !important; /* Only during confirmed fluid interactions */
}

.canvas-actively-interacting canvas {
    touch-action: none !important; /* Ensure canvas also blocks scroll during interaction */
}

/* Scroll lock for Enter screen (preserved) */
.scroll-locked,
.scroll-locked #three-container,
.scroll-locked #three-container canvas {
    touch-action: none !important; /* Nuclear prevention when scroll locked */
}

/* Desktop optimization */
@media (hover: hover) and (pointer: fine) {
    #three-container canvas {
        touch-action: auto; /* Desktop gets full browser control */
    }
}

/* ==========================================
   LOADING SCREEN
   Shown while assets are loading
   ========================================== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    background-image: url('/fluid-poster.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* FORCE: Always visible and at top, unaffected by scroll */
    transform: translateZ(0);  /* Hardware acceleration */
}

/* Loading text with pulsing animation */
.loading-text {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-transform: uppercase;     /* ALL CAPS for retro feel */
    letter-spacing: 0.2em;         /* S P A C E D  O U T */
    color: var(--primary-emerald);
    text-shadow: var(--text-glow); /* Glowing text */
    animation: pulse 1.5s ease-in-out infinite;
}

/* Loading progress bar container */
.loading-bar {
    width: 300px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);  /* Faint background */
    position: relative;
    overflow: hidden;
}

/* Animated progress bar with gradient */
.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--primary-emerald), 
        var(--primary-forest), 
        var(--primary-yellow)
    );
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px currentColor;  /* Glow effect */
}

/* ==========================================
   START EXPERIENCE SCREEN
   Entry point with "Enter" button
   ========================================== */
#start-experience {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.9);  /* Dark overlay */
    display: none;  /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);  /* Blur background */
    /* FORCE: Always at top, unaffected by any scroll position */
    transform: translateZ(0);  /* Hardware acceleration */
    /* INTERACTION: Only button should be clickable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  /* Prevent text selection */
}

/* Main enter button styling */
#start-button {
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    background: transparent;
    color: var(--primary-emerald);
    border: 2px solid var(--primary-emerald);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    text-shadow: var(--text-glow);
    /* Multiple shadows for depth */
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.5),      /* Outer glow */
        inset 0 0 20px rgba(0, 255, 255, 0.1); /* Inner glow */
    /* NUCLEAR: Allow all interactions on button */
    touch-action: manipulation !important;
    -webkit-user-select: none !important;  /* Safari support */
    user-select: none !important;
    pointer-events: auto !important;
}

/* Button hover state - inverted colors */
#start-button:hover {
    color: var(--bg-dark);              /* Dark text */
    background: var(--primary-emerald);     /* Cyan background */
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.8),       /* Stronger glow */
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);  /* Slight grow */
}

/* Mobile-friendly active and focus states for immediate feedback */
#start-button:active,
#start-button:focus {
    color: var(--bg-dark);              /* Dark text */
    background: var(--primary-emerald);     /* Cyan background */
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.8),       /* Stronger glow */
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);  /* Slight grow */
    outline: none;  /* Remove default focus outline */
}

/* Animated line that sweeps across button */
#start-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -100%;  /* Start off-screen */
    width: 100%;
    height: 2px;
    background: white;
    transform: translateY(-50%);
    transition: left 0.5s ease;
}

/* Move line across on hover */
#start-button:hover::before {
    left: 100%;  /* End off-screen */
}

/* Hint text below button */
.start-hint {
    margin-top: 1rem;
    font-size: 0.875rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: blink 2s ease-in-out infinite;  /* Blinking effect */
}

/* ==========================================
   MOBILE ENTER BUTTON OPTIMIZATION
   Ensures button is visible and accessible on all mobile devices
   ========================================== */
@media (max-width: 768px) {
    #start-experience {
        display: flex;
        padding: 2rem 1rem;
        /* Ensure proper stacking */
        z-index: var(--z-loading-screen);
        /* Force hardware acceleration */
        transform: translateZ(0);
        /* Ensure full viewport coverage */
        min-height: 100vh;
        min-height: 100dvh; /* iOS Safari 15.4+ dynamic viewport */
        min-width: 100vw;
    }
    
    #start-button {
        padding: 1.5rem 2.5rem;
        font-size: 1.2rem;
        min-width: 200px;
        min-height: 60px;
        /* Mobile-specific touch optimization */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 255, 255, 0.3);
        /* Prevent text selection issues */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* Ensure button is above everything */
        position: relative;
        z-index: var(--z-start-screen);
    }
    
    .start-hint {
        font-size: 1rem;
        margin-top: 1.5rem;
        /* Ensure hint is visible */
        opacity: 0.8;
    }
}

/* Small mobile devices (phones) */
@media (max-width: 480px) {
    #start-experience {
        padding: 1.5rem 0.5rem;
    }
    
    #start-button {
        padding: 1.2rem 2rem;
        font-size: 1.1rem;
        min-width: 180px;
        min-height: 55px;
        /* Larger touch target for small screens */
        border-width: 3px;
    }
    
    .start-hint {
        font-size: 0.9rem;
        margin-top: 1.2rem;
    }
}

/* Portrait orientation specific fixes */
@media (orientation: portrait) and (max-width: 768px) {
    #start-experience {
        /* Extra padding for portrait orientation */
        padding: 3rem 1rem;
    }
    
    #start-button {
        /* Slightly larger for portrait viewing */
        padding: 1.8rem 3rem;
        font-size: 1.3rem;
    }
}

/* ==========================================
   BRAND TEXT (Vamos Audio Post)
   Appears after logo animation
   ========================================== */
.brand-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(2rem, 5vw, 4rem);  /* Responsive sizing */
    color: white;
    opacity: 0;  /* Hidden initially */
    z-index: 15;  /* Lower than content sections but above canvas */
    pointer-events: none;  /* Can't be clicked */
    font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;  /* Thin font */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Multiple text shadows for neon effect */
    text-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 30px rgba(0, 255, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.2);
    mix-blend-mode: screen;  /* Blend with background */
}

.renderer-shortcuts {
    color: rgba(0, 255, 255, 0.7);
    font-size: 0.6rem;
    line-height: 1.2;
}

/* ==========================================
   ANIMATIONS
   Keyframe animations for various effects
   ========================================== */

/* Gentle pulsing for loading text */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Blinking for hint text */
@keyframes blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* CRT flicker effect (subtle) */
@keyframes flicker {
    0% { opacity: 0.97; }
    5% { opacity: 1; }
    10% { opacity: 0.98; }
    15% { opacity: 1; }
    20% { opacity: 0.96; }
    100% { opacity: 0.97; }
}

/* Apply flicker class if needed */
.crt-flicker {
    animation: var(--crt-flicker);
}

/* ==========================================
   SCROLL INDICATOR
   Shows user they can scroll
   ========================================== */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--primary-emerald);
    opacity: 0;
    z-index: 100;
    pointer-events: none;
}

.scroll-arrow {
    font-size: 2rem;
    animation: bounce 2s infinite;
    margin-bottom: 0.5rem;
}

.scroll-text {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: var(--text-glow);
}

/* ==========================================
   CONTENT SECTION - DESKTOP FIRST DESIGN
   Main content area for GSAP ScrollTrigger
   ========================================== */

/* DESKTOP LAYOUT (Default) */
.content {
    position: relative;
    z-index: 50;
    pointer-events: auto;
    margin-top: 100vh;
    margin-top: 100svh; /* iOS Safari: use small viewport for content start position */
    background: var(--bg-dark);
    min-height: auto;
    padding-bottom: 4rem;
}

/* Continuous flow content containers */
.hero-content {
    /* No min-height — content sizes naturally. The 100vh gap is already
       provided by .content { margin-top: 100vh } above this section. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    margin: 0;
    padding: 4rem 2rem;
    text-align: center;
}

.video-content,
.timeline-section-content,
.bio-content {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--bg-dark);
    position: relative;
    margin: 0;
    padding: 4rem 2rem;
    text-align: center;
    contain: layout style;  /* Isolate reflow: mutations in one section won't trigger layout across page */
}

/* Inner content wrapper for max-width and centering */
.content-wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.hero-content h2,
.video-content h2,
.timeline-section-content h2,
.bio-content h2 {
    color: var(--primary-emerald);
    text-shadow: var(--text-glow);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    pointer-events: none;
    -webkit-user-select: none;  /* Safari support */
    user-select: none;
    font-size: clamp(2rem, 4vw, 3rem);
}

/* HERO CONTENT STYLES */
.hero-content {
    pointer-events: auto;
    background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(10, 15, 10, 0.95) 100%);
    isolation: isolate;
    position: relative;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(82, 214, 141, 0.15), rgba(39, 174, 96, 0.1));
    border: 2px solid var(--primary-emerald);
    border-radius: 50px;
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(82, 214, 141, 0.3);
    pointer-events: auto;
}

.badge-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.badge-laurel {
    width: 1.6rem;
    height: 2rem;
    color: #FFD700;
    flex-shrink: 0;
}

.badge-laurel-right {
    transform: scaleX(-1);
}

.badge-text {
    color: var(--primary-emerald);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-shadow: var(--text-glow);
}

.hero-title {
    color: var(--primary-emerald);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(82, 214, 141, 0.4);
    letter-spacing: -0.02em;
}

.hero-tagline {
    color: #7FFFA0;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-style: italic;
    line-height: 1.6;
    margin: 1rem auto 2rem auto;
    max-width: 600px;
    text-shadow: 0 0 10px rgba(127, 255, 160, 0.2);
    letter-spacing: 0.03em;
}

.hero-subtitle {
    color: var(--sage-text);
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   CLIENT LOGOS STRIP (Trusted-by via logo.dev)
   Pure CSS @keyframes marquee — bulletproof.
   JS (initializeClientLogosSwiper) duplicates slides for seamless loop.
   ========================================== */
.client-logos-strip {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 1rem;
    padding: 1.5rem 1rem;
    border-top: 1px solid rgba(82, 214, 141, 0.15);
    border-bottom: 1px solid rgba(82, 214, 141, 0.15);
}

/* Inner mask applied to the scroll container so nav buttons sit
   OUTSIDE the fade area and stay fully visible. */
.client-logos-strip .swiper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* CSS-mode marquee track — replaces Swiper's wrapper behavior */
.client-logos-css-mode .swiper-wrapper {
    display: flex;
    width: max-content;          /* Hug the duplicated content */
    align-items: center;
    transform: translateX(0);    /* Initial position */
    animation: client-logos-scroll 60s linear infinite;
}

.client-logos-css-mode .swiper-wrapper:hover {
    animation-play-state: paused;
}

@keyframes client-logos-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }  /* JS doubles slides → -50% lands on the first copy of the second set */
}

.client-logos-css-mode .swiper-slide {
    flex: 0 0 auto;              /* Don't shrink, don't grow */
}

/* Prev/next arrow buttons — sit just outside the fade, vertically centered. */
.client-logos-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(82, 214, 141, 0.3);
    border-radius: 50%;
    background: rgba(10, 15, 10, 0.6);
    color: var(--primary-emerald);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    /* Reset default button padding so the chevron centers cleanly */
    padding: 0;
}

.client-logos-nav:hover {
    background: rgba(82, 214, 141, 0.15);
    border-color: rgba(82, 214, 141, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.client-logos-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.client-logos-nav-prev { left: 4px; }
.client-logos-nav-next { right: 4px; }

/* Required logo.dev attribution — sits directly below the strip. */
.client-logos-attribution {
    max-width: 1200px;
    margin: 0.25rem auto 1.5rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

.client-logos-attribution a,
.client-logos-attribution a:link,
.client-logos-attribution a:visited {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-bottom: 1px dotted rgba(82, 214, 141, 0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.client-logos-attribution a:hover,
.client-logos-attribution a:focus {
    color: var(--primary-emerald);
    border-bottom-color: var(--primary-emerald);
}

@media (max-width: 768px) {
    .client-logos-nav {
        width: 26px;
        height: 26px;
        font-size: 1rem;
    }
}

.swiper#client-logos-swiper {
    width: 100%;
    overflow: hidden;
}

.swiper#client-logos-swiper .swiper-wrapper {
    /* Linear easing for the marquee — autoplay handles continuous motion */
    transition-timing-function: linear !important;
    align-items: center;
}

.client-logo-slide {
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
    height: 60px;
}

.client-logo-slide img {
    max-height: 50px;
    max-width: 140px;
    width: auto;
    height: auto;
    /* Full color, brightness boosted so dark-logo elements register on
       the dark forest background. Subtle drop-shadow glow gives logos
       definition without competing with the brand color. */
    filter: brightness(1.15) contrast(1.05) drop-shadow(0 0 6px rgba(82, 214, 141, 0.15));
    opacity: 0.92;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.client-logo-slide:hover img {
    filter: brightness(1.25) contrast(1.1) drop-shadow(0 0 10px rgba(82, 214, 141, 0.35));
    opacity: 1;
    transform: scale(1.08);
}

/* Dark / near-black logos that disappear on the forest background.
   Invert flips the black wordmark to white; brightness/contrast then
   restore legibility without blowing out the glow. */
.client-logo-slide img[data-domain="ubisoft.com"] {
    filter: invert(1) brightness(1.05) contrast(1.05) drop-shadow(0 0 6px rgba(82, 214, 141, 0.15));
}
.client-logo-slide:hover img[data-domain="ubisoft.com"] {
    filter: invert(1) brightness(1.15) contrast(1.1) drop-shadow(0 0 10px rgba(82, 214, 141, 0.35));
}

/* Mobile tightening */
@media (max-width: 768px) {
    .client-logos-strip {
        margin: 1.5rem auto 0.5rem;
        padding: 1rem 0.5rem;
    }
    .client-logo-slide {
        padding: 0 1.25rem;
        height: 48px;
    }
    .client-logo-slide img {
        max-height: 38px;
        max-width: 100px;
    }
}

.credits-showcase {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid rgba(82, 214, 141, 0.2);
    border-bottom: 1px solid rgba(82, 214, 141, 0.2);
    align-self: center;  /* FIXED: Don't stretch in flex parent */
    width: 100%;  /* FIXED: Full width for proper grid layout */
    max-width: 900px;  /* FIXED: Constrain to match grid max-width */
}

.credits-title {
    color: var(--primary-emerald);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    text-shadow: var(--text-glow);
}

.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.credit-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(82, 214, 141, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: auto;
    /* Credit Item Isolation: Ensure clean event handling in own layer */
    position: relative;  /* Required for z-index */
    z-index: 2;         /* Above hero content */
    isolation: isolate;  /* Isolate from canvas layer for cleaner event flow */
}

.credit-item:hover {
    border-color: var(--primary-emerald);
    box-shadow: 0 0 15px rgba(82, 214, 141, 0.3);
    transform: translateY(-2px);
}

.credit-title {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.credit-detail {
    color: var(--sage-text);
    font-size: 0.9rem;
    line-height: 1.4;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--primary-emerald), var(--primary-forest));
    color: var(--bg-dark);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(82, 214, 141, 0.4);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    pointer-events: auto;
    border: 2px solid var(--primary-emerald);
    /* CTA Button Isolation: Same treatment as credit items */
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.cta-button:hover {
    background: linear-gradient(135deg, var(--primary-forest), var(--primary-emerald));
    box-shadow: 0 0 30px rgba(82, 214, 141, 0.6);
    transform: translateY(-2px);
}

.cta-subtext {
    color: var(--sage-text);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.section-divider-wave {
    height: 100px;
    background: linear-gradient(180deg, var(--bg-dark) 0%, transparent 100%);
    position: relative;
    margin: 2rem 0;
    pointer-events: none; /* FIX: Don't intercept scroll events - pass through to body */
}

.section-divider-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-emerald) 20%,
        var(--primary-emerald) 80%,
        transparent 100%
    );
    box-shadow: 0 0 10px rgba(82, 214, 141, 0.5);
}

/* MOBILE LAYOUT OVERRIDES */
@media (max-width: 768px) {
    .content {
        margin-top: 100vh; /* Keep same start position */
        margin-top: 100svh; /* iOS Safari: use small viewport for content start position */
        min-height: 300vh; /* Ensure enough scroll distance for one-swipe */
        padding-bottom: 1rem; /* REDUCED: Minimal mobile bottom padding */
    }

    .hero-content,
    .video-content,
    .timeline-section-content,
    .bio-content {
        min-height: 60vh;
        height: auto;
        padding: 2rem 0;
        display: block;
    }

    .section-divider-wave {
        height: 40px;
        margin: 0.5rem 0;
    }

    .hero-content h2,
    .video-content h2,
    .timeline-section-content h2,
    .bio-content h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: 1.5rem;
        letter-spacing: 0.1em;
    }
}

/* Mobile portrait: Standard content positioning for natural scrolling */
@media (orientation: portrait) and (max-width: 768px) {
    .content {
        margin-top: 100vh; /* Standard positioning for smooth scroll behavior */
        margin-top: 100svh; /* iOS Safari: use small viewport for content start position */
    }
}

/* SMALL MOBILE SCREENS */
@media (max-width: 480px) {
    .hero-content,
    .video-content,
    .timeline-section-content,
    .bio-content {
        padding: 1.5rem 0;
        max-width: 98vw;
    }

    .hero-content h2,
    .video-content h2,
    .timeline-section-content h2,
    .bio-content h2 {
        font-size: clamp(1.25rem, 8vw, 2rem);
        margin-bottom: 1rem;
    }
}

/* Make all text content non-interactive to avoid blocking fluid touches */
.hero-content p,
.video-content p,
.timeline-section-content p,
.bio-content p,
.bio-text {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* EXCEPTION: Always allow navigation buttons to be clickable */
.bottom-nav,
.bottom-nav *,
.nav-button,
.nav-button * {
    pointer-events: auto !important;
    -webkit-user-select: auto !important;  /* Safari support */
    user-select: auto !important;
}

/* ==========================================
   VIDEO CONTAINER - DESKTOP/MOBILE ARCHITECTURE
   ========================================== */

/* VIDEO WRAPPER - BYPASSES SECTION-CONTENT WIDTH CONSTRAINTS */
.video-container-wrapper {
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    padding: 0 2rem 8rem 2rem; /* Added 8rem bottom padding for spacing after video (doubled) */
    contain: layout style;  /* Isolate reflow from rest of page */

    /* content-visibility: auto removed — caused layout shift + scroll jank when flicking past */
}

/* DESKTOP VIDEO LAYOUT (Default) */
.video-container {
    margin: 0; /* Reset margin since wrapper handles spacing */
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    max-width: 70vw; /* Much larger default size for better desktop viewing */
    width: 100%;
    position: relative; /* Ensure overlay positioning works */
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: url('/media/showreel-poster.jpg') center/cover no-repeat;
}

.video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* MOBILE VIDEO LAYOUT OVERRIDES */
@media (max-width: 768px) {
    .video-container-wrapper {
        margin: 1.5rem 0;
        padding: 0 1rem 6rem 1rem; /* Added 6rem bottom padding for spacing after video on mobile (doubled) */
    }
    
    .video-container {
        max-width: 95vw;
        margin: 0; /* Reset since wrapper handles spacing */
        border-radius: 8px;
        border-width: 1px;
    }
    
    .video-responsive {
        padding-bottom: 56.25%; /* Maintain aspect ratio */
    }

    /* Ensure video has proper spacing */
    .video-content {
        padding: 3rem 0; /* Extra padding for video on mobile */
    }
}

/* SMALL MOBILE SCREENS */
@media (max-width: 480px) {
    .video-container-wrapper {
        margin: 1rem 0;
        padding: 0 0.5rem 5rem 0.5rem; /* Added 5rem bottom padding for spacing after video on small screens (doubled) */
    }
    
    .video-container {
        max-width: 98vw;
        margin: 0; /* Reset since wrapper handles spacing */
        border-radius: 6px;
        border-width: 1px;
    }

    .video-content {
        padding: 2rem 0; /* Adjusted padding for small screens */
    }
}

/* Enhanced Video Responsiveness - Ultra-wide and Portrait Support */

/* Large desktop screens */
@media (min-width: 1200px) {
    .video-container {
        max-width: 85vw; /* Much larger size for better desktop viewing */
    }
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
    .video-container {
        max-width: 75vw; /* Larger size for ultra-wide screens */
    }
}

/* Portrait orientation optimization */
@media (orientation: portrait) and (max-width: 768px) {
    .video-container {
        max-width: 92vw; /* Slightly smaller for portrait */
    }
    
    .video-responsive {
        padding-bottom: 60%; /* Adjust aspect ratio for portrait */
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .video-container {
        max-width: 99vw;
        margin: 0.75rem auto;
    }
}

/* Touch-friendly and performance enhancements */
.video-responsive video {
    touch-action: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Suppress browser-native video UI (play button overlay, controls flash) */
.video-responsive video::-webkit-media-controls-overlay-play-button,
.video-responsive video::-webkit-media-controls-start-playback-button,
.video-responsive video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}
.video-responsive video::-moz-media-controls {
    display: none !important;
}

/* Subtle focus indication for accessibility */
.video-responsive:focus-within {
    border-color: var(--primary-emerald);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Permanently promote video compositor layer (iOS scroll perf).
   Eliminates layer creation/teardown during scroll — small constant memory
   cost beats per-scroll compositor hitch. Overrides ios-safari-optimizations.css
   will-change: auto !important rule. */
.video-responsive video {
    will-change: transform !important;
}

/* ==========================================
   BIO TEXT - DESKTOP/MOBILE ARCHITECTURE
   ========================================== */

/* DESKTOP BIO LAYOUT (Default) */
.bio-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    margin: 2rem auto;
    max-width: 700px;
    text-align: left;
}

.bio-header {
    color: var(--primary-emerald);
    text-shadow: var(--text-glow);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.bio-paragraph {
    margin-bottom: 1.8rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-style: inherit;
}

.bio-paragraph:last-child {
    margin-bottom: 0;
    padding-bottom: 25px; /* Extra space after "Gemini Awards" */
}

.sub-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* MOBILE BIO LAYOUT OVERRIDES */
@media (max-width: 768px) {
    .bio-text {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 95vw;
        margin: 1.5rem auto;
        padding: 0 1rem;
    }
    
    .bio-header {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
        letter-spacing: 0.05em;
    }
    
    .bio-paragraph {
        margin-bottom: 1.5rem;
        text-align: left;
    }
    
    .sub-text {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    /* Bio specific spacing */
    .bio-content {
        min-height: auto;
        height: auto;
        padding: 4rem 0 8rem 0;
    }
}

/* DESKTOP/TABLET BIO - Compact Layout */
@media (min-width: 769px) {
    .bio-content {
        min-height: auto;
        height: auto;
        padding: 4rem 0 10rem 0;
    }
}

/* SMALL MOBILE BIO LAYOUT */
@media (max-width: 480px) {
    .bio-text {
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 98vw;
        padding: 0 0.75rem;
        margin: 1rem auto;
    }
    
    .bio-header {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .bio-paragraph {
        margin-bottom: 1.25rem;
    }
    
    .bio-content {
        min-height: auto;
        height: auto;
        padding: 3rem 0 7rem 0;
    }
}

.sub-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.console-text {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 0.75rem !important;
    color: rgba(0, 255, 255, 0.8) !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

/* ==========================================
   CRT PIXELATED MASK EFFECT
   Creates TV-like masking during scroll
   ========================================== */
.crt-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    z-index: 5;  /* Above content but below loading screens */
    pointer-events: none;
    opacity: 0;
    will-change: opacity;  /* GPU layer — opacity changes are compositor-only, no repaint */
    contain: layout style;  /* Isolate from layout/style recalcs during scroll */

    /* Pixelated edge effect */
    mask: 
        radial-gradient(circle at center, transparent 40%, black 50%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0,0,0,0.1) 2px,
            rgba(0,0,0,0.1) 4px
        );
    
    /* CRT-style distortion */
    filter: 
        contrast(1.2) 
        brightness(0.8) 
        blur(0.5px);
    
    /* Animated scanlines */
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 255, 0.03) 0px,
            rgba(0, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 3px
        );
    
    animation: crtFlicker 0.2s infinite alternate;
    animation-play-state: paused;  /* Paused when --mask-opacity is 0 (default) */
}

@keyframes crtFlicker {
    0% { opacity: var(--mask-opacity, 0); filter: contrast(1.2) brightness(0.8) blur(0.5px); }
    100% { opacity: var(--mask-opacity, 0); filter: contrast(1.3) brightness(0.9) blur(0.3px); }
}

/* Mobile: disable CRT mask entirely — filters + mask + animation = scroll hitch on iOS */
@media (max-width: 768px), (pointer: coarse) {
    .crt-mask {
        display: none !important;
    }
}

/* ==========================================
   ANIMATIONS
   Keyframe animations for various effects
   ========================================== */

/* Bounce animation for scroll indicator */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   Adjustments for mobile devices
   ========================================== */
@media (max-width: 768px) {
    /* Smaller button on mobile */
    #start-button {
        padding: 0.75rem 2rem;
        font-size: 1.25rem;
    }
    
    /* Narrower loading bar */
    .loading-bar {
        width: 200px;
    }
    
}

/* ==========================================
   BOTTOM NAVIGATION LINKS
   Fixed footer with smart reveal - shows when scrolling near bottom
   ========================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 25px 1.5rem; /* Extra padding: 25px vertical, 24px horizontal */
    padding-bottom: max(25px, env(safe-area-inset-bottom)); /* Home indicator clearance on notched iPhones */
    background: linear-gradient(to top, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0.85) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(82, 214, 141, 0.2);
    z-index: var(--z-start-screen); /* ABOVE: Everything including fluid canvas */
    pointer-events: none; /* Hidden by default - no interaction */
    opacity: 0; /* Hidden by default */
    transform: translateY(100%); /* Slide down out of view */
    transition: opacity 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Show when user scrolls near bottom */
.bottom-nav.visible {
    opacity: 1;
    pointer-events: auto; /* Enable interaction when visible */
    transform: translateY(0); /* Slide up into view */
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--primary-emerald);
    border-radius: 6px;
    color: var(--primary-emerald);
    text-decoration: none;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    min-width: 80px;
    pointer-events: auto !important; /* FORCE: Ensure links are clickable */
    z-index: 1001; /* ABOVE: Ensure buttons are above other elements */
    position: relative; /* ENSURE: Proper stacking context */
}

.nav-button:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--primary-forest);
    color: var(--primary-forest);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
    transform: translateY(-2px);
}

.nav-button:active {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.nav-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(82, 214, 141, 0.5);
    border-color: rgba(82, 214, 141, 0.3);
    box-shadow: none;
}

.button-text {
    position: relative;
    z-index: 1;
}

/* Mobile optimization for bottom nav */
@media (max-width: 768px) {
    .bottom-nav {
        padding: 0.75rem 0.5rem;
        gap: 8px;
    }

    .nav-button {
        padding: 8px 14px;
        font-size: 0.75rem;
        min-width: 60px;
        border-radius: 4px;
    }
}

/* Very small screens - simpler layout */
@media (max-width: 480px) {
    .bottom-nav {
        flex-direction: row; /* Keep horizontal on small screens */
        flex-wrap: wrap; /* Allow wrapping if needed */
        gap: 6px;
        padding: 0.5rem;
        justify-content: center;
    }
    
    .nav-button {
        min-width: 55px;
        padding: 6px 10px;
        font-size: 0.7rem;
    }
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
   Disable animations for users who prefer reduced motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations that could cause discomfort */
    .loading-text,
    .start-hint,
    .scroll-arrow,
    .brand-text {
        animation: none !important;
    }

    /* Remove pulsing/blinking effects */
    .pulse,
    .blink {
        animation: none !important;
    }
}

/* ==========================================
   EASTER EGG: CREDITS OVERLAY
   Hidden credits shown when user types "credits"
   ========================================== */
.credits-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* iOS Safari 15.4+ dynamic viewport */
    background: rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: var(--z-start-screen);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom); /* Home indicator clearance */
    cursor: pointer;
}

.credits-content {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 60, 0.9));
    border: 2px solid #52D68D;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
    color: #fff;
}

.credits-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.credits-header h2 {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 2.5rem;
    color: #52D68D;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    letter-spacing: 0.2em;
}

.credits-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.credits-section {
    margin-bottom: 2rem;
}

.credit-category {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    color: #52D68D;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.credit-line {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    line-height: 1.6;
}

.credits-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 255, 255, 0.3);
}

.credits-hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.credits-year {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Scrollbar styling for credits content */
.credits-content::-webkit-scrollbar {
    width: 8px;
}

.credits-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.credits-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.5);
    border-radius: 4px;
}

.credits-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.7);
}

/* Mobile responsive credits */
@media (max-width: 768px) {
    .credits-content {
        max-width: 90vw;
        padding: 2rem 1.5rem;
    }

    .credits-header h2 {
        font-size: 2rem;
    }

    .credit-line {
        font-size: 0.85rem;
    }
}

/* Fade-in animation fallback (if GSAP not available) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================
   ACCESSIBILITY
   Skip links and screen reader support
   ========================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-emerald);
    color: var(--bg-dark);
    padding: 8px 16px;
    text-decoration: none;
    font-weight: bold;
    z-index: var(--z-start-screen);
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--primary-forest);
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================
   LANGUAGE SWITCHER
   Bilingual toggle EN/FR
   Scroll-based auto-hide: visible at top, fades up when scrolling
   ========================================== */
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10100; /* Above everything including start button (10000) */
    display: flex;
    gap: 0;
    background: rgba(10, 15, 10, 0.8);
    border: 1px solid var(--primary-emerald);
    border-radius: 4px;
    padding: 2px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(82, 214, 141, 0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Default state: hidden (slides up and fades out) */
    transform: translateY(-60px);
    opacity: 0;
    pointer-events: none;
}

/* Visible state: shown at top of page */
.language-switcher.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.lang-buttons {
    display: flex;
    gap: 0;
}

.lang-button {
    background: transparent;
    color: var(--sage-text);
    border: none;
    padding: 8px 16px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
    text-transform: uppercase;
    position: relative;
    outline: none;
}

.lang-button:hover {
    color: var(--primary-emerald);
    text-shadow: 0 0 10px rgba(82, 214, 141, 0.5);
}

.lang-button.active {
    color: var(--primary-emerald);
    text-shadow: var(--text-glow);
    background: rgba(82, 214, 141, 0.1);
}

.lang-button.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary-emerald);
    box-shadow: 0 0 5px var(--primary-emerald);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .language-switcher {
        top: 15px;
        right: 15px;
        padding: 1px;
    }

    .lang-button {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
}

/* Simple anchor link version (no-JS bilingual) */
.lang-link {
    display: block;
    background: transparent;
    color: var(--sage-text);
    text-decoration: none;
    padding: 8px 16px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-transform: uppercase;
}

.lang-link:hover {
    color: var(--primary-emerald);
    text-shadow: 0 0 10px rgba(82, 214, 141, 0.5);
}

@media (max-width: 768px) {
    .lang-link {
        padding: 6px 12px;
        font-size: 0.7rem;
    }
}

/* ==========================================
   VIEW TRANSITIONS (Language Switcher)
   Smooth cross-fade between EN/FR pages
   ========================================== */
@view-transition {
    navigation: auto;
}

/* Customize the transition animation */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth fade for the old page */
::view-transition-old(root) {
    animation-name: fade-out;
}

/* Smooth fade for the new page */
::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fallback: Page load fade-in for browsers without View Transitions */
@supports not (view-transition-name: none) {
    body {
        animation: fade-in 0.3s ease-in;
    }
}

/* ========================================
   HOLOGRAPHIC SERVICES MENU
   ======================================== */

.services-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 5, 0.95);
    backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

.services-menu {
    position: relative;
    max-width: 900px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(10, 20, 15, 0.95), rgba(5, 15, 10, 0.98));
    border: 2px solid #52D68D;
    border-radius: 12px;
    padding: 2rem;
    box-shadow:
        0 0 30px rgba(82, 214, 141, 0.3),
        inset 0 0 50px rgba(82, 214, 141, 0.05);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.services-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 2px solid #52D68D;
    color: #52D68D;
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.services-close:hover {
    background: #52D68D;
    color: #0a0f0a;
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(82, 214, 141, 0.6);
}

.services-title {
    font-size: 2rem;
    color: #52D68D;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(82, 214, 141, 0.5);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.service-card {
    background: linear-gradient(135deg, rgba(82, 214, 141, 0.05), rgba(82, 214, 141, 0.1));
    border: 1px solid #52D68D;
    border-radius: 8px;
    padding: 1.5rem;
    text-decoration: none;
    color: white;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(82, 214, 141, 0.2), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    background: linear-gradient(135deg, rgba(82, 214, 141, 0.15), rgba(82, 214, 141, 0.2));
    border-color: #7FFFA0;
    box-shadow: 0 0 20px rgba(82, 214, 141, 0.4);
    transform: translateY(-4px);
}

.service-card h3 {
    font-size: 1.3rem;
    color: #52D68D;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-card p {
    font-size: 0.95rem;
    color: #B0D9C0;
    line-height: 1.5;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .services-menu {
        width: 95%;
        padding: 1.5rem;
    }

    .services-title {
        font-size: 1.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-card {
        padding: 1.2rem;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    .service-card p {
        font-size: 0.9rem;
    }
}

/* ========================================
   CAREER TIMELINE SECTION
   ======================================== */

.timeline-section-content {
    position: relative;
    padding: 2rem 0;
    background: transparent;
}

/* ==========================================
   TIMELINE TRIGGER (compact page section)
   Replaces the scroll-trap vertical Swiper with a single CTA button.
   Tapping opens .timeline-modal fullscreen.
   ========================================== */
.timeline-blurb {
    max-width: 640px;
    margin: 1rem auto 1.5rem;
    color: var(--sage-text);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}

.timeline-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 auto;
    padding: 0.85rem 1.75rem;
    background: rgba(82, 214, 141, 0.08);
    border: 1px solid rgba(82, 214, 141, 0.45);
    border-radius: 999px;
    color: var(--primary-emerald);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.timeline-modal-trigger:hover,
.timeline-modal-trigger:focus-visible {
    background: rgba(82, 214, 141, 0.18);
    border-color: rgba(82, 214, 141, 0.85);
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(82, 214, 141, 0.25);
    outline: none;
}

.timeline-modal-trigger:active {
    transform: translateY(0);
}

/* Center the heading + blurb + button block */
.timeline-section-content {
    text-align: center;
}

/* ==========================================
   TIMELINE MODAL (fullscreen overlay)
   Hidden by default; .timeline-modal-open shows.
   Inner list uses CSS scroll-snap for "wheel selector" feel.
   ========================================== */
.timeline-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;                    /* above cookie banner (1300), below debug overlays */
    background: rgba(10, 15, 10, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Hidden default state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    display: flex;
    flex-direction: column;
}

.timeline-modal.timeline-modal-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .timeline-modal,
    .timeline-modal.timeline-modal-open {
        transition: none;
    }
}

.timeline-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(82, 214, 141, 0.2);
    background: rgba(10, 15, 10, 0.6);
}

.timeline-modal-header h2 {
    margin: 0;
    color: var(--primary-emerald);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: var(--text-glow);
}

.timeline-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(82, 214, 141, 0.4);
    border-radius: 50%;
    background: rgba(10, 15, 10, 0.6);
    color: var(--primary-emerald);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.timeline-modal-close:hover,
.timeline-modal-close:focus-visible {
    background: rgba(82, 214, 141, 0.18);
    border-color: rgba(82, 214, 141, 0.85);
    transform: scale(1.05);
    outline: none;
}

.timeline-modal-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* Scroll-snap: each item snaps to viewport — the "wheel selector" feel */
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    /* Avoid the touch-action issue: this is an explicit scroll container,
       so we want vertical pan to be HERE, not bubble to the page */
    touch-action: pan-y;
    padding: 0 1.5rem 4rem;
}

/* Each item snaps to center of viewport — generous min-height so each
   milestone gets its own "page" feel while scrolling through. */
.timeline-modal-list .timeline-item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    margin: 0;
}

/* Override the previous Swiper-slide width:45% inside the modal */
.timeline-modal-list .timeline-item .timeline-content {
    width: 100%;
    max-width: 720px;
    padding: 2rem 2.25rem;
    text-align: left;
}

/* Timeline content cards (inside modal) — shared styling for both desktop and mobile */
.timeline-item .timeline-content {
    position: relative;
    width: 100%;
    padding: 1.75rem 2rem;
    background: rgba(20, 20, 30, 0.85);
    border: 1px solid rgba(82, 214, 141, 0.3);
    border-radius: 12px;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item .timeline-content:hover {
    background: rgba(25, 25, 35, 0.9);
    border-color: rgba(82, 214, 141, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(82, 214, 141, 0.15);
}

.timeline-item .timeline-content:hover .timeline-title {
    border-bottom-color: rgba(82, 214, 141, 0.8);
}

/* Year labels */
.timeline-year {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #52D68D;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Project titles */
.timeline-title {
    font-size: 1.3rem;
    color: #fff;
    margin: 0.5rem 0 0.3rem 0;
    font-weight: 600;
    line-height: 1.3;
    display: inline-block;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-bottom-color 0.3s ease;
}

.timeline-highlight .timeline-title {
    display: block !important;
    color: transparent !important;
    background: linear-gradient(135deg, #52D68D 0%, #00E5FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Role text */
.timeline-role {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.3rem 0;
    font-style: italic;
}

/* Detail text */
.timeline-detail {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Animations */
@keyframes timelineSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.4);
        opacity: 0.8;
    }
}

/* Mobile responsive timeline */
@media (max-width: 768px) {
    .timeline-section-content {
        padding: 1rem 0;
    }

    .timeline-section-content h2 {
        margin-bottom: 0.5rem;
    }

    .timeline-blurb {
        font-size: 0.92rem;
        padding: 0 1rem;
        margin: 0.75rem auto 1.25rem;
    }

    .timeline-modal-trigger {
        font-size: 0.85rem;
        padding: 0.75rem 1.4rem;
    }

    /* Modal scales tighter on phones */
    .timeline-modal-header {
        padding: 1rem 1.25rem;
    }

    .timeline-modal-header h2 {
        font-size: 0.95rem;
    }

    .timeline-modal-list {
        padding: 0 1rem 3rem;
    }

    .timeline-modal-list .timeline-item {
        min-height: 70vh;
        padding: 1.5rem 0;
    }

    .timeline-modal-list .timeline-item .timeline-content {
        padding: 1.5rem 1.5rem;
    }

    .timeline-title {
        font-size: 1.15rem;
    }

    .timeline-year {
        font-size: 0.78rem;
    }

    .timeline-role {
        font-size: 0.88rem;
    }

    .timeline-detail {
        font-size: 0.82rem;
    }
}

/* Small phones - extra compact */
@media (max-width: 400px) {
    .timeline-section-content {
        padding: 0.75rem 0;
    }

    .timeline-modal-list .timeline-item {
        min-height: 75vh;
    }

    .timeline-modal-list .timeline-item .timeline-content {
        padding: 1.25rem 1.25rem;
    }

    .timeline-title {
        font-size: 0.95rem;
        line-height: 1.25;
        margin: 0.15rem 0 0.1rem 0;
    }

    .timeline-year {
        font-size: 0.7rem;
        margin-bottom: 0.1rem;
    }

    .timeline-role {
        font-size: 0.8rem;
        margin: 0.05rem 0;
    }

    .timeline-detail {
        font-size: 0.73rem;
        line-height: 1.4;
        margin-top: 0.1rem;
    }
}

/* ==========================================
   SEO FOOTER - Always visible for crawlers
   ========================================== */
.seo-footer {
    position: relative;
    z-index: 1;
    background: rgba(10, 10, 15, 0.95);
    padding: 1.25rem 1.5rem;
    padding-bottom: calc(1.25rem + 80px); /* Clear the fixed bottom-nav */
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    visibility: hidden;
}

.seo-footer-nav {
    max-width: 900px;
    margin: 0 auto;
}

.seo-footer-label {
    display: block;
    color: rgba(82, 214, 141, 0.5);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.seo-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.seo-footer-links a {
    color: rgba(82, 214, 141, 0.7);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.seo-footer-links a:hover {
    color: rgba(82, 214, 141, 1);
}

@media (max-width: 480px) {
    .seo-footer {
        padding: 1rem;
        padding-bottom: calc(1rem + 70px);
    }
    .seo-footer-links {
        gap: 0.4rem 0.75rem;
    }
    .seo-footer-links a {
        font-size: 0.6rem;
    }
}

/* ==========================================
   LEGAL OVERLAY — Bottom-nav Legal menu
   Mirrors .services-overlay pattern, cyan/holographic palette.
   Renders on index.html only.
   Compliance reference: docs/COMPLIANCE.md §4.3
   ========================================== */
.legal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

.legal-menu {
    position: relative;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(10, 15, 20, 0.95), rgba(5, 10, 15, 0.98));
    border: 2px solid #00ffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.3),
        inset 0 0 50px rgba(0, 255, 255, 0.05);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.legal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 2px solid #00ffff;
    color: #00ffff;
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.legal-close:hover {
    background: #00ffff;
    color: #0a0f15;
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.legal-title {
    font-size: 1.5rem;
    color: #00ffff;
    text-align: center;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    background: linear-gradient(90deg, #00ffff 0%, #c08aff 50%, #00ffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legal-list a {
    display: block;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.legal-list a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(180, 130, 255, 0.18), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.legal-list a:hover::before,
.legal-list a:focus-visible::before {
    left: 100%;
}

.legal-list a:hover,
.legal-list a:focus-visible {
    border-color: #00ffff;
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.4);
    transform: translateX(2px);
    outline: none;
}

.legal-list a small {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

@media (max-width: 480px) {
    .legal-menu {
        padding: 1.5rem;
        width: 92%;
    }
    .legal-title {
        font-size: 1.25rem;
    }
}

/* ============================================================
   JOSH VAMOS DESIGN SYSTEM — COMPONENT LIBRARY
   ------------------------------------------------------------
   Merged verbatim from colors_and_type.css (Josh Vamos Design
   System workspace, 2026-07-01). Opt-in via .vamos-scope — none
   of the page's existing elements use these classes yet, so this
   section is additive only and changes nothing currently rendered.
   Apply .vamos-scope (to <body> or a section) and the .btn/.card/
   .badge/.eyebrow/.mono classes to adopt this system on new work.
   ============================================================ */

.vamos-scope,
body.vamos-scope {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vamos-scope h1,
.vamos-scope .h1 {
    color: var(--primary-emerald);
    font-family: var(--font-sans);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-shadow: var(--text-glow-strong);
}

.vamos-scope h2,
.vamos-scope .h2 {
    color: var(--primary-emerald);
    font-family: var(--font-sans);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-loud);
    text-shadow: var(--text-glow);
}

.vamos-scope h3,
.vamos-scope .h3 {
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

.vamos-scope p,
.vamos-scope .body {
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

.vamos-scope .lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-normal);
    color: var(--sage-text);
}

.vamos-scope .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    color: var(--primary-emerald);
    text-transform: uppercase;
    letter-spacing: var(--ls-shout);
    text-shadow: var(--text-glow);
}

.vamos-scope .mono,
.vamos-scope code,
.vamos-scope kbd {
    font-family: var(--font-mono);
    color: var(--accent-cyan-pure);
    text-shadow: var(--glow-cyan-sm);
}

.vamos-scope a {
    color: var(--primary-emerald);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard),
                text-shadow var(--dur-base) var(--ease-standard);
}
.vamos-scope a:hover {
    color: var(--emerald-bright);
    text-shadow: var(--text-glow);
}

/* Signature button — emerald outline, monospace, uppercase, wide-tracked, neon-glow */
.vamos-scope .btn,
.vamos-scope button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    letter-spacing: var(--ls-shout);
    color: var(--primary-emerald);
    background: transparent;
    border: 2px solid var(--primary-emerald);
    border-radius: var(--radius-sm);
    text-shadow: var(--text-glow);
    box-shadow: var(--glow-button-neon);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-standard),
                background var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.vamos-scope .btn:hover {
    color: var(--bg-dark);
    background: var(--primary-emerald);
    box-shadow: var(--glow-button-neon-hover);
    transform: scale(1.05);
}

/* Solid "Request Quote" style CTA */
.vamos-scope .btn-cta {
    display: inline-block;
    padding: var(--space-4) var(--space-10);
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-ui);
    color: var(--text-on-emerald);
    background: var(--grad-emerald);
    border: 2px solid var(--primary-emerald);
    border-radius: var(--radius-pill);
    box-shadow: var(--glow-emerald-md);
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.vamos-scope .btn-cta:hover {
    background: var(--grad-emerald-reverse);
    box-shadow: var(--glow-emerald-lg);
    transform: translateY(-2px);
}

/* Nav-style monospace button (bottom-nav footer) */
.vamos-scope .btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-emerald);
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--primary-emerald);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-cyan-sm);
    text-decoration: none;
    min-width: 80px;
    transition: color var(--dur-base), background var(--dur-base),
                border-color var(--dur-base), transform var(--dur-base),
                box-shadow var(--dur-base);
}
.vamos-scope .btn-nav:hover {
    color: var(--primary-forest);
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--primary-forest);
    box-shadow: var(--glow-cyan-md);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   CARD SYSTEM
   One base + intent modifiers. Every card on the site is a .card.
   Pick exactly one .card--<intent> modifier.

   Slots (all optional, ordered top→bottom):
     .card__eyebrow  — emerald mono label (year, "SERVICE · 01", studio)
     .card__title    — H3-equivalent (color rule below)
     .card__sub      — sage mono meta (platform, role, ep count)
     .card__body     — sage-soft body copy
     .card__foot     — chip / arrow / cta row

   TITLE COLOR RULE — IMPORTANT
     Title is EMERALD when it is the highest-priority signal in the
       card (no eyebrow above competing for emerald).
     Title is WHITE when an emerald eyebrow already sits above it
       (otherwise two emerald things fight for attention).
     This is automatic via :has() — don't override unless you mean it.
   ---------------------------------------------------------------- */

.vamos-scope .card {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--emerald-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.vamos-scope .card:hover {
    border-color: var(--primary-emerald);
    box-shadow: var(--glow-emerald-md);
    transform: translateY(-3px);
}

.vamos-scope .card__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-emerald);
    text-shadow: var(--text-glow);
}
.vamos-scope .card__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--primary-emerald);
    text-shadow: var(--text-glow);
    margin: 0;
}
.vamos-scope .card:has(.card__eyebrow) .card__title {
    color: var(--text-primary);
    text-shadow: none;
}
.vamos-scope .card__sub {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.05em;
    color: var(--sage-text);
}
.vamos-scope .card__body {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--sage-text-soft);
    margin: var(--space-2) 0 0;
}
.vamos-scope .card__foot {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.vamos-scope .card--credit { /* base, no rail, eyebrow = studio */ }
.vamos-scope .card--service {
    background: var(--grad-card);
    box-shadow: 0 0 20px rgba(82,214,141,0.08);
}
.vamos-scope .card--timeline {
    border-left: 3px solid var(--primary-emerald);
}
.vamos-scope .card--featured {
    border-left: 3px solid var(--accent-cyan-pure);
    box-shadow: var(--glow-cyan-sm);
}

/* Pill badge (e.g. "2025 DGC Award Nominee") */
.vamos-scope .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: var(--grad-badge);
    border: 2px solid var(--primary-emerald);
    border-radius: var(--radius-pill);
    color: var(--primary-emerald);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    letter-spacing: 0.05em;
    text-shadow: var(--text-glow);
    box-shadow: var(--glow-emerald-md);
}

/* Divider */
.vamos-scope .divider-wave {
    height: 2px;
    background: var(--grad-divider);
    box-shadow: 0 0 10px rgba(82, 214, 141, 0.5);
    margin: var(--space-8) 0;
}

/* Holographic text utility */
.vamos-scope .holo {
    background: var(--grad-holographic);
    background-size: 400% 400%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 20px rgba(0, 204, 255, 0.3))
            drop-shadow(0 0 40px rgba(255, 102, 204, 0.15));
    animation: holo-shimmer var(--dur-holo) ease-in-out infinite;
}
@keyframes holo-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* CRT scanline overlay — drop as fixed full-viewport ::before */
.vamos-scope .crt::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-scanlines);
    pointer-events: none;
    z-index: var(--z-crt-mask);
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .vamos-scope *,
    .vamos-scope *::before,
    .vamos-scope *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}