/* Noxcraft design system, round 2. One stylesheet for the studio home and every game page.
   A game differs from the studio only by data-game on <html>, which swaps the accent tokens.
   Motion is opt-in: the head script adds .js-motion (or .js-fade under reduced motion);
   without it every element is simply visible. */

:root{
  --bg:#0a0a0b;--surface:#111113;--raised:#18181b;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --text:#f4f4f5;--body:#c4c4c8;--muted:#8a8a93;--faint:#84848d;
  --accent:#e8e6e1;--accent-ink:#0a0a0b;--glow:rgba(255,255,255,.10);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms;--t-base:320ms;--t-slow:700ms;--t-reveal:900ms;
  --r-sm:6px;--r-md:12px;--r-lg:20px;--r-pill:999px;
  --side:clamp(16px,4vw,56px);--gutter:24px;--max:1280px;
  --sec:180px;--nav:72px;
  --fs-xl:clamp(52px,11vw,120px);--fs-l:clamp(36px,5.2vw,64px);--fs-title:clamp(28px,3vw,36px);
  --fs-lead:clamp(18px,1.6vw,22px);--fs-body:clamp(16px,1.2vw,17px);
  --serif:"Noto Serif Display",Georgia,serif;--sans:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
[data-game="bellfire"]{--accent:#ffb43a;--accent-ink:#140c04;--glow:rgba(255,140,40,.28);--bg:#0b0907;--surface:#14100c;--raised:#1d1711}
@media (max-width:760px){:root{--sec:96px;--nav:56px;--gutter:16px}}
@media (min-width:761px) and (max-width:1100px){:root{--sec:120px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--bg);color:var(--body);font:400 var(--fs-body)/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 20px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font:600 15px var(--sans);transition:top var(--t-fast)}
.skip:focus{top:12px}

/* type */
.wrap{width:min(100% - 2*var(--side),var(--max));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.label{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.display-xl,.display-l,.title{font-family:var(--serif);font-weight:500;color:var(--text);text-wrap:balance}
.display-xl{font-size:var(--fs-xl);line-height:1;letter-spacing:-.025em}
.display-l{font-size:var(--fs-l);line-height:1.05;letter-spacing:-.02em}
.display-l em,.display-xl em{font-style:italic}
.title{font-size:var(--fs-title);line-height:1.1}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);max-width:34ch;text-wrap:pretty}
.prose{max-width:62ch;text-wrap:pretty}
@media (max-width:760px){.label{font-size:11px}.title{line-height:1.15}.display-l{line-height:1.1}}

section{position:relative}
.sec{padding-block:var(--sec)}
.head{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:72px}
.head--center{align-items:center;text-align:center}
.head .display-l{max-width:16ch}
.head--center .display-l{max-width:18ch}
@media (max-width:760px){.head{gap:16px;margin-bottom:40px}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-pill);
  font:500 15px/1 var(--sans);letter-spacing:.01em;color:var(--text);white-space:nowrap;cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.btn-sm{height:40px;padding:0 18px}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px var(--glow)}
.btn-secondary{background:transparent;border-color:var(--line-strong)}
.btn-secondary:hover{background:rgba(255,255,255,.06)}
/* a control that is announced but not yet usable (the Steam page, before it is live) */
.btn.is-disabled{opacity:.45;cursor:default;pointer-events:none}
.btn:active{transform:scale(.98)}
.link{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sans);letter-spacing:.01em;color:var(--text)}
.link span{display:inline-block;transition:transform var(--t-base) var(--ease-out)}
.link:hover span,.post:hover .link span{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
@media (max-width:760px){
  .actions{flex-direction:column;align-items:stretch;gap:12px}
  .actions .btn{width:100%}
  .actions .link{justify-content:center;height:44px}
}
/* ambient pulse, game pages only; on a pseudo-element so hover shadow still works */
html[data-game] .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 var(--glow);animation:pulse 4s var(--ease-io) infinite alternate}
@keyframes pulse{to{box-shadow:0 0 24px var(--glow)}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background-color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),backdrop-filter var(--t-base)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font:600 17px/1 var(--sans);letter-spacing:-.01em}
.brand svg{flex:none;stroke:var(--text)}
.brand--game{gap:12px}
.brand--game b{font:500 20px/1 var(--serif);letter-spacing:0}
.brand--game .label{font-size:11px;padding-top:2px}
.nav-links{display:flex;gap:32px;margin-left:auto}
.nav-links a{font:500 15px/1 var(--sans);letter-spacing:.01em;color:var(--body);transition:color var(--t-fast) var(--ease-out)}
.nav-links a:hover{color:var(--text)}
.menu{display:none}
@media (max-width:760px){
  .nav .wrap{gap:12px}
  .nav-links,.nav>.wrap>.btn-cta{display:none}
  .nav .btn-play{margin-left:auto}
  .menu{display:block}
  .menu summary{list-style:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font:500 15px/1 var(--sans);color:var(--text);cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:rgba(255,255,255,.06)}
  .sheet{position:fixed;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));padding:24px 16px 48px;background:color-mix(in srgb,var(--bg) 96%,transparent);display:flex;flex-direction:column}
  .sheet a{padding:14px 0;border-bottom:1px solid var(--line);font:500 28px/1.15 var(--serif);color:var(--text)}
  .brand--game .label{display:none}
}
@media (min-width:761px){.btn-play{display:none}}

