/**
 * Cinematic Mode - Film Noir Aesthetic
 * 
 * Dramatic shallow depth of field, film grain, letterboxing.
 * Like watching the Binary Rot universe through a movie camera.
 * High contrast, desaturated with accent color pops.
 */

/* ============================================
   CINEMATIC MODE - Container State
   ============================================ */

[data-mode="cinematic"] {
    /* Noir color palette */
    --mode-primary: #e6c87a;
    /* Gold accent */
    --mode-secondary: #8b7355;
    /* Warm brown */
    --mode-accent: #c9a959;

    /* Deep, cinematic backgrounds */
    --mode-bg-void: #0a0908;
    --mode-bg-deep: #12110f;
    --mode-bg-surface: #1a1916;

    --rot-void: var(--mode-bg-void);
    --rot-deep: var(--mode-bg-deep);
    --rot-surface: var(--mode-bg-surface);
    --rot-border: #2a2824;

    /* Warmer text tones */
    --rot-text-primary: #e8e4dc;
    --rot-text-muted: #a8a498;
    --rot-text-dim: #6a665c;

    /* Cinematic effects */
    --active-glow: 0 0 30px rgba(230, 200, 122, 0.3);
    --glow-intensity: 0.5;
    --scanline-opacity: 0.03;
    --noise-intensity: 0.08;
    --chromatic-offset: 0px;
    --vignette-intensity: 0.7;
    --flicker-intensity: 0;

    /* Film-like blur and grain */
    --film-grain: 0.06;
    --depth-blur: 2px;
}

/* ============================================
   CINEMATIC MODE - Letterboxing
   ============================================ */

[data-mode="cinematic"]::before,
[data-mode="cinematic"]::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    height: 8vh;
    background: #000000;
    z-index: 9999;
    pointer-events: none;
}

[data-mode="cinematic"]::before {
    top: 0;
}

[data-mode="cinematic"]::after {
    bottom: 0;
}

/* ============================================
   CINEMATIC MODE - Global Filter
   ============================================ */

[data-mode="cinematic"] body {
    filter:
        saturate(0.7) contrast(1.15) brightness(0.95);
}

/* ============================================
   CINEMATIC MODE - Overlays
   ============================================ */

[data-mode="cinematic"] .rot-overlay {
    opacity: 1;
}

[data-mode="cinematic"] .rot-overlay__scanlines {
    opacity: var(--scanline-opacity);
    mix-blend-mode: soft-light;
}

[data-mode="cinematic"] .rot-overlay__vignette {
    opacity: var(--vignette-intensity);
    background: radial-gradient(ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.8) 100%);
}

[data-mode="cinematic"] .rot-overlay__grain {
    opacity: var(--film-grain);
    mix-blend-mode: overlay;
}

[data-mode="cinematic"] .rot-overlay__flicker {
    display: none;
}

/* ============================================
   CINEMATIC MODE - Film Grain Layer
   ============================================ */

[data-mode="cinematic"] .rot-overlay__grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filmgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filmgrain)'/%3E%3C/svg%3E");
    animation: film-grain-shift 0.5s steps(10) infinite;
}

@keyframes film-grain-shift {

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

    10% {
        transform: translate(-1%, -1%);
    }

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

    30% {
        transform: translate(-1%, 1%);
    }

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

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

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

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

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

    90% {
        transform: translate(-1%, -1%);
    }
}

/* ============================================
   CINEMATIC MODE - Typography
   ============================================ */

[data-mode="cinematic"] h1,
[data-mode="cinematic"] h2,
[data-mode="cinematic"] h3 {
    color: var(--mode-primary);
    text-shadow: 0 0 40px rgba(230, 200, 122, 0.2);
    letter-spacing: 0.15em;
}

[data-mode="cinematic"] .heading-glitch {
    text-shadow: 0 0 60px rgba(230, 200, 122, 0.3);
    animation: none;
}

[data-mode="cinematic"] .heading-glitch::before,
[data-mode="cinematic"] .heading-glitch::after {
    display: none;
}

