:root {
    /* BASE (Act III/Default) */
    --bg-color: #050505;
    --text-color: #e0e0e0;
    --accent-color: #1a3a6e;
    --glow-color: #1e4d8c;
    --secondary-color: #0a7e8c;

    /* ACT I: DECLASSIFICATION (Paper) */
    --bg-act-1: #F5F5F5;
    --text-act-1: #111111;
    --accent-act-1: #D32F2F;
    /* Red stamp color */

    /* ACT II: INVESTIGATION (Board) */
    --bg-act-2: #F4E8D0;
    --text-act-2: #222222;
    --accent-act-2: #B71C1C;

    /* ACT III: SURVEILLANCE (Dark + Blue) */
    --bg-act-3: #000000;
    --text-act-3: #e0e0e0;
    --accent-act-3: #00BFFF;

    /* ACT IV: BASCULE OPTIQUE (Split) */
    --bg-act-4: #111111;
    --text-act-4: #ffffff;
    --accent-act-4: #FF6B35;
    --accent-act-4-alt: #00BFFF;

    /* ACT V: ABSORPTION FINALE */
    --bg-act-5: #000000;
    --text-act-5: #555555;

    /* VOYANT */
    --voyant-white: #ffffff;
    --voyant-blue: #00BFFF;
    --voyant-size: 12px;

    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-body: 'Inter', 'Helvetica', sans-serif;
    --overlay-color: rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════════ */
/* DYNAMIC HEADER (HYBRID ARCHI)                                    */
/* ═══════════════════════════════════════════════════════════════ */
#dynamic-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9000;
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through unless on specific buttons */
    transition: all 0.5s ease;
    border-bottom: 1px solid transparent;
}

/* Header Content Containers */
.header-left,
.header-right {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    pointer-events: auto;
}

.header-status-box {
    border: 1px solid currentColor;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

/* ACT I STYLES */
body.act-1 {
    background-color: var(--bg-act-1);
    color: var(--text-act-1);
}

body.act-1 #dynamic-header {
    background: rgba(245, 245, 245, 0.95);
    border-bottom: 1px solid #ccc;
    color: var(--text-act-1);
}

body.act-1 .slide {
    border-bottom: 1px solid #d0d0d0;
}

body.act-1 .content-wrapper {
    background: rgba(255, 255, 255, 0.9);
    border-left: 4px solid var(--accent-act-1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: var(--text-act-1);
}

/* SPECIFICITY FIX FOR COVER IN ACT I */
body.act-1 #cover .content-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #000;
    border-left: 4px solid var(--accent-act-1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: var(--text-act-1);
}

body.act-1 h1,
body.act-1 h2,
body.act-1 h3,
body.act-1 .glitch-text {
    color: #000;
    text-shadow: none;
}

body.act-1 .subtitle {
    color: var(--accent-act-1);
}

body.act-1 .meta-info {
    color: #333;
}

body.act-1 .scroll-indicator {
    color: #000;
}

/* REDACTION EFFECT (CAVIARDAGE) */
.redacted {
    background-color: #000;
    color: transparent !important;
    padding: 0 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: default;
    user-select: none;
    animation: none !important;
}

.redacted::before,
.redacted::after {
    display: none !important;
}

.redacted.revealed {
    background-color: transparent;
    color: inherit !important;
}

.redacted.revealed::before,
.redacted.revealed::after {
    display: block !important;
}

.redacted.revealed {
    background-color: transparent;
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SIDEBAR (INVESTIGATION)                                          */
/* ═══════════════════════════════════════════════════════════════ */
#investigation-sidebar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    /* Hidden by default */
    width: 250px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    z-index: 8000;
    padding: 1rem;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
    font-family: var(--font-mono);
    font-weight: 700;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

#evidence-list {
    list-style: none;
    padding: 0;
}

#evidence-list li {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #ccc;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideInLeft 0.3s ease-out;
}

#evidence-list li::before {
    content: '📌';
    font-size: 0.8rem;
}

/* PIN BUTTON */
.pin-btn {
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 1rem;
    opacity: 0.6;
}

.pin-btn:hover {
    opacity: 1;
    background: var(--accent-color);
    color: #fff;
}

.pin-btn.pinned {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    pointer-events: none;
}

.pin-btn.pinned::after {
    content: ' ✓';
}

/* ACT II SIDEBAR overrides */
body.act-2 #investigation-sidebar {
    transform: translateY(-50%) translateX(0);
    /* Visible */
    background: #F4E8D0;
    border-color: #8B4513;
    color: #333;
}

body.act-2 .sidebar-header {
    border-color: #B71C1C;
    color: #B71C1C;
}

/* ACT III SIDEBAR overrides */
body.act-3 #investigation-sidebar {
    transform: translateY(-50%) translateX(0);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--accent-act-3);
    color: var(--text-color);
    backdrop-filter: blur(5px);
}

body.act-3 .sidebar-header {
    border-color: var(--accent-act-3);
    color: var(--accent-act-3);
}

body.act-3 #evidence-list li {
    border-bottom: 1px dashed #333;
}

/* ACT II STYLES */
body.act-2 {
    background-color: var(--bg-act-2);
    color: var(--text-act-2);
}

body.act-2 #dynamic-header {
    background: rgba(244, 232, 208, 0.95);
    border-bottom: 1px solid #8B4513;
    /* Leather/Wood tone */
    color: #333;
}

body.act-2 .content-wrapper {
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transform: rotate(-1deg);
    /* Slight messy paper feel */
}

/* ACT III STYLES */
body.act-3 {
    background-color: var(--bg-act-3);
    color: var(--text-act-3);
}

body.act-3 #dynamic-header {
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--accent-act-3);
    color: var(--accent-act-3);
}

/* ACT IV/V STYLES — see bottom of file */

/* ═══════════════════════════════════════════════════════════════ */
/* LOADING SCREEN                                                   */
/* ═══════════════════════════════════════════════════════════════ */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #020204;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

/* Scanlines overlay */
.load-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(10, 126, 140, 0.015) 2px,
            rgba(10, 126, 140, 0.015) 4px);
    pointer-events: none;
    z-index: 1;
    animation: load-scanmove 4s linear infinite;
}

@keyframes load-scanmove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(8px);
    }
}

/* Camera eye container */
.load-camera {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 3rem;
    z-index: 2;
}

/* Concentric rings */
.cam-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cam-ring-outer {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, transparent 60%, #1a1a2e 65%, #0d0d1a 80%, #111 100%);
    border: 2px solid #222;
    box-shadow:
        0 0 40px rgba(26, 58, 110, 0.3),
        0 0 80px rgba(26, 58, 110, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.8);
    animation: cam-breathe 2s ease-in-out infinite;
}