/* hero (shared) */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex}
.hero canvas.fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0}
.hero canvas.fx.on{opacity:1;transition:opacity 1200ms ease 200ms}
.hero-fade{position:relative;z-index:3;width:100%;display:flex;align-self:stretch}
.scroll-cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-cue i{display:block;width:1px;height:32px;background:linear-gradient(var(--faint),var(--muted));transform-origin:top}
.js-motion .scroll-cue i{height:32px;animation:cue 2s var(--ease-io) 2s infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:760px){.scroll-cue{bottom:24px}}

/* studio hero */
.hero--home{align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(50% 40% at 50% 55%,rgba(255,255,255,.045),transparent),var(--bg)}
.hero--home::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 50%,transparent 45%,rgba(0,0,0,.7) 100%)}
.hero--home .hero-fade{align-items:center;justify-content:center;padding:calc(var(--nav) + 24px) var(--side) 96px}
.hero-in{display:flex;flex-direction:column;align-items:center;max-width:100%}
.hero-in .label{margin-bottom:28px}
.wordmark{padding-bottom:.06em}
.ch{display:inline-block}
.sweep{position:relative;width:min(560px,86%);height:1px;margin:32px 0 36px;overflow:hidden;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.sweep::before{content:"";position:absolute;inset:0 auto 0 0;width:36%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translateX(-120%);opacity:0}
.js-motion .sweep::before{animation:sweep 1400ms var(--ease-io) 1100ms both}
@keyframes sweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(380%);opacity:1}}
.hero-in .lead{max-width:22ch;font-size:clamp(20px,2.1vw,28px);color:var(--text);line-height:1.35;margin-bottom:40px}
@media (max-width:760px){
  .hero-in .label{margin-bottom:20px}
  .sweep{margin:24px 0 28px}
  .hero-in .lead{margin-bottom:32px;font-size:20px}
  .hero--home .hero-in{width:100%}
}

