/* ============================================================
   BEYBLADE CHRONICLE — horizontal zine
   palette: cream paper · ink black · signal red · cobalt · riso gold
   ============================================================ */

:root {
  --paper:   #f1e6cc;
  --paper-2: #e9dcb9;
  --paper-3: #ddccaa;
  --ink:     #15110d;
  --ink-2:   #2a221a;
  --red:     #e63946;
  --red-2:   #b1232f;
  --cobalt:  #1d3ec6;
  --cobalt-2:#0e1e7a;
  --gold:    #f6c343;
  --steel:   #b8b5ad;
  --steel-2: #6f6c64;

  --shadow:  0 2px 0 var(--ink);

  --hud-h:   54px;
  --max-z:   60;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 22, "SOFT" 50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* page-wide grain */
  background-image:
    radial-gradient(rgba(21,17,13,.06) 1px, transparent 1px),
    radial-gradient(rgba(21,17,13,.04) 1px, transparent 1px);
  background-size: 3px 3px, 11px 11px;
  background-position: 0 0, 1px 2px;
}

body {
  overflow: hidden;
  cursor: grab;
}
body.is-grabbing { cursor: grabbing; }

::selection { background: var(--red); color: var(--paper); }

/* ============= HUD ============= */
.hud {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: var(--max-z);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hud > * { pointer-events: auto; }

.hud__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Bungee", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
}
.hud__mark svg { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hud__mark:hover svg { transform: rotate(360deg); }

.hud__dots {
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: center;
}
.hud__dots a {
  display: block;
  width: 10px; height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  transition: background .25s, transform .25s;
  position: relative;
}
.hud__dots a::after {
  content: attr(data-idx);
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.hud__dots a:hover::after,
.hud__dots li.is-active a::after { opacity: 1; }
.hud__dots li.is-active a { background: var(--ink); transform: scale(1.4); }

.hud__progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .15em;
}
.hud__progress-bar {
  display: block;
  width: 120px; height: 4px;
  background: rgba(21,17,13,.18);
  position: relative;
}
.hud__progress-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--ink);
  transition: width .15s linear;
}

.kb-hint {
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--max-z);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: .55;
  pointer-events: none;
}
.kb-hint kbd {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  background: var(--paper);
}

/* ============= SCROLLER =============
   The container is one viewport wide. The 10 spread children each take
   100vw via `flex: 0 0 100vw`, totalling 1000vw of inline content that
   overflows horizontally and becomes scrollable. */
