:root{
  --ink:#12080b; --velvet:#240d14; --card:#1d0c12; --red:#c8283c; --amber:#ffb938;
  --cream:#f6ecdc; --muted:#b8a79b; --line:rgba(246,236,220,.14);
  --display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font:400 16px/1.55 var(--body);min-height:100vh;
  background-image:radial-gradient(120% 60% at 80% -10%,#4a1420 0%,transparent 60%),radial-gradient(80% 50% at 0% 100%,#2b0d17 0%,transparent 70%);background-repeat:no-repeat}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);background:rgba(18,8,11,.78);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font:900 26px/1 var(--display);letter-spacing:.02em}
.logo svg{width:28px;height:28px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;transition:transform .15s,background .15s}
.pill.ghost{border:1.5px solid rgba(255,185,56,.55);color:var(--amber)}
.pill.ghost:hover{background:rgba(255,185,56,.12)}
.pill.solid{background:var(--amber);color:var(--ink);padding:14px 26px;font-size:16px;box-shadow:0 10px 30px rgba(255,185,56,.28)}
.pill.solid:hover{transform:translateY(-2px)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:56px 0 72px}
h1{font:900 clamp(52px,8.2vw,104px)/.9 var(--display);letter-spacing:.005em;text-transform:uppercase}
.lead{margin-top:22px;max-width:30em;font-size:18px;color:var(--muted)}
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.note{font-size:14px;color:var(--muted)}
.facts{margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{font-size:14px;color:var(--muted)}
.facts b{display:block;font:800 26px/1.1 var(--display);color:var(--cream);letter-spacing:.02em}

/* poster */
.poster{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px var(--line);cursor:pointer;width:100%;display:block;text-align:left}
.poster svg.art{position:absolute;inset:0;width:100%;height:100%}
.poster .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 26px;background:linear-gradient(to top,rgba(10,4,7,.95) 10%,transparent)}
.poster .cap small{display:block;font-size:13px;color:var(--amber);font-weight:700;margin-bottom:6px}
.poster .cap strong{display:block;font:900 clamp(34px,5vw,54px)/.92 var(--display);text-transform:uppercase}
.play{position:absolute;top:18px;right:18px;width:54px;height:54px;border-radius:50%;background:rgba(18,8,11,.55);border:1.5px solid rgba(246,236,220,.5);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.play .ico{width:22px;height:22px;fill:var(--cream);stroke:var(--cream)}

/* video stage */
.stage{padding:28px 0 64px}
.player{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.player svg.art,.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam{transform-origin:520px 220px;animation:push 24s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.14)}}
.stars{animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.waves{animation:drift 9s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-200px)}}
.player:not(.playing) .anim{animation-play-state:paused}
.beam{transform-origin:520px 192px;animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.badge{position:absolute;top:16px;left:16px;background:rgba(18,8,11,.6);backdrop-filter:blur(4px);border:1px solid var(--line);color:var(--cream);font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}
.vtitle{position:absolute;left:24px;bottom:78px;max-width:60%;transition:opacity .4s}
.vtitle small{display:block;font-size:14px;color:var(--amber);font-weight:700;margin-bottom:6px}
.vtitle strong{display:block;font:900 clamp(34px,6vw,72px)/.9 var(--display);text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.player.playing .vtitle{opacity:0}
.player.gated .vtitle{opacity:1}
.bigplay{position:absolute;left:50%;top:50%;width:auto;height:68px;margin:0;transform:translate(-50%,-50%);padding:0 34px 0 28px;gap:10px;border-radius:999px;font:800 22px/1 var(--body);letter-spacing:.01em;background:var(--amber);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(255,185,56,.22),0 14px 40px rgba(0,0,0,.5);transition:transform .2s,opacity .25s}
.bigplay:hover{transform:translate(-50%,-50%) scale(1.06)}
.bigplay .ico{width:26px;height:26px;fill:var(--ink);stroke:var(--ink);margin-left:0}
.player.playing .bigplay{opacity:0;pointer-events:none}
.controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:34px 18px 14px;background:linear-gradient(to top,rgba(10,4,7,.9),transparent)}
.controls button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--cream)}
.controls .ico{width:22px;height:22px;fill:var(--cream);stroke:var(--cream)}
.controls .ic-pause{display:none}
.player.playing .controls .ic-pause{display:block}
.player.playing .controls .ic-play{display:none}
.track{flex:1;height:5px;background:rgba(246,236,220,.22);border-radius:99px;overflow:hidden}
.fill{height:100%;width:0;background:var(--amber);border-radius:99px;box-shadow:0 0 12px rgba(255,185,56,.7)}
#time{font-size:13px;color:var(--cream);font-variant-numeric:tabular-nums;white-space:nowrap}
.intro{margin-top:40px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.intro h1{font-size:clamp(40px,6.4vw,84px)}
.intro .lead{margin-top:0}
.stage .facts{margin-top:36px}

@media (max-width:860px){
  .intro{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .vtitle{left:16px;bottom:62px;max-width:70%}
  .bigplay{height:56px;padding:0 26px 0 22px;font-size:19px;margin:0}
  .bigplay .ico{width:22px;height:22px}
  .grid{grid-template-columns:repeat(2,1fr)}
}

/* coming soon */
section.soon{padding:8px 0 90px}
h2{font:800 clamp(30px,4vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.sub{margin-top:8px;color:var(--muted)}
.grid{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.film{display:block;text-align:left;width:100%}
.film .pic{position:relative;aspect-ratio:2/3;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.film:hover .pic{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,185,56,.6),0 18px 40px rgba(0,0,0,.5)}
.film .pic span{position:absolute;left:14px;right:14px;bottom:14px;font:900 30px/.92 var(--display);text-transform:uppercase}
.film .pic i{position:absolute;top:12px;left:12px;font-style:normal;font-weight:700;font-size:12px;background:var(--cream);color:var(--ink);padding:3px 9px;border-radius:3px}
.film p{margin-top:10px;font-size:14px;color:var(--muted)}
.p1{background:linear-gradient(160deg,#7b1d2e,#1c0a10 70%)}
.p2{background:linear-gradient(200deg,#e0892c,#3b1408 75%)}
.p3{background:linear-gradient(170deg,#1f5a73,#07151c 75%)}
.p4{background:linear-gradient(190deg,#6c3a8f,#150b1f 75%)}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:14px}

/* popup */
#popup{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(10,4,6,.7);backdrop-filter:blur(5px)}
#popup .box{width:100%;max-width:420px;background:var(--card);border:1px solid rgba(255,185,56,.35);border-radius:16px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7);animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.top{position:relative;padding:26px 24px 20px;background:linear-gradient(135deg,#5a1626,#1d0c12)}
.x{position:absolute;right:14px;top:14px;padding:5px;border-radius:50%;color:var(--muted)}
.x:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.x .ico{width:20px;height:20px}
.bell{width:50px;height:50px;border-radius:50%;background:var(--amber);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 0 28px rgba(255,185,56,.45)}
.bell .ico{width:26px;height:26px}
.top h3{margin-top:16px;font:900 32px/1 var(--display);text-transform:uppercase}
.top p{margin-top:4px;font-size:14px;color:var(--muted)}
.body{padding:20px 24px 24px}
.fans{display:flex;align-items:center;gap:8px;background:rgba(255,185,56,.1);color:var(--amber);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700}
.body ul{list-style:none;padding:0;margin-top:16px;display:grid;gap:12px}
.body li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;font-weight:500;line-height:1.3}
.body li span{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,185,56,.15);color:var(--amber);display:flex;align-items:center;justify-content:center;margin-top:-2px}
.body li .ico{width:14px;height:14px}
.btns{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.btns .pill{justify-content:center;width:100%}
.btns .alt{background:rgba(246,236,220,.08);color:var(--cream)}
.btns .alt:hover{background:rgba(246,236,220,.14)}
.fine{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;background:var(--card);border:1px solid rgba(255,185,56,.5);color:var(--amber);padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);width:max-content;max-width:92vw;text-align:center}
#note{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:440px;z-index:80;background:var(--card);border:1px solid rgba(255,185,56,.45);border-radius:14px;padding:16px;font-size:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#note .pill{margin-top:12px;width:100%;justify-content:center;padding:10px}

/* finger hint — mobile default: bottom-center pill, pointing finger */
#hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;pointer-events:none;
  display:flex;align-items:center;gap:10px;background:var(--amber);color:var(--ink);
  padding:12px 22px 12px 16px;border-radius:999px;box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);max-width:92vw}
#hint .finger{font-size:26px;line-height:1;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));animation:fingertap 1.1s ease-in-out infinite}
#hint .label{font:800 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes fingertap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-8deg)}}

/* desktop variant — points up-left toward the browser's own permission popup
   (Chrome/Edge/Firefox show it under the address bar, top-left) */
#hint.pc{left:28px;top:220px;bottom:auto;transform:none;flex-direction:row-reverse;border-radius:14px;padding:12px 18px 12px 20px}
#hint.pc .finger{animation:fingertap-pc 1.1s ease-in-out infinite;transform:rotate(-55deg)}
@keyframes fingertap-pc{0%,100%{transform:rotate(-55deg) translateY(0)}50%{transform:rotate(-55deg) translateY(-4px)}}
@media (max-width:860px){#hint.pc{left:50%;top:auto;bottom:28px;transform:translateX(-50%);flex-direction:row;border-radius:999px}
  #hint.pc .finger{animation:fingertap 1.1s ease-in-out infinite;transform:none}}
@media (min-width:768px){#popup{align-items:center}}

@media (prefers-reduced-motion:reduce){
  .beam,.cam,.waves,.stars,#hint .finger,#popup .box{animation:none}
}