:root {
    --neon-green: #00ff66;
    --dark-green: #004400;
    --glass-bg: rgba(0, 10, 0, 0.7);
    --font-main: 'Rajdhani', sans-serif;
    --font-heading: 'Orbitron', sans-serif;

    /* V3.0 Functional Colors */
    --bg-primary: #000;
    --text-primary: #fff;
    --grid-bg: rgba(0, 0, 0, 0.1);
    --nav-bg: rgba(0, 10, 0, 0.7);
    --mesh-opacity: 1;

    /* Cinematic Variables */
    --hero-spacing-start: 8px;
    --hero-spacing-end: 12px;
}

:root.light-mode {
    --bg-primary: #f8fafc;
    /* Clean Slate/Google White */
    --text-primary: #0f172a;
    /* Corporate Deep Navy */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --grid-bg: rgba(255, 255, 255, 0.5);
    --mesh-opacity: 0.6;
    /* Softer mesh for light mode */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: var(--text-primary);
    margin: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    /* V4.25: Disallow global viewport swiping to prevent scroll-chain layout drags */
    /* Locked in Dark Mode */
    font-family: var(--font-main);
    line-height: 1.6;
    background: #000;
    /* Baseline darkness */
    transition: color 0.8s ease;
}

body.light-mode {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Enabled in Light Mode */
}

/* V4.30 Hard scroll-lock: Prevent access to the grid before INITIALIZE is clicked */
html:not(.system-initialized),
body:not(.system-initialized) {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0;
    left: 0;
    touch-action: none !important;
}

#system-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* Absolute bottom */
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(rgba(0, 255, 102, 0.15) 1px, transparent 1px),
        radial-gradient(circle at center, var(--dark-green) 0%, var(--bg-primary) 70%);
    background-size: 30px 30px, 100% 100%;
    background-position: 0 0, center;
    background-attachment: fixed;
    transition: background 0.8s cubic-bezier(0.2, 0, 0, 1);
}

.light-mode #system-bg {
    background-image:
        radial-gradient(rgba(0, 255, 102, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    background-size: 30px 30px, 100% 100%;
}


/* Scanlines Effect */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.15;
}

/* Cinematic Navigation */
.titan-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 255, 102, 0.1);
    padding: 15px 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s ease;
}

/* V4.0: Minimized Navigation Tray */
.nav-minimized-tray {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    /* hidden by default */
    width: 60px;
    height: 30px;
    background: rgba(0, 40, 0, 0.6);
    border: 1px solid var(--neon-green);
    border-top: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 999;
    /* Just under main nav */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-minimized-tray svg {
    width: 20px;
    height: 20px;
    color: var(--neon-green);
    animation: pulse-glow 2s infinite alternate;
}

.nav-minimized-tray.active {
    transform: translate(-50%, 0);
}

.light-mode .nav-minimized-tray {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

.light-mode .nav-minimized-tray svg {
    color: #000;
}

.light-mode .titan-nav {
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.nav-logo {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: 4px;
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.light-mode .nav-logo {
    text-shadow: none;
    color: #000;
}

.nav-logo span {
    color: var(--neon-green);
}

.logo-img {
    max-height: 44px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.4));
    transition: all 0.3s ease;
}

.logo-img:hover {
    filter: drop-shadow(0 0 12px rgba(0, 255, 102, 0.8));
    transform: scale(1.02);
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    margin-left: 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    opacity: 0.6;
    position: relative;
}

.light-mode .nav-links a {
    color: #000;
    opacity: 0.7;
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--neon-green);
    opacity: 1;
    text-shadow: 0 0 8px var(--neon-green);
}

.light-mode .nav-links a:hover {
    text-shadow: none;
    color: var(--dark-green);
}

#neural-bg {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10 !important;
    /* Front-facing interactive layer */
    background: transparent !important;
    pointer-events: none;
    opacity: var(--mesh-opacity);
    transition: opacity 0.8s ease;
}

/* Hero Section */
.hero {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    background: transparent;
    transition: background 0.8s ease;
    overflow: hidden;
}