.cam-ring-mid {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, transparent 50%, rgba(26, 58, 110, 0.3) 70%, rgba(10, 20, 40, 0.8) 100%);
    border: 1px solid rgba(30, 77, 140, 0.3);
    box-shadow: inset 0 0 20px rgba(26, 58, 110, 0.2);
}

.cam-ring-inner {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(30, 77, 140, 0.6) 0%, rgba(26, 58, 110, 0.3) 50%, transparent 70%);
    border: 1px solid rgba(30, 77, 140, 0.4);
    box-shadow:
        0 0 20px rgba(30, 77, 140, 0.4),
        inset 0 0 15px rgba(30, 77, 140, 0.3);
    animation: cam-inner-pulse 1.5s ease-in-out infinite;
}

/* Glowing core */
.cam-core {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 126, 140, 0.9) 0%, rgba(30, 77, 140, 0.6) 40%, rgba(26, 58, 110, 0.2) 70%, transparent 100%);
    box-shadow:
        0 0 30px rgba(10, 126, 140, 0.6),
        0 0 60px rgba(30, 77, 140, 0.3),
        0 0 100px rgba(26, 58, 110, 0.15);
    animation: cam-core-pulse 1s ease-in-out infinite;
}

/* Center bright dot */
.cam-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #b0e0ff;
    box-shadow:
        0 0 10px #7ec8e3,
        0 0 25px rgba(126, 200, 227, 0.6),
        0 0 50px rgba(10, 126, 140, 0.4);
    animation: cam-dot-flicker 0.1s steps(2) infinite;
    z-index: 3;
}

/* Heartbeat pulse rings — BPM effect */
.cam-pulse-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    border: 1px solid rgba(10, 126, 140, 0.4);
    animation: heartbeat-ring 1.2s ease-out infinite;
    z-index: 2;
}

.cam-pulse-ring-2 {
    animation-delay: 0.3s;
}

@keyframes heartbeat-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
        border-color: rgba(10, 126, 140, 0.5);
    }

    15% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.4;
    }

    25% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }

    35% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        border-color: rgba(10, 126, 140, 0);
    }
}

/* Heartbeat core pulse — mimics cardiac rhythm */
@keyframes cam-breathe {

    0%,
    100% {
        box-shadow: 0 0 40px rgba(26, 58, 110, 0.3), 0 0 80px rgba(26, 58, 110, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.8);
    }

    50% {
        box-shadow: 0 0 60px rgba(26, 58, 110, 0.5), 0 0 120px rgba(26, 58, 110, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.8);
    }
}

@keyframes cam-inner-pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(30, 77, 140, 0.4), inset 0 0 15px rgba(30, 77, 140, 0.3);
    }

    50% {
        box-shadow: 0 0 35px rgba(30, 77, 140, 0.6), inset 0 0 25px rgba(30, 77, 140, 0.5);
    }
}

@keyframes cam-core-pulse {

    0%,
    20%,
    100% {
        box-shadow: 0 0 30px rgba(10, 126, 140, 0.6), 0 0 60px rgba(30, 77, 140, 0.3), 0 0 100px rgba(26, 58, 110, 0.15);
        transform: translate(-50%, -50%) scale(1);
    }

    5% {
        box-shadow: 0 0 60px rgba(10, 126, 140, 1), 0 0 120px rgba(30, 77, 140, 0.6), 0 0 180px rgba(26, 58, 110, 0.3);
        transform: translate(-50%, -50%) scale(1.15);
    }

    10% {
        box-shadow: 0 0 35px rgba(10, 126, 140, 0.5), 0 0 70px rgba(30, 77, 140, 0.25);
        transform: translate(-50%, -50%) scale(0.95);
    }

    15% {
        box-shadow: 0 0 50px rgba(10, 126, 140, 0.8), 0 0 100px rgba(30, 77, 140, 0.4);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes cam-dot-flicker {
    0% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }

    5% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }

    10% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.9);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    20%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
}



/* Status messages — sequentially revealed */
.load-status {
    height: 1.5rem;
    z-index: 2;
    margin-bottom: 2rem;
}

.load-msg {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--accent-color);
    display: none;
}

.load-msg.active {
    display: inline;
    animation: load-msg-in 0.3s ease-out;
}

.load-msg.active:last-child {
    color: rgba(255, 60, 60, 0.8);
}

@keyframes load-msg-in {
    0% {
        opacity: 0;
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        filter: none;
    }
}

/* Progress bar */
.load-bar {
    width: 200px;
    height: 2px;
    background: #111;
    z-index: 2;
    overflow: hidden;
}

.load-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    box-shadow: 0 0 8px var(--secondary-color);
    animation: load-progress 4s ease-in-out forwards;
}

@keyframes load-progress {
    0% {
        width: 0%;
    }

    20% {
        width: 15%;
    }

    40% {
        width: 35%;
    }

    60% {
        width: 55%;
    }

    80% {
        width: 80%;
    }

    100% {
        width: 100%;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size: 16px;
    line-height: 1.6;
}

/* --- GLOW EFFECTS --- */
.glow-text {
    text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--accent-color);
}

.glow-box {
    box-shadow: 0 0 15px var(--accent-color), inset 0 0 10px rgba(41, 98, 255, 0.2);
    border-color: var(--accent-color) !important;
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-weight: 700;
}

.glitch-text {
    position: relative;
    color: var(--text-color);
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 var(--accent-color);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 var(--secondary-color);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(11px, 9999px, 86px, 0);
    }

    10% {
        clip: rect(89px, 9999px, 17px, 0);
    }

    20% {
        clip: rect(5px, 9999px, 91px, 0);
    }

    30% {
        clip: rect(66px, 9999px, 2px, 0);
    }

    40% {
        clip: rect(32px, 9999px, 92px, 0);
    }

    50% {
        clip: rect(54px, 9999px, 49px, 0);
    }

    60% {
        clip: rect(12px, 9999px, 32px, 0);
    }

    70% {
        clip: rect(98px, 9999px, 2px, 0);
    }

    80% {
        clip: rect(14px, 9999px, 150px, 0);
    }

    90% {
        clip: rect(34px, 9999px, 12px, 0);
    }

    100% {
        clip: rect(76px, 9999px, 54px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

    10% {
        clip: rect(12px, 9999px, 23px, 0);
    }

    20% {
        clip: rect(87px, 9999px, 4px, 0);
    }

    30% {
        clip: rect(5px, 9999px, 63px, 0);
    }

    40% {
        clip: rect(44px, 9999px, 2px, 0);
    }

    50% {
        clip: rect(12px, 9999px, 87px, 0);
    }

    60% {
        clip: rect(100px, 9999px, 76px, 0);
    }

    70% {
        clip: rect(3px, 9999px, 45px, 0);
    }

    80% {
        clip: rect(22px, 9999px, 8px, 0);
    }

    90% {
        clip: rect(56px, 9999px, 98px, 0);
    }

    100% {
        clip: rect(33px, 9999px, 12px, 0);
    }
}


/* --- LAYOUT --- */
.slide {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    overflow: hidden;
    border-bottom: 1px solid #1a1a1a;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: grayscale(100%) contrast(1.2) brightness(0.6);
    transition: transform 0.8s ease-out;
}

/* Fix Thread Layering: Acts 3 & 4 need content ABOVE the thread (z-5) */
body.act-3 .slide,
body.act-4 .slide {
    z-index: 6;
    /* Higher than thread z-5 */
}

/* Ensure bg-image stays behind content but in correct stacking context */
body.act-3 .bg-image,
body.act-4 .bg-image {
    z-index: -1;
}

.slide:hover .bg-image {
    transform: scale(1.02);
}

.content-wrapper {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    width: 100%;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(5px);
    padding: 3rem;
    border-left: 2px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    max-height: 90vh;
    overflow-y: auto;
}

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

.content-wrapper::-webkit-scrollbar-track {
    background: #111;
}

.content-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.slide.visible .content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.text-center {
    text-align: center;
    border-left: none;
    border-top: 2px solid var(--accent-color);
}

/* --- SECTIONS --- */

/* Cover */
#cover .content-wrapper {
    background: rgba(5, 5, 5, 0.4);
    border: 1px solid var(--text-color);
    text-align: center;
    padding: 4rem;
}