.scroller {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.scroller::-webkit-scrollbar { height: 6px; background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: rgba(21,17,13,.25); }

/* per-section */
.spread {
  flex: 0 0 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

/* spread number watermarks (default) */
.spread::before {
  content: attr(data-num);
  position: absolute;
  font-family: "Bungee Inline", sans-serif;
  font-size: clamp(160px, 28vw, 480px);
  line-height: .8;
  bottom: -.05em;
  right: -.04em;
  color: rgba(21,17,13,.05);
  pointer-events: none;
  z-index: 0;
}

/* ============= LAYERS / TEXTURES ============= */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.layer--paper {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,.06), transparent 60%);
  mix-blend-mode: multiply;
}
.layer--paperFaded {
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12)),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.02), rgba(0,0,0,.18));
  mix-blend-mode: multiply;
}
.layer--grid {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.layer--halftone {
  background-image: radial-gradient(rgba(241,230,204,.4) 1px, transparent 1.6px);
  background-size: 8px 8px;
  mix-blend-mode: screen;
  opacity: .55;
}
.layer--dotsCobalt {
  background-image: radial-gradient(rgba(29,62,198,.35) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  mix-blend-mode: multiply;
}
.layer--scratches {
  background:
    repeating-linear-gradient( 17deg, transparent 0 80px, rgba(21,17,13,.06) 80px 81px),
    repeating-linear-gradient(-31deg, transparent 0 120px, rgba(21,17,13,.04) 120px 121px);
  mix-blend-mode: multiply;
}
.layer--steel {
  background:
    radial-gradient(circle at 25% 30%, #5b574d, transparent 50%),
    radial-gradient(circle at 80% 70%, #2a261d, transparent 55%),
    linear-gradient(140deg, #1a1410, #2c241a 60%, #0d0a07);
}
.layer--cobalt {
  background:
    radial-gradient(circle at 20% 80%, rgba(246,195,67,.18), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(230,57,70,.22), transparent 55%),
    linear-gradient(135deg, var(--cobalt-2), var(--cobalt) 60%, #2548d6);
}
.layer--scanlines {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: .5;
}
.layer--rails {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(246,195,67,.2), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%,   rgba(230,57,70,.18), transparent 60%);
}
.layer--void {
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, #110a1f, #06030c 70%, #02010a);
}
.layer--mesh {
  background:
    radial-gradient(circle at 18% 30%, rgba(29,62,198,.55), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(230,57,70,.45), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(246,195,67,.18), transparent 40%);
  filter: blur(40px);
  mix-blend-mode: screen;
}
.layer--tilt {
  background:
    repeating-linear-gradient(8deg, transparent 0 60px, rgba(21,17,13,.05) 60px 61px);
}
.layer--blueprint {
  inset: 12% 8%;
  opacity: .7;
}
.layer--burstFx span {
  position: absolute;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: .65;
}
.layer--burstFx .b1 { width:60vmin; height:60vmin; left:-10vmin; top:18vh; border-color: var(--red);}
.layer--burstFx .b2 { width:30vmin; height:30vmin; right:8vmin; top:8vh;    border-color: var(--cobalt); border-style: dashed;}
.layer--burstFx .b3 { width:42vmin; height:42vmin; right:-6vmin; bottom:-8vmin; border-color: var(--gold); border-width: 3px;}

/* ============= SPLASH (00) ============= */
.spread--splash {
  background: var(--red);
  color: var(--paper);
}
.spread--splash::before { color: rgba(241,230,204,.08); }
.spread--splash .layer--grid { opacity: .6; }

.splash__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(241,230,204,.25);
}
.ring--a { width: 60vmin; height: 60vmin; }
.ring--b { width: 80vmin; height: 80vmin; border-style: dashed; opacity: .6; animation: spin 60s linear infinite; }
.ring--c { width: 110vmin; height: 110vmin; border-color: rgba(241,230,204,.1); }

.splash__bey {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 36vw, 520px);
  display: grid; place-items: center;
}
.bey-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 0 rgba(0,0,0,.18));}
.bey-svg--xl { filter: drop-shadow(0 24px 0 rgba(0,0,0,.22));}
.bey-spin { transform-origin: 0 0; animation: spin 1.6s linear infinite; }
.bey-spin--rev { animation-direction: reverse; animation-duration: 2.2s;}
.bey-spin--fast { animation-duration: .9s;}
@keyframes spin { to { transform: rotate(360deg); } }

.bey-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bey-streaks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56vmin;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(241,230,204,.65) 30%, rgba(241,230,204,.0));
  transform-origin: left center;
}
.bey-streaks span:nth-child(1){ transform: rotate(0deg)   translateX(20vmin);}
.bey-streaks span:nth-child(2){ transform: rotate(60deg)  translateX(20vmin); opacity:.7;}
.bey-streaks span:nth-child(3){ transform: rotate(120deg) translateX(20vmin); opacity:.5;}
.bey-streaks span:nth-child(4){ transform: rotate(180deg) translateX(20vmin); opacity:.7;}
.bey-streaks span:nth-child(5){ transform: rotate(240deg) translateX(20vmin); opacity:.5;}
.bey-streaks span:nth-child(6){ transform: rotate(300deg) translateX(20vmin); opacity:.6;}

