@font-face{font-family:Kanit;font-weight:500;src:url(../fonts/Kanit-Medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:Kanit;font-weight:600;src:url(../fonts/Kanit-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:Kanit;font-weight:700;src:url(../fonts/Kanit-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:Kanit;font-weight:800;src:url(../fonts/Kanit-ExtraBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:Kanit;font-weight:900;src:url(../fonts/Kanit-Black.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(../fonts/PatrickHand-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Metal Mania";src:url(../fonts/MetalMania-Regular.ttf) format("truetype");font-display:swap}

:root{
  --ink:#140f0b;
  --night:#1b1410;
  --teak:#3a2416;
  --teak-2:#2a1a10;
  --teak-hi:#5a3a22;
  --brass:#c9973a;
  --brass-hi:#f2d58a;
  --gold:#f2c04e;
  --cream:#f6ead2;
  --paper:#efe4cc;
  --rule:#8fb3d9;
  --pen:#2b1d14;
  --red:#c8322a;
  --red-deep:#7d1712;
  --violet:#9b5cff;
  --lavender:#c9b3ff;
  --green:#5fbf5a;
  --muted:#c9b89b;
  --gutter:16px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;margin:0;background:var(--ink);color:var(--cream);font:500 17px/1.6 Kanit,system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(20,15,11,.92);box-shadow:0 1px 0 rgba(201,151,58,.35);backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px}
.nav .brand img{height:34px;width:auto;transition:transform .3s}
.nav .brand:hover img{transform:scale(1.06) rotate(-2deg)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.nav ul a:hover{opacity:1;color:var(--gold)}
.lang{display:flex;border:1px solid var(--brass);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;color:var(--cream);font:700 12px Kanit;letter-spacing:.1em;padding:6px 10px;cursor:pointer}
.lang button.on{background:var(--brass);color:var(--ink)}
.nav .cta-mini{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:800 16px/1 Kanit;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border-radius:12px;cursor:pointer;border:0;transition:transform .12s,filter .12s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-gold{color:#2a1606;background:linear-gradient(#ffe08a,#f2c04e 45%,#c98f22);box-shadow:inset 0 1px 0 #fff3c4,inset 0 -3px 0 #9a6614,0 0 0 2px #4a2c0c,0 8px 22px rgba(242,192,78,.35)}
.btn-ghost{color:var(--cream);background:rgba(20,15,11,.55);box-shadow:inset 0 0 0 2px var(--brass)}
.btn svg{width:18px;height:18px}

/* the house title: slanted Kanit Black on a red depth stack */
.title{font:900 clamp(34px,5.4vw,64px)/1 Kanit;text-transform:uppercase;letter-spacing:.01em;color:var(--cream);transform:skewX(-8deg);margin:0 0 18px;
  text-shadow:0 2px 0 var(--red),0 4px 0 var(--red),0 6px 0 var(--red-deep),0 8px 0 var(--ink),0 12px 24px rgba(0,0,0,.6)}
.kicker{display:flex;align-items:center;gap:12px;color:var(--gold);font:700 13px Kanit;letter-spacing:.32em;text-transform:uppercase;margin-bottom:14px}
.kicker:before,.kicker:after{content:"";height:1px;width:42px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker:after{background:linear-gradient(90deg,var(--gold),transparent)}
.kicker i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:none}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:640px}
section{position:relative;padding:110px 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .kicker{justify-content:center}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 90px;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url(../img/hero_poster.jpg) center/cover;transform:scale(1.06);animation:drift 24s ease-in-out infinite alternate}
.hero .bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,transparent 20%,rgba(20,15,11,.55) 60%),linear-gradient(180deg,rgba(20,15,11,.35),rgba(20,15,11,.15) 40%,var(--ink) 96%)}
@keyframes drift{to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero .wrap{position:relative;width:100%}
.hero .logo{width:min(560px,88vw);filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));margin-bottom:10px}
.hero .tag{font:700 clamp(18px,2.2vw,26px)/1.3 Kanit;color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.8);max-width:620px;margin:0 0 28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;font:700 12px Kanit;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(20,15,11,.7);box-shadow:inset 0 0 0 1px rgba(201,151,58,.6);color:var(--cream)}
.chip b{color:var(--gold);font-weight:800}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* brass-framed panel, like the game's carved boxes */
.frame{position:relative;border-radius:16px;padding:6px;background:linear-gradient(160deg,#f2d58a,#c9973a 30%,#7a5418 70%,#d9ad55);box-shadow:0 0 0 2px var(--ink),0 24px 60px rgba(0,0,0,.6)}
.frame>*{border-radius:11px}

/* trailer */
.trailer{background:radial-gradient(ellipse at 50% 0,rgba(155,92,255,.12),transparent 60%)}
.video{max-width:980px;margin:40px auto 0}
.video video{width:100%;aspect-ratio:16/9;background:#000;display:block}

/* story */
.story{background:linear-gradient(180deg,var(--ink),var(--night))}
.story .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.story p{color:var(--muted);margin:0 0 16px}
.story p strong{color:var(--cream)}
.cast{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* features */
.features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.card{background:linear-gradient(180deg,var(--teak),var(--teak-2));border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(201,151,58,.45),0 18px 40px rgba(0,0,0,.45);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:2px solid var(--brass)}
.card .t{padding:18px 20px 22px}
.card h3{font:900 22px/1.1 Kanit;text-transform:uppercase;margin:0 0 8px;transform:skewX(-6deg);color:var(--cream);text-shadow:0 2px 0 var(--red-deep)}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.card.serpih h3{font-family:"Metal Mania",Kanit;font-weight:400;text-transform:none;font-size:26px;color:var(--lavender);text-shadow:0 2px 0 #3b1a6e}

/* gallery */
.gallery{background:var(--night)}
.shots{columns:3 300px;column-gap:14px;margin-top:44px}
.shots button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(201,151,58,.35);break-inside:avoid}
.shots img{width:100%;transition:transform .35s,filter .35s;filter:saturate(.95)}
.shots button:hover img{transform:scale(1.04);filter:saturate(1.1)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,7,5,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.on{display:flex}
.lightbox img{max-height:88vh;border-radius:10px;box-shadow:0 0 0 3px var(--brass)}
.lightbox .x,.lightbox .nav-l,.lightbox .nav-r{position:absolute;background:rgba(20,15,11,.7);border:2px solid var(--brass);color:var(--cream);width:48px;height:48px;border-radius:50%;font:800 22px Kanit;cursor:pointer}
.lightbox .x{top:16px;right:16px}
.lightbox .nav-l{left:16px;top:50%}
.lightbox .nav-r{right:16px;top:50%}

/* early access */
.early{background:radial-gradient(ellipse at 50% 0,rgba(242,192,78,.12),transparent 55%),var(--ink)}
.early .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start;margin-top:40px}
.price{background:linear-gradient(180deg,var(--teak),var(--teak-2));border-radius:16px;padding:28px;box-shadow:inset 0 0 0 1px rgba(201,151,58,.5)}
.price .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed rgba(201,151,58,.35)}
.price .row:last-child{border:0}
.price .k{color:var(--muted)}
.price .v{font:800 18px Kanit;color:var(--cream);text-align:right}
.price .v s{color:var(--muted);font-weight:600;margin-right:8px}
.price .v.gold{color:var(--gold);font-size:24px}
.price h3{font:900 24px Kanit;text-transform:uppercase;margin:0 0 6px;transform:skewX(-6deg)}
.price .note{font-size:14px;color:var(--muted);margin:16px 0 0}

/* Arif's exercise book: paper, blue rules, red margin, his handwriting */
.book{position:relative;background:var(--paper);color:var(--pen);border-radius:6px 14px 14px 6px;padding:34px 30px 30px 64px;
  background-image:linear-gradient(90deg,transparent 46px,#e2766a 46px,#e2766a 48px,transparent 48px),repeating-linear-gradient(180deg,transparent 0 29px,var(--rule) 29px 30px);
  background-position:0 0,0 18px;box-shadow:inset 8px 0 0 #6d8fb8,inset 10px 0 0 #4d6c94,0 26px 60px rgba(0,0,0,.55);transform:rotate(-.6deg)}
.book h3{font:900 26px/30px Kanit;text-transform:uppercase;margin:0 0 30px;color:var(--pen)}
.book ol{list-style:none;counter-reset:s;margin:0;padding:0}
.book li{counter-increment:s;position:relative;font:22px/30px "Patrick Hand",cursive;margin:0 0 30px}
.book li:before{content:counter(s)".";position:absolute;left:-40px;top:0;color:var(--red);font:26px/30px "Patrick Hand"}
.book li small{display:block;font-size:18px;color:#5b4a3c}
.book .go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:800 14px/1 Kanit;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--cream);background:var(--pen);padding:11px 16px;border-radius:8px;box-shadow:0 3px 0 #000}
.book .go.gold{color:#2a1606;background:linear-gradient(#ffe08a,#f2c04e 50%,#c98f22);box-shadow:0 3px 0 #7a4f0f}
.book .red{color:var(--red)}
.book .tick{position:absolute;right:22px;bottom:16px;font:28px "Patrick Hand";color:var(--red);transform:rotate(-8deg)}
.faq{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.faq details{background:rgba(58,36,22,.5);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(201,151,58,.35);padding:16px 20px}
.faq summary{font:700 17px Kanit;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary:after{content:"+";color:var(--gold);font-weight:900}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--muted);margin:10px 0 0;font-size:15.5px}

/* footer */
footer{padding:56px 0 40px;border-top:1px solid rgba(201,151,58,.3);background:#0e0a07;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
footer img{height:28px;width:auto;opacity:.9}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--gold)}

/* text pages */
.page{max-width:720px;margin:0 auto;padding:120px var(--gutter) 80px}
.page h1{font:900 clamp(30px,5vw,44px)/1.05 Kanit;text-transform:uppercase;transform:skewX(-6deg);text-shadow:0 3px 0 var(--red-deep);margin:0 0 10px}
.page h2{font:800 20px Kanit;color:var(--gold);margin:34px 0 8px;text-transform:uppercase;letter-spacing:.06em}
.page p,.page li{color:var(--muted)}
.page strong{color:var(--cream)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}


@media (max-width:900px){
  section{padding:80px 0}
  .nav ul{display:none}
  .nav .cta-mini{display:inline-flex;margin-left:auto;padding:10px 14px;font-size:13px}
  .story .grid,.early .grid{grid-template-columns:1fr;gap:36px}
  .features .grid{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr}
}
@media (max-width:600px){
  .features .grid{grid-template-columns:1fr}
  .book{padding:28px 18px 24px 56px;transform:none}
  .book li{font-size:20px}
  .btn{padding:15px 20px;font-size:15px}
  .hero{padding-bottom:84px}
  .lightbox .nav-l,.lightbox .nav-r{top:auto;bottom:20px}
}

/* ---------- motion ---------- */
.nav ul a{position:relative}
.nav ul a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav ul a:hover:after,.nav ul a.on:after{transform:scaleX(1)}
.nav ul a.on{opacity:1;color:var(--gold)}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:30;background:linear-gradient(90deg,var(--red),var(--gold),var(--violet));transform-origin:left;transform:scaleX(0)}

/* button shine */
.btn{position:relative;overflow:hidden}
.btn-gold:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.hero .actions .btn-gold{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:inset 0 1px 0 #fff3c4,inset 0 -3px 0 #9a6614,0 0 0 2px #4a2c0c,0 8px 38px rgba(242,192,78,.7)}}

/* hero */
.hero .bg{will-change:transform}
.hero canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero .wrap{z-index:2}
.hero .logo{animation:logoIn 1.1s cubic-bezier(.2,1.4,.4,1) .15s both,logoFloat 6s ease-in-out 1.3s infinite}
@keyframes logoIn{0%{opacity:0;transform:scale(1.6) rotate(-4deg);filter:blur(10px) brightness(3)}60%{opacity:1;filter:blur(0) brightness(1.6) drop-shadow(0 0 40px rgba(155,92,255,.9))}100%{transform:none;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}}
@keyframes logoFloat{50%{transform:translateY(-8px)}}
.hero .logo-wrap{position:relative;display:inline-block}
.hero .logo-wrap:before{content:"";position:absolute;inset:-10% -5%;background:radial-gradient(ellipse,rgba(155,92,255,.45),transparent 65%);filter:blur(20px);animation:glow 4s ease-in-out infinite;z-index:-1}
@keyframes glow{50%{opacity:.45;transform:scale(1.08)}}
.hero .tag,.hero .actions,.hero .meta{animation:rise .8s ease-out both}
.hero .tag{animation-delay:.7s}.hero .actions{animation-delay:.85s}.hero .meta{animation-delay:1s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.dot{animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.scroll-cue{position:absolute;left:50%;bottom:48px;z-index:2;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(246,234,210,.6);border-radius:14px}
.scroll-cue:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* marquee strip */
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-deep));border-block:2px solid var(--ink);box-shadow:0 0 0 1px var(--brass);transform:rotate(-1.5deg) scale(1.04);position:relative;z-index:3;margin:-24px 0}
.ticker .run{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker span{font:900 22px/1 Kanit;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);padding:14px 0;white-space:nowrap;display:flex;align-items:center}
.ticker span:after{content:"◆";color:var(--gold);font-size:14px;margin:0 26px}
@keyframes tick{to{transform:translateX(-50%)}}

/* reveal variants */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.7,0,.2,1)}
.reveal.left{transform:translateX(-40px)}
.reveal.right{transform:translateX(40px)}
.reveal.wipe{opacity:1;transform:none;clip-path:inset(0 100% 0 0 round 16px)}
.reveal.in.wipe{clip-path:inset(0 0 0 0 round 16px)}
.reveal.zoom{transform:scale(.9)}
.reveal.in{opacity:1;transform:none}
.title{display:inline-block}
.reveal .title,.title.reveal{transition:transform .9s cubic-bezier(.2,1.3,.4,1),opacity .6s}
.reveal:not(.in) .title{transform:skewX(-8deg) translateY(30px) scale(.94);opacity:0}
.reveal.in .title{transition-delay:.1s}
.kicker:before,.kicker:after{transition:width .8s .2s}
.reveal:not(.in) .kicker:before,.reveal:not(.in) .kicker:after{width:0}

/* trailer play button */
.video{position:relative}
.play{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;border:0;padding:0;cursor:pointer;border-radius:11px;background:url(../img/trailer_poster.jpg) center/cover;overflow:hidden}
.play:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(20,15,11,.15),rgba(20,15,11,.6));transition:background .3s}
.play:hover:before{background:radial-gradient(circle,rgba(20,15,11,0),rgba(20,15,11,.45))}
.play i{position:relative;width:96px;height:96px;border-radius:50%;background:linear-gradient(#ffe08a,#f2c04e 45%,#c98f22);box-shadow:0 0 0 3px #4a2c0c,0 10px 30px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.play i:before,.play i:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:ring 2.2s ease-out infinite}
.play i:after{animation-delay:1.1s}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.play:hover i{transform:scale(1.1)}
.play svg{width:40px;height:40px;margin-left:6px;fill:#2a1606}
.play.gone{opacity:0;pointer-events:none;transition:opacity .4s}

/* story image ken-burns inside its frame */
.frame{overflow:hidden}
.story .frame img{transition:transform 8s ease-out;transform:scale(1.12)}
.story .frame.in img{transform:scale(1)}

/* cards: tilt + shine */
.features .grid{perspective:1200px}
.card{position:relative;transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .25s,opacity .8s}
.card:hover{box-shadow:inset 0 0 0 1px var(--gold),0 26px 60px rgba(0,0,0,.6),0 0 30px rgba(242,192,78,.18)}
.card .img{overflow:hidden;border-bottom:2px solid var(--brass)}
.card .img img{border:0;transition:transform .6s}
.card:hover .img img{transform:scale(1.08)}
.card:after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,236,180,.22),transparent 45%);opacity:0;transition:opacity .3s}
.card:hover:after{opacity:1}
.card.serpih:hover{box-shadow:inset 0 0 0 1px var(--violet),0 26px 60px rgba(0,0,0,.6),0 0 40px rgba(155,92,255,.35)}
.card.serpih h3{animation:flick 3s steps(1) infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}97%{opacity:.6}}

/* gallery */
.shots button{position:relative}
.shots button:after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px var(--gold);opacity:0;transition:opacity .3s}
.shots button:hover:after{opacity:1}
.lightbox img{animation:pop .3s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}}

.book .tick{animation:tickIn .6s cubic-bezier(.2,1.6,.4,1) both;animation-play-state:paused}
.book.in .tick{animation-play-state:running;animation-delay:.6s}
@keyframes tickIn{from{transform:rotate(-8deg) scale(3);opacity:0}}
.faq details{transition:box-shadow .2s,background .2s}
.faq details:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.faq summary:after{transition:transform .25s}
.faq details[open] summary:after{content:"+";transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal,.reveal.wipe{opacity:1;transform:none;clip-path:none}
  .reveal:not(.in) .title{transform:skewX(-8deg);opacity:1}
}
@media (max-width:600px){.ticker span{font-size:17px}.play i{width:72px;height:72px}.scroll-cue{display:none}}
.book.reveal.in{transform:rotate(-.6deg)}
@media (max-width:600px){.book.reveal.in{transform:none}}
main{overflow-x:clip}

/* hero loop video */
.hero .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.hero .bgvid.on{opacity:1}
.hero .bg:after{z-index:1}

/* store badges */
.stores{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;animation:rise .8s ease-out 1.15s both}
.store{position:relative;display:block;transition:transform .2s,filter .2s}
.store img{height:48px;width:auto}
a.store:hover{transform:translateY(-3px);filter:drop-shadow(0 6px 16px rgba(242,192,78,.35))}
.store.soon img{filter:grayscale(1) brightness(.75);opacity:.75}
.store .flag{position:absolute;top:-9px;right:-8px;font:800 10px/1 Kanit;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--brass);color:var(--ink);box-shadow:0 0 0 2px var(--ink);white-space:nowrap}
.store .flag.live{background:var(--green)}
@media (max-width:600px){.store img{height:42px}}

section{scroll-margin-top:64px}
.shots img{aspect-ratio:16/9;object-fit:cover}
.book .shot{width:min(280px,100%);margin:10px 0 4px;border:6px solid #fff;border-bottom-width:10px;border-radius:2px;box-shadow:0 6px 16px rgba(43,29,20,.35);transform:rotate(1.5deg)}