.hero-global-map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    object-fit: contain;
    opacity: 0;
    z-index: -1;
    filter: brightness(1.2) contrast(1.1);
    transition: opacity 1.2s ease, transform 2s ease;
    pointer-events: none;
}

.light-mode .hero-global-map {
    opacity: 0.15;
    transform: translate(-50%, -50%) scale(1.1);
}

.light-mode .hero {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
}

.system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-family: var(--font-heading);
    color: var(--neon-green);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
    opacity: 0.8;
}

.light-mode .system-status {
    color: var(--dark-green);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-green);
    animation: blink 2s infinite;
}

.light-mode .status-dot {
    background: var(--dark-green);
    box-shadow: none;
}



/* Cinematic Viewport */
.main-viewport {
    height: 200vh;
    display: flex;
    flex-direction: column;
    transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
    will-change: transform;
}

.main-viewport.system-initialized {
    transform: translateY(-100vh);
}

.main-viewport.glitch-flash::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00ff66;
    z-index: 10000;
    pointer-events: none;
    animation: flash-anim 0.6s ease-out forwards;
}

@keyframes flash-anim {
    0% {
        opacity: 1;
        background: #fff;
        filter: brightness(2) contrast(2);
    }

    5% {
        background: #00ff66;
    }

    10% {
        background: #fff;
        filter: brightness(3);
    }

    15% {
        background: #00ff66;
    }

    100% {
        opacity: 0;
    }
}

@keyframes shudder {
    0% {
        transform: translate(0, -100vh);
    }

    5% {
        transform: translate(-15px, -102vh) scale(1.05);
    }

    10% {
        transform: translate(15px, -98vh) scale(0.95);
    }

    15% {
        transform: translate(-20px, -103vh) rotate(-1deg);
    }

    20% {
        transform: translate(20px, -97vh) rotate(1deg);
    }

    25% {
        transform: translate(-10px, -101vh);
    }

    30% {
        transform: translate(10px, -99vh);
    }

    40% {
        transform: translate(0, -100vh);
    }
}

.main-viewport.system-initialized.glitch-flash {
    animation: shudder 0.4s ease-out 1.2s forwards;
}

.glow-title {
    font-family: var(--font-heading);
    color: var(--neon-green);
    text-shadow: 0 0 20px rgba(0, 255, 102, 0.6);
    font-size: 6rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -2px;
    word-break: break-word;
    /* Prevent overflow on mobile */
    animation: titlePulse 4s infinite ease-in-out;
    transition: all 0.8s ease;
}

/* Corporate Specific Title Modifiers */
.glow-title.corporate-title {
    font-size: 4.5rem;
    letter-spacing: -4px;
    text-shadow: none;
}

.light-mode .glow-title.corporate-title {
    color: #111;
    text-shadow: none;
}

.corporate-sub {
    max-width: 800px;
    margin: 0 auto 40px;
    color: #475569;
    font-size: 1.2rem;
    font-weight: 500;
}

.corporate-btn-ghost {
    margin-left: 20px;
    padding: 18px 50px;
    border: 1px solid #cbd5e1;
    background: transparent;
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.corporate-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.1);
}

.light-mode .corporate-btn-ghost {
    color: #111;
}

.light-mode .glow-title {
    color: #000;
    text-shadow: none;
    letter-spacing: -4px;
}

@keyframes titlePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.8;
    }
}

@keyframes whiteHotBurn {
    0% {
        color: #888;
        text-shadow: none;
        opacity: 0.6;
        font-weight: 300;
        letter-spacing: var(--hero-spacing-start);
    }

    100% {
        color: #fff;
        text-shadow:
            0 0 10px #fff,
            0 0 20px #fff,
            0 0 40px #fff,
            0 0 80px rgba(255, 255, 255, 0.9),
            0 0 120px rgba(255, 255, 255, 0.6);
        opacity: 1;
        letter-spacing: var(--hero-spacing-end);
        font-weight: 700;
    }
}