.splash__title {
  position: absolute;
  left: 6vw; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  max-width: 44vw;
}
.splash__title .kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--paper);
  opacity: .85;
}
.splash__title h1 {
  font-family: "Bungee", sans-serif;
  font-size: clamp(80px, 13vw, 220px);
  line-height: .85;
  letter-spacing: -.02em;
  display: flex;
  flex-direction: column;
}
.splash__title h1 .t1 { display:block; }
.splash__title h1 .t2 {
  display: inline-block;
  font-family: "Bungee Inline", sans-serif;
  color: var(--gold);
  -webkit-text-stroke: 0;
  transform: translateX(.4em);
}
.splash__title h1 .t3 {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 0 .12em;
  align-self: flex-start;
  margin-top: .04em;
}
.splash__sub {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.splash__sub .kana {
  font-family: "RocknRoll One", sans-serif;
  font-size: 28px;
  color: var(--gold);
}
.splash__sub .lat {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .01em;
  max-width: 32ch;
  opacity: .9;
}

.splash__cite {
  position: absolute;
  right: 4vw; top: calc(var(--hud-h) + 24px);
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .15em;
  line-height: 1.6;
  z-index: 5;
}

.splash__prompt {
  position: absolute;
  right: 4vw; bottom: 36px;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  z-index: 5;
}
.splash__arrow {
  font-size: 28px;
  letter-spacing: 0;
  animation: tug 1.6s ease-in-out infinite;
}
@keyframes tug {
  0%, 100% { transform: translateX(0);}
  50% { transform: translateX(14px);}
}

/* ============= ORIGIN (01) ============= */
.spread--origin {
  background: var(--paper);
  color: var(--ink);
}
.origin__num {
  position: absolute;
  top: calc(var(--hud-h) + 16px);
  left: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 110px;
  line-height: 1;
  color: var(--red);
  z-index: 4;
}
.origin__head {
  position: absolute;
  left: 4vw; top: calc(var(--hud-h) + 24px);
  margin-left: 11ch;
  z-index: 4;
}
.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.display {
  font-family: "Bungee", sans-serif;
  font-size: clamp(48px, 6.4vw, 110px);
  line-height: .9;
  letter-spacing: -.005em;
  display: flex;
  flex-direction: column;
}
.display span { display: block; }
.display--em { color: var(--red); }
.origin__head .display { font-size: clamp(48px, 5.6vw, 92px); }
.origin__head .display span:nth-child(1){ transform: translateX(0); }
.origin__head .display span:nth-child(2){ transform: translateX(2.5em); }
.origin__head .display span:nth-child(3){ transform: translateX(.6em); }

.origin__body {
  position: absolute;
  bottom: 14vh; left: 4vw;
  width: 36vw;
  max-width: 560px;
  z-index: 4;
  font-size: 16px;
  line-height: 1.55;
  column-count: 1;
}
.origin__body .lede {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 14px;
}
.origin__body p em { font-style: italic; color: var(--red); }

.origin__facts {
  position: absolute;
  right: 5vw; top: 32vh;
  width: 28vw; max-width: 380px;
  z-index: 4;
  border: 1px solid var(--ink);
  padding: 22px 22px 20px;
  background: rgba(241,230,204,.7);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.55;
}
.origin__facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(21,17,13,.3);
}
.origin__facts dl > div:last-child { border-bottom: 0; }
.origin__facts dt { color: var(--ink-2); }
.origin__facts dd { color: var(--ink); text-align: right; }

.origin__stamp {
  position: absolute;
  right: 6vw; bottom: 10vh;
  width: 130px; height: 130px;
  border: 3px double var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-12deg);
  color: var(--red);
  z-index: 4;
}
.origin__stamp span {
  font-family: "RocknRoll One", sans-serif;
  font-size: 36px;
}
.origin__stamp em {
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .15em;
  position: absolute;
  bottom: 14px;
}

/* ============= PLASTIC (02) ============= */
.spread--plastic {
  background: var(--paper-2);
  color: var(--ink);
}
.plastic__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  right: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 110px;
  color: var(--cobalt);
  line-height: 1;
  z-index: 4;
}