.main-title {
    font-size: 5rem;
    margin: 1rem 0;
    letter-spacing: -2px;
}

.subtitle {
    color: var(--accent-color);
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.meta-info {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    opacity: 0.8;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Logline */
.lead-text {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.highlight {
    color: var(--accent-color);
    font-weight: 700;
}

.body-text {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Two Column Layout */
.two-col {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 4rem;
}

.pull-quote {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--accent-color);
    border-left: 4px solid var(--text-color);
    padding-left: 1.5rem;
    margin-top: 2rem;
}

/* Vertical Stacks */
.vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.text-block h4 {
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.2rem;
}

/* Grid Layouts */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border: 1px solid #333;
}

.card h4 {
    margin-bottom: 1rem;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

/* Characters */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.char-box {
    border: 1px solid #333;
    padding: 1.5rem;
    transition: background 0.3s;
}

.char-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-color);
}

.char-box.alert {
    border-color: var(--accent-color);
}

.char-box .role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #888;
    display: block;
    margin-bottom: 0.5rem;
}

/* Timeline */
.timeline {
    list-style: none;
    border-left: 2px solid #333;
    padding-left: 2rem;
    margin-top: 2rem;
}

.timeline li {
    margin-bottom: 2rem;
    position: relative;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    top: 0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--bg-color);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
}

.timeline .time {
    font-family: var(--font-mono);
    color: var(--accent-color);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.2rem;
}

/* Contact */
.contact-card {
    margin-top: 2rem;
    padding: 2rem;
    border: 2px solid var(--text-color);
    display: inline-block;
}

.contact-card a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-mono);
    display: block;
    margin: 0.5rem 0;
    transition: color 0.3s;
}

.contact-card a:hover {
    color: var(--accent-color);
}

/* --- NAVIGATION --- */
#nav-dots {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 100;
}

#nav-dots a {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid var(--text-color);
    border-radius: 50%;
    transition: background 0.3s, transform 0.3s;
    position: relative;
}

#nav-dots a:hover {
    background: rgba(41, 98, 255, 0.4);
    transform: scale(1.3);
}

#nav-dots a:hover::after {
    content: attr(title);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 3px 8px;
    white-space: nowrap;
    border: 1px solid #333;
    pointer-events: none;
}

#nav-dots a.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.4);
}

/* --- CRT & SCANLINES --- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 999;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CAROUSEL SYSTEM                                                */
/* ═══════════════════════════════════════════════════════════════ */

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #333;
    background: #000;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.carousel-item {
    min-width: 100%;
    position: relative;
    overflow: hidden;
}

.carousel-item img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.carousel-item.small img {
    height: 180px;
}

/* Blurred background behind carousel images */
.carousel-blur-bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.4) saturate(1.3);
    z-index: 1;
    transform: scale(1.1);
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 1.5rem 1rem 0.8rem;
    z-index: 3;
    text-align: center;
    letter-spacing: 1px;
}

/* Carousel Navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    z-index: 10;
    pointer-events: none;
}

.carousel-prev,
.carousel-next {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-color);
    border: 1px solid #444;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border-radius: 2px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Carousel Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #555;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.carousel-dot.active {
    background: var(--accent-color);
    transform: scale(1.3);
}

/* Hide carousel nav for single items */
.carousel-container[data-single="true"] .carousel-nav,
.carousel-container[data-single="true"] .carousel-dots {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* INTENTION LAYOUT                                                */
/* ═══════════════════════════════════════════════════════════════ */
.intention-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

/* ═══════════════════════════════════════════════════════════════ */
/* WHY NOW LAYOUT                                                  */
/* ═══════════════════════════════════════════════════════════════ */
.why-now-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.why-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2a2a2a;
    padding: 1.5rem;
    transition: all 0.3s;
    position: relative;
}

.why-card:hover {
    border-color: var(--accent-color);
    background: rgba(41, 98, 255, 0.05);
    transform: translateY(-3px);
}

.why-card .why-icon {
    color: var(--accent-color);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

.why-card h4 {
    color: var(--secondary-color);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
}

.why-card p {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════ */
/* POSITIONING LAYOUT                                               */
/* ═══════════════════════════════════════════════════════════════ */
.positioning-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.positioning-statement {
    text-align: center;
    padding: 1rem 0;
}

.strengths-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.strength-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid #333;
    transition: all 0.3s;
}

.strength-item:hover {
    border-left-color: var(--accent-color);
    background: rgba(41, 98, 255, 0.04);
}

.strength-number {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: 700;
    min-width: 40px;
}

.strength-item strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-bottom: 0.3rem;
}

.strength-item p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* PROTAGONIST LAYOUT                                               */
/* ═══════════════════════════════════════════════════════════════ */
.protagonist-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3rem;
    align-items: start;
}

.char-header {
    margin-bottom: 0.5rem;
}

.char-header h2 {
    font-size: 2.5rem;
    letter-spacing: 3px;
}

.char-age {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 2px;
}

.char-stat {
    padding: 1rem 0;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.5rem;
    display: block;
}

.stat-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.stat-bar {
    height: 6px;
    background: var(--accent-color);
    font-size: 0;
    border-radius: 1px;
    transition: width 1s ease;
}

.stat-bar.secondary {
    background: var(--secondary-color);
}

.stat-bar.tertiary {
    background: #555;
}