/* load sequence (only when motion is allowed) */
.js-motion .seq{opacity:0;animation:rise var(--t-reveal) var(--ease-out) var(--d,0ms) forwards}
.js-motion .ch{opacity:0;animation:ch var(--t-reveal) var(--ease-out) calc(400ms + var(--i)*60ms) forwards}
@keyframes rise{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ch{from{opacity:0;transform:translateY(.3em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* scroll reveal */
.js-motion [data-reveal],.js-motion [data-stagger]>*{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out),filter var(--t-reveal) var(--ease-out),clip-path 1100ms var(--ease-out)}
.js-motion [data-reveal].is-in,.js-motion [data-stagger].is-in>*{opacity:1;transform:none;filter:blur(0)}
.js-motion [data-stagger].is-in>*:nth-child(2){transition-delay:80ms}
.js-motion [data-stagger].is-in>*:nth-child(3){transition-delay:160ms}
.js-motion [data-stagger].is-in>*:nth-child(4){transition-delay:240ms}
.js-motion [data-stagger].is-in>*:nth-child(5){transition-delay:320ms}
.js-motion [data-stagger].is-in>*:nth-child(n+6){transition-delay:400ms}
.js-motion [data-clip]{clip-path:inset(8% 8% 8% 8% round 20px)}
.js-motion [data-clip].is-in{clip-path:inset(0 0 0 0 round 20px)}
.js-motion [data-clip].done{clip-path:none}
.js-fade [data-reveal],.js-fade [data-stagger]>*{opacity:0;transition:opacity 200ms linear}
.js-fade [data-reveal].is-in,.js-fade [data-stagger].is-in>*{opacity:1}

/* game card */
.cell{position:relative}
.card{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:border-color var(--t-base) var(--ease-out);will-change:transform}
.card:hover,.card:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.card--16x9{aspect-ratio:16/9}.card--4x3{aspect-ratio:4/3}.card--3x4{aspect-ratio:3/4}.card--16x10{aspect-ratio:16/10}
.card .art{position:absolute;inset:0;z-index:0;transform:translate(var(--px,0px),var(--py,0px)) scale(1.08);transform-origin:center}
.card .art img,.card .art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .art video{opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.card.playing .art video{opacity:1}
.card .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(10,10,11,.92) 0%,rgba(10,10,11,.55) 40%,transparent 70%)}
.card .glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--t-base) var(--ease-out);
  background:radial-gradient(60% 50% at var(--mx,50%) var(--my,100%),var(--glow),transparent)}
.card:hover .glow,.card:focus-within .glow{opacity:1}
.card .content{position:absolute;inset:auto 0 0 0;z-index:3;padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transform:translate(var(--cx,0px),var(--cy,0px))}
.card .content .label{color:var(--body)}
.card .content .title{margin-top:4px}
.card .content p{max-width:52ch;color:var(--body)}
.card .content .actions{margin-top:12px}
@media (hover:none){.card .glow{opacity:.6;background:radial-gradient(60% 50% at 50% 100%,var(--glow),transparent)}}
@media (max-width:760px){.card .content{padding:20px;gap:10px}.card .content .actions{width:100%}}
.span-12{grid-column:span 12}.span-6{grid-column:span 6}
@media (max-width:760px){.span-6{grid-column:span 12}.card--16x9.phone-4x5{aspect-ratio:auto;min-height:620px}}
.cards{row-gap:var(--gutter)}
.card--coming .art img{filter:grayscale(1) brightness(.4)}
.card--coming .content p{color:var(--muted)}
.card--blank{background:var(--surface)}
.card--blank .qmark{position:absolute;right:6%;top:50%;transform:translateY(-52%);z-index:0;font:500 clamp(160px,18vw,240px)/1 var(--serif);color:rgba(255,255,255,.04);user-select:none}
.card--blank .scrim{background:none}