.plastic__head {
  position: absolute;
  top: 16vh; left: 5vw;
  z-index: 4;
  max-width: 50vw;
}
.display--stacked .word {
  display: block;
  font-size: clamp(64px, 8vw, 130px);
  line-height: .85;
  letter-spacing: -.01em;
}
.display--stacked .word--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.display--stacked .word--solid {
  color: var(--cobalt);
  margin-left: 1.6ch;
}
.plastic__head .strap {
  margin-top: 22px;
  font-style: italic;
  font-size: 17px;
  max-width: 44ch;
  line-height: 1.45;
}

.plastic__roster {
  position: absolute;
  right: 4vw; bottom: 10vh;
  width: 44vw; max-width: 640px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  z-index: 4;
}
.plastic__roster li {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 14px 16px;
  position: relative;
}
.plastic__roster li .rank {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--red);
  color: var(--paper);
  font-family: "Bungee", sans-serif;
  font-size: 12px;
  padding: 2px 8px;
  letter-spacing: .1em;
}
.plastic__roster li h3 {
  font-family: "Bungee", sans-serif;
  font-size: 17px;
  margin-top: 8px;
  letter-spacing: -.005em;
}
.plastic__roster li .owner {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
  margin: 4px 0 8px;
}
.plastic__roster li .stats {
  display: flex; gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .08em;
}
.plastic__roster li .stats span {
  border-top: 1px solid var(--ink-2);
  padding-top: 4px;
}

.plastic__quote {
  position: absolute;
  left: 5vw; bottom: 12vh;
  max-width: 32ch;
  z-index: 4;
}
.plastic__quote p {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  font-variation-settings: "opsz" 100, "SOFT" 100;
}
.plastic__quote cite {
  display: block;
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  font-style: normal;
  color: var(--ink-2);
}

.plastic__bey-a, .plastic__bey-b {
  position: absolute;
  width: 18vw; max-width: 220px;
  z-index: 2;
  pointer-events: none;
}
.plastic__bey-a { top: 8vh; right: 28vw; }
.plastic__bey-b { bottom: 22vh; left: 38vw; opacity: .85;}

/* ============= HMS (03) ============= */
.spread--hms {
  background: var(--paper-3);
  color: var(--ink);
}
.spread--hms::before { color: rgba(21,17,13,.07); }
.hms__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  left: 4vw;
  font-family: "Bungee", sans-serif;
  font-size: 96px;
  color: var(--ink);
  line-height: 1;
  z-index: 4;
  border: 4px solid var(--ink);
  padding: 0 .15em;
}
.hms__warning {
  position: absolute;
  top: calc(var(--hud-h) + 30px);
  left: 22vw;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--red-2);
  z-index: 4;
}
.hms__head {
  position: absolute;
  left: 5vw; top: 28vh;
  z-index: 4;
  max-width: 60vw;
}
.display--cracked {
  font-family: "Bungee", sans-serif;
  font-size: clamp(60px, 7.2vw, 120px);
  line-height: .88;
}
.display--cracked .thru {
  position: relative;
  display: inline-block;
  color: var(--steel-2);
}
.display--cracked .thru::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 48%;
  height: 6px;
  background: var(--red);
  transform: rotate(-3deg);
}
.hms__body {
  position: absolute;
  left: 5vw; bottom: 8vh;
  width: 40vw; max-width: 580px;
  z-index: 4;
  font-size: 15px;
  line-height: 1.55;
}
.hms__body .lede {
  font-size: 17px;
  margin-bottom: 16px;
  font-weight: 500;
}
.hms__body em { color: var(--red-2); font-style: italic; }
.hms__autopsy {
  list-style: none;
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .03em;
  border-top: 1px solid var(--ink);
  padding-top: 10px;
}
.hms__autopsy li span {
  display: inline-block;
  width: 1.5em;
  font-weight: 700;
}
.hms__autopsy li span:first-child {
  color: var(--cobalt);
}
.hms__autopsy li:nth-child(n+3) span:first-child { color: var(--red-2); }

.hms__skid {
  position: absolute;
  right: 4vw; top: 26vh;
  width: 36vw; max-width: 520px;
  z-index: 4;
}
.hms__epitaph {
  position: absolute;
  right: 4vw; bottom: 14vh;
  width: 26vw; max-width: 360px;
  z-index: 4;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  text-align: right;
  color: var(--ink-2);
}