.stat-note {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ANTAGONISM LAYOUT                                                */
/* ═══════════════════════════════════════════════════════════════ */
.antagonism-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.levers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.lever-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #2a2a2a;
    padding: 1.5rem;
    transition: all 0.3s;
}

.lever-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
}

.lever-number {
    font-family: var(--font-mono);
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.lever-card h4 {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.lever-visual {
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CHARACTER CAROUSEL                                               */
/* ═══════════════════════════════════════════════════════════════ */
.characters-carousel {
    margin-top: 1.5rem;
}

.characters-carousel .carousel-item {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-card-full {
    display: grid;
    grid-template-columns: 0.6fr 1fr;
    gap: 2rem;
    width: 100%;
    padding: 2rem;
    position: relative;
    z-index: 3;
    min-height: 350px;
    align-items: center;
}

.char-card-img {
    overflow: hidden;
    border: 1px solid #333;
}

.char-card-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    filter: grayscale(40%) contrast(1.1);
    transition: filter 0.4s;
}

.char-card-img:hover img {
    filter: grayscale(0%) contrast(1);
}

.char-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.char-card-info h4 {
    font-size: 1.8rem;
    color: var(--text-color);
    letter-spacing: 2px;
}

.char-role {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-color);
    letter-spacing: 2px;
}

.char-card-info p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════ */
/* NARRATIVE LAYOUT                                                 */
/* ═══════════════════════════════════════════════════════════════ */
.narrative-layout {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 3rem;
}

.narrative-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mvt-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #222;
    padding: 1rem 1.5rem;
    transition: all 0.3s;
    cursor: default;
}

.mvt-card:hover,
.mvt-card.active {
    border-color: var(--accent-color);
    background: rgba(41, 98, 255, 0.06);
}

.mvt-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.mvt-number {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    color: var(--accent-color);
    font-weight: 700;
    min-width: 40px;
}

.mvt-card h4 {
    color: var(--secondary-color);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.mvt-card p {
    font-size: 0.85rem;
    opacity: 0.8;
    padding-left: calc(40px + 1rem);
}

/* ═══════════════════════════════════════════════════════════════ */
/* UNIVERSE LAYOUT                                                  */
/* ═══════════════════════════════════════════════════════════════ */
.universe-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.key-idea-box {
    padding: 2rem;
    border: 1px solid var(--accent-color);
    text-align: center;
    margin: 1rem 0;
}

.key-idea-box h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* STAGING / MISE EN SCÈNE                                          */
/* ═══════════════════════════════════════════════════════════════ */
.staging-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.staging-section h4 {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.3rem;
}

.moodboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mood-item {
    text-align: center;
}

.caption {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-color);
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

.caption-detail {
    font-size: 0.7rem;
    color: #777;
    margin-top: 0.2rem;
}

.sound-design-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.sound-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #222;
    align-items: flex-start;
}

.sound-icon {
    font-size: 1.5rem;
    color: var(--accent-color);
    min-width: 30px;
}

.sound-item strong {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--secondary-color);
    display: block;
    margin-bottom: 0.3rem;
}

.sound-item p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SYNOPSIS                                                         */
/* ═══════════════════════════════════════════════════════════════ */
.synopsis-text {
    max-width: 900px;
    margin: 0 auto;
}

.synopsis-text p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════ */
/* IMAGE GLITCH — INTENSE (filter-only, no layout impact)           */
/* ═══════════════════════════════════════════════════════════════ */

/* Variant 1 — Violent hue corruption */
.glitch-filter-1 {
    animation: glitch-f1 0.6s steps(4) !important;
}

@keyframes glitch-f1 {
    0% {
        filter: none;
    }

    10% {
        filter: hue-rotate(180deg) saturate(8) brightness(2);
    }

    20% {
        filter: none;
    }

    30% {
        filter: invert(0.8) hue-rotate(-120deg) contrast(3);
    }

    40% {
        filter: none;
    }

    50% {
        filter: hue-rotate(90deg) saturate(0) brightness(4);
    }

    55% {
        filter: hue-rotate(-180deg) saturate(10) brightness(0.3);
    }

    60% {
        filter: none;
    }

    70% {
        filter: invert(0.4) hue-rotate(270deg) contrast(2.5) saturate(6);
    }

    80% {
        filter: none;
    }

    90% {
        filter: hue-rotate(45deg) brightness(3) contrast(4);
    }

    100% {
        filter: none;
    }
}

/* Variant 2 — Red/Cyan channel tear */
.glitch-filter-2 {
    animation: glitch-f2 0.5s steps(5) !important;
}

@keyframes glitch-f2 {
    0% {
        filter: none;
    }

    12% {
        filter: saturate(10) hue-rotate(150deg) brightness(0.4);
    }

    20% {
        filter: invert(1) brightness(1.5);
    }

    25% {
        filter: none;
    }

    35% {
        filter: sepia(1) saturate(6) hue-rotate(200deg) contrast(3);
    }

    45% {
        filter: none;
    }

    55% {
        filter: invert(0.6) saturate(4) contrast(2.5) brightness(2.5);
    }

    65% {
        filter: hue-rotate(-90deg) brightness(0.2);
    }

    70% {
        filter: none;
    }

    80% {
        filter: invert(0.9) hue-rotate(100deg) saturate(8);
    }

    90% {
        filter: brightness(5) contrast(0.3);
    }

    100% {
        filter: none;
    }
}

/* Variant 3 — Strobing flash */
.glitch-filter-3 {
    animation: glitch-f3 0.4s steps(2) !important;
}

@keyframes glitch-f3 {
    0% {
        filter: none;
    }

    15% {
        filter: brightness(5) contrast(3) invert(1);
    }

    20% {
        filter: none;
    }

    35% {
        filter: brightness(0.1) saturate(10) hue-rotate(300deg);
    }

    40% {
        filter: brightness(4);
    }

    45% {
        filter: none;
    }

    60% {
        filter: invert(1) hue-rotate(180deg) brightness(2);
    }

    65% {
        filter: none;
    }

    80% {
        filter: brightness(6) saturate(0) contrast(4);
    }

    85% {
        filter: hue-rotate(90deg) invert(0.5);
    }

    100% {
        filter: none;
    }
}

/* Variant 4 — Total signal corruption */
.glitch-filter-4 {
    animation: glitch-f4 0.8s steps(3) !important;
}