.scifi-sub {
    font-family: var(--font-main);
    font-weight: 300;
    color: #888;
    /* Start grey */
    letter-spacing: var(--hero-spacing-start);
    opacity: 0.7;
    margin: 20px 20px 50px;
    max-width: 1600px;
    /* Maximum clearance for expansion */
    text-transform: uppercase;
    animation: whiteHotBurn 14s cubic-bezier(0.2, 0, 0, 1) forwards;
    transition: all 0.8s ease;
}

.light-mode .scifi-sub {
    color: var(--dark-green);
    font-weight: 600;
    letter-spacing: 6px;
    opacity: 0.9;
    animation: none;
    /* Corporate static clarity */
}

/* Neon Button */
.btn-neon {
    padding: 18px 50px;
    border: 1px solid var(--neon-green);
    background: transparent;
    color: var(--neon-green);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: inset 0 0 0 0 var(--neon-green);
}

.light-mode .btn-neon {
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    background: #fff;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}

.btn-neon:hover {
    background: var(--neon-green);
    color: #000;
    box-shadow: 0 0 50px rgba(0, 255, 102, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.light-mode .btn-neon:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23);
}

/* Infrastructure Grid */
.infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 15px;
    padding: 30px;
    padding-top: 100px;
    /* Clear the fixed header */
    background: transparent;
    height: 100vh;
    box-sizing: border-box;
    transition: all 0.8s ease;
    z-index: 20;
    /* Sit above Neural Mesh (10) */
}

.light-mode .infrastructure-grid {
    background: #fff;
    grid-gap: 40px;
    padding: 120px 80px;
    height: auto;
    min-height: 100vh;
}

.grid-item {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.light-mode .grid-item {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.grid-item.card-style img {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1);
}

.grid-item.card-style:hover img {
    transform: scale(1.08);
}

.grid-item.audio-active {
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.4);
    border: 1px solid var(--neon-green);
    z-index: 10;
    /* Bring to front */
}

.grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) contrast(1.2) saturate(0);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-item:hover video {
    filter: brightness(0.9) contrast(1) saturate(1);
    transform: scale(1.05);
}

/* UI-Selected Matrix Filter */
.grid-item.enhanced video {
    filter: brightness(0.9) sepia(100%) hue-rotate(90deg) saturate(200%) !important;
}

.grid-item.enhanced:hover video {
    filter: brightness(1.2) sepia(100%) hue-rotate(90deg) saturate(250%) !important;
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease;
}

.light-mode .video-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
}

.grid-item:hover .video-overlay {
    transform: translateY(0);
    opacity: 1;
}

.video-id {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    color: var(--neon-green);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
}

.grid-item h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.tags .tag {
    font-size: 0.7rem;
    color: #888;
    margin-right: 10px;
    text-transform: uppercase;
    border: 1px solid #333;
    padding: 2px 8px;
}

/* Responsive Breakpoints & Cinematic Scaling */

/* 4K Resolution (min-width: 3840px) */
@media (min-width: 3840px) {
    .glow-title {
        font-size: 10rem;
    }

    .scifi-sub {
        font-size: 1.5rem;
        letter-spacing: 12px;
    }

    .infrastructure-grid {
        padding: 200px 100px;
        grid-gap: 30px;
    }
}

/* 2K / Ultrawide Resolution (min-width: 1920px) */
@media (min-width: 1920px) and (max-width: 3839px) {
    .glow-title {
        font-size: 8rem;
    }

    .scifi-sub {
        font-size: 1.2rem;
    }
}

/* 1080p / Desktop Standard is handled by the default un-media queried rules (6rem title, etc) */

/* =========================================
   LANDSCAPE MOBILE COLLAPSE (Horizontal aspect ratio fix)
   ========================================= */