/* ============= METAL (04) ============= */
.spread--metal {
  background: #15110d;
  color: var(--paper);
}
.spread--metal::before { color: rgba(246,195,67,.06); }

.layer--sparks span {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
  opacity: .8;
  animation: spark 4s linear infinite;
}
.layer--sparks span:nth-child(1){ left:12%; top:18%; animation-delay: 0s; }
.layer--sparks span:nth-child(2){ left:28%; top:64%; animation-delay: .4s;}
.layer--sparks span:nth-child(3){ left:42%; top:32%; animation-delay: .8s;}
.layer--sparks span:nth-child(4){ left:58%; top:78%; animation-delay: 1.2s; background: var(--red);}
.layer--sparks span:nth-child(5){ left:70%; top:24%; animation-delay: 1.6s;}
.layer--sparks span:nth-child(6){ left:84%; top:60%; animation-delay: 2.0s; background: var(--red);}
.layer--sparks span:nth-child(7){ left:18%; top:82%; animation-delay: 2.4s;}
.layer--sparks span:nth-child(8){ left:36%; top:14%; animation-delay: 2.8s;}
.layer--sparks span:nth-child(9){ left:64%; top:50%; animation-delay: 3.2s; background: var(--red);}
.layer--sparks span:nth-child(10){left:88%; top:36%; animation-delay: 3.6s;}
@keyframes spark {
  0% { transform: scale(.4); opacity: 0;}
  20% { transform: scale(1); opacity: 1;}
  60% { transform: scale(.6) translateY(20px); opacity: .6;}
  100% { transform: scale(.2) translateY(60px); opacity: 0;}
}

.metal__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  right: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 130px;
  color: var(--gold);
  line-height: 1;
  z-index: 4;
}
.metal__head {
  position: absolute;
  left: 5vw; top: 24vh;
  max-width: 50vw;
  z-index: 4;
}
.metal__head .kicker { color: var(--gold); }
.display--metal {
  font-family: "Bungee", sans-serif;
  font-size: clamp(64px, 8vw, 140px);
  line-height: .82;
  letter-spacing: -.01em;
}
.display--metal span:nth-child(1){
  background: linear-gradient(180deg, #fff, var(--steel) 50%, #6f6c64);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #000);
}
.display--metal span:nth-child(2){
  color: var(--paper);
  margin-left: 1.5ch;
}
.display--metal span.display--em { color: var(--red); margin-left: 0; }
.metal__head .strap {
  margin-top: 18px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 17px;
  max-width: 40ch;
  color: rgba(241,230,204,.85);
}

.metal__bey {
  position: absolute;
  right: 6vw; bottom: 12vh;
  width: 22vw; max-width: 280px;
  z-index: 3;
}

.metal__stats {
  position: absolute;
  left: 5vw; bottom: 10vh;
  display: flex;
  gap: 28px;
  list-style: none;
  z-index: 4;
}
.metal__stats li {
  border-left: 2px solid var(--gold);
  padding-left: 12px;
  min-width: 140px;
}
.metal__stats li b {
  display: block;
  font-family: "Bungee", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--gold);
  line-height: 1;
}
.metal__stats li span {
  display: block;
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(241,230,204,.75);
  line-height: 1.4;
  max-width: 16ch;
}

.metal__roster {
  position: absolute;
  bottom: 30vh; right: 5vw;
  max-width: 36vw;
  text-align: right;
  z-index: 4;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--steel);
  line-height: 1.9;
}
.metal__roster span {
  color: var(--paper);
  display: inline-block;
  margin: 0 4px;
}