@keyframes glitch-f4 {
    0% {
        filter: none;
    }

    8% {
        filter: invert(1) contrast(4);
    }

    12% {
        filter: none;
    }

    20% {
        filter: sepia(1) hue-rotate(180deg) saturate(10) brightness(0.5);
    }

    25% {
        filter: brightness(6);
    }

    28% {
        filter: none;
    }

    40% {
        filter: invert(0.7) saturate(8) hue-rotate(-90deg) contrast(2);
    }

    45% {
        filter: none;
    }

    55% {
        filter: grayscale(1) brightness(3) contrast(5);
    }

    60% {
        filter: hue-rotate(270deg) invert(0.9) saturate(6);
    }

    65% {
        filter: none;
    }

    75% {
        filter: sepia(0.8) contrast(3) brightness(0.3) saturate(12);
    }

    80% {
        filter: invert(1) brightness(4);
    }

    85% {
        filter: none;
    }

    95% {
        filter: hue-rotate(120deg) contrast(2) brightness(2);
    }

    100% {
        filter: none;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ANTAGONISM — HOSTILE GLITCH (narrative disruption)               */
/* ═══════════════════════════════════════════════════════════════ */

/* Red scanline overlay — only when antagonism visible */
#antagonism.visible .content-wrapper::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 0, 0, 0.03) 2px,
            rgba(255, 0, 0, 0.03) 4px);
    pointer-events: none;
    z-index: 50;
    animation: hostile-scan 0.08s steps(2) infinite;
}

@keyframes hostile-scan {
    0% {
        transform: translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0.8;
    }
}

/* Title — aggressive RGB split + corruption */
#antagonism.visible .section-title {
    animation: antag-title 2.5s steps(2) infinite;
}

@keyframes antag-title {

    0%,
    82%,
    100% {
        filter: none;
        text-shadow: 0 0 5px var(--glow-color);
    }

    83% {
        filter: invert(1) hue-rotate(180deg);
        text-shadow: 4px 0 red, -4px 0 cyan;
    }

    85% {
        filter: none;
        text-shadow: 0 0 5px var(--glow-color);
    }

    87% {
        filter: hue-rotate(90deg) brightness(3);
        text-shadow: -3px 0 red, 3px 0 blue;
    }

    89% {
        filter: invert(0.8);
        text-shadow: 5px 2px red, -5px -2px cyan;
    }

    91% {
        filter: none;
        text-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    }

    93% {
        filter: brightness(4) contrast(3);
        text-shadow: 3px 0 red;
    }

    95% {
        filter: none;
        text-shadow: 0 0 5px var(--glow-color);
    }
}

/* Body text — blur jitter + opacity drops */
#antagonism.visible p,
#antagonism.visible .body-text,
#antagonism.visible li,
#antagonism.visible span {
    animation: antag-text 3s ease-in-out infinite;
}

/* Each paragraph gets its own timing offset */
#antagonism.visible p:nth-child(2n) {
    animation-delay: 0.5s;
}

#antagonism.visible p:nth-child(3n) {
    animation-delay: 1.2s;
}

#antagonism.visible li:nth-child(odd) {
    animation-delay: 0.8s;
}

@keyframes antag-text {

    0%,
    76%,
    100% {
        filter: none;
        opacity: 1;
    }

    77% {
        filter: blur(2px);
        opacity: 0.4;
    }

    79% {
        filter: none;
        opacity: 1;
    }

    81% {
        filter: blur(3px) brightness(2);
        opacity: 0.3;
    }

    83% {
        filter: none;
        opacity: 0.9;
    }

    85% {
        filter: hue-rotate(180deg) contrast(2);
        opacity: 0.6;
    }

    87% {
        filter: none;
        opacity: 1;
    }

    90% {
        filter: blur(1px);
        opacity: 0.7;
    }

    92% {
        filter: none;
        opacity: 1;
    }
}

/* Cards — red border pulse + hostile glow */
#antagonism .card,
#antagonism .char-box,
#antagonism .key-idea-box {
    animation: antag-card 4s ease-in-out infinite;
}

#antagonism .card:nth-child(2n) {
    animation-delay: 1s;
}

#antagonism .card:nth-child(3n) {
    animation-delay: 2s;
}

@keyframes antag-card {

    0%,
    72%,
    100% {
        border-color: #222;
        box-shadow: none;
    }

    74% {
        border-color: rgba(255, 0, 0, 0.6);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.25), inset 0 0 40px rgba(255, 0, 0, 0.06);
    }

    76% {
        border-color: #222;
        box-shadow: none;
    }

    79% {
        border-color: rgba(255, 0, 0, 0.9);
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.4), inset 0 0 60px rgba(255, 0, 0, 0.1);
    }

    81% {
        border-color: rgba(255, 0, 0, 0.3);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.15);
    }

    83% {
        border-color: #222;
        box-shadow: none;
    }
}

/* Images in antagonism — extra-aggressive glitch */
#antagonism.visible img {
    animation: antag-img 2s steps(3) infinite;
}

@keyframes antag-img {

    0%,
    70%,
    100% {
        filter: none;
    }

    72% {
        filter: invert(1) hue-rotate(180deg) saturate(6);
    }

    74% {
        filter: none;
    }

    76% {
        filter: brightness(4) contrast(3) hue-rotate(90deg);
    }

    78% {
        filter: invert(0.7) saturate(10);
    }

    80% {
        filter: none;
    }

    85% {
        filter: sepia(1) hue-rotate(200deg) brightness(0.3);
    }

    87% {
        filter: none;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* SOMMAIRE (TABLE OF CONTENTS)                                     */
/* ═══════════════════════════════════════════════════════════════ */
.sommaire-subtitle {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 3px;
    margin-bottom: 2.5rem;
}

.sommaire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.sommaire-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sommaire-heading {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--secondary-color);
    letter-spacing: 3px;
    padding-bottom: 0.8rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #222;
}

.sommaire-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    color: var(--text-color);
    border-left: 2px solid transparent;
    transition: all 0.3s;
}

.sommaire-item:hover {
    border-left-color: var(--accent-color);
    background: rgba(26, 58, 110, 0.08);
    padding-left: 1.2rem;
}

.sommaire-num {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: 700;
    min-width: 30px;
}

.sommaire-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.sommaire-item:hover .sommaire-label {
    opacity: 1;
    color: var(--secondary-color);
}

