/* Extracted from promo.html */
/* ============================================================
   High on Therapy AI · Cinematic Promo · IMMERSION EDITION
   ============================================================ */
:root{
    --ink:#050706; --ink-2:#090c0b;
    --sage:#5fb49c; --sage-bright:#7ad3b8; --sage-glow:rgba(95,180,156,.45);
    --gold:#c2a15e; --gold-bright:#e0c078; --gold-glow:rgba(194,161,94,.40);
    --text:#f4f1ea; --muted:#8a8f8c;
    --cold:#3a4a6b; --cold-glow:rgba(120,150,210,.5);
    --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000;color:var(--text);
    font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ---------- Cinematic stage ---------- */
#cinema{position:fixed;inset:0;background:#000;overflow:hidden}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
#grain{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.07;mix-blend-mode:overlay}
#vignette{position:absolute;inset:0;z-index:8;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.72) 100%);
    transition:box-shadow .8s var(--ease)}
/* audio-reactive edge glow */
#edgeGlow{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity 1.2s;
    box-shadow:inset 0 0 140px rgba(95,180,156,.25);border-radius:0}
#cinema.playing #edgeGlow{opacity:1}
/* Global color grade arc: cold-blue → sage → warm-gold, tied to emotional progression.
   Mix-blend soft-light washes the whole frame so all 10 scenes feel like one continuum. */
#grade{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:soft-light;
    opacity:0;transition:background 3s var(--ease),opacity 2s var(--ease);
    background:rgba(60,80,130,.4)}
#cinema.playing #grade{opacity:.55}
/* Filmic halation: warm light wrap that intensifies as the film brightens.
   Simulates how bright highlights bleed onto adjacent film emulsion. */
#halation{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:screen;
    opacity:0;transition:opacity 3s var(--ease);
    background:radial-gradient(ellipse 80% 60% at 50% 60%,rgba(255,180,120,.0),transparent 70%)}
#cinema.playing #halation{opacity:1}
/* Light leak flash between scenes */
#lightLeak{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse at 50% 50%,rgba(255,240,210,.5),transparent 65%);
    mix-blend-mode:screen}
#lightLeak.fire{animation:leakFlash 1.1s var(--ease) forwards}
@keyframes leakFlash{0%{opacity:0;transform:scale(.9)}15%{opacity:.7}100%{opacity:0;transform:scale(1.3)}}

/* ---------- Bloom system (glow on highlights) ----------
   Each bright element gets a blurred screen-blend twin underneath.
   GPU-accelerated via CSS filter — no per-pixel cost.                */
.s1 .phone-bloom{position:absolute;left:24%;bottom:44%;width:74px;height:132px;border-radius:10px;
    background:var(--cold-glow);filter:blur(24px);opacity:0;mix-blend-mode:screen;
    transform:scale(1.8);animation:flicker 3.2s infinite;pointer-events:none}
.scene.active.s1 .phone-bloom{opacity:.7}
.s10 .sun-bloom{position:absolute;bottom:16%;left:50%;width:clamp(180px,30vw,300px);height:clamp(180px,30vw,300px);
    border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.6),transparent 60%);
    filter:blur(40px);mix-blend-mode:screen;transform:translate(-50%,0) scale(1.5);
    opacity:0;animation:fadein 2.4s .6s forwards;pointer-events:none}
/* Volumetric god rays — S1 moonlight through window */
.s1 .godrays{position:absolute;left:62%;top:14%;width:170px;height:100%;
    background:linear-gradient(160deg,transparent 30%,rgba(120,150,210,.06) 45%,rgba(120,150,210,.03) 60%,transparent 75%);
    filter:blur(8px);transform:skewX(-12deg) scaleX(2.5);transform-origin:top left;
    mix-blend-mode:screen;opacity:.6;pointer-events:none;
    animation:rayshimmer 6s ease-in-out infinite}
@keyframes rayshimmer{0%,100%{opacity:.4}50%{opacity:.7}}
/* Volumetric god rays — S10 sun */
.s10 .godrays-sun{position:absolute;bottom:16%;left:50%;width:0;height:0;
    transform:translateX(-50%);mix-blend-mode:screen;pointer-events:none;opacity:0;
    animation:fadein 3s 1s forwards}
