/* ===== NETFLIX SLIDES CSS ===== */

/* ---- PROGRESS DOTS ---- */
.slide-progress { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 100; opacity: 0; transition: opacity 0.3s; }
.slide-progress.visible { opacity: 1; }
.slide-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; }
.slide-dot.active { background: #fff; width: 22px; border-radius: 3px; }

/* ======================================================
   BACKGROUNDS — NETFLIX BRAND: RED, DARK, WHITE VARIANTS
   ====================================================== */
.slide-inner {
    overflow: hidden;
    position: relative;
}

.s-bg-nf-intro      { background: linear-gradient(135deg, #E50914, #141414) !important; }
.s-bg-nf-numbers    { background: linear-gradient(135deg, #B20710, #E50914) !important; }
.s-bg-nf-completion { background: linear-gradient(135deg, #141414, #831010) !important; }
.s-bg-nf-peakseason { background: linear-gradient(135deg, #E50914, #1A0A2E) !important; }
.s-bg-nf-genre      { background: linear-gradient(135deg, #E50914, #8B0000) !important; }
.s-bg-nf-graveyard  { background: linear-gradient(135deg, #0A0A0A, #3D0C0C) !important; }
.s-bg-nf-binge      { background: linear-gradient(135deg, #1A1A2E, #E50914) !important; }
.s-bg-nf-password   { background: linear-gradient(135deg, #831010, #141414) !important; }
.s-bg-nf-sleep      { background: linear-gradient(135deg, #0A1628, #2C0B0B) !important; }
.s-bg-nf-rewatch    { background: linear-gradient(135deg, #E50914, #2C0B0B) !important; }
.s-bg-nf-cost       { background: linear-gradient(135deg, #141414, #B20710) !important; }
.s-bg-nf-stillwatch { background: linear-gradient(135deg, #141414, #E50914) !important; }
.s-bg-nf-addiction  { background: linear-gradient(135deg, #E50914, #141414) !important; }
.s-bg-nf-persona    { background: linear-gradient(135deg, #B20710, #141414) !important; }

/* ---- SLIDE CONTENT LAYOUT ---- */
.s-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 400px; }
.s-watermark { position: absolute; bottom: 1.2rem; right: 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 2px; color: rgba(255,255,255,0.25); z-index: 2; }
.s-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 5px; color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; text-transform: uppercase; }
.s-big-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(3.5rem, 14vw, 7rem); font-weight: 700; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.s-big-text { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; }
.s-caption { font-size: 1rem; color: rgba(255,255,255,0.8); margin-top: 0.5rem; }
.s-subtitle { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 500; max-width: 320px; line-height: 1.4; color: rgba(255,255,255,0.9); }
.s-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.5rem, 10vw, 4rem); font-weight: 700; margin-bottom: 1rem; text-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.s-roast { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-top: 1.5rem; max-width: 320px; line-height: 1.5; font-style: italic; background: rgba(0,0,0,0.2); padding: 0.8rem 1.2rem; border-radius: 12px; backdrop-filter: blur(10px); }
.s-next { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-size: 1.2rem; cursor: pointer; padding: 0.6rem 1.8rem; border-radius: 50px; transition: all 0.3s; z-index: 10; font-family: 'Space Grotesk', sans-serif; }
.s-next:hover { border-color: rgba(255,255,255,0.8); color: #fff; background: rgba(255,255,255,0.25); }

/* ---- ADDICTION METER ---- */
.meter-bar-wrap { width: 100%; max-width: 300px; margin-top: 1rem; }
.meter-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; color: rgba(255,255,255,0.6); text-transform: uppercase; margin-bottom: 6px; }
.meter-track { width: 100%; height: 16px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.meter-fill { height: 100%; width: 0%; border-radius: 10px; background: linear-gradient(90deg, #06C167, #FFD700, #FF8C00, #E50914, #DC143C); transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.meter-level { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-top: 6px; text-align: center; }


/* ============================================================
   SCENE ANIMATIONS — NETFLIX / STREAMING THEMED SHAPES
   TV screens, popcorn, remotes, film reels, couches,
   clapboards, Netflix N logo, progress bars
   ALL ELEMENTS SCALED 2-3x FOR CINEMATIC IMPACT
   ============================================================ */
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

/* ======================
   SLIDE 0 — INTRO
   Netflix "N" logo shape + TV screen + remote control
   ====================== */
/* -- Netflix N Logo (2.5x) -- */
.intro-n-logo {
    position: absolute; top: 5%; right: 4%;
    width: 250px; height: 325px;
    animation: introFloat 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
}
/* Left vertical bar of N */
.intro-n-logo::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 55px; height: 100%;
    background: #E50914;
    border-radius: 6px;
    box-shadow: 195px 0 0 #E50914;
}
/* Diagonal connector of N */
.intro-n-logo::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 55px; height: 100%;
    background: #E50914;
    border-radius: 6px;
    transform: skewX(-20deg);
    transform-origin: top left;
}

/* -- TV Screen (2.5x) -- */
.intro-tv {
    position: absolute; bottom: 10%; left: 3%;
    width: 350px; height: 250px;
    background: linear-gradient(135deg, #1a1a2e, #0f0f23);
    border-radius: 16px;
    border: 8px solid #333;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5), inset 0 0 60px rgba(229,9,20,0.2);
    animation: introFloat 6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1s infinite alternate;
}
/* Screen glare */
.intro-tv::before {
    content: ''; position: absolute; top: 16px; left: 16px;
    width: 40%; height: 30%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    border-radius: 8px;
}
/* TV stand */
.intro-tv::after {
    content: ''; position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 28px;
    background: #333;
    border-radius: 0 0 16px 16px;
}

/* -- Remote Control (2x) -- */
.intro-remote {
    position: absolute; top: 55%; left: 55%;
    width: 90px; height: 260px;
    background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
    border-radius: 20px 20px 44px 44px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%) rotate(15deg);
    animation: remoteFloat 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s infinite alternate;
}
/* Power button (red circle at top) */
.intro-remote::before {
    content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px;
    background: #E50914;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(229,9,20,0.7),
                0 44px 0 rgba(255,255,255,0.2), 28px 44px 0 rgba(255,255,255,0.2), -28px 44px 0 rgba(255,255,255,0.2),
                0 72px 0 rgba(255,255,255,0.15), 28px 72px 0 rgba(255,255,255,0.15), -28px 72px 0 rgba(255,255,255,0.15);
}
/* Navigation circle */
.intro-remote::after {
    content: ''; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 52px;
    border: 6px solid rgba(255,255,255,0.2);
    border-radius: 50%;
}

/* ======================
   SLIDE 1 — THE NUMBERS
   Popcorn bucket with overflowing kernels
   ====================== */
/* Popcorn bucket — trapezoid shape (2.5x) */
.numbers-bucket {
    position: absolute; bottom: 5%; right: 2%;
    width: 300px; height: 350px;
    background: linear-gradient(180deg, #E50914, #B20710);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: bucketWobble 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}
/* Bucket stripe */
.numbers-bucket::before {
    content: ''; position: absolute; top: 30%; left: 5%; right: 5%;
    height: 30px;
    background: rgba(255,255,255,0.3);
}
/* Bucket top rim */
.numbers-bucket::after {
    content: ''; position: absolute; top: -14px; left: 5%; right: 5%;
    height: 24px;
    background: #fff;
    border-radius: 6px;
}
/* Popcorn kernels overflowing (2x) */
.numbers-kernel {
    position: absolute;
    background: #FFF8DC;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset -6px -6px 10px rgba(200,180,100,0.3);
    animation: kernelPop 3s ease-in-out infinite;
}
.nk-1 { bottom: 55%; right: 8%; width: 44px; height: 40px; animation-delay: 0s; }
.nk-2 { bottom: 60%; right: 18%; width: 36px; height: 32px; animation-delay: 0.4s; }
.nk-3 { bottom: 57%; right: 0%; width: 40px; height: 36px; animation-delay: 0.8s; }
.nk-4 { bottom: 64%; right: 12%; width: 32px; height: 28px; animation-delay: 1.2s; }

/* Film reel floating top-left (2.5x) */
.numbers-reel {
    position: absolute; top: 5%; left: 4%;
    width: 250px; height: 250px;
    border: 14px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: reelSpin 8s linear infinite;
}
/* Center hub */
.numbers-reel::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 55px; height: 55px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    box-shadow: 0 -75px 0 rgba(255,255,255,0.2), 0 75px 0 rgba(255,255,255,0.2),
                -75px 0 0 rgba(255,255,255,0.2), 75px 0 0 rgba(255,255,255,0.2);
}
/* Film strip */
.numbers-reel::after {
    content: ''; position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 35px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 14px, transparent 14px, transparent 24px);
}

/* ======================
   SLIDE 2 — COMPLETION RATE
   Progress bar with scrubber + clapboard
   ====================== */
/* Movie clapboard (2.5x) */
.completion-clapboard {
    position: absolute; top: 4%; right: 3%;
    width: 350px; height: 275px;
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
    animation: clapboardFloat 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}
/* Clapboard striped top (the clapper) */
.completion-clapboard::before {
    content: ''; position: absolute; top: -50px; left: 0; right: 0;
    height: 60px;
    background: repeating-linear-gradient(
        -45deg,
        #fff 0px, #fff 18px,
        #1a1a1a 18px, #1a1a1a 36px
    );
    border-radius: 8px 8px 0 0;
    transform-origin: bottom left;
    animation: clapperSnap 4s ease-in-out infinite;
}
/* Clapboard text lines */
.completion-clapboard::after {
    content: ''; position: absolute; top: 50px; left: 30px; right: 30px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    box-shadow: 0 35px 0 rgba(255,255,255,0.18), 0 70px 0 rgba(255,255,255,0.12), 0 105px 0 rgba(255,255,255,0.08);
}

/* Progress bar */
.completion-progress {
    position: absolute; bottom: 18%; left: 10%; right: 10%;
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    animation: progressAppear 2s ease-out forwards;
}
/* Progress fill */
.completion-progress::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 65%;
    height: 100%;
    background: #E50914;
    border-radius: 4px;
    animation: progressFill 3s ease-out infinite;
}
/* Scrubber dot */
.completion-progress::after {
    content: ''; position: absolute; top: 50%; left: 65%; transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    animation: scrubberMove 3s ease-out infinite;
}

/* Floating TV shapes (2.5x) */
.completion-tv {
    position: absolute; bottom: 6%; left: 4%;
    width: 200px; height: 140px;
    background: linear-gradient(135deg, #0f0f23, #1a1a2e);
    border-radius: 12px;
    border: 6px solid #333;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 0 30px rgba(229,9,20,0.15);
    animation: tvFloat 6s ease-in-out 1.5s infinite alternate;
}
.completion-tv::before {
    content: ''; position: absolute; top: 10px; left: 10px;
    width: 30%; height: 25%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    border-radius: 6px;
}
.completion-tv::after {
    content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    width: 85px; height: 16px;
    background: #333;
    border-radius: 0 0 12px 12px;
}

/* ======================
   SLIDE 3 — PEAK SEASON
   Popcorn kernels popping in seasonal pattern (2x)
   ====================== */
.peakseason-kernel {
    position: absolute;
    background: #FFF8DC;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: inset -6px -6px 10px rgba(200,180,100,0.3);
    animation: peakKernelPop 2.5s ease-in-out infinite;
}
.pk-1 { top: 5%; left: 8%; width: 44px; height: 40px; animation-delay: 0s; }
.pk-2 { top: 10%; right: 12%; width: 36px; height: 32px; animation-delay: 0.3s; }
.pk-3 { top: 22%; left: 3%; width: 40px; height: 36px; animation-delay: 0.6s; }
.pk-4 { top: 16%; right: 5%; width: 48px; height: 44px; animation-delay: 0.9s; }
.pk-5 { bottom: 16%; left: 5%; width: 32px; height: 28px; animation-delay: 1.2s; }
.pk-6 { bottom: 10%; right: 8%; width: 44px; height: 40px; animation-delay: 1.5s; }
.pk-7 { bottom: 26%; left: 12%; width: 36px; height: 32px; animation-delay: 1.8s; }
.pk-8 { bottom: 20%; right: 3%; width: 40px; height: 36px; animation-delay: 2.1s; }

/* ======================
   SLIDE 4 — GENRE IDENTITY
   Film reel + couch/sofa (2.5x)
   ====================== */
/* Film reel */
.genre-reel {
    position: absolute; top: 3%; left: 3%;
    width: 300px; height: 300px;
    border: 16px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    animation: reelSpin 6s linear infinite;
}
.genre-reel::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65px; height: 65px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    box-shadow: 0 -90px 0 16px rgba(255,255,255,0.12), 0 90px 0 16px rgba(255,255,255,0.12),
                -90px 0 0 16px rgba(255,255,255,0.12), 90px 0 0 16px rgba(255,255,255,0.12);
}
/* Film strip trailing from reel */
.genre-reel::after {
    content: ''; position: absolute; top: -16px; right: -150px;
    width: 175px; height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    box-shadow: inset 0 6px 0 rgba(255,255,255,0.08), inset 0 -6px 0 rgba(255,255,255,0.08);
}

/* Couch / Sofa (2x) */
.genre-couch {
    position: absolute; bottom: 6%; right: 2%;
    width: 320px; height: 130px;
    background: linear-gradient(180deg, #4a2020, #3a1515);
    border-radius: 60px 60px 16px 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    animation: couchBounce 5s ease-in-out infinite alternate;
}
/* Couch back */
.genre-couch::before {
    content: ''; position: absolute; top: -50px; left: 16px; right: 16px;
    height: 60px;
    background: linear-gradient(180deg, #5a2828, #4a2020);
    border-radius: 40px 40px 0 0;
}
/* Couch armrests */
.genre-couch::after {
    content: ''; position: absolute; top: -20px; left: -24px;
    width: 36px; height: 100px;
    background: #4a2020;
    border-radius: 20px 0 0 20px;
    box-shadow: 370px 0 0 #4a2020;
}

/* Popcorn kernel floating (2x) */
.genre-kernel {
    position: absolute; top: 42%; right: 48%;
    width: 40px; height: 36px;
    background: #FFF8DC;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: kernelDrift 4s ease-in-out infinite;
}

/* ======================
   SLIDE 5 — SHOW GRAVEYARD
   Tombstone shapes sinking + TV with static (2.5x)
   ====================== */
.graveyard-tombstone {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border-radius: 60px 60px 0 0;
    animation: tombstoneSink 4s ease-in-out infinite;
}
/* Cross on tombstone */
.graveyard-tombstone::before {
    content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
    width: 8px; height: 30%;
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 0 0 transparent;
}
.graveyard-tombstone::after {
    content: ''; position: absolute; top: 28%; left: 50%; transform: translateX(-50%);
    width: 40%; height: 8px;
    background: rgba(255,255,255,0.2);
}
.gt-1 { bottom: 3%; left: 5%; width: 175px; height: 250px; animation-delay: 0s; }
.gt-2 { bottom: 5%; left: 35%; width: 140px; height: 200px; animation-delay: 0.6s; }
.gt-3 { bottom: 1%; right: 6%; width: 160px; height: 225px; animation-delay: 1.2s; }

/* TV with static (2.5x) */
.graveyard-tv-static {
    position: absolute; top: 4%; right: 4%;
    width: 275px; height: 200px;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.08) 2px,
        rgba(255,255,255,0.03) 4px
    );
    border-radius: 12px;
    border: 8px solid #333;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    animation: staticFlicker 0.3s step-end infinite;
}
.graveyard-tv-static::after {
    content: ''; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 20px;
    background: #333;
    border-radius: 0 0 12px 12px;
}

/* ======================
   SLIDE 6 — BINGE REPORT
   TV screen with glow + progress bars stacked
   ====================== */
/* Giant TV (MASSIVE — 400x280) */
.binge-tv {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 400px; height: 280px;
    background: linear-gradient(135deg, #0a0a1a, #141428);
    border-radius: 16px;
    border: 8px solid #2a2a2a;
    box-shadow: 0 0 100px rgba(229,9,20,0.3), 0 30px 80px rgba(0,0,0,0.6);
    animation: tvGlow 3s ease-in-out infinite alternate;
}
/* Screen glare */
.binge-tv::before {
    content: ''; position: absolute; top: 16px; left: 16px;
    width: 45%; height: 35%;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    border-radius: 8px;
}
/* TV stand */
.binge-tv::after {
    content: ''; position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
    width: 140px; height: 30px;
    background: #2a2a2a;
    border-radius: 0 0 16px 16px;
}

/* Stacked progress bars (episodes) */
.binge-bar {
    position: absolute;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    left: 15%;
    right: 15%;
}
.binge-bar::before {
    content: ''; position: absolute; top: 0; left: 0;
    height: 100%;
    background: #E50914;
    border-radius: 4px;
    animation: barFillAnim 2.5s ease-out infinite;
}
.bb-1 { top: 22%; }
.bb-1::before { width: 100%; animation-delay: 0s; }
.bb-2 { top: 26%; }
.bb-2::before { width: 100%; animation-delay: 0.3s; }
.bb-3 { top: 30%; }
.bb-3::before { width: 75%; animation-delay: 0.6s; }

/* Remote floating (2x) */
.binge-remote {
    position: absolute; bottom: 8%; right: 5%;
    width: 70px; height: 200px;
    background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
    border-radius: 16px 16px 36px 36px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: remoteFloat 5s ease-in-out infinite alternate;
}
.binge-remote::before {
    content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 20px;
    background: #E50914;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(229,9,20,0.6);
}

/* ======================
   SLIDE 7 — PASSWORD SHARING
   Netflix N logo + key shape + lock (2x)
   ====================== */
/* Netflix N */
.password-n {
    position: absolute; top: 4%; left: 6%;
    width: 200px; height: 260px;
    animation: nLogoFloat 5s ease-in-out infinite alternate;
}
.password-n::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 44px; height: 100%;
    background: #E50914;
    border-radius: 6px;
    box-shadow: 156px 0 0 #E50914;
}
.password-n::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 44px; height: 100%;
    background: #E50914;
    border-radius: 6px;
    transform: skewX(-20deg);
    transform-origin: top left;
}

/* Key shape (2x) */
.password-key {
    position: absolute; bottom: 12%; right: 6%;
    width: 200px; height: 80px;
    animation: keyFloat 4s ease-in-out infinite alternate;
}
/* Key head (circle) */
.password-key::before {
    content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    width: 80px; height: 80px;
    border: 10px solid rgba(255,215,0,0.7);
    border-radius: 50%;
    background: transparent;
}
/* Key shaft + teeth */
.password-key::after {
    content: ''; position: absolute; top: 50%; left: 70px; transform: translateY(-50%);
    width: 120px; height: 12px;
    background: rgba(255,215,0,0.7);
    border-radius: 6px;
    box-shadow: 80px 16px 0 rgba(255,215,0,0.5), 100px 16px 0 rgba(255,215,0,0.5);
}

/* Lock shape (2x) */
.password-lock {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
    width: 120px; height: 100px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    animation: lockShake 2s ease-in-out infinite;
}
/* Lock shackle */
.password-lock::before {
    content: ''; position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 52px;
    border: 10px solid rgba(255,255,255,0.25);
    border-bottom: none;
    border-radius: 40px 40px 0 0;
}
/* Keyhole */
.password-lock::after {
    content: ''; position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
    width: 20px; height: 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    box-shadow: 0 20px 0 0 rgba(255,255,255,0.3);
}

/* ======================
   SLIDE 8 — SLEEP SCORE
   Z letters floating up + couch indent (2x)
   ====================== */
.sleep-z {
    position: absolute;
    color: rgba(255,255,255,0.2);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: italic;
    animation: sleepZFloat 3.5s ease-in-out infinite;
}
.slz-1 { top: 30%; right: 10%; font-size: 40px; animation-delay: 0s; }
.slz-2 { top: 22%; right: 16%; font-size: 56px; animation-delay: 0.5s; }
.slz-3 { top: 14%; right: 8%; font-size: 76px; animation-delay: 1s; }
.slz-4 { top: 4%; right: 14%; font-size: 96px; animation-delay: 1.5s; }

/* Couch with body indent (2x) */
.sleep-couch-indent {
    position: absolute; bottom: 5%; left: 4%;
    width: 320px; height: 120px;
    background: linear-gradient(180deg, #2a2a44, #1a1a33);
    border-radius: 56px 56px 16px 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    animation: couchBounce 6s ease-in-out infinite alternate;
}
/* Couch back */
.sleep-couch-indent::before {
    content: ''; position: absolute; top: -44px; left: 16px; right: 16px;
    height: 52px;
    background: linear-gradient(180deg, #3a3a5a, #2a2a44);
    border-radius: 36px 36px 0 0;
}
/* Body indent (depression in cushion) */
.sleep-couch-indent::after {
    content: ''; position: absolute; top: 16px; left: 30%; right: 30%;
    height: 40px;
    background: rgba(0,0,0,0.2);
    border-radius: 0 0 50% 50%;
}

/* ======================
   SLIDE 9 — THE REWATCHER
   Couch + TV with replay arrows (2x)
   ====================== */
/* Couch */
.rewatch-couch {
    position: absolute; bottom: 5%; left: 2%;
    width: 300px; height: 120px;
    background: linear-gradient(180deg, #4a2020, #3a1515);
    border-radius: 56px 56px 16px 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    animation: couchBounce 6s ease-in-out infinite alternate;
}
.rewatch-couch::before {
    content: ''; position: absolute; top: -44px; left: 16px; right: 16px;
    height: 56px;
    background: linear-gradient(180deg, #5a2828, #4a2020);
    border-radius: 36px 36px 0 0;
}
.rewatch-couch::after {
    content: ''; position: absolute; top: -16px; left: -20px;
    width: 32px; height: 90px;
    background: #4a2020;
    border-radius: 20px 0 0 20px;
    box-shadow: 348px 0 0 #4a2020;
}

/* Replay / loop arrows (circle with gap) (2x) */
.rewatch-loop {
    position: absolute; top: 6%; right: 6%;
    width: 200px; height: 200px;
    border: 10px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-right-color: transparent;
    animation: reelSpin 3s linear infinite;
}
/* Arrow head */
.rewatch-loop::before {
    content: ''; position: absolute; top: -4px; right: 16px;
    width: 0; height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 28px solid rgba(255,255,255,0.3);
    transform: rotate(-30deg);
}

/* TV screen (2.5x) */
.rewatch-tv {
    position: absolute; top: 25%; right: 30%;
    width: 250px; height: 175px;
    background: linear-gradient(135deg, #0a0a1a, #141428);
    border-radius: 12px;
    border: 6px solid #333;
    box-shadow: 0 0 60px rgba(229,9,20,0.2), 0 20px 50px rgba(0,0,0,0.5);
    animation: tvFloat 5s ease-in-out infinite alternate;
}
.rewatch-tv::before {
    content: ''; position: absolute; top: 10px; left: 10px;
    width: 35%; height: 25%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    border-radius: 6px;
}
.rewatch-tv::after {
    content: ''; position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 16px;
    background: #333;
    border-radius: 0 0 12px 12px;
}

/* ======================
   SLIDE 10 — NETFLIX COST
   Dollar signs with Netflix N overlay (2x)
   ====================== */
.cost-dollar {
    position: absolute;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: rgba(229,9,20,0.25);
    animation: dollarFloat 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}
.cost-dollar::before { content: '$'; }
.cd-1 { top: 4%; right: 5%; font-size: 160px; }
.cd-2 { bottom: 10%; left: 2%; font-size: 120px; animation-delay: 1.5s; }
.cd-3 { top: 35%; left: 10%; font-size: 100px; animation-delay: 0.8s; }

/* Netflix N overlay (2x) */
.cost-n-overlay {
    position: absolute; bottom: 6%; right: 4%;
    width: 160px; height: 210px;
    opacity: 0.12;
}
.cost-n-overlay::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 36px; height: 100%;
    background: #E50914;
    border-radius: 4px;
    box-shadow: 124px 0 0 #E50914;
}
.cost-n-overlay::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 36px; height: 100%;
    background: #E50914;
    border-radius: 4px;
    transform: skewX(-20deg);
    transform-origin: top left;
}

/* ======================
   SLIDE 11 — STILL WATCHING
   "Are you still watching?" UI mockup + sleepy couch (2x)
   ====================== */
/* Dialog box */
.stillwatch-dialog {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 400px; height: 240px;
    background: rgba(20,20,20,0.9);
    border-radius: 20px;
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 30px 100px rgba(0,0,0,0.6);
    animation: dialogPulse 3s ease-in-out infinite;
}
/* Dialog text line */
.stillwatch-dialog::before {
    content: ''; position: absolute; top: 50px; left: 40px; right: 40px;
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    box-shadow: 0 28px 0 rgba(255,255,255,0.2);
}
/* Dialog button */
.stillwatch-dialog::after {
    content: ''; position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    width: 160px; height: 52px;
    background: #E50914;
    border-radius: 8px;
}

/* Sleepy couch (2x) */
.stillwatch-couch {
    position: absolute; bottom: 5%; left: 6%;
    width: 260px; height: 100px;
    background: linear-gradient(180deg, #3a3a5a, #2a2a44);
    border-radius: 48px 48px 12px 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    animation: couchBounce 7s ease-in-out infinite alternate;
}
.stillwatch-couch::before {
    content: ''; position: absolute; top: -36px; left: 12px; right: 12px;
    height: 44px;
    background: linear-gradient(180deg, #4a4a6a, #3a3a5a);
    border-radius: 32px 32px 0 0;
}

/* Zzz sleep indicators (2x) */
.stillwatch-z {
    position: absolute;
    color: rgba(255,255,255,0.25);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: italic;
    animation: zFloat 3s ease-in-out infinite;
}
.sz-1 { bottom: 26%; left: 30%; font-size: 36px; animation-delay: 0s; }
.sz-2 { bottom: 34%; left: 36%; font-size: 48px; animation-delay: 0.5s; }
.sz-3 { bottom: 44%; left: 32%; font-size: 64px; animation-delay: 1s; }

/* ======================
   SLIDE 12 — ADDICTION METER
   Meter bar with Netflix Red gradient + pulse effects (2x)
   ====================== */
.addiction-bar-bg {
    position: absolute; bottom: 15%; left: 10%; right: 10%;
    height: 20px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}
.addiction-bar-bg::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #06C167, #FFD700, #FF8C00, #E50914, #DC143C);
    border-radius: 10px;
    animation: addictionBarPulse 3s ease-in-out infinite;
}

.addiction-pulse {
    position: absolute;
    border-radius: 50%;
    background: rgba(229,9,20,0.15);
    animation: addictionPulseAnim 3s ease-in-out infinite;
}
.ap-1 { top: 8%; right: 6%; width: 160px; height: 160px; animation-delay: 0s; }
.ap-2 { top: 22%; left: 4%; width: 120px; height: 120px; animation-delay: 1s; }
.ap-3 { bottom: 28%; right: 10%; width: 100px; height: 100px; animation-delay: 2s; }

/* ======================
   SLIDE 13 — PERSONA
   Glowing card + confetti shapes + N logo (bigger)
   ====================== */
.persona-glow {
    position: absolute; top: 50%; left: 50%;
    width: 600px; height: 700px;
    background: radial-gradient(circle, rgba(229,9,20,0.25), transparent 70%);
    transform: translate(-50%, -50%);
    animation: personaGlow 3s ease-in-out infinite alternate;
}
.persona-confetti {
    position: absolute;
    width: 24px; height: 60px;
    border-radius: 12px;
    animation: confettiDrift 4s ease-in-out infinite;
}
.pc-1 { top: 8%; left: 8%; background: #E50914; animation-delay: 0s; }
.pc-2 { top: 12%; right: 12%; background: #FFD700; animation-delay: 0.5s; width: 16px; height: 40px; }
.pc-3 { bottom: 18%; left: 12%; background: #fff; animation-delay: 1s; }
.pc-4 { bottom: 8%; right: 8%; background: #E50914; animation-delay: 1.5s; width: 20px; height: 50px; }
.pc-5 { top: 38%; left: 3%; background: #FFD700; animation-delay: 2s; width: 16px; height: 40px; }
.pc-6 { top: 28%; right: 3%; background: #fff; animation-delay: 0.8s; }

/* Persona N logo watermark (2x) */
.persona-n {
    position: absolute; bottom: 10%; right: 5%;
    width: 140px; height: 180px;
    opacity: 0.15;
}
.persona-n::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 32px; height: 100%;
    background: #fff;
    border-radius: 4px;
    box-shadow: 108px 0 0 #fff;
}
.persona-n::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 32px; height: 100%;
    background: #fff;
    border-radius: 4px;
    transform: skewX(-20deg);
    transform-origin: top left;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes introFloat {
    0% { transform: translateY(0) rotate(-3deg); }
    100% { transform: translateY(-50px) rotate(3deg); }
}
@keyframes remoteFloat {
    0% { transform: translate(-50%, -50%) rotate(15deg) translateY(0); }
    100% { transform: translate(-50%, -50%) rotate(8deg) translateY(-40px); }
}
@keyframes bucketWobble {
    0% { transform: rotate(-3deg) translateY(0); }
    100% { transform: rotate(3deg) translateY(-20px); }
}
@keyframes kernelPop {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-35px) scale(1.2); }
}
@keyframes kernelDrift {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
    50% { transform: translateY(-45px) rotate(180deg); opacity: 1; }
    100% { transform: translateY(0) rotate(360deg); opacity: 0.5; }
}
@keyframes reelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes clapboardFloat {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-40px) rotate(3deg); }
}
@keyframes clapperSnap {
    0%, 80%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(-15deg); }
    90% { transform: rotate(0deg); }
}
@keyframes progressFill {
    0% { width: 0%; }
    60%, 100% { width: 65%; }
}
@keyframes scrubberMove {
    0% { left: 0%; }
    60%, 100% { left: 65%; }
}
@keyframes progressAppear {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}
@keyframes tvFloat {
    0% { transform: translateY(0) rotate(-1deg); }
    100% { transform: translateY(-30px) rotate(2deg); }
}
@keyframes tvGlow {
    0% { box-shadow: 0 0 60px rgba(229,9,20,0.2), 0 30px 80px rgba(0,0,0,0.6); }
    100% { box-shadow: 0 0 120px rgba(229,9,20,0.45), 0 30px 80px rgba(0,0,0,0.6); }
}
@keyframes barFillAnim {
    0% { width: 0%; opacity: 0; }
    30% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}
@keyframes couchBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}
@keyframes nLogoFloat {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-40px) rotate(3deg); }
}
@keyframes keyFloat {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-30px) rotate(5deg); }
}
@keyframes lockShake {
    0%, 100% { transform: translate(-50%, -50%) rotate(0); }
    15% { transform: translate(-48%, -50%) rotate(3deg); }
    30% { transform: translate(-52%, -50%) rotate(-3deg); }
    45% { transform: translate(-50%, -50%) rotate(0); }
}
@keyframes dialogPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 30px 100px rgba(0,0,0,0.6); }
    50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 40px 120px rgba(0,0,0,0.7); }
}
@keyframes zFloat {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    50% { transform: translateY(-40px) scale(1); opacity: 0.3; }
    100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}
@keyframes personaGlow {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes confettiDrift {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-60px) rotate(180deg); opacity: 1; }
    100% { transform: translateY(0) rotate(360deg); opacity: 0.6; }
}

/* --- NEW KEYFRAMES for new slides --- */
@keyframes peakKernelPop {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.4; }
    30% { transform: translateY(-50px) scale(1.4) rotate(15deg); opacity: 1; }
    60% { transform: translateY(-25px) scale(0.9) rotate(-5deg); opacity: 0.8; }
}
@keyframes tombstoneSink {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(15px); opacity: 0.3; }
}
@keyframes staticFlicker {
    0% { opacity: 0.6; }
    25% { opacity: 0.8; }
    50% { opacity: 0.5; }
    75% { opacity: 0.9; }
    100% { opacity: 0.7; }
}
@keyframes sleepZFloat {
    0% { transform: translateY(0) scale(0.7); opacity: 0; }
    30% { opacity: 0.3; }
    60% { transform: translateY(-60px) scale(1.1); opacity: 0.25; }
    100% { transform: translateY(-110px) scale(1.4); opacity: 0; }
}
@keyframes dollarFloat {
    0% { transform: translateY(0) rotate(-5deg); opacity: 0.2; }
    100% { transform: translateY(-35px) rotate(5deg); opacity: 0.35; }
}
@keyframes addictionBarPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes addictionPulseAnim {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.6); opacity: 0.3; }
}

/* ---- ELEMENT ENTRANCE ANIMATIONS ---- */
@keyframes slideInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideEnter { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } }

.slide.active { animation: slideEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.slide.active .anim-in { animation: slideInUp 0.6s ease both; }

.d1 { animation-delay: 0.1s !important; opacity: 0; }
.d2 { animation-delay: 0.35s !important; opacity: 0; }
.d3 { animation-delay: 0.6s !important; opacity: 0; }
.d4 { animation-delay: 0.85s !important; opacity: 0; }
.d5 { animation-delay: 1.1s !important; opacity: 0; }
.d6 { animation-delay: 1.35s !important; opacity: 0; }
.slide.active .d1, .slide.active .d2, .slide.active .d3,
.slide.active .d4, .slide.active .d5, .slide.active .d6 { animation-fill-mode: both; }

/* ---- MOBILE ---- */
@media (max-width: 480px) {
    .s-big-num { font-size: clamp(3rem, 12vw, 5rem); }
    .s-next { bottom: 2.5rem; }
    .intro-n-logo { width: 120px; height: 160px; }
    .intro-n-logo::before { width: 26px; box-shadow: 94px 0 0 #E50914; }
    .intro-n-logo::after { width: 26px; }
    .intro-tv { width: 180px; height: 125px; }
    .intro-remote { width: 55px; height: 155px; }
    .numbers-bucket { width: 160px; height: 190px; }
    .numbers-reel { width: 140px; height: 140px; }
    .completion-clapboard { width: 180px; height: 140px; }
    .completion-tv { width: 130px; height: 90px; }
    .genre-reel { width: 160px; height: 160px; }
    .genre-couch { width: 200px; height: 80px; }
    .binge-tv { max-width: 280px; width: 60vw; height: 170px; }
    .binge-remote { width: 45px; height: 130px; }
    .password-n { width: 110px; height: 140px; }
    .password-key { width: 130px; height: 52px; }
    .password-lock { width: 75px; height: 65px; }
    .graveyard-tv-static { width: 160px; height: 110px; }
    .gt-1 { width: 100px; height: 140px; }
    .gt-2 { width: 80px; height: 110px; }
    .gt-3 { width: 90px; height: 130px; }
    .sleep-couch-indent { width: 200px; height: 80px; }
    .slz-3 { font-size: 45px; }
    .slz-4 { font-size: 60px; }
    .rewatch-couch { width: 190px; height: 80px; }
    .rewatch-tv { width: 160px; height: 110px; }
    .rewatch-loop { width: 120px; height: 120px; }
    .stillwatch-dialog { width: 260px; height: 155px; }
    .stillwatch-couch { width: 170px; height: 65px; }
    .cd-1 { font-size: 90px; }
    .cd-2 { font-size: 70px; }
    .cd-3 { font-size: 60px; }
    .cost-n-overlay { width: 90px; height: 120px; }
    .persona-glow { width: 80vw; height: 85vh; }
    .persona-n { width: 85px; height: 110px; }
    .persona-confetti { width: 14px; height: 36px; }
    .meter-bar-wrap { max-width: 260px; }
}

/* ---- SMALL MOBILE ---- */
@media (max-width: 360px) {
    .intro-n-logo { width: 90px; height: 120px; }
    .intro-n-logo::before { width: 20px; box-shadow: 70px 0 0 #E50914; }
    .intro-n-logo::after { width: 20px; }
    .intro-tv { width: 135px; height: 94px; }
    .numbers-bucket { width: 120px; height: 142px; }
    .numbers-reel { width: 105px; height: 105px; }
    .completion-clapboard { width: 135px; height: 105px; }
    .binge-tv { max-width: 210px; height: 128px; }
    .genre-reel { width: 120px; height: 120px; }
    .genre-couch { width: 150px; height: 60px; }
    .stillwatch-dialog { width: 195px; height: 116px; }
    .persona-glow { width: 75vw; height: 80vh; }
    .cd-1 { font-size: 68px; }
    .cd-2 { font-size: 52px; }
    .cd-3 { font-size: 45px; }
    .gt-1 { width: 75px; height: 105px; }
    .gt-2 { width: 60px; height: 83px; }
    .gt-3 { width: 68px; height: 98px; }
}