@media (max-height: 600px) and (orientation: landscape) {

    .resonance-feed,
    .corporate-sub,
    .scroll-indicator,
    #neon-rabbit {
        display: none !important;
    }

    .hero-content {
        /* V4.20: 30px Upward Hike to reclaim nav ceiling and rescue the bottom text fold */
        margin-top: -5px;
        /* V4.22: Removed local relative anchor to allow system-status to target the absolute screen viewport */
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        gap: 5px;
        /* Tighter layout for space constraints */
        padding-top: 15px;
    }

    .glow-title {
        font-size: 2.2rem !important;
        grid-column: 1;
        grid-row: 1;
        /* V4.19: Lock to top-left */
        margin: 0;
    }

    /* V4.14: Restore specific scifi text and place at bottom of grid */
    .scifi-sub {
        display: block !important;
        grid-column: 1 / -1;
        grid-row: 2;
        /* V4.19: Lock to bottom, spanning both columns */
        font-size: 0.6rem !important;
        margin: 10px 0 0 0 !important;
        text-align: center;
    }

    .hero-actions {
        grid-column: 2;
        grid-row: 1;
        /* V4.19: Lock to top-right, perfectly adjacent to title */
        margin: 0;
    }

    .glow-title.corporate-title {
        font-size: 2.2rem !important;
    }

    .btn-neon,
    .corporate-btn-ghost {
        padding: 10px 25px;
        font-size: 0.8rem;
    }

    .system-status {
        position: absolute;
        /* V4.21: Detach from Grid Row math entirely to prevent vertical displacement */
        /* V4.22: Removed local anchor meaning this now targets the 100vh viewport */
        top: 42px;
        z-index: 100;
        left: 0;
        right: 0;
        margin-bottom: 0;
        justify-content: center;
        /* V4.21: Maintain horizontal centering */
    }
}

/* 720p / Laptop / Landscape Tablet (max-width: 1200px) */
@media (max-width: 1200px) {
    .glow-title {
        font-size: 4.5rem;
    }

    .grid-item h3 {
        font-size: 0.9rem;
    }

    .video-id {
        font-size: 0.55rem;
    }

    .tags .tag {
        font-size: 0.6rem;
    }
}

/* Tablet Portrait (max-width: 900px) */
@media (max-width: 900px) {
    #neon-rabbit {
        display: none !important;
    }

    .infrastructure-grid {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        min-height: 100vh;
    }

    .system-status {
        gap: 8px;
        font-size: 0.7rem;
    }

    .glow-title {
        font-size: 3.5rem;
    }

    .grid-item {
        aspect-ratio: 16/9;
    }
}