.s10 .godrays-sun::before{content:'';position:absolute;left:50%;bottom:0;
    width:120vh;height:140vh;transform:translateX(-50%);
    background:conic-gradient(from 75deg at 50% 100%,
        transparent 0deg,rgba(255,210,140,.08) 8deg,transparent 16deg,
        transparent 30deg,rgba(255,210,140,.06) 38deg,transparent 46deg,
        transparent 60deg,rgba(255,210,140,.07) 68deg,transparent 76deg,
        transparent 90deg,rgba(255,210,140,.06) 98deg,transparent 106deg,
        transparent 120deg,rgba(255,210,140,.08) 128deg,transparent 136deg);
    filter:blur(6px);animation:rayrotate 50s linear infinite}
@keyframes rayrotate{to{transform:translateX(-50%) rotate(360deg)}}

/* ---------- Start screen particle field ---------- */
#overlayFx{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;pointer-events:none}
.overlay-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(95,180,156,.12),transparent 70%),
               radial-gradient(ellipse 50% 40% at 70% 70%,rgba(194,161,94,.08),transparent 70%)}
#overlay > *{position:relative;z-index:2}

/* letterbox bars */
.bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:20;
    transition:height 1.2s var(--ease)}
.bar.top{top:0}.bar.bottom{bottom:0}
#cinema.cinematic .bar{height:7vh}