.sommaire-item:hover .sommaire-num {
    text-shadow: 0 0 8px var(--glow-color);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 3D EFFECTS & DEPTH SYSTEM                                        */
/* ═══════════════════════════════════════════════════════════════ */

/* Perspective container — every content-wrapper is a 3D stage */
.content-wrapper {
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* All grids are 3D containers */
.grid-3,
.character-grid,
.why-now-grid,
.levers-grid,
.strengths-grid,
.moodboard-grid,
.sound-design-grid,
.narrative-timeline {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* --- 3D BLOCK EFFECTS --- */
/* Base 3D block — shared by all interactive cards/blocks */
.card,
.char-box,
.why-card,
.lever-card,
.mvt-card,
.strength-item,
.sound-item,
.mood-item,
.key-idea-box,
.contact-card {
    transform: translateZ(0) rotateX(0) rotateY(0);
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        border-color 0.3s ease,
        background 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

/* 3D hover — lift + tilt + glow shadow */
.card:hover,
.char-box:hover,
.why-card:hover,
.lever-card:hover,
.mvt-card:hover,
.strength-item:hover,
.sound-item:hover,
.mood-item:hover,
.key-idea-box:hover,
.contact-card:hover {
    transform: translateZ(30px) rotateX(-2deg) rotateY(2deg) scale(1.02);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(41, 98, 255, 0.15),
        inset 0 0 1px rgba(41, 98, 255, 0.2);
}

/* Extra depth for featured elements */
.key-idea-box:hover {
    transform: translateZ(40px) rotateX(-1deg) scale(1.03);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(41, 98, 255, 0.25);
}

/* Character card full — 3D lift */
.character-card-full {
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.character-card-full:hover {
    transform: translateZ(20px);
}

/* Char card image — 3D pop-out on hover */
.char-card-img {
    transform: translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.char-card-img:hover {
    transform: translateZ(25px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* Stat bars — subtle depth */
.stat-bar {
    transform: translateZ(5px);
    box-shadow: 0 2px 8px rgba(41, 98, 255, 0.3);
}

/* Pull quote — 3D depth */
.pull-quote {
    transform-style: preserve-3d;
    transform: translateZ(10px);
    transition: transform 0.3s ease;
}

.pull-quote:hover {
    transform: translateZ(20px) rotateY(1deg);
}

/* Carousel — subtle 3D container */
.carousel-container {
    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.carousel-container:hover {
    transform: translateZ(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Content wrapper floating animation on visible */
@keyframes float-subtle {

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

    50% {
        transform: translateY(-3px) scale(1.001) rotateX(0.2deg);
    }
}

.slide.visible .content-wrapper {
    animation: float-subtle 6s ease-in-out infinite;
    animation-delay: 0.8s;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SCROLL ENTRY ANIMATIONS                                          */
/* ═══════════════════════════════════════════════════════════════ */
.slide .content-wrapper {
    opacity: 0;
    transform: translateY(50px) scale(0.95) rotateX(10deg);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

.slide.visible .content-wrapper {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
}

/* Tilt card — JS-driven 3D mouse tracking */
.tilt-card {
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Decoding cursor */
.decoding-text::after {
    content: '_';
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                       */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .main-title {
        font-size: 3rem;
    }

    .two-col,
    .grid-3,
    .levers-grid,
    .moodboard-grid,
    .sound-design-grid,
    .why-now-grid,
    .sommaire-grid {
        grid-template-columns: 1fr;
    }

    .intention-layout,
    .protagonist-layout,
    .narrative-layout {
        grid-template-columns: 1fr;
    }

    .character-card-full {
        grid-template-columns: 1fr;
    }

    .slide {
        padding: 2rem 1rem;
    }

    #nav-dots {
        display: none;
    }

    .content-wrapper {
        max-height: 85vh;
        padding: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODALS (POP-UPS)                                                 */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* MODALS (POP-UPS) — PREMIUM GLASSMORPHISM                       */
/* ═══════════════════════════════════════════════════════════════ */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Enable scroll on the modal container itself if needed */
    background-color: rgba(0, 2, 5, 0.85);
    backdrop-filter: blur(12px);
    /* Stronger blur for premium feel */
    -webkit-backdrop-filter: blur(12px);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    padding: 2rem 0;
    /* Space top/bottom on mobile */
}

/* Custom Scrollbar for Modal Text */
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

.modal-content {
    background: linear-gradient(135deg, rgba(8, 12, 20, 0.98) 0%, rgba(5, 8, 15, 0.96) 100%);
    margin: auto;
    padding: 3.5rem;
    border: 1px solid rgba(50, 100, 180, 0.3);
    border-top: 1px solid rgba(50, 100, 180, 0.6);
    /* Top light highlight */
    border-radius: 2px;
    width: 85%;
    max-width: 900px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(26, 58, 110, 0.2),
        inset 0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
    color: var(--text-color);
    font-family: var(--font-body);
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

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

.close-btn {
    position: sticky;
    top: 0;
    float: right;
    color: var(--accent-color);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 100;
    background: none;
    padding: 0 0.5rem;
    margin-top: -1rem;
    margin-right: -1rem;
}

.close-btn:hover {
    color: #fff;
    text-shadow: 0 0 15px var(--secondary-color);
    transform: rotate(90deg) scale(1.1);
}

.modal-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

/* Modal Typography */
.modal h3 {
    color: #fff;
    text-shadow: 0 0 10px rgba(30, 77, 140, 0.6);
    font-size: 1.8rem;
    font-family: var(--font-mono);
    letter-spacing: 2px;
    margin: 0;
}

.modal-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.modal-section:last-child {
    border-bottom: none;
}

.modal h4 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.modal h4::before {
    content: '>';
    margin-right: 0.5rem;
    color: var(--accent-color);
}

.modal p {
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 1rem;
    font-weight: 300;
}

.modal .lead {
    font-size: 1.3rem;
    font-weight: 400;
    color: #fff;
    font-style: italic;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent-color);
    background: linear-gradient(90deg, rgba(30, 77, 140, 0.1), transparent);
    padding: 1rem 1.5rem;
    border-radius: 0 4px 4px 0;
}

.modal .highlight {
    color: var(--secondary-color);
    font-weight: 600;
    background: rgba(10, 126, 140, 0.1);
    padding: 0 4px;
    border-radius: 2px;
}

.modal ul,
.modal ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal li {
    margin-bottom: 0.8rem;
    padding-left: 0.5rem;
}

.modal .tech-list li strong {
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.3rem;
}

.stats {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 1px;
    margin-top: -1rem;
    margin-bottom: 2rem;
    display: block;
}

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

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .modal-content {
        padding: 2rem;
        width: 95%;
        margin-top: 10%;
    }

    .modal h3 {
        font-size: 1.4rem;
    }
}


/* Button Styles for Modals */
.btn-primary,
.btn-alert {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover,
.btn-alert:hover {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 20px rgba(26, 58, 110, 0.5);
}

.btn-alert {
    border-color: #ff3c3c;
    color: #ff3c3c;
}

.btn-alert:hover {
    background: #ff3c3c;
    border-color: #ff3c3c;
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.5);
}

/* ═══════════════════════════════════════════════════════════════ */
/* CURSOR TRAIL (ACT III)                                           */
/* ═══════════════════════════════════════════════════════════════ */
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--accent-act-3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 10px var(--accent-act-3);
    animation: fadeTrail 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes fadeTrail {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

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

/* ═══════════════════════════════════════════════════════════════ */
/* ACT IV: OPTICAL SHIFT (BASCULE)                                  */
/* ═══════════════════════════════════════════════════════════════ */
body.act-4 {
    background-color: #111;
    color: #fff;
    /* Animation moved to children to preserve fixed positioning context */
}

/* Apply shake to content elements only */
body.act-4 .slide,
body.act-4 #investigation-sidebar {
    animation: shift-reality 0.2s infinite;
}

/* Disable shake when user toggles it off */
body.act-4.no-shake .slide,
body.act-4.no-shake #investigation-sidebar {
    animation: none;
}

body.act-4.no-shake .content-wrapper {
    transform: none;
}

body.act-4 .content-wrapper {
    position: relative;
    /* Ensure z-index works */
    z-index: 20;
    /* Sit ABOVE the thread (z-5) */
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid red;
    /* Alarm state */
    box-shadow: -5px 0 10px rgba(255, 0, 0, 0.2);
    transform: skewX(-2deg);
}

body.act-4 #dynamic-header {
    background: #000;
    border-bottom: 2px solid #fff;
    color: #fff;
}

@keyframes shift-reality {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-1px, 0);
    }

    40% {
        transform: translate(1px, 0);
    }

    60% {
        transform: translate(0, 1px);
    }

    80% {
        transform: translate(0, -1px);
    }

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

/* ═══════════════════════════════════════════════════════════════ */
/* ACT V: ABSORPTION (TERMINAL)                                     */
/* ═══════════════════════════════════════════════════════════════ */
body.act-5 {
    background-color: #000;
    color: #333;
    /* Fading out */
}

body.act-5 .slide {
    opacity: 0.2;
    filter: blur(4px) grayscale(100%);
    pointer-events: none;
    transition: all 2s ease;
}

/* When Act V is dismissed, restore slides */
body.act-5.act5-dismissed .slide {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

body.act-5.act5-dismissed #absorption-message {
    opacity: 0 !important;
    pointer-events: none;
}

body.act-5.act5-dismissed #nav-dots {
    opacity: 1;
    pointer-events: auto;
}

body.act-5.act5-dismissed #investigation-sidebar {
    opacity: 1;
    pointer-events: auto;
}

body.act-5 #dynamic-header {
    background: transparent;
    border: none;
    color: #333;
}

body.act-5 #investigation-sidebar {
    opacity: 0;
    pointer-events: none;
}

/* Final Message Overlay */
#absorption-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    color: #fff;
    font-size: 2rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
}

body.act-5 #absorption-message {
    animation: fadeInFinal 3s ease forwards 1s;
}

@keyframes fadeInFinal {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* VOYANT INDICATOR (Act III Surveillance Camera Light)              */
/* ═══════════════════════════════════════════════════════════════ */
#voyant {
    display: inline-block;
    width: var(--voyant-size);
    height: var(--voyant-size);
    border-radius: 50%;
    background: var(--voyant-white);
    box-shadow: 0 0 8px var(--voyant-white), 0 0 20px rgba(255, 255, 255, 0.3);
    margin-right: 0.75rem;
    vertical-align: middle;
    opacity: 0;
    transition: all 1.5s ease;
}

/* Voyant visible in Act III+ */
body.act-3 #voyant,
body.act-4 #voyant,
body.act-5 #voyant {
    opacity: 1;
}

/* Voyant white (State) */
body.act-3 #voyant {
    background: var(--voyant-white);
    box-shadow: 0 0 8px var(--voyant-white), 0 0 20px rgba(255, 255, 255, 0.3);
    animation: voyant-pulse 2s ease-in-out infinite;
}

/* Voyant blue (Contaminated) — applied via JS class */
#voyant.contaminated {
    background: var(--voyant-blue) !important;
    box-shadow: 0 0 8px var(--voyant-blue), 0 0 20px rgba(0, 191, 255, 0.4) !important;
    animation: voyant-pulse-blue 1.5s ease-in-out infinite !important;
}

/* Voyant fusion (Act V) */
body.act-5 #voyant {
    background: linear-gradient(135deg, var(--voyant-white) 50%, var(--voyant-blue) 50%);
    box-shadow: 0 0 8px var(--voyant-white), 0 0 8px var(--voyant-blue), 0 0 25px rgba(0, 191, 255, 0.3);
    animation: voyant-fusion 2s ease-in-out infinite;
}