/* Mobile (max-width: 600px) AND Landscape Mobile */
@media (max-width: 600px),
(max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    :root {
        --hero-spacing-start: 1px;
        --hero-spacing-end: 2px;
    }

    .infrastructure-grid {
        position: relative;
        /* V4.24: Local geometry anchor for offsetLeft mathematics */
        display: flex;
        flex-direction: row;
        height: 100vh;
        min-height: 100vh;
        padding-top: 0;
        padding-bottom: 0;
        /* V4.26: Removed buggy WebKit flex paddings in favor of hard :first-child / :last-child margins to ensure centering runway */
        overflow-y: hidden;
        overflow-x: scroll;
        overscroll-behavior-x: contain !important;
        /* V4.25: Trap swipe momentum here, don't pass to body */
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 20px;
        align-items: center;
        /* V4.14: Hide before initialization on Mobile */
        opacity: 0;
        pointer-events: none;
        transition: opacity 1.2s ease;
    }

    body.system-initialized .infrastructure-grid {
        opacity: 1;
        pointer-events: auto;
    }

    .infrastructure-grid::-webkit-scrollbar {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .system-status {
        flex-wrap: wrap;
        font-size: 0.6rem;
        gap: 5px;
        letter-spacing: 1px;
    }

    .status-divider {
        display: none;
    }

    .glow-title {
        font-size: 2.2rem;
        line-height: 1.1;
    }

    .glow-title.corporate-title {
        font-size: 2.5rem;
        letter-spacing: -2px;
    }

    /* V4.28: Isolate horizontal tearing on narrow vertical viewports */
    .glow-title.corporate-title .title-shrink {
        font-size: 2rem;
        white-space: nowrap;
    }

    /* Simplify Hero: Hide complex text blocks on mobile */
    .resonance-feed,
    .corporate-sub,
    #neon-rabbit {
        display: none !important;
    }

    .hero-content {
        padding-top: 100px;
        /* Make space for header/hamburger */
        padding-bottom: 50px;
        /* Clear space below Initialize button */
    }

    .hero-actions {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .corporate-btn-ghost {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
    }

    /* Removed nested V4.14 logic to prevent parser collapse */

    .grid-item {
        flex: 0 0 auto !important;
        /* V4.16: Sever flexbox stretching */
        width: 80vw !important;
        /* V4.17: Build explicit 16:9 vertical geometry without aspect-ratio */
        height: 45vw !important;
        margin-bottom: 0;
        /* Gap between slides is handled by flex gap */
        scroll-snap-align: center;
        /* Snap point */
        scroll-snap-stop: always;
        transform: perspective(1000px) rotateX(25deg) scale(0.9);
        /* Default distant state: Less tilted, larger */
        opacity: 0.3;
        filter: blur(4px) grayscale(70%);
        transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease, filter 0.8s ease;
        will-change: transform, opacity, filter;
        transform-origin: center bottom;
    }

    /* WebKit padding-collapse defeat: Append runway space as hard margins to the physical edge elements */
    .grid-item:first-child {
        margin-left: 30vw !important;
    }

    .grid-item:last-child {
        margin-right: 30vw !important;
    }

    /* JavaScript will apply this when the IntersectionObserver fires */
    .grid-item.active-slide {
        transform: perspective(1000px) rotateX(0deg) scale(1.15);
        /* Hugely scaled active slide */
        z-index: 10;
        /* V4.24: Violently clip above DOM peers in rendering phase */
        opacity: 1;
        filter: blur(0px) grayscale(0%);
        box-shadow: 0 0 30px rgba(0, 255, 102, 0.3);
    }

    /* V4.26: Auto-Hide logic for active text captions. Hold opaque for 3 sec, then alpha-fade to 0 out of the way */
    @keyframes overlay-fade {
        0% {
            opacity: 1;
        }

        85% {
            opacity: 1;
        }

        /* Hold steady for 3 seconds of the 3.5s window */
        100% {
            opacity: 0;
        }

        /* Complete fade */
    }

    .grid-item.active-slide .video-overlay {
        animation: overlay-fade 3.5s ease-in-out forwards;
    }

    /* 3D Carousel Swipe Indicators overlay */
    .mobile-swipe-indicator {
        position: absolute;
        top: calc(150vh + 26vw + 30px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        z-index: 1000;
        pointer-events: none;
    }

    .mobile-swipe-indicator span {
        color: rgba(0, 255, 102, 0.5);
        font-family: var(--font-heading);
        font-size: 0.7rem;
        letter-spacing: 4px;
        text-transform: uppercase;
        animation: pulse-glow 2s infinite alternate;
    }

    .mobile-swipe-indicator .chevron {
        width: 15px;
        height: 15px;
        border-right: 2px solid var(--neon-green);
        border-bottom: 2px solid var(--neon-green);
        opacity: 0.5;
    }

    .mobile-swipe-indicator .chevron.left {
        transform: rotate(135deg);
        animation: nudge-left 2s infinite ease-in-out;
    }

    .mobile-swipe-indicator .chevron.right {
        transform: rotate(-45deg);
        animation: nudge-right 2s infinite ease-in-out;
    }

    @keyframes nudge-right {

        0%,
        100% {
            transform: translateX(0) rotate(-45deg);
            opacity: 0.2;
        }

        50% {
            transform: translateX(5px) rotate(-45deg);
            opacity: 1;
        }
    }

    @keyframes nudge-left {

        0%,
        100% {
            transform: translateX(0) rotate(135deg);
            opacity: 0.2;
        }

        50% {
            transform: translateX(-5px) rotate(135deg);
            opacity: 1;
        }
    }

    /* Light Mode Swipe Indicators */
    .light-mode .mobile-swipe-indicator span {
        color: rgba(0, 0, 0, 0.6);
        text-shadow: none;
    }

    .light-mode .mobile-swipe-indicator .chevron {
        border-color: #000;
        opacity: 0.7;
    }
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .titan-nav {
    top: 32px !important;
}

body.admin-bar .system-shutdown-btn,
body.admin-bar .mobile-menu-trigger {
    margin-top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .titan-nav {
        top: 46px !important;
    }

    body.admin-bar .system-shutdown-btn,
    body.admin-bar .mobile-menu-trigger {
        margin-top: 46px !important;
    }
}

/* Terminal Visuals */
.terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background: var(--neon-green);
    margin-left: 5px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.resonance-feed .content {
    position: relative;
    display: inline-block;
    z-index: 5;
}

.resonance-feed .content::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* Anchor right to animate leftward */
    height: 100%;
    width: 0%;
    /* Start empty */
    background: rgba(0, 255, 102, 0.5);
    /* Neon Green Highlight */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    /* Behind text */
}

.resonance-feed .content.selecting::after {
    width: 100%;
    /* Expand fully left */
}

/* --- CINEMATIC TRANSITION EFFECTS --- */

/* TV Broadcast / CRT Glitch Effect */
.tv-glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100000;
    pointer-events: none;
    display: none;
    overflow: hidden;
}

.tv-glitch-overlay.active {
    display: block !important;
    animation: tv-power-on 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.tv-glitch-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2) 1px,
            rgba(255, 255, 255, 0.1) 1px,
            rgba(255, 255, 255, 0.1) 2px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 2;
    animation: static-flicker 0.1s infinite;
}