/* ---------- Scenes (cross-dissolve + subtle zoom) ---------- */
.scene{position:absolute;inset:0;z-index:2;opacity:0;visibility:hidden;
    transition:opacity 1.2s var(--ease), visibility 1.2s, transform 1.2s var(--ease);
    transform:scale(.985);display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene.active{opacity:1;visibility:visible;transform:scale(1)}
.scene.leaving{opacity:0;transform:scale(1.02)}
.stage{position:relative;width:min(86vw,1100px);text-align:center;z-index:3}

/* ============ S1: bedroom ============ */
.s1 .room{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 30% 55%,#0c1219 0%,#04060a 75%)}
.s1 .wall{position:absolute;inset:0;background:linear-gradient(180deg,#07090d 0%,#0a0e13 60%,#050709 100%)}
.s1 .window{position:absolute;left:62%;top:14%;width:170px;height:230px;border-radius:4px;
    border:3px solid rgba(120,150,210,.14);background:linear-gradient(180deg,rgba(40,55,90,.45),rgba(20,28,50,.2));
    box-shadow:0 0 80px rgba(120,150,210,.18),inset 0 0 40px rgba(120,150,210,.1)}
.s1 .window::before,.s1 .window::after{content:'';position:absolute;background:rgba(120,150,210,.14)}
.s1 .window::before{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%)}
.s1 .window::after{top:50%;left:0;right:0;height:3px;transform:translateY(-50%)}
.s1 .moonlight{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(120,150,210,.06) 50%,transparent 60%)}
.s1 .bed{position:absolute;left:8%;bottom:0;width:55%;height:120px;
    background:linear-gradient(180deg,#0a0d11 0%,#050709 100%);border-radius:8px 8px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.s1 .silhouette{position:absolute;left:22%;bottom:38%;width:150px;height:230px;
    background:linear-gradient(to top,#000 50%,#0b0f12 90%);border-radius:75px 75px 0 0;
    filter:blur(3px);animation:bodybreathe 5s ease-in-out infinite}
@keyframes bodybreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
.s1 .phone{position:absolute;left:24%;bottom:44%;width:74px;height:132px;border-radius:10px;
    background:linear-gradient(135deg,#1a2a45,#2a3a5a);box-shadow:0 0 70px 10px var(--cold-glow);
    animation:flicker 3.2s infinite}
.s1 .phone::after{content:'';position:absolute;inset:8px;border-radius:4px;
    background:linear-gradient(180deg,rgba(90,120,180,.3),rgba(40,60,100,.15))}
@keyframes flicker{0%,100%{box-shadow:0 0 70px 10px var(--cold-glow)}45%{box-shadow:0 0 45px 6px rgba(120,150,210,.35)}}
.s1 .glow{position:absolute;inset:0;background:radial-gradient(circle at 27% 54%,var(--cold-glow) 0%,transparent 38%);
    mix-blend-mode:screen;opacity:.55}
/* Ken Burns */
.scene.active.s1{animation:kb1 12s ease-out forwards}
@keyframes kb1{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ============ S2: shatter ============ */
.s2 .room{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0a0e12 0%,#04060a 70%)}
.s2 .word{position:absolute;font-weight:700;font-size:clamp(20px,3.8vw,46px);
    color:#c98;opacity:0;letter-spacing:1px;text-shadow:0 0 16px rgba(201,150,80,.4);
    transform:translate(-50%,-50%) scale(.8);transition:opacity .5s,transform .5s}
.s2 .word.shatter{transition:opacity .7s,transform .7s,filter .7s;
    opacity:0;filter:blur(8px);transform:translate(-50%,-50%) scale(1.8) rotate(var(--rot,20deg))}
.s2 .warm{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(95,180,156,.14) 0%,transparent 60%);
    opacity:0;transition:opacity 1.8s}
.scene.active.s2 .warm{opacity:1}
.s2 .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
.s2 .flash.fire{animation:flashgo .5s ease-out}
@keyframes flashgo{0%{opacity:.5}100%{opacity:0}}
.scene.active.s2{animation:kb2 10s ease-out forwards}
@keyframes kb2{from{transform:scale(1.06)}to{transform:scale(1)}}
.shaking{animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-2px)}}

/* ============ S3: padlock ============ */
.s3 .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0a1310 0%,#04060a 75%)}
.s3 .lockwrap{position:relative;width:min(60vw,420px);margin:0 auto}
.s3 .aura{position:absolute;inset:-50px;border-radius:50%;
    background:radial-gradient(circle,var(--sage-glow) 0%,transparent 65%);
    animation:pulse 2.6s var(--ease) infinite}
.s3 .ring2{position:absolute;inset:-80px;border:1px solid rgba(95,180,156,.15);border-radius:50%;
    animation:spin 18s linear infinite}
.s3 .ring2::before{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
    background:var(--sage-bright);box-shadow:0 0 12px var(--sage-bright);transform:translateX(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
.s3 svg{position:relative;width:100%;height:auto;filter:drop-shadow(0 0 28px var(--sage-glow))}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.6}50%{transform:scale(1.08);opacity:1}}

/* ============ S4: language morph ============ */
.s4 .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#0a1310 0%,#04060a 80%)}
.s4 .morphwrap{position:relative;perspective:800px}
.s4 .morph{font-weight:700;font-size:clamp(40px,10vw,116px);line-height:1.1;
    color:var(--sage-bright);text-shadow:0 0 50px var(--sage-glow),0 0 100px var(--sage-glow);
    transform:perspective(700px) rotateY(0);transition:all .9s var(--ease);min-height:1.2em}
.s4 .orbit{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.s4 .orbit span{position:absolute;font-size:clamp(14px,2.2vw,24px);color:rgba(122,211,184,.25);
    font-weight:600;animation:orbitfloat 4s ease-in-out infinite}
@keyframes orbitfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.s4 .underline{height:3px;width:0;margin:8px auto 0;border-radius:99px;
    background:linear-gradient(90deg,transparent,var(--sage-bright),transparent);transition:width .6s}
.s4 .sub{margin-top:14px;color:var(--muted);font-size:clamp(13px,1.8vw,18px);letter-spacing:6px;text-transform:uppercase}
.s4 .langs{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.s4 .chip{font-size:clamp(11px,1.5vw,15px);padding:7px 14px;border-radius:99px;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#c9cdc9;transition:all .4s}
.s4 .chip.lit{border-color:var(--sage);color:var(--sage-bright);box-shadow:0 0 20px var(--sage-glow);background:rgba(95,180,156,.1)}
.scene.active.s4{animation:kb4 10s ease-out forwards}
@keyframes kb4{from{transform:scale(1.05)}to{transform:scale(1)}}

/* ============ S5: avatars ============ */
.s5 .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0a1310 0%,#04060a 78%)}
.s5 .pair{display:flex;gap:clamp(30px,7vw,110px);justify-content:center;align-items:center;position:relative}
.s5 .fig{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
    animation:floatbob 3.4s ease-in-out infinite}
.s5 .fig.f{animation-delay:.7s}
@keyframes floatbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.s5 .halo{position:absolute;top:-14px;width:clamp(130px,23vw,210px);height:clamp(130px,23vw,210px);
    border-radius:50%;background:radial-gradient(circle,var(--sage-glow) 0%,transparent 60%);
    animation:pulse 2.8s var(--ease) infinite;transition:opacity 1.5s}
.s5 .fig.f .halo{background:radial-gradient(circle,var(--gold-glow) 0%,transparent 60%);animation-delay:.7s}
.s5 .av{position:relative;width:clamp(110px,20vw,180px);height:clamp(110px,20vw,180px);
    border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);
    box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(95,180,156,.2)}
.s5 .lbl{font-size:clamp(13px,1.8vw,18px);letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.s5 .heart{font-size:clamp(22px,3vw,34px);color:var(--sage);opacity:0;transition:opacity .8s;
    animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.s5 .pair.chose .heart{opacity:.85}

/* ============ S6: relief ============ */
.s6{background:radial-gradient(ellipse at 70% 35%,rgba(194,161,94,.22) 0%,rgba(80,55,30,.1) 35%,#060407 80%)}
.s6 .ray{position:absolute;top:-10%;right:6%;width:50vw;height:130vh;transform:rotate(18deg);
    background:linear-gradient(to bottom,var(--gold-glow),transparent 70%);filter:blur(36px);opacity:0;
    animation:rayin 2.4s var(--ease) forwards}
@keyframes rayin{to{opacity:.6}}
.s6 .figure{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:120px;height:200px;
    background:linear-gradient(to top,#000 55%,#1a1208);border-radius:60px 60px 0 0;filter:blur(2px);
    opacity:0;animation:figin 2s 1s forwards}
@keyframes figin{to{opacity:.7}}
.s6 .wash{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(224,192,120,.12),transparent 65%);
    opacity:0;animation:fadein 3s 1.5s forwards}
.s6 .sigh{font-size:clamp(15px,2.4vw,22px);color:var(--gold-bright);letter-spacing:3px;opacity:0;
    text-transform:uppercase;animation:fadein 2s 1.8s forwards}
@keyframes fadein{to{opacity:1}}

/* ============ S7: roadmap ============ */
.s7 .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0a1310 0%,#04060a 80%)}
.s7 .grid{position:absolute;inset:0;opacity:.08;
    background-image:linear-gradient(rgba(95,180,156,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(95,180,156,.5) 1px,transparent 1px);
    background-size:40px 40px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.s7 svg{width:min(80vw,560px);height:auto;filter:drop-shadow(0 0 18px var(--sage-glow));position:relative}
.s7 .milestone{fill:var(--ink-2);stroke:rgba(255,255,255,.25);stroke-width:1.5;transition:all .5s}
.s7 .milestone.lit{stroke:var(--sage);fill:rgba(95,180,156,.2);filter:drop-shadow(0 0 12px var(--sage-glow))}
.s7 .mlbl{fill:var(--muted);font-size:13px;font-family:Geist;text-anchor:middle;font-weight:600}
.s7 .mlbl.lit{fill:var(--sage-bright)}
.s7 .path{fill:none;stroke:var(--sage);stroke-width:3.5;stroke-linecap:round;
    stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 4.5s var(--ease);
    filter:drop-shadow(0 0 6px var(--sage-glow))}
.scene.active.s7 .path{stroke-dashoffset:0}
.s7 .glow-dot{fill:var(--sage-bright);filter:drop-shadow(0 0 12px var(--sage-bright));opacity:0;transition:opacity .5s}
.scene.active.s7 .glow-dot{opacity:1;transition-delay:3.5s}

/* ============ S8: breathing ============ */
.s8 .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0a1310 0%,#04060a 80%)}
.s8 .orb-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.s8 .orb{width:clamp(180px,32vw,300px);height:clamp(180px,32vw,300px);border-radius:50%;
    background:radial-gradient(circle at 40% 40%,var(--sage-bright),var(--sage) 50%,rgba(95,180,156,.1) 75%);
    box-shadow:0 0 90px var(--sage-glow),inset 0 0 70px rgba(255,255,255,.18);
    animation:breathe 8s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(.76)}50%{transform:scale(1.14)}}
.s8 .ring{position:absolute;border-radius:50%;border:1px solid rgba(95,180,156,.22);animation:breathe 8s var(--ease) infinite}
.s8 .ring.r1{width:clamp(220px,38vw,360px);height:clamp(220px,38vw,360px);animation-delay:.4s}
.s8 .ring.r2{width:clamp(270px,46vw,440px);height:clamp(270px,46vw,440px);border-color:rgba(95,180,156,.14);animation-delay:.8s}
.s8 .silhouette{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:90px;height:160px;
    background:linear-gradient(to top,#000 60%,#0b0f12);border-radius:45px 45px 0 0;filter:blur(3px);
    opacity:.4;animation:breathe 8s var(--ease) infinite;animation-delay:.2s}
.s8 .hint{margin-top:38px;color:var(--muted);letter-spacing:4px;font-size:clamp(12px,1.6vw,16px);text-transform:uppercase}

/* ============ S9: night → sunrise (full room) ============ */
.s9 .sky{position:absolute;inset:0;transition:background 5s var(--ease);
    background:linear-gradient(to bottom,#050814 0%,#0a0f1f 35%,#14182e 65%,#1a1426 100%)}
.scene.active.s9 .sky{background:linear-gradient(to bottom,#2a3550 0%,#ff8a5c 25%,#ffc888 50%,#ffe6b0 70%,#5a3a3a 100%)}
#stars9{position:absolute;inset:0;z-index:1;transition:opacity 4s;opacity:1}
.scene.active.s9 #stars9{opacity:.15}
.s9 .moon{position:absolute;left:18%;top:16%;width:70px;height:70px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#e8e4d8,#a8a49a 70%,#787470);
    box-shadow:0 0 60px rgba(232,228,216,.4),0 0 120px rgba(180,200,230,.15);
    transition:opacity 4s;opacity:.9}
.scene.active.s9 .moon{opacity:0;transform:translateY(-100px)}
.s9 .window{position:absolute;left:60%;top:12%;width:160px;height:210px;border-radius:4px;
    border:3px solid rgba(150,120,90,.2);background:linear-gradient(180deg,rgba(40,55,90,.3),rgba(20,28,50,.1));
    box-shadow:0 0 50px rgba(120,150,210,.12)}
.s9 .window::before,.s9 .window::after{content:'';position:absolute;background:rgba(150,120,90,.18)}
.s9 .window::before{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%)}
.s9 .window::after{top:50%;left:0;right:0;height:3px;transform:translateY(-50%)}
.s9 .curtain{position:absolute;top:12%;width:24px;height:210px;
    background:linear-gradient(180deg,rgba(80,40,30,.4),rgba(40,20,15,.6));filter:blur(2px)}
.s9 .curtain.l{left:54%}.s9 .curtain.r{left:calc(60% + 160px + 6px)}
.s9 .city{position:absolute;bottom:24vh;left:0;right:0;height:60px;opacity:.5;
    background:linear-gradient(to top,#000 30%,transparent);
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,60 L0,40 L40,40 L40,25 L70,25 L70,35 L100,35 L100,15 L130,15 L130,30 L170,30 L170,20 L200,20 L200,38 L240,38 L240,10 L260,10 L260,28 L300,28 L300,40 L340,40 L340,22 L380,22 L380,36 L420,36 L420,18 L450,18 L450,33 L490,33 L490,12 L520,12 L520,30 L560,30 L560,42 L600,42 L600,24 L640,24 L640,38 L680,38 L680,16 L710,16 L710,32 L750,32 L750,26 L790,26 L790,40 L830,40 L830,20 L870,20 L870,34 L910,34 L910,28 L950,28 L950,14 L980,14 L980,30 L1020,30 L1020,40 L1060,40 L1060,22 L1100,22 L1100,36 L1140,36 L1140,40 L1200,40 L1200,60 Z' fill='black'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,60 L0,40 L40,40 L40,25 L70,25 L70,35 L100,35 L100,15 L130,15 L130,30 L170,30 L170,20 L200,20 L200,38 L240,38 L240,10 L260,10 L260,28 L300,28 L300,40 L340,40 L340,22 L380,22 L380,36 L420,36 L420,18 L450,18 L450,33 L490,33 L490,12 L520,12 L520,30 L560,30 L560,42 L600,42 L600,24 L640,24 L640,38 L680,38 L680,16 L710,16 L710,32 L750,32 L750,26 L790,26 L790,40 L830,40 L830,20 L870,20 L870,34 L910,34 L910,28 L950,28 L950,14 L980,14 L980,30 L1020,30 L1020,40 L1060,40 L1060,22 L1100,22 L1100,36 L1140,36 L1140,40 L1200,40 L1200,60 Z' fill='black'/></svg>");
    background-size:cover}
.s9 .desk{position:absolute;bottom:0;left:0;right:0;height:24vh;
    background:linear-gradient(to top,#1a0f08 0%,#0a0805 60%,transparent 100%)}
.s9 .phone-rest{position:absolute;bottom:20vh;left:50%;transform:translateX(-50%);
    width:54px;height:100px;border-radius:8px;background:#0c1118;
    box-shadow:0 0 30px var(--sage-glow);animation:phonepulse 2.4s var(--ease) infinite;z-index:3}
@keyframes phonepulse{0%,100%{box-shadow:0 0 18px var(--sage-glow)}50%{box-shadow:0 0 48px var(--sage-bright)}}
.s9 .lamp{position:absolute;right:10%;bottom:24vh;width:40px;height:40px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,200,120,.6),transparent 70%);opacity:0;transition:opacity 4s}
.scene.active.s9 .lamp{opacity:.7}
.scene.active.s9{animation:kb9 12s ease-out forwards}
@keyframes kb9{from{transform:scale(1) translateY(0)}to{transform:scale(1.05) translateY(-2%)}}

/* ============ S10: sunset / logo ============ */
.s10{background:radial-gradient(ellipse at 50% 88%,#ff7a3c 0%,#c2452f 28%,#5a2640 60%,#1a0f1c 100%)}
.s10 .clouds{position:absolute;inset:0;overflow:hidden}
.s10 .cloud{position:absolute;border-radius:50%;filter:blur(30px);opacity:.3}
.s10 .cloud.c1{width:400px;height:80px;background:rgba(255,180,120,.4);top:30%;left:-20%;animation:drift 24s linear infinite}
.s10 .cloud.c2{width:300px;height:60px;background:rgba(255,150,100,.3);top:42%;left:-15%;animation:drift 30s linear infinite 4s}
.s10 .cloud.c3{width:500px;height:100px;background:rgba(200,80,60,.3);top:24%;left:-25%;animation:drift 36s linear infinite 8s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(150vw)}}
.s10 .sun{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);
    width:clamp(180px,30vw,300px);height:clamp(180px,30vw,300px);border-radius:50%;
    background:radial-gradient(circle,#fff5d0,#ffb15a 45%,transparent 72%);
    box-shadow:0 0 140px rgba(255,170,80,.7);opacity:0;animation:fadein 2.4s .6s forwards}
.s10 .rays{position:absolute;bottom:16%;left:50%;width:clamp(400px,60vw,600px);height:clamp(400px,60vw,600px);
    transform:translate(-50%,50%);opacity:0;animation:fadein 3s 1s forwards,spin 40s linear infinite 1s;
    background:conic-gradient(from 0deg,transparent,rgba(255,200,120,.12) 5%,transparent 10%,transparent 20%,rgba(255,200,120,.1) 25%,transparent 30%,transparent 45%,rgba(255,200,120,.1) 50%,transparent 55%,transparent 70%,rgba(255,200,120,.1) 75%,transparent 80%);
    border-radius:50%}
.s10 .flare{position:absolute;left:50%;top:20%;width:4px;height:60vh;transform:translateX(-50%) rotate(20deg);
    background:linear-gradient(to bottom,transparent,rgba(255,220,150,.3),transparent);
    filter:blur(3px);opacity:0;animation:fadein 3s 1.5s forwards}
.s10 .logo{position:relative;z-index:3}
.s10 .mark{font-size:clamp(40px,9vw,96px);font-weight:800;letter-spacing:-1px;
    background:linear-gradient(135deg,#fff 0%,var(--gold-bright) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    opacity:0;transform:translateY(20px);animation:rise 1.6s var(--ease) 1.6s forwards}
.s10 .tag{margin-top:14px;color:#f0e6d2;letter-spacing:5px;font-size:clamp(12px,1.8vw,18px);
    text-transform:uppercase;opacity:0;animation:rise 1.6s var(--ease) 2.4s forwards}
.s10 .leaf{display:inline-block;width:clamp(34px,6vw,56px);height:auto;margin-bottom:8px;
    opacity:0;animation:rise 1.6s var(--ease) 1.2s forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.scene.active.s10{animation:kb10 14s ease-out forwards}
@keyframes kb10{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- Captions (word-by-word, film-subtitle style) ---------- */
#captions{position:absolute;left:0;right:0;bottom:13vh;z-index:15;text-align:center;
    padding:0 8vw;pointer-events:none;opacity:0;transition:opacity .6s}
#captions.show{opacity:1}
#captions .cap{display:inline-block;font-size:clamp(16px,2.5vw,27px);font-weight:500;
    color:rgba(255,255,255,.85);text-shadow:0 2px 24px rgba(0,0,0,.95);line-height:1.5;max-width:780px;
    padding:10px 24px;border-radius:14px;background:rgba(5,7,6,.42);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.06)}
#captions .cap .w{opacity:0;transition:opacity .4s,color .3s,text-shadow .3s}
#captions .cap .w.on{opacity:1}
#captions .cap .w.on.spoken{color:var(--sage-bright);text-shadow:0 0 18px var(--sage-glow)}

/* ---------- UI / overlay ---------- */
#ui{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:22px;background:radial-gradient(ellipse at center,rgba(5,7,6,.85),rgba(0,0,0,.95));
    transition:opacity .8s var(--ease),visibility .8s}
#overlay.hidden{opacity:0;visibility:hidden}
.brand-mini{display:flex;align-items:center;gap:10px;color:var(--sage-bright);letter-spacing:3px;
    text-transform:uppercase;font-size:13px;margin-bottom:6px}
.brand-mini svg{width:22px;height:22px}
#overlay h1{font-size:clamp(26px,5vw,52px);font-weight:700;text-align:center;max-width:14ch;line-height:1.15}
#overlay p{color:var(--muted);max-width:46ch;text-align:center;line-height:1.6;font-size:clamp(14px,1.8vw,17px)}
#playBtn{margin-top:8px;display:flex;align-items:center;gap:14px;padding:16px 32px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--sage),var(--gold));color:#06120e;border-radius:99px;
    font-family:inherit;font-weight:700;font-size:16px;letter-spacing:1px;
    box-shadow:0 12px 40px var(--sage-glow);transition:transform .25s var(--ease),box-shadow .25s}
#playBtn:hover{transform:translateY(-2px);box-shadow:0 18px 52px var(--sage-glow)}
#playBtn svg{width:20px;height:20px}
.dur{color:var(--muted);font-size:13px;letter-spacing:2px}
.vo-upload{margin-top:4px}
.vo-file-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:9px 16px;border-radius:99px;border:1px solid rgba(95,180,156,.4);
    background:rgba(95,180,156,.08);color:var(--sage-bright);font-size:13px;
    transition:all .25s var(--ease)}
.vo-file-btn:hover{background:rgba(95,180,156,.18);border-color:var(--sage)}
.orient-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:9px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.04);color:var(--muted);font-family:inherit;font-size:13px;
    transition:all .25s var(--ease)}
.orient-btn:hover{background:rgba(255,255,255,.1);color:var(--text)}

/* ===== Vertical (9:16) ===== */
#cinema.vertical{background:#000;display:flex;align-items:center;justify-content:center}
#cinema.vertical #fx,#cinema.vertical #grain,#cinema.vertical #vignette,#cinema.vertical #edgeGlow{border-radius:0}
#cinema.vertical .bar{display:none}
#cinema.vertical .scene,#cinema.vertical #captions,#cinema.vertical #controls,
#cinema.vertical #endcard,#cinema.vertical #ui{left:50%;transform:translateX(-50%);
    width:min(100vw,calc(100vh * 9 / 16))}
#cinema.vertical .scene{transform:translateX(-50%)}
#cinema.vertical #captions{bottom:13vh}
#cinema.vertical #controls{left:50%;transform:translateX(-50%);padding:12px 14px}
#cinema.vertical #timeLabel{display:none}
#cinema.vertical .stage{width:min(92vw,460px)}
#cinema.vertical .s1 .silhouette{left:50%;transform:translateX(-50%);bottom:30%}
#cinema.vertical .s1 .phone{left:50%;transform:translateX(-50%);bottom:38%}
#cinema.vertical .s5 .pair{flex-direction:column;gap:30px}
#cinema.vertical .s5 .heart{transform:rotate(90deg)}
#cinema.vertical .s9 .phone-rest{bottom:26vh}
#cinema.vertical .s10 .sun{bottom:24%}

/* controls bar */
#controls{position:absolute;left:0;right:0;bottom:0;z-index:22;padding:14px 24px;
    display:flex;align-items:center;gap:16px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
    opacity:0;transition:opacity .5s;pointer-events:none}
#controls.show{opacity:1;pointer-events:auto}
#progressTrack{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:99px;cursor:pointer;position:relative;overflow:hidden}
#progressFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
    background:linear-gradient(90deg,var(--sage),var(--gold))}
.ctl-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text);
    width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .2s,transform .2s}
.ctl-btn:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}
.ctl-btn svg{width:16px;height:16px}
#timeLabel{font-size:12px;color:var(--muted);letter-spacing:1px;min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.scene-dots{display:flex;gap:5px}
.scene-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.scene-dots .dot.on{background:var(--sage-bright);box-shadow:0 0 8px var(--sage-glow)}

/* end card */
#endcard{position:absolute;inset:0;z-index:24;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:20px;background:radial-gradient(ellipse at center,rgba(5,7,6,.92),rgba(0,0,0,.98));
    opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
#endcard.show{opacity:1;visibility:visible}
#endcard h2{font-size:clamp(24px,4.5vw,40px);font-weight:700}
#endcard p{color:var(--muted);max-width:40ch;text-align:center;line-height:1.6}
#replayBtn{padding:14px 28px;border:none;cursor:pointer;border-radius:99px;
    background:linear-gradient(135deg,var(--sage),var(--gold));color:#06120e;
    font-family:inherit;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;
    box-shadow:0 10px 36px var(--sage-glow)}
#replayBtn svg{width:16px;height:16px}

@media (max-width:640px){
    .bar{height:0}#cinema.cinematic .bar{height:5vh}
    #captions{bottom:14vh}
    .s5 .pair{flex-direction:row}
}

/* MOBILE PROMO FIXES */
@media (max-width: 768px) {
  #title { font-size: 10vw !important; letter-spacing: 0.1em !important; }
  .scene h1, .scene h2 { font-size: 8vw !important; line-height: 1.2 !important; }
  .scene p { font-size: 4vw !important; padding: 0 20px; text-align: center; }
  .btn { padding: 12px 24px !important; font-size: 14px !important; }
  .credits { font-size: 8px !important; }
  .brand { font-size: 16px !important; }
  
  /* Ensure cinematic layout doesn't break horizontal scroll */
  body, html, #cinema {
    max-width: 100vw;
    overflow-x: hidden;
  }
}