/* ============= ZERO-G (05) ============= */
.spread--zerog {
  background: var(--paper);
  color: var(--ink);
}
.zerog__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  left: 4vw;
  font-family: "Bungee", sans-serif;
  font-size: 110px;
  line-height: 1;
  color: var(--ink);
  z-index: 4;
  transform: rotate(-7deg);
  transform-origin: left top;
}
.zerog__head {
  position: absolute;
  left: 5vw; top: 30vh;
  max-width: 60vw;
  z-index: 4;
}
.display--tilt {
  font-family: "Bungee", sans-serif;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: .9;
}
.display--tilt span { display: block; }
.display--tilt span:nth-child(1){ transform: rotate(-2deg); }
.display--tilt span:nth-child(2){ transform: rotate(3deg) translateX(2ch); color: var(--red); }
.display--tilt span:nth-child(3){ transform: rotate(-1deg) translateX(.6ch); }
.display--tilt span:nth-child(4){ transform: rotate(4deg) translateX(3.2ch); color: var(--cobalt); }
.zerog__body {
  position: absolute;
  bottom: 14vh; left: 5vw;
  max-width: 44vw; width: 580px;
  font-size: 16px;
  line-height: 1.6;
  z-index: 4;
}
.zerog__body .lede { font-size: 18px; margin-bottom: 12px; font-weight: 500; }
.zerog__body em { color: var(--red); font-style: italic; }
.zerog__diagram {
  position: absolute;
  right: 6vw; bottom: 16vh;
  width: 32vw; max-width: 460px;
  color: var(--ink);
  z-index: 3;
}

/* ============= BURST (06) ============= */
.spread--burst {
  background: var(--paper);
  color: var(--ink);
}
.burst__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  right: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 130px;
  line-height: 1;
  color: var(--red);
  z-index: 4;
}
.burst__head {
  position: absolute;
  top: 18vh; left: 5vw;
  max-width: 60vw;
  z-index: 4;
}
.display--burst {
  font-family: "Bungee", sans-serif;
  font-size: clamp(60px, 8vw, 140px);
  line-height: .85;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .4ch;
}
.display--burst span { display: inline-block; }
.display--burst span:nth-child(1) { color: var(--ink); }
.display--burst span:nth-child(2) { color: var(--ink-2); transform: translateY(.05em);}
.display--burst span:nth-child(3) { color: var(--steel-2); }
.display--burst .bang {
  color: var(--paper);
  background: var(--red);
  padding: .04em .2em .08em;
  font-family: "Bungee Inline", sans-serif;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: .4ch;
  transform: rotate(-3deg);
}
.display--burst .bang em {
  font-family: "Bungee", sans-serif;
  font-style: normal;
  font-size: .35em;
  letter-spacing: .15em;
  margin-top: -.2em;
}
.burst__head .strap {
  margin-top: 22px;
  font-style: italic;
  font-size: 17px;
  max-width: 44ch;
}

.burst__body {
  position: absolute;
  left: 5vw; bottom: 8vh;
  max-width: 38vw; width: 540px;
  z-index: 4;
  font-size: 15px;
  line-height: 1.55;
}
.burst__body .lede { font-size: 17px; margin-bottom: 14px; font-weight: 500;}
.burst__layers {
  margin-top: 16px;
  list-style: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.9;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.burst__layers li span {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 1px 6px;
  margin-right: 10px;
  font-weight: 700;
}

.burst__roster {
  position: absolute;
  right: 5vw; bottom: 14vh;
  max-width: 32vw;
  z-index: 4;
}
.burst__roster .rosterTitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.burst__roster ul {
  list-style: none;
  font-family: "Bungee", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -.01em;
}
.burst__roster ul li {
  border-bottom: 1px dashed var(--ink-2);
  padding: 6px 0;
}
.burst__roster ul li:nth-child(2) { color: var(--red); }
.burst__roster ul li:nth-child(4) { color: var(--cobalt); }

.burst__bey {
  position: absolute;
  right: 30vw; top: 30vh;
  width: 18vw; max-width: 220px;
  z-index: 2;
}

/* ============= X (07) ============= */
.spread--xgen {
  background: var(--cobalt-2);
  color: var(--paper);
}
.spread--xgen::before { color: rgba(241,230,204,.06); }

.xgen__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  left: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 130px;
  line-height: 1;
  color: var(--gold);
  z-index: 4;
}
.xgen__head {
  position: absolute;
  left: 5vw; top: 22vh;
  max-width: 60vw;
  z-index: 4;
}
.xgen__head .kicker { color: var(--gold); }
.display--x {
  font-family: "Bungee", sans-serif;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .4em;
  align-items: end;
  line-height: .85;
}
.display--x .xMark {
  font-size: clamp(160px, 22vw, 360px);
  color: var(--red);
  line-height: .8;
  font-family: "Bungee Inline", sans-serif;
  grid-row: 1 / span 2;
  align-self: center;
  filter: drop-shadow(0 8px 0 var(--ink));
}
.display--x .xWord {
  font-size: clamp(40px, 5vw, 84px);
  color: var(--paper);
}
.display--x .xWord:nth-child(3) { color: var(--gold); }
.xgen__head .strap {
  margin-top: 22px;
  font-style: italic;
  font-size: 17px;
  color: rgba(241,230,204,.85);
  max-width: 50ch;
}