@keyframes static-flicker {
    0% {
        opacity: 0.3;
        transform: translate(0, 0);
    }

    50% {
        opacity: 0.6;
        transform: translate(-1%, 1%);
    }

    100% {
        opacity: 0.3;
        transform: translate(1%, -1%);
    }
}

@keyframes tv-power-on {
    0% {
        background: #fff;
        opacity: 1;
        transform: scaleY(0.002) scaleX(0);
        box-shadow: 0 0 150px #fff;
        filter: brightness(5);
    }

    5% {
        opacity: 1;
        transform: scaleY(0.002) scaleX(1.2);
        background: #fff;
    }

    15% {
        transform: scaleY(1.5) scaleX(1.2);
        background: #fff;
        filter: brightness(3) contrast(2);
    }

    25% {
        transform: scaleY(1) scaleX(1);
        background: #00ff66;
        filter: brightness(2) contrast(5);
    }

    100% {
        background: transparent;
        opacity: 0;
        filter: brightness(1) contrast(1);
    }
}

/* CRT collapse animation for elements */
.crt-collapse {
    animation: crt-collapse-anim 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

@keyframes crt-collapse-anim {
    0% {
        transform: scaleY(1) scaleX(1);
        filter: brightness(1);
    }

    20% {
        transform: scaleY(1.1) scaleX(0.9);
        filter: brightness(2);
    }

    50% {
        transform: scaleY(0.01) scaleX(1.2);
        filter: brightness(5) contrast(2);
    }

    80% {
        transform: scaleY(0.01) scaleX(0);
        filter: brightness(10);
    }

    100% {
        transform: scaleY(0) scaleX(0);
        filter: brightness(20);
        opacity: 0;
    }
}

/* VHS Rewind Aesthetic */
.vhs-rewind-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    pointer-events: none;
    display: none;
    background: rgba(0, 255, 102, 0.2);
    /* mix-blend-mode removed for absolute visibility on black */
}

.vhs-rewind-overlay.active {
    display: block !important;
    animation: vhs-extreme-jitter 0.05s infinite;
}

.vhs-rewind-overlay::after {
    content: "REWIND >>";
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    margin-right: -20px;
    /* Offset the letter-spacing: 20px */
    font-family: var(--font-heading);
    color: var(--neon-green);
    font-size: 5rem;
    letter-spacing: 20px;
    opacity: 1;
    text-shadow:
        8px 0 rgba(0, 255, 255, 0.8),
        -8px 0 rgba(255, 0, 255, 0.8),
        0 0 20px var(--neon-green);
    font-style: italic;
    animation: text-glitch 0.1s infinite;
}

@keyframes text-glitch {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-8px, 4px);
        opacity: 0.8;
    }

    50% {
        transform: translate(8px, -4px);
        opacity: 1;
    }

    75% {
        transform: translate(-4px, 8px);
        opacity: 0.9;
    }

    100% {
        transform: translate(4px, -8px);
        opacity: 1;
    }
}

