/* Thornheim — homepage experience */

.thorn-cinematic{
  --bg: #070605;
  --bg-2: #0e0c0a;
  --charcoal: #171513;
  --gunmetal: #2a2724;
  --gray: #8c8680;
  --gray-dim: #4a4642;
  --ink: #f2ede5;
  --accent: #f29f27; /* sampled from the emblem's core */
  --accent-deep: #c9761a;

  --r: 28px;
  --r-sm: 10px;
  --nav-h: 52px;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1240px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

.thorn-cinematic *, .thorn-cinematic *::before, .thorn-cinematic *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
.thorn-cinematic{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.thorn-cinematic img{ display: block; max-width: 100%; height: auto; }
.thorn-cinematic figure{ margin: 0; }
.thorn-cinematic h1, .thorn-cinematic h2, .thorn-cinematic h3, .thorn-cinematic p{ margin: 0; }
.thorn-cinematic button{ font: inherit; color: inherit; }
.thorn-cinematic a{ color: inherit; }
.thorn-cinematic :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.thorn-cinematic .sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.thorn-cinematic .skip{ position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; }
.thorn-cinematic .skip:focus{ top: 12px; }

.thorn-cinematic .eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.thorn-cinematic .display{
  font-size: clamp(44px, 7.2vw, 128px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 700;
}
.thorn-cinematic .lede{
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--gray);
  max-width: 30ch;
}
.thorn-cinematic .lede::first-line{ color: var(--ink); }
.thorn-cinematic .muted{ color: var(--gray-dim); }

/* ───────── Navigation ───────── */
.thorn-cinematic .nav{
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  background: rgba(7, 6, 5, .82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: transform .5s var(--ease-out), height .4s var(--ease-out), background-color .4s;
}
.thorn-cinematic .nav.is-hidden{ transform: translateY(-100%); }
.thorn-cinematic .nav.is-compact{ --nav-h: 46px; height: 46px; }
.thorn-cinematic .nav__inner{
  max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.thorn-cinematic .nav__brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.thorn-cinematic .nav__brand img{ height: 26px; width: 26px; }
.thorn-cinematic .nav__brand span{ font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.thorn-cinematic .nav__links{ display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.thorn-cinematic .nav__links a{ font-size: 13px; font-weight: 500; color: #cfc9c1; text-decoration: none; transition: color .2s; }
.thorn-cinematic .nav__links a:hover{ color: var(--ink); }
.thorn-cinematic .nav__links a{ position: relative; }
.thorn-cinematic .nav__links a[aria-current="true"]{ color: var(--ink); }
.thorn-cinematic .nav__links a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transition: transform .45s var(--ease-out);
}
.thorn-cinematic .nav__links a[aria-current="true"]::after{ transform: scaleX(1); }
.thorn-cinematic .nav__actions{ display: flex; align-items: center; gap: 10px; }
.thorn-cinematic .nav__play{
  font-size: 12px; font-weight: 700; text-decoration: none; color: var(--bg);
  background: var(--accent); border-radius: var(--r-sm); padding: 7px 14px;
  transition: background-color .2s;
}
.thorn-cinematic .nav__play:hover{ background: #ffb24a; }
.thorn-cinematic .nav__ip{
  background: none; border: 1px solid var(--gunmetal); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; color: var(--ink);
  transition: border-color .2s, color .2s;
}
.thorn-cinematic .nav__ip:hover{ border-color: var(--accent); color: var(--accent); }

/* ───────── Hero ───────── */
.thorn-cinematic .hero{ position: relative; display:block; height:260vh; min-height:0; padding:0; overflow:visible; }
.thorn-cinematic .hero::after{ display:none; }
.thorn-cinematic .hero__stage{
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(60% 55% at 50% 46%, #15110d 0%, var(--bg) 70%);
}
.thorn-cinematic .hero__canvas, .thorn-cinematic .hero__fallback{
  position: absolute; inset: 0; margin: auto;
}
.thorn-cinematic .hero__canvas{ width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.thorn-cinematic .hero__canvas.is-ready{ opacity: 1; }
.thorn-cinematic .hero__fallback{
  height: min(86vh, 880px); width: auto; max-width: min(88vw, 880px); aspect-ratio: 1;
  object-fit: contain; opacity: 1; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 34px rgba(242,159,39,.2));
  animation: thorn-emblem-enter 1.5s var(--ease-out) both, thorn-emblem-breathe 5s ease-in-out 1.5s infinite;
  transition: opacity .6s ease;
}
.thorn-cinematic .hero__canvas{ display: none; }
.thorn-cinematic .hero__stage::after{ content:""; position:absolute; width:min(62vw,620px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(242,159,39,.14),transparent 68%); filter:blur(18px); pointer-events:none; }
@keyframes thorn-emblem-enter{ from{ opacity:0; transform:scale(.72) translateY(36px); filter:blur(12px) drop-shadow(0 0 0 rgba(242,159,39,0)); } to{ opacity:1; transform:scale(1) translateY(0); filter:blur(0) drop-shadow(0 0 34px rgba(242,159,39,.2)); } }
@keyframes thorn-emblem-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
.thorn-cinematic .is-webgl .hero__fallback.is-hidden{ opacity: 0; }
.thorn-cinematic .hero__copy{
  position: absolute; left: 0; right: 0; bottom: max(5vh, 28px);
  text-align: center; padding: 0 var(--gutter);
}
.thorn-cinematic .hero__title{
  font-family: var(--font) !important; font-size: clamp(30px, 3.6vw, 58px) !important;
  line-height: 1.02 !important; font-weight: 700 !important; letter-spacing: -.045em !important;
  text-transform: none !important; color: var(--ink); font-style: normal !important;
}
.thorn-cinematic .hero__caption{
  position: absolute; left: 0; right: 0; bottom: 8vh; text-align: center;
  font-size: clamp(28px, 3.6vw, 56px); font-weight: 700; letter-spacing: -.03em;
  opacity: 0; padding: 0 var(--gutter); pointer-events: none;
}
.thorn-cinematic .hero__caption[data-hero-caption="b"]{ color: var(--accent); }
.thorn-cinematic .hero__veil{ position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }

/* ───────── Statement (word scrub) ───────── */
.thorn-cinematic .statement{ height: 190vh; position: relative; }
.thorn-cinematic .statement__stage{
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center; gap: 32px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.thorn-cinematic .statement__text{
  font-size: clamp(44px, 7.4vw, 140px);
  line-height: 1.02; letter-spacing: -.04em; font-weight: 700;
  max-width: 13ch;
}
.thorn-cinematic [data-words] .w{ color: var(--gray-dim); transition: color .25s linear; }
.thorn-cinematic [data-words] .w.is-on{ color: var(--ink); }
.thorn-cinematic [data-words] .w.is-accent.is-on{ color: var(--accent); }

/* ───────── Full-bleed frame ───────── */
.thorn-cinematic .frame{ position: relative; }
.thorn-cinematic .frame__stage{ position: relative; height: 220vh; }
.thorn-cinematic .frame__media{
  position: sticky; top: 0; width: 100vw; height: 100vh; overflow: hidden;
  will-change: transform; transform-origin: 50% 50%;
}
.thorn-cinematic .frame__media img{ width: 100%; height: 100%; object-fit: cover; }
.thorn-cinematic .frame__media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,6,5,.0) 45%, rgba(7,6,5,.75) 100%);
}
.thorn-cinematic .frame__copy{
  position: absolute; left: 0; right: 0; bottom: 0; height: 100vh;
  display: flex; align-items: flex-end;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 10vh;
  pointer-events: none;
}
.thorn-cinematic .frame__copy h2{ text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.thorn-cinematic .frame__after{
  max-width: var(--max); margin: 0 auto; padding: 16vh var(--gutter) 22vh;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: clamp(34px,7vw,110px); align-items: center;
}
.thorn-cinematic .frame__after-media{ position:relative; min-height:clamp(320px,48vw,620px); overflow:hidden; border-radius:var(--r); border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.thorn-cinematic .frame__after-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thorn-cinematic .frame__after-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(7,6,5,.58)); pointer-events:none; }
.thorn-cinematic .frame__after-copy{ display:grid; gap:22px; }
.thorn-cinematic .frame__after-copy .lede{ max-width:26ch; }

/* ───────── Realm: SMP ───────── */
.thorn-cinematic .realm__intro{
  max-width: var(--max); margin: 0 auto; padding: 8vh var(--gutter) 14vh;
  display: grid; gap: 28px;
}
.thorn-cinematic .realm__lead{
  font-size: clamp(36px, 5.2vw, 88px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700;
}
.thorn-cinematic .realm__pin{ height: 280vh; position: relative; }
.thorn-cinematic .realm__stage{ position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.thorn-cinematic .realm__media{
  position: absolute; inset: 0;
  clip-path: inset(22% 26% 22% 26% round var(--r));
  will-change: clip-path;
}
.thorn-cinematic .realm__media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; }
.thorn-cinematic .realm__media::after{ content: ""; position: absolute; inset: 0; background: rgba(7,6,5,.38); }
.thorn-cinematic .realm__title{ position: relative; text-align: center; }
.thorn-cinematic .realm__kicker{
  font-size: clamp(16px, 1.4vw, 22px); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.thorn-cinematic .realm__name{
  font-size: clamp(120px, 24vw, 420px); line-height: .82; letter-spacing: -.06em; font-weight: 800;
  color: var(--ink);
}
.thorn-cinematic .realm__line{
  position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center;
  font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; padding: 0 var(--gutter); opacity: 0;
}

/* ───────── Heroes: pinned sequence ───────── */
.thorn-cinematic .heroes{ position: relative; height: 480vh; background: var(--bg); }
.thorn-cinematic .heroes__stage{ position: sticky; top: 0; height: 100vh; overflow: hidden; }
.thorn-cinematic .heroes__head{
  position: absolute; z-index: 3; top: calc(var(--nav-h) + 4vh); left: 0; right: 0;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 10px; pointer-events: none;
}
.thorn-cinematic .heroes__q{ max-width:22ch; font-size: clamp(20px, 2vw, 34px); line-height:1.05; font-weight: 700; color: var(--gray); }
.thorn-cinematic .heroes__list{ list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.thorn-cinematic .hero-card{ position: absolute; inset: 0; }
.thorn-cinematic .hero-card__media{
  position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
  overflow: hidden;
}
.thorn-cinematic .hero-card__media img{ width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.thorn-cinematic .hero-card__media::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(7,6,5,0) 38%);
}
.thorn-cinematic .hero-card__copy{
  position: absolute; left: 0; bottom: 12vh; z-index: 2;
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  width: min(46vw, 760px); max-width: calc(100vw - (2 * var(--gutter))); padding-right:2vw;
}
.thorn-cinematic .hero-card__num{ display: block; font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .1em; margin-bottom: 8px; }
.thorn-cinematic .hero-card__name{
  font-family:var(--font); font-size: clamp(48px, 6.4vw, 112px); line-height: .91; letter-spacing: -.055em; font-weight: 800;
  overflow-wrap:normal; word-break:normal; text-wrap:balance;
}
.thorn-cinematic .hero-card__copy p{
  margin-top: 24px; max-width: 30ch;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--gray); font-weight: 500;
}
.thorn-cinematic .heroes__progress{
  position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px;
}
.thorn-cinematic .heroes__progress span{ width: 2px; height: 28px; background: var(--gunmetal); transition: background-color .3s; }
.thorn-cinematic .heroes__progress span.is-on{ background: var(--accent); }

/* ───────── Pause ───────── */
.thorn-cinematic .pause{
  min-height: 120vh; display: flex; flex-direction: column; justify-content: center; gap: 28px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.thorn-cinematic .pause__text{
  font-size: clamp(64px, 8vw, 150px); line-height: .98; letter-spacing: -.045em; font-weight: 700; max-width: 10ch;
}

/* ───────── Reel ───────── */
.thorn-cinematic .reel{ position: relative; height: 400vh; }
.thorn-cinematic .reel__stage{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 4vh;
}
.thorn-cinematic .reel__title{
  max-width: var(--max); width: 100%; margin: 0 auto; padding: 0 var(--gutter);
  font-size: clamp(32px, 4vw, 64px); letter-spacing: -.035em; font-weight: 700;
}
.thorn-cinematic .reel__track{
  list-style: none; margin: 0; padding: 0 var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: flex; gap: clamp(14px, 1.6vw, 24px);
  will-change: transform;
}
.thorn-cinematic .slide{
  position: relative; flex: none;
  height: min(68vh, 720px); width: min(40vh, 420px);
  border-radius: var(--r); overflow: hidden; background: var(--charcoal);
}
.thorn-cinematic .slide--wide{ width: min(110vh, 78vw, 1180px); }
.thorn-cinematic .slide img{ width: 100%; height: 100%; object-fit: cover; }
.thorn-cinematic .slide::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,6,5,.72) 0%, rgba(7,6,5,0) 34%);
}
.thorn-cinematic .slide__copy{ position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding: clamp(20px, 2.4vw, 36px); }
.thorn-cinematic .slide__copy h3{ font-size: clamp(22px, 2vw, 32px); letter-spacing: -.02em; font-weight: 700; }
.thorn-cinematic .slide__copy p{ margin-top: 6px; font-size: 16px; color: #d8d2ca; max-width: 32ch; font-weight: 500; }

/* ───────── Join ───────── */
.thorn-cinematic .join{
  max-width: var(--max); margin: 0 auto; padding: 22vh var(--gutter) 14vh;
  display: grid; gap: 28px; justify-items: start;
}
.thorn-cinematic .join__title{ margin-bottom: 4vh; }
.thorn-cinematic .join__steps{
  list-style: none; margin: 0 0 6vh; padding: 0; display: grid; gap: 4px;
  font-size: clamp(24px, 2.8vw, 44px); font-weight: 600; letter-spacing: -.025em;
}
.thorn-cinematic .join__steps li{ display: flex; align-items: baseline; gap: .6em; color: var(--ink); }
.thorn-cinematic .join__steps span{ font-size: .45em; font-weight: 700; color: var(--accent); min-width: 1.2em; }
.thorn-cinematic .ip{
  display: inline-flex; align-items: center; gap: 22px;
  background: var(--charcoal); border: 1px solid var(--gunmetal); border-radius: var(--r-sm);
  padding: 18px 22px; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.thorn-cinematic .ip:hover{ border-color: var(--accent); }
.thorn-cinematic .ip__addr{ font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.01em; }
.thorn-cinematic .ip__action{ font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.thorn-cinematic .ip__hint{ font-size: 14px; color: var(--gray); margin-top: -12px; }
.thorn-cinematic .cta{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.thorn-cinematic .cta--center{ justify-content: center; }
.thorn-cinematic .cta a{
  font-size: 16px; font-weight: 700; text-decoration: none; border-radius: var(--r-sm);
  padding: 14px 22px; transition: background-color .2s, border-color .2s, color .2s;
}
.thorn-cinematic .cta__primary{ background: var(--accent); color: var(--bg); }
.thorn-cinematic .cta__primary:hover{ background: #ffb24a; }
.thorn-cinematic .cta__secondary{ color: var(--ink); border: 1px solid var(--gunmetal); }
.thorn-cinematic .cta__secondary:hover{ border-color: var(--ink); }
.thorn-cinematic .status{ display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--gray); }
.thorn-cinematic .status[hidden]{ display: none; }
.thorn-cinematic .status__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--gray-dim); }
.thorn-cinematic .status.is-online .status__dot{ background: var(--accent); box-shadow: 0 0 0 4px rgba(242,159,39,.16); }
.thorn-cinematic .status.is-online{ color: var(--ink); }

.thorn-cinematic .faq{ width: 100%; margin-top: 16vh; border-top: 1px solid var(--gunmetal); }
.thorn-cinematic .faq__title{ font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); padding: 28px 0 8px; }
.thorn-cinematic .faq details{ border-bottom: 1px solid var(--gunmetal); }
.thorn-cinematic .faq summary{
  list-style: none; cursor: pointer; padding: 24px 0;
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.thorn-cinematic .faq summary::-webkit-details-marker{ display: none; }
.thorn-cinematic .faq summary::after{
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray);
  transform: rotate(45deg) translateY(-4px); transition: transform .35s var(--ease-out);
}
.thorn-cinematic .faq details[open] summary::after{ transform: rotate(-135deg) translateY(-2px); }
.thorn-cinematic .faq details p{ padding: 0 0 26px; max-width: 56ch; color: var(--gray); font-size: 18px; }

/* ───────── Game network / folded carousel ───────── */
.thorn-cinematic .game-network{ padding:16vh var(--gutter) 18vh; overflow:hidden; background:linear-gradient(180deg,var(--bg),#0c0907 52%,var(--bg)); }
.thorn-cinematic .game-network__head{ max-width:var(--max); margin:0 auto 7vh; }
.thorn-cinematic .game-network__head h2{ margin:16px 0 20px; font-size:clamp(44px,7vw,112px); line-height:.92; letter-spacing:-.055em; }
.thorn-cinematic .game-network__head h2 span{ color:var(--accent); }
.thorn-cinematic .game-network__head>p:last-child{ max-width:60ch; color:var(--gray); font-size:clamp(17px,1.5vw,22px); }
.thorn-cinematic .fold{ position:relative; height:min(72vh,760px); min-height:560px; max-width:1500px; margin:0 auto; outline:none; touch-action:pan-y; cursor:grab; }
.thorn-cinematic .fold:active{ cursor:grabbing; }
.thorn-cinematic .fold:focus-visible{ outline:1px solid var(--accent); outline-offset:14px; }
.thorn-cinematic .fold__stage{ position:absolute; inset:0 0 84px; perspective:1400px; transform-style:preserve-3d; }
.thorn-cinematic .fold-card{ --offset:0; --depth:0; position:absolute; left:50%; top:50%; width:min(58vw,820px); height:100%; overflow:hidden; border-radius:30px; border:1px solid rgba(255,255,255,.12); background:#13100d; box-shadow:0 35px 100px rgba(0,0,0,.65),calc(var(--offset) * -16px) 0 42px rgba(242,159,39,.12); transform-style:preserve-3d; transform:translate(-50%,-50%) translateX(calc(var(--offset) * 61%)) translateZ(calc(var(--depth) * -105px)) rotateY(calc(var(--offset) * -58deg)); transform-origin:center; opacity:clamp(0,calc(1.15 - var(--depth) * .24),1); transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .65s ease,filter .65s ease,box-shadow .65s ease; pointer-events:none; will-change:transform; }
.thorn-cinematic .fold-card[data-offset="0"]{ z-index:8; pointer-events:auto; filter:none; }
.thorn-cinematic .fold-card[data-offset="1"],.thorn-cinematic .fold-card[data-offset="-1"]{ z-index:7; pointer-events:auto; cursor:pointer; filter:saturate(.82) brightness(.84); }
.thorn-cinematic .fold-card[data-offset="2"],.thorn-cinematic .fold-card[data-offset="-2"]{ z-index:6; filter:saturate(.5) brightness(.62); }
.thorn-cinematic .fold-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.015); transition:transform .9s cubic-bezier(.16,1,.3,1),filter .65s ease; }
.thorn-cinematic .fold-card[data-offset="1"] img{ transform:scale(1.075) translateX(-1.5%); filter:saturate(.9) contrast(1.04); }
.thorn-cinematic .fold-card[data-offset="-1"] img{ transform:scale(1.075) translateX(1.5%); filter:saturate(.9) contrast(1.04); }
.thorn-cinematic .fold-card::before{ content:""; position:absolute; z-index:3; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset calc(var(--offset) * -9px) 0 22px rgba(73,199,255,.17),inset calc(var(--offset) * 9px) 0 24px rgba(255,74,158,.12); mix-blend-mode:screen; opacity:clamp(.18,calc(var(--depth) * .65),.8); }
.thorn-cinematic .fold-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(4,3,2,.2) 52%,rgba(4,3,2,.94) 100%); }
.thorn-cinematic .fold-card>div{ position:absolute; z-index:2; left:clamp(24px,4vw,64px); right:clamp(24px,4vw,64px); bottom:clamp(28px,6vh,70px); }
.thorn-cinematic .fold-card span{ color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.18em; }
.thorn-cinematic .fold-card h3{ margin:8px 0 12px; font-size:clamp(42px,6vw,92px); line-height:.9; letter-spacing:-.05em; }
.thorn-cinematic .fold-card p{ max-width:48ch; color:#d5cec5; font-size:clamp(15px,1.25vw,19px); }
.thorn-cinematic .fold.is-dragging .fold-card{ transition-duration:.2s; }
.thorn-cinematic .fold__arrow{ position:absolute; z-index:40; bottom:0; width:58px; height:58px; border:1px solid var(--gunmetal); border-radius:50%; background:#0d0b09; color:var(--ink); cursor:pointer; font-size:24px; transition:.25s ease; pointer-events:auto!important; touch-action:manipulation; isolation:isolate; }
.thorn-cinematic .fold__arrow:hover{ color:var(--accent); border-color:var(--accent); transform:scale(1.06); }
.thorn-cinematic .fold__arrow--prev{ right:72px; }.thorn-cinematic .fold__arrow--next{ right:0; }
.thorn-cinematic .fold__meta{ position:absolute; left:0; bottom:4px; display:grid; grid-template-columns:auto auto; gap:0 20px; align-items:baseline; }
.thorn-cinematic .fold__meta span{ color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.12em; }
.thorn-cinematic .fold__meta strong{ font-size:20px; letter-spacing:.08em; }
.thorn-cinematic .fold__meta small{ grid-column:1/-1; margin-top:4px; color:var(--gray); }

/* ───────── Close ───────── */
.thorn-cinematic .close{
  min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 36px;
  padding: 12vh var(--gutter); text-align: center;
}
.thorn-cinematic .close__emblem{ width: clamp(160px, 22vw, 300px); height: auto; }
.thorn-cinematic .close__line{ font-size: clamp(40px, 5.6vw, 96px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }

.thorn-cinematic .foot{
  border-top: 1px solid var(--charcoal);
  max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px;
  display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gray);
}
.thorn-cinematic .foot__brand{ font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }

.thorn-cinematic .toast{
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: var(--r-sm);
  transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none;
}
.thorn-cinematic .toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* ───────── Tablet ───────── */
@media (max-width: 1024px) {
  .thorn-cinematic .hero{ height: 230vh; }
  .thorn-cinematic .hero-card__media{ width: 62%; }
}

/* ───────── Mobile ───────── */
@media (max-width: 720px) {
  body.home{ font-size: 16px; }
  .thorn-cinematic .nav__links{ display: none; }
  .thorn-cinematic .nav__ip{ display: none; }
  .thorn-cinematic .hero{ height: 200vh; }
  .thorn-cinematic .hero__fallback{ height: auto; width: 86vw; }
  .thorn-cinematic .hero__caption{ bottom: 12vh; }
  .thorn-cinematic .statement{ height: 160vh; }
  .thorn-cinematic .frame__stage{ height: 170vh; }
  .thorn-cinematic .frame__after{ padding: 10vh var(--gutter) 14vh; grid-template-columns:1fr; gap:32px; }
  .thorn-cinematic .frame__after-media{ min-height:58vw; border-radius:20px; }
  .thorn-cinematic .realm__pin{ height: 210vh; }
  .thorn-cinematic .realm__media{ clip-path: inset(30% 10% 30% 10% round var(--r)); }
  .thorn-cinematic .heroes{ height: 400vh; }
  .thorn-cinematic .hero-card__media{ width: 100%; }
  .thorn-cinematic .hero-card__media::before{ background: linear-gradient(0deg, var(--bg) 8%, rgba(7,6,5,.15) 55%, rgba(7,6,5,.5) 100%); }
  .thorn-cinematic .hero-card__copy{ bottom: 7vh; width:auto; max-width: none; padding-right: var(--gutter); }
  .thorn-cinematic .hero-card__name{ font-size:clamp(44px,15vw,76px); line-height:.94; }
  .thorn-cinematic .hero-card__copy p{ max-width:34ch; font-size:16px; }
  .thorn-cinematic .heroes__progress{ top: auto; bottom: 7vh; transform: none; }
  .thorn-cinematic .heroes__progress span{ height: 18px; }
  .thorn-cinematic .slide{ height: 62vh; width: 70vw; }
  .thorn-cinematic .slide--wide{ width: 86vw; }
  .thorn-cinematic .game-network{ padding-top:12vh; }
  .thorn-cinematic .fold{ min-height:520px; height:68vh; }
  .thorn-cinematic .fold__stage{ bottom:96px; }
  .thorn-cinematic .fold-card{ width:82vw; border-radius:22px; transform:translate(-50%,-50%) translateX(calc(var(--offset) * 76%)) translateZ(calc(var(--depth) * -70px)) rotateY(calc(var(--offset) * -64deg)); }
  .thorn-cinematic .fold-card h3{ font-size:clamp(36px,12vw,60px); }
  .thorn-cinematic .fold__meta small{ display:none; }
  .thorn-cinematic .ip{ gap: 14px; padding: 16px 18px; }
  .thorn-cinematic .foot{ flex-direction: column; gap: 12px; }
}

/* ───────── Reduced motion: static story ───────── */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior: auto; }
  .thorn-cinematic .hero, .thorn-cinematic .statement, .thorn-cinematic .frame__stage, .thorn-cinematic .realm__pin, .thorn-cinematic .heroes, .thorn-cinematic .reel{ height: auto; }
  .thorn-cinematic .hero__stage, .thorn-cinematic .statement__stage, .thorn-cinematic .realm__stage, .thorn-cinematic .heroes__stage, .thorn-cinematic .reel__stage{ position: relative; height: auto; min-height: 100vh; }
  .thorn-cinematic .hero__canvas, .thorn-cinematic .hero__caption, .thorn-cinematic .hero__veil{ display: none; }
  .thorn-cinematic [data-words] .w{ color: inherit; }
  .thorn-cinematic .frame__media{ position: relative; }
  .thorn-cinematic .frame__copy{ height: auto; position: relative; padding-top: 6vh; padding-bottom: 0; }
  .thorn-cinematic .realm__media{ clip-path: none; }
  .thorn-cinematic .realm__media img{ transform: none; }
  .thorn-cinematic .realm__line{ opacity: 1; }
  .thorn-cinematic .heroes__head{ position: relative; padding-top: 10vh; }
  .thorn-cinematic .heroes__list{ position: relative; display: grid; gap: 10vh; padding: 6vh 0 10vh; }
  .thorn-cinematic .hero-card{ position: relative; min-height: 90vh; }
  .thorn-cinematic .heroes__progress{ display: none; }
  .thorn-cinematic .reel__stage{ padding: 12vh 0; }
  .thorn-cinematic .reel__track{ overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .thorn-cinematic .slide{ scroll-snap-align: start; }
  .thorn-cinematic .nav, .thorn-cinematic .toast, .thorn-cinematic .faq summary::after{ transition: none; }
}