.xgen__body {
  position: absolute;
  left: 5vw; bottom: 10vh;
  max-width: 42vw; width: 580px;
  z-index: 4;
  font-size: 15px;
  line-height: 1.55;
}
.xgen__body .lede { font-size: 17px; margin-bottom: 16px; font-weight: 500;}
.xgen__specs {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  border-top: 1px solid rgba(241,230,204,.4);
  padding-top: 14px;
}
.xgen__specs dt { color: var(--gold); letter-spacing: .15em; }
.xgen__specs dd { color: var(--paper); margin-top: 2px;}

.xgen__roster {
  position: absolute;
  right: 5vw; bottom: 18vh;
  max-width: 30vw;
  text-align: right;
  font-family: "Bungee", sans-serif;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(241,230,204,.6);
  z-index: 4;
}
.xgen__roster span {
  color: var(--paper);
}
.xgen__roster span:nth-child(2n) { color: var(--gold); }

/* ============= FUTURE (08) ============= */
.spread--future {
  background: #06030c;
  color: var(--paper);
}
.spread--future::before { color: rgba(255,255,255,.04); }

.layer--orbit {
  display: grid;
  place-items: center;
}
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(246,195,67,.35);
}
.orbit--a { width: 40vmin; height: 40vmin; animation: spin 22s linear infinite; }
.orbit--a::before {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 22px var(--gold);
}
.orbit--b { width: 64vmin; height: 64vmin; border-color: rgba(230,57,70,.4); border-style: dashed;
  animation: spin 38s linear infinite reverse; }
.orbit--b::before {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: var(--red);
  border-radius: 50%;
  top: 50%; left: -7px;
  transform: translateY(-50%);
  box-shadow: 0 0 22px var(--red);
}
.orbit--c { width: 92vmin; height: 92vmin; border-color: rgba(29,62,198,.4);
  animation: spin 60s linear infinite; }
.orbit--c::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background: var(--cobalt);
  border-radius: 50%;
  bottom: 12vmin; left: 0;
  box-shadow: 0 0 28px var(--cobalt);
}

.future__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  right: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 130px;
  line-height: 1;
  color: var(--gold);
  z-index: 4;
}

