/* Back to the Past — styles. Theme tokens live in :root. */
/* Layout: full-bleed flat color fields, one per "era", like the show's color scripts. No outlines, widescreen framing, split panels. */
:root {
  color-scheme: dark;
  --ink: #0a0a0a;          /* lacquer black */
  --paper: #f5f3f0;        /* white */
  --paper-dim: #a9a6a2;
  --dusk: #141414;         /* charcoal */
  --ember: #e0241b;        /* red */
  --blood: #a3120d;        /* deep red */
  --jade: #262626;         /* graphite */
  --aku: #ff3b30;          /* Aku's glare, used sparingly */
  --flame: #ff3b30;
  --gold: #e0241b;
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --future: "DotGothic16", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s-1: .8125rem; --s0: 1rem; --s1: 1.25rem; --s2: 1.6rem; --s3: 2.3rem; --s4: clamp(2.6rem, 6vw, 4.4rem); --s5: clamp(3.2rem, 11vw, 8.5rem);
  --gutter: clamp(16px, 4vw, 48px);
  --era-bg: var(--dusk);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: var(--s0); line-height: 1.65; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-family: var(--future); font-size: var(--s-1); letter-spacing: .14em; text-transform: uppercase; color: var(--aku); }
.kanji { font-family: var(--display); }
section { position: relative; padding-block: clamp(64px, 10vw, 128px); }
.sec-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2 { font-size: var(--s4); }
.sec-head p { color: var(--paper-dim); max-width: 62ch; }
.brush { position: relative; display: inline-block; }
.brush::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .16em; background: var(--ember); transform-origin: left; transform: scaleX(1); z-index: -1; border-radius: 2px 40% 3px 60%; }
.reveal-ready .brush::after { transform: scaleX(0); transition: transform .9s cubic-bezier(.7,0,.2,1) .2s; }
.reveal-ready .in .brush::after { transform: scaleX(1); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; background: color-mix(in srgb, var(--ink) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 -1px 0 rgba(245,243,240,.07); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; max-width: 1280px; }
.mark { pointer-events: auto; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .04em; }
.mark span.k { display: grid; place-items: center; width: 32px; height: 32px; background: var(--blood); color: var(--paper); font-size: 17px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.nav ul { pointer-events: auto; display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav a.l { position: relative; display: block; padding: 8px 11px; font-size: var(--s-1); color: rgba(245,243,240,.62); text-decoration: none; letter-spacing: .06em; transition: color .2s; }
.nav a.l::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--aku); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav a.l:hover, .nav a.l.on { color: var(--paper); }
.nav a.l.on::after, .nav a.l:hover::after { transform: scaleX(1); }
@media (max-width: 820px) { .nav ul { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 0; height: clamp(560px, 92vh, 900px); min-height: 520px; overflow: hidden; background: #181818; cursor: crosshair; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.letterbox { position: absolute; left: 0; right: 0; height: 7%; background: var(--ink); z-index: 3; pointer-events: none; }
.letterbox.top { top: 0; } .letterbox.bot { bottom: 0; }
.hero-copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: 11%; pointer-events: none; }
.hero-copy .wrap { display: grid; gap: 14px; }
.hero h1 { font-size: var(--s5); letter-spacing: -.01em; color: var(--paper); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.hero h1 .row { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .row > span { display: inline-block; animation: rise 1.2s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 .row:nth-child(2) > span { animation-delay: .12s; }
@keyframes rise { from { transform: translateY(102%); } to { transform: none; } }
.hero .tag { max-width: 34rem; font-size: var(--s1); color: var(--paper); }
.hero .hint { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; font-family: var(--future); font-size: 12px; color: rgba(245,243,240,.72); letter-spacing: .1em; }
.hero .hint span { display: inline-flex; align-items: center; gap: 10px; }
.hero .hint span::before { content: ""; width: 6px; height: 6px; background: var(--aku); transform: rotate(45deg); flex: none; }
.portrait { position: absolute; z-index: 4; right: clamp(16px, 6vw, 110px); top: 50%; height: min(80%, 760px); width: auto; aspect-ratio: var(--pa, .7); max-width: 100%; cursor: crosshair; transform: translateY(calc(-50% + var(--hs, 0) * 140px)) scale(calc(1 - var(--hs, 0) * .18)); -webkit-tap-highlight-color: transparent; }
.portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 1100px) and (min-width: 761px) { .portrait { height: 66%; } }
.portrait:focus-visible { outline-offset: 4px; }
.plabel { position: absolute; left: 0; right: 0; bottom: 2%; display: grid; justify-items: center; pointer-events: none; }
.plabel span { grid-area: 1 / 1; display: grid; justify-items: center; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: .3em; text-transform: uppercase; }
.plabel b { font-size: .62em; letter-spacing: .25em; opacity: .85; }
#plJack { color: var(--paper); }
#plAku { color: var(--aku); opacity: 0; text-shadow: 0 0 16px rgba(255,150,139,.6); }
.hero-copy { transform: translateY(calc(var(--hs, 0) * -90px)); opacity: calc(1 - var(--hs, 0) * 1.3); }
.letterbox { height: calc(7% + var(--hs, 0) * 22%); }
@media (max-width: 760px) {
  .hero { height: auto; min-height: 780px; }
  .portrait { left: 50%; right: auto; top: 9%; height: 50%; transform: translate(-50%, calc(var(--hs, 0) * 100px)) scale(calc(1 - var(--hs, 0) * .18)); }
  .hero-copy { bottom: 9%; }
  .plabel { display: none; }
}

/* ---------- prologue: split panels ---------- */
.prologue { background: var(--dusk); }
.panels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.panel { position: relative; overflow: hidden; min-height: clamp(260px, 28vw, 360px); background: var(--c, #323232); grid-column: span var(--w, 4); display: flex; align-items: flex-end; padding: clamp(20px, 2.4vw, 30px); transition: transform .8s cubic-bezier(.2,.8,.2,1); isolation: isolate; }
.panel .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 38%, rgba(8,8,8,.05) 72%), linear-gradient(to right, rgba(8,8,8,.35), transparent 60%); }
.panel .cap { position: relative; display: grid; gap: 6px; max-width: 34ch; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.panel .cap b { font-family: var(--display); font-size: var(--s2); line-height: 1.1; }
.panel .cap span { font-size: .95rem; color: var(--paper); opacity: .92; }
.panel .no { position: absolute; top: 16px; left: 20px; font-family: var(--future); font-size: var(--s-1); color: var(--paper); opacity: .8; letter-spacing: .12em; }
.quote { grid-column: span 12; padding: clamp(28px, 5vw, 56px) 0 0; display: grid; gap: 10px; }
.quote q { font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.2; font-weight: 700; quotes: "“" "”"; max-width: 28ch; }
.quote cite { font-style: normal; color: var(--paper-dim); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .panel { grid-column: span 12 !important; min-height: 200px; } }

/* ---------- timeline ---------- */
.timeline { background: var(--era-bg); transition: background-color 1s ease; }
.track-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); min-width: 980px; padding-top: 34px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 2px; background: color-mix(in srgb, var(--paper) 35%, transparent); }
.track .rift { position: absolute; top: 20px; height: 54px; width: 2px; background: var(--aku); box-shadow: 0 0 14px var(--aku); }
.track .rift span { position: absolute; top: -22px; left: 8px; white-space: nowrap; font-family: var(--future); font-size: 11px; color: var(--aku); letter-spacing: .1em; }
.node { position: relative; display: grid; justify-items: start; align-content: start; gap: 8px; padding: 0 12px 0 0; background: none; border: 0; cursor: pointer; text-align: left; }
.node i { width: 26px; height: 26px; background: var(--ink); border: 2px solid var(--paper); transform: rotate(45deg); transition: background .25s, transform .4s; }
.node.on i, .node:hover i { background: var(--ember); border-color: var(--ember); transform: rotate(225deg) scale(1.15); }
.node small { font-family: var(--future); font-size: 11px; color: var(--paper-dim); letter-spacing: .1em; }
.node span { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.node.on span { color: var(--paper); }
.era-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); margin-top: 40px; align-items: start; }
.era-art { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: color-mix(in srgb, var(--ink) 45%, transparent); overflow: hidden; }
.era-art canvas { width: 100%; height: 100%; display: block; }
.era-text { display: grid; gap: 14px; min-width: 0; }
.era-text h3 { font-size: var(--s3); }
.era-text p { color: var(--paper); max-width: 60ch; }
.era-text .seen { font-size: var(--s-1); color: var(--paper-dim); }
.era-text .ctl { display: flex; gap: 8px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--paper); color: var(--ink); border: 0; cursor: pointer; font-weight: 700; font-size: .95rem; letter-spacing: .02em; transition: transform .15s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.btn.red { background: var(--blood); color: var(--paper); }
.glitch { animation: glitch .55s steps(2) 1; }
@keyframes glitch { 0% { transform: translate(0); filter: none; } 20% { transform: translate(-6px, 2px); filter: hue-rotate(90deg) saturate(2); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 1px); filter: hue-rotate(-60deg); } 100% { transform: none; filter: none; } }
@media (max-width: 820px) { .era-card { grid-template-columns: 1fr; } }

/* ---------- characters ---------- */
.cast { background: #1c1c1c; }
.cast-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { padding: 6px 12px; background: transparent; border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 35%, transparent); cursor: pointer; font-size: var(--s-1); letter-spacing: .06em; color: var(--paper-dim); }
.chip.on { background: var(--paper); color: var(--ink); box-shadow: none; }
.roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.who { position: relative; display: grid; gap: 6px; justify-items: center; padding: 14px 8px 12px; background: #262626; border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.who svg { width: 64px; height: 64px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.who span { font-size: .85rem; font-weight: 700; text-align: center; line-height: 1.2; }
.who:hover { background: #2f2f2f; }
.who:hover svg { transform: translateY(-3px) scale(1.06); }
.who.on { background: var(--paper); color: var(--ink); }
.who[hidden] { display: none !important; }
.dossier { position: relative; display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); background: var(--paper); color: var(--ink); min-height: 100%; overflow: hidden; }
.dossier .big { position: absolute; right: -24px; top: -16px; width: 210px; height: 210px; opacity: .14; }
.dossier h3 { font-size: var(--s3); position: relative; }
.dossier .jp { font-family: var(--display); color: var(--blood); font-weight: 700; letter-spacing: .1em; }
.dossier dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: .92rem; position: relative; }
.dossier dt { font-family: var(--future); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5d5d5d; padding-top: 3px; }
.dossier dd { margin: 0; }
.dossier p { max-width: 60ch; position: relative; }
.pill { display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pill.ally { background: var(--ink); color: var(--paper); }
.pill.foe { background: var(--ink); color: var(--aku); }
.pill.turned { background: var(--blood); color: var(--paper); }
.pill.neutral { background: var(--gold); color: var(--ink); }
.dossier.swap { animation: swap .5s cubic-bezier(.2,.8,.2,1); }
@keyframes swap { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 860px) { .cast-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- aku ---------- */
.aku { background: #080808; overflow: hidden; }
.aku-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.aku-face { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-inline: auto; cursor: pointer; }
@keyframes shake { 0% { transform: translate(0,0); } 25% { transform: translate(-5px, 3px); } 50% { transform: translate(4px, -4px); } 75% { transform: translate(-3px, -2px); } 100% { transform: translate(0,0); } }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 0.9s ease-in-out infinite alternate; }
.flame.b { animation-duration: .7s; animation-delay: -.3s; }
.flame.c { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes flick { 0% { transform: scaleY(1) skewX(0deg); } 50% { transform: scaleY(1.18) skewX(-6deg); } 100% { transform: scaleY(.9) skewX(5deg); } }
.aku-eye { filter: drop-shadow(0 0 12px rgba(255,150,139,.75)); }
.ha { position: absolute; inset: 0; pointer-events: none; }
.ha span { position: absolute; font-family: var(--display); font-weight: 800; color: var(--aku); font-size: clamp(1.4rem, 4vw, 2.6rem); animation: ha 1.2s ease-out forwards; text-shadow: 0 0 18px rgba(255,150,139,.6); }
@keyframes ha { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-120px) scale(1.4); opacity: 0; } }
.aku-text { display: grid; gap: 18px; min-width: 0; }
.aku-text h2 { font-size: var(--s4); }
.aku-text h2 em { font-style: normal; color: var(--aku); }
.titles { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.titles li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #262626; font-family: var(--display); font-size: var(--s1); font-weight: 700; }
.titles li small { font-family: var(--future); font-size: 12px; color: #878787; align-self: center; }
.speech { min-height: 4.2em; padding: 16px 18px; background: #171717; color: var(--aku); font-family: var(--future); font-size: 1.05rem; line-height: 1.5; }
.speech .note { display: block; margin-top: 8px; font-size: 11px; color: #808080; letter-spacing: .06em; }
.shapes { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) { .aku-grid { grid-template-columns: 1fr; } }

/* ---------- game ---------- */

/* ---------- episodes ---------- */
.archive { background: var(--paper); color: var(--ink); }
.archive .sec-head p { color: #4f4f4f; }
.archive .eyebrow { color: var(--blood); }
.seasons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 28px; }
.season { display: grid; gap: 4px; padding: 14px 12px 12px; text-align: left; background: #d3d3d3; border: 0; cursor: pointer; transition: background .2s; }
.season b { font-family: var(--display); font-size: 1.4rem; }
.season small { font-family: var(--future); font-size: 11px; letter-spacing: .08em; color: #5d5d5d; }
.season .bar { height: 6px; background: #bbbbbb; position: relative; overflow: hidden; }
.season .bar i { position: absolute; inset: 0 auto 0 0; background: var(--blood); }
.season.on { background: var(--ink); color: var(--paper); }
.season.on small { color: var(--gold); }
.season.on .bar { background: #313131; }
.season.on .bar i { background: var(--ember); }
.ep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 56px); }
.ep-body h3 { font-size: var(--s3); }
.ep-body .blurb { display: grid; gap: 12px; align-content: start; }
.ep-body .blurb p { color: #333333; }
.eps { list-style: none; margin: 0; padding: 0; display: grid; }
.eps li { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #c5c5c5; align-items: baseline; }
.eps .num { font-family: var(--display); font-weight: 800; color: var(--blood); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.eps .t { font-weight: 700; }
.eps .d { display: block; color: #4f4f4f; font-size: .9rem; font-weight: 400; }
@media (max-width: 760px) { .seasons { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ep-body { grid-template-columns: 1fr; } }

/* ---------- quiz ---------- */
.trial { background: var(--paper); color: var(--ink); }
.quiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.qcard { display: grid; gap: 18px; padding: clamp(20px, 3vw, 34px); background: var(--ink); color: var(--paper); min-height: 320px; }
.qmeta { display: flex; justify-content: space-between; font-family: var(--future); font-size: 12px; letter-spacing: .1em; color: var(--gold); }
.qprog { height: 4px; background: #242424; }
.qprog i { display: block; height: 100%; background: var(--ember); transition: width .4s; }
.qcard h3 { font-size: var(--s2); }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; padding: 12px 14px; background: #1c1c1c; border: 0; cursor: pointer; transition: background .15s, transform .15s; font-size: 1rem; }
.opt:hover:not(:disabled) { background: #292929; transform: translateX(4px); }
.opt.right { background: var(--paper); color: var(--ink); }
.opt.wrong { background: var(--blood); text-decoration: line-through; text-decoration-color: rgba(241,241,241,.5); }
.opt:disabled { cursor: default; }
.why { font-size: .92rem; color: var(--paper-dim); min-height: 1.4em; }
.rank { font-family: var(--display); font-size: var(--s3); color: var(--ember); }
@media (max-width: 860px) { .quiz { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: var(--ink); padding-block: 56px 72px; color: var(--paper-dim); font-size: .9rem; }
footer .wrap { display: grid; gap: 20px; }
footer .end { font-family: var(--display); font-size: var(--s3); color: var(--paper); }
footer a { color: var(--paper); }
footer ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* ---------- scroll-linked motion (--sp = 0 entering from below → 1 leaving at top; fallbacks are the resting state) ---------- */
.katana { position: fixed; z-index: 60; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; pointer-events: none; }
.katana i { display: block; height: 100%; background: linear-gradient(90deg, #737373, #d4d4d4 70%, #ffffff); transform-origin: left; transform: scaleX(var(--doc, 0)); box-shadow: 0 0 10px rgba(255,255,255,.55); }
.katana b { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; background: var(--gold); transform: translateX(calc(var(--doc, 0) * (100vw - 9px))) rotate(45deg); }
main > section { --cut: 3.6vw; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--cut) * -1); padding-top: calc(clamp(64px, 10vw, 128px) + var(--cut)); }
main > section:nth-of-type(even) { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut { position: absolute; left: 0; top: var(--cut); width: var(--cw, 100%); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff 30%, #ffffff 80%, rgba(255,255,255,0)); box-shadow: 0 0 10px rgba(255,255,255,.8); transform-origin: 0 50%; transform: rotate(var(--ca, 0rad)) scaleX(var(--cp, 1)); pointer-events: none; z-index: 2; }
main > section:nth-of-type(even) .cut { top: 0; }
.sec-head { transform: translateY(calc((1 - min(1, var(--sp, 1) * 2.6)) * 56px)); }
.sec-head .eyebrow { display: inline-block; letter-spacing: calc(.14em + (1 - min(1, var(--sp, 1) * 2.6)) * .6em); }
.panel .art { transform: translateY(calc((var(--sp, .5) - .5) * -60px)) scale(1.18); transition: scale 1.2s cubic-bezier(.2,.8,.2,1); }
.panel:hover .art { scale: 1.05; }
.panel .cap { transform: translateX(calc((1 - min(1, var(--sp, 1) * 2.4)) * -48px)); }
.era-art { translate: calc((1 - min(1, var(--sp, 1) * 2.2)) * -60px) 0; }
.who { transform: translateY(calc((1 - clamp(0, var(--sp, 1) * 3.2 - var(--i, 0) * .1, 1)) * 40px)); }
.dossier { translate: calc((1 - min(1, var(--sp, 1) * 2.6)) * 70px) 0; }
.aku-face { transform: scale(calc(.75 + min(1, var(--sp, 1) * 2) * .25)) rotate(calc((1 - min(1, var(--sp, 1) * 2)) * -10deg)); }
.titles li { transform: translateX(calc((1 - clamp(0, var(--sp, 1) * 3 - var(--i, 0) * .14, 1)) * 70px)); }
.season { transform: translateY(calc((1 - clamp(0, var(--sp, 1) * 3.2 - var(--i, 0) * .1, 1)) * 40px)); }
.season .bar i { transform-origin: left; transform: scaleX(clamp(0, calc(var(--sp, 1) * 3 - .6), 1)); }
.qcard { translate: 0 calc((1 - min(1, var(--sp, 1) * 2.4)) * 70px); rotate: calc((1 - min(1, var(--sp, 1) * 2.4)) * 2.5deg); }
.drift { position: fixed; inset: 0; z-index: 40; pointer-events: none; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .drift, .cut { display: none; } }

/* ---------- 3D tilt + glare (pointer-driven; scroll motion uses translate/rotate props so the two compose) ---------- */
.tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; will-change: transform; }
.tilt.live { transition: transform .08s linear; }
.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%); opacity: var(--go, 0); transition: opacity .3s; mix-blend-mode: soft-light; z-index: 5; }

/* ---------- the blade (three.js) ---------- */
.blade { background: radial-gradient(120% 90% at 50% 40%, #222222 0%, #101010 70%); overflow: hidden; }
.blade-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.blade-stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; cursor: grab; touch-action: pan-y; }
.blade-stage:active { cursor: grabbing; }
.blade-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.blade-stage .kanji-bg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: clamp(8rem, 26vw, 20rem); color: rgba(241,241,241,.04); pointer-events: none; user-select: none; }
.blade-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; color: var(--paper-dim); }
.blade-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; font-size: var(--s-1); color: var(--paper-dim); }
.blade-ctl .seed { display: inline-flex; align-items: center; gap: 4px; font-family: var(--future); letter-spacing: .08em; }
.blade-ctl .seed b { min-width: 3.5em; text-align: center; color: var(--paper); font-weight: 400; }
.iconbtn { width: 30px; height: 30px; display: inline-grid; place-items: center; background: transparent; border: 0; box-shadow: inset 0 0 0 1px rgba(241,241,241,.3); cursor: pointer; color: var(--paper); }
.iconbtn:hover { background: rgba(241,241,241,.1); }
.blade-ctl label { display: inline-flex; align-items: center; gap: 8px; }
.blade-ctl input[type=range] { width: 110px; accent-color: var(--ember); }
.blade-text { display: grid; gap: 16px; min-width: 0; }
.blade-text h2 { font-size: var(--s4); }
.blade-text p { color: var(--paper-dim); }
.blade-text .parts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; margin: 0; }
.blade-text .parts dt { font-family: var(--display); font-weight: 700; color: var(--gold); }
.blade-text .parts dd { margin: 0; color: var(--paper); }
@media (max-width: 900px) { .blade-grid { grid-template-columns: 1fr; } }

/* ---------- stills: 3D ring gallery + uploads ---------- */
.stills { background: #131313; overflow: hidden; }
.stills-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; color: var(--paper-dim); font-size: .9rem; }
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(8,8,8,.88); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; display: grid; gap: 12px; max-width: min(1100px, 100%); animation: lbIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes lbIn { from { transform: perspective(1200px) rotateY(-25deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 74vh; object-fit: contain; display: block; margin-inline: auto; }
.lightbox figcaption { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; color: var(--paper); }
.slot-still { position: relative; margin: 0; overflow: hidden; background: #000000; aspect-ratio: 16 / 9; max-width: 100%; }
.slot-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-tools { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.btn.small { padding: 6px 12px; font-size: .8rem; }
.dossier .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.era-art .era-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; padding: 10px 16px; background: var(--paper); color: var(--ink); font-size: .9rem; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ---------- cursor ring (fine pointers only, alongside the native cursor) ---------- */
.ring-cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(241,241,241,.75); border-radius: 50%; pointer-events: none; transition: width .25s, height .25s, margin .25s, border-color .25s, background .25s; mix-blend-mode: difference; }
.ring-cursor.hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: #ffffff; background: rgba(255,255,255,.08); }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .ring-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- polish pass: real stills, grain, depth ---------- */
/* film grain over everything, fixed so it never repaints on scroll */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* hero: vignette and a heavier, cleaner title */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 70% 45%, transparent 45%, rgba(5,5,5,.55) 100%), linear-gradient(to top, rgba(5,5,5,.55), transparent 40%); }
.hero h1 { letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.hero .tag { text-shadow: 0 1px 14px rgba(0,0,0,.5); }

/* section headings */
.sec-head h2, .aku-text h2, .blade-text h2 { letter-spacing: -.015em; }

/* cast: photo tiles */
.roster { gap: 6px; }
.who.has-img { aspect-ratio: 4 / 3.4; padding: 0; overflow: hidden; align-content: end; justify-items: start; isolation: isolate; background: #111111; }
.who.has-img .who-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) brightness(.82); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .4s; }
.who.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,8,8,.9), rgba(8,8,8,0) 62%); }
.who.has-img svg { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; opacity: .9; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.who.has-img span { padding: 0 10px 9px; text-align: left; font-size: .82rem; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.who.has-img:hover { background: #111111; }
.who.has-img:hover .who-img { transform: scale(1.07); filter: saturate(1) brightness(.95); }
.who.has-img:hover svg { transform: none; }
.who.has-img.on { background: #111111; color: var(--paper); box-shadow: inset 0 0 0 2px var(--aku); }
.who.has-img.on .who-img { filter: saturate(1.05) brightness(1); }

/* dossier: still bleeds to the card edges, text follows */
.dossier { --dp: clamp(22px, 3vw, 36px); padding: var(--dp); align-content: start; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.dossier .slot { margin: calc(var(--dp) * -1) calc(var(--dp) * -1) 4px; }
.dossier .slot:empty { display: none; }
.dossier .slot-still { aspect-ratio: 16 / 8.5; }
.dossier:has(.slot-still) .big { display: none; }
.dossier-head { display: grid; gap: 4px; justify-items: start; position: relative; }
.dossier-head .pill { margin-top: 8px; }
.dossier dl { padding-top: 14px; border-top: 1px solid #dcd8d3; }

/* timeline still gets the same weight as a film frame */
.era-art { box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); }
.era-art .era-still { filter: saturate(.95); }

/* reel cards: hairline edge and a stronger caption */
.lightbox figcaption { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

/* aku: red heat behind the face */
.aku-face::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(224,36,27,.28), rgba(224,36,27,.08) 60%, transparent); filter: blur(10px); pointer-events: none; }

/* footer */
footer { box-shadow: inset 0 1px 0 rgba(245,243,240,.07); }
footer p a { color: var(--paper); text-underline-offset: 3px; }

@media (max-width: 420px) { .who.has-img span { font-size: .76rem; } }
.hero .eyebrow { color: rgba(245,243,240,.82); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
@media (max-width: 420px) { .roster:has(.has-img) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .who.has-img span { font-size: .7rem; padding: 0 7px 7px; } .who.has-img svg { width: 20px; height: 20px; top: 6px; left: 6px; } }

/* ---------- scenery interludes: pinned, scroll-driven scenes (--p 0 to 1 while pinned) ---------- */
.vista { position: relative; height: 230vh; background: var(--vbg, #0a0a0a); z-index: 0; }
.vista-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.vista-scene { position: absolute; inset: 0; }
.vista-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.vista-copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px); width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 12px; pointer-events: none;
  opacity: clamp(0, min(calc((var(--p, 0) - .12) * 5), calc((.92 - var(--p, 0)) * 6)), 1);
  transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .12) * 4, 1)) * 40px)); }
.vista-copy h2 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); letter-spacing: -.02em; max-width: 14ch; color: #f5f3f0; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.vista-copy p { max-width: 40ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(245,243,240,.9); text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.vista::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* portal tunnel */
.v-portal { --vbg: #050505; height: 380vh; }
.v-portal .vista-copy { bottom: auto; top: 50%; translate: 0 -50%; justify-items: center; text-align: center; }
.v-portal .portal-title { color: #ffffff; mix-blend-mode: difference; text-shadow: none; max-width: none; font-size: clamp(2.6rem, 8vw, 7rem); }
.v-portal .vista-copy p { mix-blend-mode: difference; color: #ffffff; text-shadow: none; font-weight: 500; }

/* red tree: panorama pan */
.v-tree { --vbg: #3a2a3c; }
.v-tree .vista-img { position: absolute; top: 0; left: 0; height: 106%; width: auto; min-width: 100%; max-width: none; object-fit: cover; object-position: left top; transform: translate3d(var(--pan, 0px), 0, 0) scale(calc(1.06 - var(--p, 0) * .06)); transform-origin: 0 0; will-change: transform; }
.v-tree .vista-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,10,20,.78), rgba(18,10,20,0) 46%), linear-gradient(to right, rgba(18,10,20,.35), transparent 50%); }
.v-tree .vista-copy { z-index: 3; }

/* meditation: an enso opens onto the field */
.v-med { --vbg: #0d2620; }
.v-med .vista-scene { background: #0b2a20; }
.med-world { position: absolute; inset: 0; display: grid; place-items: center; transform: scale(calc(1.16 - var(--p, 0) * .16)); will-change: transform; }
.med-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.med-world::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 55%, rgba(4,18,13,.2), rgba(4,18,13,.85)); opacity: max(.35, calc(1 - var(--p, 0) * 2.4)); pointer-events: none; }
.med-frame { position: relative; width: min(92vw, 980px); aspect-ratio: 3 / 2; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
.med-frame .vista-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.med-world .enso { position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(18vmin + var(--p, 0) * 120vmin); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(245,243,240,.6), 0 0 40px rgba(245,243,240,.2); opacity: max(0, calc(.9 - var(--p, 0) * 1.6)); pointer-events: none; }
.v-med .vista-copy { bottom: auto; top: clamp(80px, 14vh, 140px); }
.v-med .vista-fx { z-index: 2; }

/* valley: fly over a tilted landscape */
.v-valley { --vbg: #5d7a74; }
.v-valley .vista-scene { perspective: 1100px; perspective-origin: 50% 20%; background: linear-gradient(#6f8a85, #5d7a74 60%, #3f5a55); }
.v-valley .plane { position: absolute; inset: -6% -10% -2%; transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--p, 0)) * 34deg)) translateY(calc((1 - var(--p, 0)) * 10%)) scale(calc(1.32 - var(--p, 0) * .24)); will-change: transform; }
.v-valley .plane .vista-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-valley .plane::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; background: linear-gradient(#6f8a85, rgba(111,138,133,0)); z-index: 1; }
.v-valley .vista-copy { bottom: auto; top: clamp(90px, 15vh, 150px); }
.v-valley .vista-copy h2, .v-valley .vista-copy p { text-shadow: 0 2px 24px rgba(10,30,26,.7); }

@media (max-width: 760px) {
  .vista { height: 190vh; }
  .v-portal { height: 300vh; }
  .med-frame { width: 150vw; }
}
@media (prefers-reduced-motion: reduce) {
  .vista, .v-portal { height: auto; }
  .vista-pin { position: relative; height: 90vh; }
  .vista-copy { opacity: 1; transform: none; }
  .vista-fx { display: none; }
  .v-tree .vista-img { left: 50%; transform: translateX(-50%); }
  .med-world { transform: none; }
  .med-world::after { opacity: .3; }
  .med-world .enso { display: none; }
  .v-valley .plane { transform: none; inset: 0; }
  .v-portal .vista-scene { background: repeating-radial-gradient(circle at 50% 50%, #f5f3f0 0 28px, #0a0a0a 28px 56px); }
}

/* hero name label: one name at a time, outgoing leaves before incoming arrives */
.plabel span { transition: opacity .18s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
#plJack { opacity: 1; transform: none; transition-delay: .16s; }
#plAku { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
.plabel.aku-on #plJack { opacity: 0; transform: translateY(-8px); transition-delay: 0s; }
.plabel.aku-on #plAku { opacity: 1; transform: none; transition-delay: .16s; }

/* ---------- Aku: the real artwork, with aura, float, cursor tilt and a laugh ---------- */
.aku-face { aspect-ratio: 3 / 4; max-width: 440px; --near: 0; }
.aku-face::before { display: none; }
.aku-aura { position: absolute; inset: -12% -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side at 50% 42%, rgba(255,59,48,.55), rgba(224,36,27,.22) 45%, rgba(224,36,27,0) 75%);
  filter: blur(6px); opacity: .8; animation: auraFlicker 2.6s ease-in-out infinite; transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
@keyframes auraFlicker { 0%, 100% { transform: scale(1); opacity: .75; } 30% { transform: scale(1.04, 1.07); opacity: .9; } 55% { transform: scale(.98, 1.02); opacity: .7; } 80% { transform: scale(1.03); opacity: .85; } }
.aku-figure { position: absolute; inset: 0; z-index: 1; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.aku-img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 0 2px rgba(255,90,70,.9)) drop-shadow(0 0 22px rgba(255,59,48,.45)) drop-shadow(0 40px 40px rgba(0,0,0,.7));
  animation: akuFloat 5.5s ease-in-out infinite; transition: filter .4s, scale .5s cubic-bezier(.2,.8,.2,1); }
@keyframes akuFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.015); } }
.aku-glare { position: absolute; left: 58%; top: 18%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,80,60,.7), rgba(255,59,48,0)); mix-blend-mode: screen;
  opacity: calc(.25 + var(--near) * .55); animation: glarePulse 1.8s ease-in-out infinite; }
@keyframes glarePulse { 0%, 100% { scale: 1; } 50% { scale: 1.15; } }
.aku-face.roused .aku-aura { opacity: 1; transform: scale(1.2); animation-duration: .5s; }
.aku-face.roused .aku-img { scale: 1.07; filter: brightness(1.12) drop-shadow(0 0 3px rgba(255,120,90,1)) drop-shadow(0 0 40px rgba(255,59,48,.8)) drop-shadow(0 40px 40px rgba(0,0,0,.7)); }
.aku-face.roused .aku-glare { opacity: 1; }
.aku-face.laugh .aku-figure { animation: shake .09s linear 10; }
.aku-face.calmed .aku-aura { opacity: .3; }
.aku-face.calmed .aku-glare { opacity: .12; }
.aku-face .ha { z-index: 2; }
@media (max-width: 860px) { .aku-face { max-width: 340px; } }
.aku-face .ha span { color: #ffe3c4; text-shadow: 0 0 18px rgba(255,59,48,.9), 0 2px 0 rgba(0,0,0,.5); }

/* Aku close-up: frame the artwork on his face and let the edges sink into shadow */
.aku-face { aspect-ratio: 1; max-width: 500px; }
.aku-figure { overflow: hidden; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,.55) 80%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,.55) 80%, transparent 100%); }
/* crop window: 380px square of the 827x1104 artwork, starting at x 290, y 20 */
.aku-img { position: absolute; left: -76.3%; top: -5.3%; width: 217.6%; height: auto; max-width: none; object-fit: fill; transform-origin: 50% 20%;
  filter: drop-shadow(0 0 3px rgba(255,90,70,.8)) drop-shadow(0 0 26px rgba(255,59,48,.4)); }
.aku-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 48%, rgba(8,8,8,0) 30%, rgba(8,8,8,.55) 70%, rgba(8,8,8,.95) 100%),
              linear-gradient(to top, rgba(120,10,6,.35), rgba(120,10,6,0) 45%); }
.aku-glare { left: 50%; top: 51%; width: 44%; }
.aku-aura { inset: -8%; }
@keyframes akuFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2%) scale(1.02); } }
.aku-face.roused .aku-img { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255,120,90,1)) drop-shadow(0 0 40px rgba(255,59,48,.8)); }
.aku-face .ha { inset: -6%; }