.vhs-tracking-line {
    position: absolute;
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.4);
    top: -150px;
    filter: blur(15px) brightness(3);
    box-shadow: 0 0 50px rgba(0, 255, 102, 0.7);
    animation: vhs-tracking 0.8s linear infinite;
}

.vhs-tracking-line:nth-child(2) {
    height: 30px;
    animation-delay: 0.3s;
    opacity: 0.6;
}

.vhs-tracking-line:nth-child(3) {
    height: 10px;
    animation-delay: 0.6s;
    opacity: 0.4;
}

@keyframes vhs-tracking {
    0% {
        top: -150px;
    }

    100% {
        top: 110%;
    }
}

@keyframes vhs-extreme-jitter {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-15px, 8px) rotate(0.1deg);
    }

    40% {
        transform: translate(15px, -8px) rotate(-0.1deg);
    }

    60% {
        transform: translate(-8px, 15px) rotate(0.05deg);
    }

    80% {
        transform: translate(15px, -15px) rotate(-0.05deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.rewind-distortion {
    filter: url(#vhs-distort) contrast(2) brightness(1.3) saturate(0.2);
    animation: extreme-chromatic 0.1s infinite;
}

@keyframes extreme-chromatic {
    0% {
        filter: contrast(2) drop-shadow(8px 0 #00ffff) drop-shadow(-8px 0 #fff);
    }

    50% {
        filter: contrast(2.5) drop-shadow(-8px 0 #00ffff) drop-shadow(8px 0 #fff);
    }

    100% {
        filter: contrast(2) drop-shadow(8px 0 #00ffff) drop-shadow(-8px 0 #fff);
    }
}

/* --- ENERGY SURGE & SHARDS --- */
.energy-shard {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 4px;
    height: 100px;
    z-index: 100002;
    pointer-events: none;
    opacity: 0;
    filter: blur(2px) drop-shadow(0 0 15px var(--neon-green));
}

.energy-shard.active {
    animation: shard-fly 0.6s cubic-bezier(0.15, 0, 0.15, 1) forwards;
}

@keyframes shard-fly {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(1.5);
        opacity: 0;
    }
}

.surge-chromatic {
    animation: extreme-chromatic 0.05s infinite !important;
}

@keyframes text-burn-out {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(10) blur(5px);
        transform: scale(1.1);
    }

    100% {
        filter: brightness(20) blur(20px);
        transform: scale(1.2);
        opacity: 0;
    }
}

.burn-out {
    animation: text-burn-out 0.4s ease-out forwards !important;
}

@keyframes text-reform {
    0% {
        filter: brightness(20) blur(20px);
        transform: scale(1.2);
        opacity: 0;
    }

    50% {
        filter: brightness(10) blur(5px);
        transform: scale(1.1);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
        opacity: 1;
    }
}

.reform {
    animation: text-reform 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

/* V4.10: Mobile Breadcrumb Swipe Indicator */
.cine-swipe-indicator {
    display: none;
    width: 100%;
    text-align: left !important;
    margin-top: 10px;
    font-size: 0.65rem;
    color: rgba(0, 255, 102, 0.6);
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    animation: pulse-glow 2.5s infinite alternate;
}

@media (max-width: 900px) {
    .cine-swipe-indicator {
        display: block;
        /* Solely renders below 900px */
        margin-top: 5px;
        /* Tighter spacing for landscape stacking */
    }
}

/* V4.14/V4.16/V4.18: Strict 16:9 vertical bounds for horizontal screens (Extracted from nesting) */
@media (max-height: 600px) and (orientation: landscape) {
    .grid-item {
        width: 40vw !important;
        /* V4.23: Reduced from 50vw to prevent massive crowding on extreme ultrawides */
        height: 22.5vw !important;
        /* V4.23: Mathematically perfect 16:9 ratio mapping against 40vw */
        flex: 0 0 auto !important;
    }

    .infrastructure-grid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .mobile-swipe-indicator {
        top: calc(150vh + 22.5vw + 20px) !important;
        /* V4.23: Recalculate bounded swipe string tightly to lowered 22.5vw base */
    }
}