.future__head {
  position: absolute;
  left: 5vw; top: calc(var(--hud-h) + 36px);
  max-width: 80vw;
  z-index: 4;
}
.future__head .kicker { color: var(--gold); }
.display--future {
  font-family: "Bungee", sans-serif;
  font-size: clamp(48px, 6vw, 100px);
  line-height: .88;
  display: flex;
  flex-wrap: wrap;
  gap: .2em .4em;
  align-items: baseline;
}
.display--future .word { display: inline-block; }
.display--future .word:nth-child(2) { color: rgba(241,230,204,.6); font-family: "Bungee Inline", sans-serif; }
.display--future .word--em {
  background: linear-gradient(120deg, var(--cobalt), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.future__forecast {
  position: absolute;
  left: 5vw; bottom: 8vh;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px 24px;
  max-width: 70vw;
  z-index: 4;
}
.future__forecast li {
  border: 1px solid rgba(241,230,204,.2);
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(2px);
}
.future__forecast li .year {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
.future__forecast li h3 {
  font-family: "Bungee", sans-serif;
  font-size: 16px;
  letter-spacing: -.005em;
  margin-bottom: 6px;
}
.future__forecast li p {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(241,230,204,.78);
}

.future__manifesto {
  position: absolute;
  right: 5vw; top: 50vh;
  max-width: 24vw;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  text-align: right;
  color: rgba(241,230,204,.85);
  z-index: 4;
}

/* ============= COLOPHON (09) ============= */
.spread--colophon {
  background: var(--paper);
  color: var(--ink);
}
.colo__num {
  position: absolute;
  top: calc(var(--hud-h) + 14px);
  left: 4vw;
  font-family: "Bungee Inline", sans-serif;
  font-size: 110px;
  line-height: 1;
  color: var(--ink);
  z-index: 4;
}
.colo__head {
  position: absolute;
  left: 5vw; top: calc(var(--hud-h) + 60px);
  margin-left: 11ch;
  max-width: 60vw;
  z-index: 4;
}
.colo__head .display { font-size: clamp(48px, 6vw, 92px); }
.colo__head .display span:nth-child(1){}
.colo__head .display span:nth-child(2){ color: var(--red); }
.colo__head .display span:nth-child(3){ transform: translateX(2.5em);}
.colo__head .display span:nth-child(4){ transform: translateX(.4em);}

.colo__grid {
  position: absolute;
  left: 5vw; bottom: 12vh;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 22px;
  max-width: 70vw;
  z-index: 4;
}
.colo__grid section {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}
.colo__grid h3 {
  font-family: "Bungee", sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  margin-bottom: 10px;
  color: var(--cobalt);
}
.colo__grid p {
  font-size: 13px;
  line-height: 1.5;
}

.colo__sign {
  position: absolute;
  right: 5vw; top: 24vh;
  text-align: right;
  z-index: 4;
}
.colo__sign .kana {
  display: block;
  font-family: "RocknRoll One", sans-serif;
  font-size: clamp(120px, 14vw, 220px);
  line-height: 1;
  color: var(--red);
}
.colo__sign em {
  display: block;
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-2);
}

.colo__rip {
  position: absolute;
  right: 5vw; bottom: 12vh;
  font-family: "Bungee", sans-serif;
  font-size: 16px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: 14px 22px;
  z-index: 4;
  transition: transform .2s, background .2s;
}
.colo__rip:hover {
  transform: translateX(-6px);
  background: var(--red);
}

/* ============= RESPONSIVE — small viewports ============= */
@media (max-width: 760px) {
  .splash__title h1 { font-size: clamp(56px, 16vw, 110px); }
  .splash__title { max-width: 88vw; left: 6vw; }
  .splash__bey { width: 60vmin; right: -10vmin; left: auto; top: 60%; }
  .splash__cite { font-size: 9px; }

  .origin__head, .plastic__head, .hms__head, .metal__head,
  .zerog__head, .burst__head, .xgen__head, .future__head, .colo__head {
    max-width: 88vw;
  }
  .origin__body, .hms__body, .zerog__body, .burst__body, .xgen__body {
    width: 80vw; max-width: none;
  }
  .origin__facts, .hms__skid, .hms__epitaph,
  .plastic__roster, .plastic__quote, .plastic__bey-a, .plastic__bey-b,
  .metal__bey, .metal__stats, .metal__roster, .zerog__diagram,
  .burst__roster, .burst__bey,
  .xgen__roster, .future__manifesto, .future__forecast,
  .colo__grid, .colo__sign, .colo__rip {
    max-width: 90vw !important;
  }
  .future__forecast { grid-template-columns: 1fr 1fr; }
  .colo__grid { grid-template-columns: 1fr 1fr; }
  .display--x .xMark { font-size: 32vw; }
  .kb-hint { display: none; }
}

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