/* Act IV — both colors pulsing */
body.act-4 #voyant {
    width: calc(var(--voyant-size) * 1.2);
    height: calc(var(--voyant-size) * 1.2);
    background: var(--voyant-white);
    box-shadow: 0 0 8px var(--voyant-white), 0 0 8px var(--voyant-blue), 0 0 20px rgba(255, 255, 255, 0.3);
    animation: voyant-shift 3s ease-in-out infinite;
}

@keyframes voyant-pulse {

    0%,
    100% {
        box-shadow: 0 0 8px var(--voyant-white), 0 0 20px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 12px var(--voyant-white), 0 0 30px rgba(255, 255, 255, 0.5);
    }
}

@keyframes voyant-pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 8px var(--voyant-blue), 0 0 20px rgba(0, 191, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 14px var(--voyant-blue), 0 0 35px rgba(0, 191, 255, 0.6);
    }
}

@keyframes voyant-fusion {

    0%,
    100% {
        box-shadow: 0 0 8px #fff, 0 0 8px #00BFFF, 0 0 25px rgba(0, 191, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 14px #fff, 0 0 14px #00BFFF, 0 0 40px rgba(0, 191, 255, 0.5);
    }
}

@keyframes voyant-shift {

    0%,
    100% {
        background: var(--voyant-white);
    }

    50% {
        background: var(--voyant-blue);
    }
}


/* ═══════════════════════════════════════════════════════════════ */
/* REDACTION BARS (Act I Declassification)                          */
/* ═══════════════════════════════════════════════════════════════ */
.redact-bar {
    position: relative;
    display: inline;
}

.redact-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: left center;
    z-index: 1;
}

/* When revealed (via JS or act change), the bar slides away */
.redact-bar.revealed::after {
    transform: scaleX(0);
    transform-origin: right center;
}

/* Auto-reveal when NOT in Act I */
body:not(.act-1) .redact-bar::after {
    transform: scaleX(0);
    transform-origin: right center;
}

/* Classification stamp on cover */
.classification-stamp {
    display: inline-block;
    border: 3px solid var(--accent-act-1);
    color: var(--accent-act-1);
    padding: 0.3rem 1rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    transform: rotate(-5deg);
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.act-1 .classification-stamp {
    opacity: 1;
}

/* Hint: scroll indicator for Act I */
body.act-1 .scroll-indicator {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(211, 47, 47, 0.3);
    }

    50% {
        text-shadow: 0 0 15px rgba(211, 47, 47, 0.6);
    }
}


/* ═══════════════════════════════════════════════════════════════ */
/* ACT TRANSITION OVERLAY                                           */
/* ═══════════════════════════════════════════════════════════════ */
#act-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#act-transition.active {
    opacity: 1;
    animation: transitionFlash 2.5s ease-out forwards;
}