[data-mode="cinematic"] .text-neon {
    color: var(--mode-primary);
    text-shadow: 0 0 20px rgba(230, 200, 122, 0.5);
}

[data-mode="cinematic"] .hero-subtitle {
    font-style: italic;
    letter-spacing: 0.3em;
}

/* ============================================
   CINEMATIC MODE - Depth of Field Effect
   ============================================ */

/* Background sections get blur */
[data-mode="cinematic"] .features,
[data-mode="cinematic"] .gallery,
[data-mode="cinematic"] .testimonials {
    position: relative;
}

[data-mode="cinematic"] .features::before,
[data-mode="cinematic"] .gallery::before,
[data-mode="cinematic"] .testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1px);
    mask-image: linear-gradient(to bottom,
            black 0%,
            transparent 20%,
            transparent 80%,
            black 100%);
    pointer-events: none;
    z-index: 0;
}

/* Focus "pulls" on scroll - elements in viewport are sharper */
[data-mode="cinematic"] .hero-content,
[data-mode="cinematic"] .story-content,
[data-mode="cinematic"] .cta-content,
[data-mode="cinematic"] .final-content {
    filter: blur(0);
    transition: filter 0.5s ease;
}

/* ============================================
   CINEMATIC MODE - Buttons
   ============================================ */

[data-mode="cinematic"] .btn {
    background: transparent;
    border: 1px solid var(--mode-primary);
    color: var(--mode-primary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 300;
    box-shadow: none;
}

[data-mode="cinematic"] .btn:hover {
    background: var(--mode-primary);
    color: var(--mode-bg-void);
    box-shadow: 0 0 30px rgba(230, 200, 122, 0.3);
}

[data-mode="cinematic"] .btn::before {
    display: none;
}

[data-mode="cinematic"] .social-btn {
    border-color: var(--rot-text-dim);
    color: var(--rot-text-muted);
}

[data-mode="cinematic"] .social-btn:hover {
    border-color: var(--mode-primary);
    color: var(--mode-primary);
}

/* ============================================
   CINEMATIC MODE - Cards
   ============================================ */

[data-mode="cinematic"] .feature {
    background: rgba(26, 25, 22, 0.8);
    border: 1px solid var(--rot-border);
}

[data-mode="cinematic"] .feature:hover {
    border-color: var(--mode-primary);
    box-shadow: 0 0 40px rgba(230, 200, 122, 0.1);
}

[data-mode="cinematic"] .feature h3 {
    color: var(--mode-primary);
}

[data-mode="cinematic"] .video-card {
    border: 1px solid var(--rot-border);
}

[data-mode="cinematic"] .video-card:hover {
    border-color: var(--mode-primary);
}

[data-mode="cinematic"] .video-card img {
    filter: saturate(0.5) contrast(1.2);
    transition: filter var(--duration-normal);
}

[data-mode="cinematic"] .video-card:hover img {
    filter: saturate(0.8) contrast(1.3);
}

/* ============================================
   CINEMATIC MODE - Testimonials
   ============================================ */

[data-mode="cinematic"] .testimonial {
    background: rgba(26, 25, 22, 0.6);
    border-left-color: var(--mode-primary);
    font-style: italic;
}

[data-mode="cinematic"] .testimonial span {
    color: var(--mode-primary);
    font-style: normal;
}

/* ============================================
   CINEMATIC MODE - Occasional Film Burns
   ============================================ */

@keyframes film-burn {

    0%,
    94%,
    100% {
        opacity: 0;
    }

    95% {
        opacity: 0.1;
        background: radial-gradient(ellipse at 80% 20%,
                rgba(255, 200, 100, 0.4),
                transparent 50%);
    }

    97% {
        opacity: 0.15;
        background: radial-gradient(ellipse at 20% 80%,
                rgba(255, 150, 50, 0.3),
                transparent 40%);
    }
}

[data-mode="cinematic"] .rot-overlay__glitch-line {
    display: block;
    animation: film-burn 20s linear infinite;
    mix-blend-mode: screen;
}