/* Aku's laugh: --amp (0..1) follows the laugh audio; the face stretches from the forehead down like a jaw
   dropping, tips back, and the glare and aura pulse on every HA */
.aku-face { --amp: 0; }
.aku-face.laugh .aku-figure { animation: none; }
.aku-face.laugh .aku-img { transform-origin: 58% 13%;
  scale: calc(1.05 - var(--amp) * .02) calc(1.05 + var(--amp) * .1);
  translate: 0 calc(var(--amp) * -1.6%);
  rotate: calc(var(--amp) * -2.5deg);
  transition: filter .15s; }
.aku-face.laugh .aku-figure { transform: perspective(900px) rotateX(calc(var(--tx, 0deg) + var(--amp) * 9deg)) rotateY(var(--ty, 0deg)); transition: transform .08s linear; }
.aku-face.laugh .aku-glare { opacity: calc(.6 + var(--amp) * .4); scale: calc(1 + var(--amp) * .35); animation: none; }
.aku-face.laugh .aku-aura { transform: scale(calc(1.12 + var(--amp) * .14)); opacity: calc(.75 + var(--amp) * .25); animation: none; transition: transform .08s linear, opacity .08s linear; }


/* ---------- stills: a drag-around 3D map of every frame ---------- */
.map-stage { --fw: 240px; --sx: 0px; --sy: 0px; position: relative; height: clamp(440px, 72vh, 780px); perspective: 900px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 68% 32%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 74%, rgba(255,230,220,.6), transparent 60%),
    radial-gradient(1px 1px at 86% 82%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 52%, rgba(255,200,190,.5), transparent 60%),
    radial-gradient(60% 70% at 50% 50%, rgba(120,16,10,.28), transparent 70%), #070707;
  background-size: 220px 200px, 260px 240px, 300px 260px, 240px 280px, 340px 300px, 100% 100%, 100% 100%;
  background-position: var(--sx) var(--sy), calc(var(--sx) * .7) calc(var(--sy) * .7), calc(var(--sx) * .5) calc(var(--sy) * .5), calc(var(--sx) * .85) var(--sy), calc(var(--sx) * .6) calc(var(--sy) * .6), 0 0, 0 0; }