/* Transition themes per act */
#act-transition.trans-1-2 {
    background: rgba(244, 232, 208, 0.95);
    color: #333;
    border: 2px solid #8B4513;
}

#act-transition.trans-2-3 {
    background: rgba(0, 0, 0, 0.95);
    color: #00BFFF;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

#act-transition.trans-3-4 {
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

#act-transition.trans-4-5 {
    background: #000;
    color: #333;
}

@keyframes transitionFlash {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════ */
/* BULL-EYE DISTORTION EFFECT (Act III Progressive)                 */
/* ═══════════════════════════════════════════════════════════════ */
body.bulleye-light {
    /* Activated via JS — main styles in ::before pseudo-element below */
    position: relative;
}

body.bulleye-light::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8000;
    background: radial-gradient(ellipse at center,
            transparent 50%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.4) 100%);
    transition: all 2s ease;
}

body.bulleye-medium::before {
    background: radial-gradient(ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.2) 55%,
            rgba(0, 0, 0, 0.5) 85%,
            rgba(0, 0, 0, 0.7) 100%);
}

body.bulleye-heavy::before {
    background: radial-gradient(ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.25) 45%,
            rgba(0, 191, 255, 0.05) 55%,
            rgba(0, 0, 0, 0.6) 80%,
            rgba(0, 0, 0, 0.85) 100%);
}


/* ═══════════════════════════════════════════════════════════════ */
/* ACT IV ENHANCED: SPLIT ACCENTS                                   */
/* ═══════════════════════════════════════════════════════════════ */
body.act-4 .section-title {
    color: var(--accent-act-4);
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
}

body.act-4 .highlight {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.2), rgba(0, 191, 255, 0.2));
    color: #fff;
}

body.act-4 .btn-primary,
body.act-4 .btn-alert {
    border-color: var(--accent-act-4);
    color: var(--accent-act-4);
}

body.act-4 .btn-primary:hover,
body.act-4 .btn-alert:hover {
    background: var(--accent-act-4);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ACT V ENHANCED: GHOSTLY STATE                                    */
/* ═══════════════════════════════════════════════════════════════ */
body.act-5 .content-wrapper {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.act-5 #nav-dots {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease;
}

/* Blink animation for the REC indicator */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ACT IV: MODAL FIX — modals must ignore shake/skew              */
/* ═══════════════════════════════════════════════════════════════ */
body.act-4 .modal {
    animation: none !important;
    transform: none !important;
}

body.act-4 .modal .modal-content {
    transform: none !important;
    border-color: var(--accent-act-4) !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FIL ROUGE / THREAD (INVESTIGATION TIMELINE)                     */
/* ═══════════════════════════════════════════════════════════════ */
#investigation-thread {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    /* Centered */
    transform: translateX(-50%);
    width: 2px;
    background: var(--accent-act-1);
    z-index: 5;
    /* Behind content (usually z-20) */
    transition: all 1s ease;
    box-shadow: 0 0 5px rgba(211, 47, 47, 0.5);
}

/* Act Transformations per Act */
body.act-3 #investigation-thread,
body.act-4 #investigation-thread {
    background: var(--accent-act-3);
    /* Blue */
    width: 6px;
    /* Thick cable */
    box-shadow: 0 0 15px var(--accent-act-3), 0 0 5px #fff;
    left: 50%;
    transform: translateX(-50%);
}

/* Glitch effect for Act IV thread */
body.act-4 #investigation-thread {
    animation: thread-glitch 0.2s infinite;
}

@keyframes thread-glitch {
    0% {
        opacity: 1;
        transform: translateX(-50%);
    }

    50% {
        opacity: 0.8;
        transform: translateX(calc(-50% + 1px));
    }

    100% {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* Act V Fade */
body.act-5 #investigation-thread {
    filter: blur(2px) grayscale(100%);
    opacity: 0.2;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FLOATING TOGGLE BUTTONS (Shake / Act V Dismiss)                 */
/* ═══════════════════════════════════════════════════════════════ */
.float-toggle {
    position: fixed;
    z-index: 9600;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.float-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Shake Toggle (Act IV) — centered circular button */
#shake-toggle {
    left: 50%;
    transform: translateX(-50%);
    bottom: 4rem;
    /* Prominent placement */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.75rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 10px;
    line-height: 1.2;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#shake-toggle:hover {
    transform: translateX(-50%) scale(1.1);
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

body.act-4 #shake-toggle {
    opacity: 1;
    pointer-events: auto;
}

body.act-4.no-shake #shake-toggle {
    border-color: rgba(0, 191, 255, 0.5);
    color: #00BFFF;
}

/* Act V Dismiss Button — centered bottom */
#act5-dismiss {
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    padding: 0.7rem 2rem;
    border-color: rgba(255, 255, 255, 0.5);
}

body.act-5 #act5-dismiss {
    opacity: 1;
    pointer-events: auto;
    animation: fadeInFinal 3s ease forwards 2s;
}

body.act-5.act5-dismissed #act5-dismiss {
    opacity: 0 !important;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN (MOBILE)                                      */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Layout Adjustments */
    .content-wrapper {
        padding: 1.5rem;
        margin: 1rem 0.5rem;
        width: auto;
        max-width: 100%;
    }

    h1.glitch-text {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Fil Rouge on Mobile */
    #investigation-thread {
        opacity: 0.4;
        left: 20px !important;
        transform: none !important;
    }

    /* Act Transformations for Thread on Mobile */
    body.act-3 #investigation-thread,
    body.act-4 #investigation-thread {
        left: 20px !important;
        transform: none !important;
        width: 4px;
    }

    /* Header */
    #dynamic-header {
        padding: 0.5rem;
        font-size: 0.7rem;
    }

    .header-left,
    .header-right {
        gap: 0.8rem;
    }

    #time-display {
        display: none;
    }

    /* Sidebar as Full-Screen Drawer */
    #investigation-sidebar {
        transform: translateX(-100%) !important;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.98);
        z-index: 9500;
        padding-top: 80px;
        border: none;
        transition: transform 0.3s ease;
    }

    #investigation-sidebar.active {
        transform: translateX(0) !important;
    }

    /* Keep evidence count visible and clickable */
    #evidence-count {
        display: inline-block;
        border: 1px solid currentColor;
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    /* Stabilize Button */
    #shake-toggle {
        width: 60px;
        height: 60px;
        bottom: 1.5rem;
        padding: 5px;
    }

    #shake-toggle span {
        display: none;
    }

    #shake-toggle span:first-child {
        display: block !important;
        font-size: 1.5rem !important;
        margin-top: 0;
    }

    /* Act IV Mobile Adjustments */
    body.act-4 .content-wrapper {
        margin: 0.5rem;
        padding: 1rem;
        transform: skewX(-1deg);
    }
}