/* studio block */
.studio-grid{align-items:start;row-gap:48px}
.studio-grid .col-l{grid-column:1 / span 6;display:flex;flex-direction:column;gap:24px}
.studio-grid .col-r{grid-column:8 / span 5;display:flex;flex-direction:column;gap:56px;padding-top:44px}
@media (max-width:1100px){.studio-grid .col-l{grid-column:1 / span 12}.studio-grid .col-r{grid-column:1 / span 12;padding-top:0}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.stat{border-top:1px solid var(--line-strong);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.stat b{font:500 48px/1 var(--serif);color:var(--text);letter-spacing:-.02em}
.stat .label{line-height:1.5}
@media (max-width:760px){.stats{gap:12px}.stat b{font-size:40px}.stat{padding-top:16px}}

/* devlog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:760px){.posts{grid-template-columns:1fr;gap:40px}}
.post{display:flex;flex-direction:column;gap:16px;height:100%;transition:transform var(--t-base) var(--ease-out)}
.post:hover{transform:translateY(-4px)}
.post .thumb{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-base) var(--ease-out)}
.post:hover .thumb img{transform:scale(1.04)}
.post .title{font-size:24px;line-height:1.2}
.more{margin-top:56px}
@media (max-width:760px){.more{margin-top:40px}}

/* newsletter */
.nl{padding-block:0 var(--sec)}
.nl-panel{position:relative;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:72px var(--side);display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;overflow:hidden}
.nl-panel::before{content:"";position:absolute;top:0;left:50%;width:120px;height:1px;transform:translateX(-50%);background:var(--accent)}
.nl-panel::after{content:"";position:absolute;inset:0 0 auto;height:200px;pointer-events:none;background:radial-gradient(50% 100% at 50% 0%,var(--glow),transparent)}
.nl-panel>*{position:relative;z-index:1}
.nl-panel .display-l{max-width:14ch}
.nl-panel .lead{max-width:40ch;margin-bottom:8px}
.nl-form{display:flex;align-items:center;width:min(100%,520px);height:56px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg);transition:border-color var(--t-fast)}
.nl-form:focus-within{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:3px}
.nl-form input{flex:1;min-width:0;height:100%;padding:0 20px;border:0;background:transparent;color:var(--text);font:400 16px var(--sans);outline:none}
.nl-form input::placeholder{color:var(--faint)}
.nl-form .btn{height:46px}
.nl-note{margin-top:4px;color:var(--faint)}
@media (max-width:760px){
  .nl-panel{padding:48px 20px;gap:20px}
  .nl-form{flex-direction:column;height:auto;padding:0;border:0;background:none;gap:12px}
  .nl-form:focus-within{outline:0}
  .nl-form input{flex:none;width:100%;height:56px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--bg)}
  .nl-form input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:3px}
  .nl-form .btn{width:100%;height:52px}
}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:72px 48px}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.foot-brand{display:flex;flex-direction:column;gap:16px}
.foot-brand p{color:var(--muted);font-size:15px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.foot-cols h3{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.foot-cols li+li{margin-top:12px}
.foot-cols a{font-size:15px;color:var(--body);transition:color var(--t-fast)}
.foot-cols a:hover{color:var(--text)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:72px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:760px){
  .foot{padding-block:48px 32px}
  .foot-top{grid-template-columns:1fr;gap:40px}
  .foot-cols{grid-template-columns:1fr;gap:32px}
  .foot-bot{margin-top:48px}
}

/* ---- game page ---- */
.hero--game{align-items:flex-end;background:var(--bg)}
.hero-art{position:absolute;inset:-25svh 0 0 0;z-index:0;transform:translateY(calc(var(--sy,0)*.25px))}
.hero-art img,.hero-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(55% 50% at 24% 74%,rgba(0,0,0,.5),transparent),linear-gradient(to bottom,rgba(10,10,11,.55) 0%,rgba(10,10,11,.15) 35%,rgba(10,10,11,.75) 75%,var(--bg) 100%)}
.hero--game .hero-fade{padding-bottom:96px;align-items:flex-end}
.hero--game .hero-in{align-items:flex-start;width:min(100%,calc(var(--max)*7/12));gap:0}
.hero--game .hero-in .label{margin-bottom:24px}
.title-wrap{position:relative;margin-bottom:24px}
.title-wrap .bloom{position:absolute;inset:-40% -30% -40% -20%;z-index:-1;pointer-events:none;opacity:.4;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.js-motion .title-wrap .bloom{opacity:0;animation:bloom 1600ms var(--ease-out) 1500ms forwards}
@keyframes bloom{to{opacity:.6}}
.hero--game .lead{max-width:30ch;margin-bottom:36px;color:var(--text);font-size:clamp(20px,2vw,26px)}
.hero--game .meta{margin-top:24px}
@media (max-width:760px){
  .hero--game .hero-fade{padding-bottom:40px}
  .hero--game .lead{margin-bottom:28px}
  .hero--game .meta{margin-top:20px}
  .hero-art{inset:-12svh 0 0 0}
}
.pitch{text-align:center}
.pitch .head{margin-bottom:40px}
.pitch .prose{margin-inline:auto;font-size:clamp(17px,1.5vw,20px)}
.rule{width:1px;height:72px;margin:56px auto 0;background:linear-gradient(var(--line-strong),transparent)}
.feature{align-items:center;row-gap:32px}
.feature+.feature{margin-top:120px}
.feature .media{grid-column:1 / span 7}
.feature .text{grid-column:9 / span 4;display:flex;flex-direction:column;gap:16px}
.feature--flip .media{grid-column:6 / span 7;grid-row:1}
.feature--flip .text{grid-column:1 / span 4;grid-row:1}
.feature .text .title{margin-bottom:4px}
.feature .text p{max-width:36ch}
.feature .text .num{color:var(--accent);filter:saturate(.9)}
@media (max-width:1100px){.feature .media,.feature--flip .media{grid-column:1 / span 12;grid-row:auto}.feature .text,.feature--flip .text{grid-column:1 / span 12;grid-row:auto}.feature+.feature{margin-top:72px}}
@media (max-width:760px){.feature+.feature{margin-top:56px}}

.crews{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
.crew .title{font-size:22px;line-height:1.1}
.crew .content{padding:20px;gap:6px}
.crew .content .label{font-size:10px}
@media (max-width:1100px) and (min-width:761px){.crews{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .crews{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--side)*-1);padding-inline:var(--side);scroll-padding-inline:var(--side);padding-bottom:8px;scrollbar-width:none}
  .crews::-webkit-scrollbar{display:none}
  .crews>*{flex:0 0 62vw;scroll-snap-align:start}
}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.gallery .shot{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.gallery .shot:hover img{transform:scale(1.04)}
@media (max-width:1100px) and (min-width:761px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.gallery{grid-template-columns:1fr;gap:16px}}

.cta{position:relative;display:grid;place-items:center;min-height:min(80svh,760px);padding:120px var(--side);text-align:center;overflow:hidden;isolation:isolate}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,11,.92) 0%,rgba(10,10,11,.6) 45%,rgba(10,10,11,.35) 100%),radial-gradient(50% 45% at 50% 52%,rgba(0,0,0,.45),transparent)}
.cta::after{content:"";position:absolute;inset:auto 0 0;height:160px;z-index:-1;background:linear-gradient(transparent,var(--bg))}
.cta-in{display:flex;flex-direction:column;align-items:center;gap:40px}
.cta .actions{justify-content:center}
@media (max-width:760px){.cta{padding:96px 16px;min-height:0}.cta-in{gap:32px;width:100%}}

/* reduced motion: nothing moves, nothing loops */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .hero-art video,.card .art video{display:none}
  .card,.card .art,.card .content{transform:none!important}
  .card .art{transform:scale(1.08)!important}
  .post:hover,.btn-primary:hover{transform:none}
  .nav{-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero-fade{animation:fadeout linear both;animation-timeline:scroll(root block);animation-range:0 60svh}
    .hero-art{animation:drift linear both;animation-timeline:scroll(root block);animation-range:0 100svh}
    @keyframes fadeout{to{opacity:0}}
    @keyframes drift{to{transform:translateY(25svh)}}
  }
}
.hero--game .label{color:var(--body)}
@media (max-width:760px){.card .scrim{background:linear-gradient(to top,rgba(10,10,11,.95) 0%,rgba(10,10,11,.85) 55%,rgba(10,10,11,.35) 85%,transparent 100%)}.card--blank .scrim{background:none}}