.map-stage.grabbing { cursor: grabbing; }
.map-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--aku); }
.map-stage.drop { box-shadow: inset 0 0 0 2px var(--ember); }
.map-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(85% 85% at 50% 50%, transparent 55%, rgba(7,7,7,.9)); }
.map-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.mf { position: absolute; left: 0; top: 0; width: var(--fw); aspect-ratio: 16 / 10; margin: calc(var(--fw) * -.3125) 0 0 calc(var(--fw) / -2); padding: 0; border: 0; background: #151515; overflow: hidden; cursor: pointer; backface-visibility: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .25s; }
.mf img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mf .cap3 { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 7px; font-size: .74rem; font-weight: 700; text-align: left; color: var(--paper); background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .25s; }
.mf:hover, .mf:focus-visible { box-shadow: 0 0 0 2px var(--aku), 0 20px 60px rgba(224,36,27,.35); }
.mf:hover .cap3, .mf:focus-visible .cap3 { opacity: 1; }
.map-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; translate: -50% 0; margin: 0; padding: 7px 14px; font-family: var(--future); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,243,240,.8); background: rgba(10,10,10,.6); pointer-events: none; transition: opacity .5s; }
.map-stage.touched .map-hint { opacity: 0; }
@media (max-width: 760px) { .map-stage { height: 64vh; perspective: 700px; } }

/* ---------- phones: finger drags on the interactive pieces belong to them, not to page scrolling ---------- */
.portrait, .blade-stage, .map-stage { touch-action: none; overscroll-behavior: contain; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.portrait canvas, .blade-stage canvas, .map-stage img { -webkit-touch-callout: none; -webkit-user-drag: none; }
@media (max-width: 760px) { .map-stage { height: 56vh; } }