:root {
  --page: oklch(0.14 0.01 250);
  --white: oklch(0.98 0.01 240);
  --navy: oklch(0.3 0.13 262);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --col: 480px;
  /* Type scale shared by every segment (from the key visual): --xl names, --l headings, --m body, --note labels.
     --xl and --l are recomputed from the screen in JS (layoutKey). Line heights sit on a 4px grid. */
  --xl: 140px;
  --l: 36px;
  --m: 17px;
  --note: 11px;
  --lh-l: 40px;
  --lh-m: 24px;
  --lh-note: 16px;
  --gutter: 20px;
  /* Tracking per size: tight display names, palt for Japanese headings, open mono labels. */
  --tr-xl: -.035em;
  --tr-l: -.01em;
  --tr-note-mono: .1em;
  --tr-note: .04em;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #06090d; scroll-snap-type: y mandatory; }
body {
  margin: 0;
  background: #06090d;
  color: var(--white);
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
html.lb-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.app {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--page);
}

/* ---------- Scroll-scrubbed stage ---------- */
/* Section snap: one anchor per segment (placed from JS), so a released scroll always settles on a segment. */
.snaps i { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
/* Until JS has placed them all anchors sit at 0, and WebKit would treat the last one (05) as the current
   snap target and follow it down the page. So only 01 snaps until the rest are positioned. */
.snaps i:first-child, .snaps.is-ready i { scroll-snap-align: start; }
.fanart { scroll-snap-align: start; }
.track { position: relative; height: 600vh; height: 600svh; }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip; /* hidden can still be scrolled by focus/scrollIntoView, which shifts the whole stage */
  background: #ece9e5; /* close to the video's white room while it loads */
}
.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom on the face for the opening frame (set from JS); bottom-anchored so the counter stays in view. */
  transform-origin: 41% 100%;
  will-change: transform;
}
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    oklch(0.16 0.08 260 / .55) 0%,
    oklch(0.16 0.08 260 / 0) 34%,
    oklch(0.16 0.08 260 / 0) 52%,
    oklch(0.14 0.08 260 / .7) 100%);
}


.seg {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.label { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); }
.mono-12 { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); }
.mono-13 { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); }

.pill {
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--m);
  font-weight: 700;
  transition: transform .15s ease;
}

/* 01 Blue — key visual. Box positions and word sizes are set from JS (layoutKey) to fit around the face. */
.seg-key { color: var(--navy); }
.key-stack {
  position: absolute;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  font-weight: 900;
  transform-origin: 50% 100%;
  visibility: hidden;
}
.key-stack.is-laid { visibility: visible; }
/* Line mask: clips only vertically so the scroll-linked tracking can still widen the word. */
.ks-line { display: block; overflow-x: visible; overflow-y: clip; line-height: 1; }
/* Type scale for the key visual: --xl (Nuts), --l (ナッツ, credit), --m, plus 11px mono notes. Set from JS. */
.ks-xl { font-size: var(--xl); --ls-base: var(--tr-xl); }
/* Base tracking per line plus the scroll-linked spread (--track, set on the stack from JS). */
.ks-word { letter-spacing: calc(var(--ls-base, 0em) + var(--track, 0em)); }
.ks-l { font-size: var(--l); --ls-base: var(--tr-l); font-feature-settings: 'palt'; margin-top: calc(var(--xl) * -.06); }
.ks-m { font-size: var(--m); font-weight: 700; margin-top: 8px; }
.ks-sep { display: inline-block; width: 1em; }
/* Shown only once the visitor starts scrolling (JS drives its mask position). */
.key-stack .ks-m .ks-word { transition: none; }
/* 16-frame leap sprite (256×192 cells, one row); JS picks the frame and moves the box. */
.key-fox {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fox-w, 90px);
  aspect-ratio: 256 / 192;
  background: url(assets/fox-leap-v2.png) 0 0 / 1600% 100% no-repeat;
  filter: drop-shadow(0 0 1px oklch(0.3 0.13 262 / .9)) drop-shadow(0 2px 6px oklch(0.3 0.13 262 / .5));
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 88.5%; /* body centre x=128, ground y=170 in the cell */
}
.ks-word .ch { display: inline-block; }
.ks-word {
  display: block;
  width: max-content;
  white-space: nowrap;
  font-kerning: normal;
  transform: translateY(105%);
}
.key-stack.is-in .ks-word {
  transform: none;
  transition: transform .6s cubic-bezier(.33, 1, .68, 1) calc(var(--i) * .14s);
}
.key-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
}
.key-stack.is-in ~ .key-foot {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .7s, transform .5s cubic-bezier(.33, 1, .68, 1) .7s;
}
.key-credit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.key-credit-by { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); text-transform: uppercase; width: 100%; }
.key-credit-name { font-size: var(--m); font-weight: 900; line-height: var(--lh-m); }
/* Sized to the M line (24px) beside the credit; the invisible ::before keeps a 44px tap area. */
.key-credit-x {
  position: relative;
  width: var(--lh-m);
  height: var(--lh-m);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
}
.key-credit-x::before { content: ''; position: absolute; inset: -10px; }
/* Nuts's own X link, placed beside "Nuts" from JS; fades in with the credit after the name has stacked. */
.key-x-wrap { position: absolute; left: 0; top: 0; opacity: 0; }
.key-x {
  width: calc(var(--l) * 1.1);
  height: calc(var(--l) * 1.1);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
}
/* Entrance fade on the wrapper; the scroll fade is set inline on the link itself. */
.key-stack.is-in ~ .key-x-wrap { opacity: 1; transition: opacity .5s ease .7s; }
.key-credit-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.key-meta {
  display: flex;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--note);
  line-height: var(--lh-note);
}
.key-scroll { margin-left: auto; }

/* 02 Green — character sheet */
.seg-sheet {
  color: var(--white);
  text-shadow: 0 2px 18px oklch(0.15 0.08 260 / .55);
  padding: 64px var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-head { display: flex; flex-direction: column; gap: 8px; }
.sheet-credit { align-self: flex-start; }
.sheet-title { font-size: var(--l); font-weight: 900; line-height: var(--lh-l); }
.sd {
  position: absolute;
  right: 6px;
  top: 40px;
  width: 110px;
  height: 168px;
  pointer-events: none;
}
.sd-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px oklch(0.4 0.06 235 / .25));
  animation: nfFloat 3.6s ease-in-out infinite;
}
.sd-shadow {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: 10px;
  border-radius: 50%;
  background: oklch(0.4 0.06 235);
  opacity: .3;
  animation: nfShadow 3.6s ease-in-out infinite;
}
@keyframes nfFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
@keyframes nfShadow {
  0%, 100% { transform: scaleX(1); opacity: .35; }
  50% { transform: scaleX(.78); opacity: .2; }
}
.sheet-art {
  all: unset;
  cursor: zoom-in;
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  margin: 0 calc(-1 * var(--gutter));
}
.sheet-art:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; border-radius: 12px; }
.art-mae, .art-fuku { position: absolute; width: auto; }
.art-mae { left: 14px; bottom: 8px; height: 96%; max-height: 500px; }
.art-fuku { right: 14px; bottom: 4px; height: 98%; max-height: 510px; }
.pill-sheet {
  all: unset;
  cursor: zoom-in;
  height: 52px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  text-shadow: none;
  box-shadow: 0 10px 24px -12px oklch(0.15 0.08 260 / .7);
  font-size: var(--m);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pill-sheet:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.pill-ja { font-size: var(--note); font-weight: 500; }

/* 03 Yellow — SNS */
.seg-sns { color: var(--white); text-shadow: 0 2px 18px oklch(0.15 0.08 260 / .6); }
.sns-head { position: absolute; left: var(--gutter); top: 64px; display: flex; flex-direction: column; gap: 8px; }
.sns-title { font-size: var(--l); font-weight: 900; line-height: var(--lh-l); }
/* Seven entries must fit short phones too, so the list's top, gap and circle size follow the viewport height. */
.sns-list { position: absolute; left: var(--gutter); top: clamp(180px, 27svh, 218px); display: flex; flex-direction: column; gap: clamp(6px, 1.4svh, 12px); }
.sns-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  transition: transform .15s ease;
}
.sns-link:hover { transform: translateX(3px); }
.sns-circle {
  width: clamp(44px, 6.4svh, 52px);
  height: clamp(44px, 6.4svh, 52px);
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 0 2px oklch(0.98 0.01 240 / .85), 0 8px 18px -6px oklch(0.15 0.08 260 / .7);
}
.sns-letter { font-size: 24px; font-weight: 900; font-family: system-ui, sans-serif; text-shadow: none; }
.sns-name { font-size: var(--m); line-height: var(--lh-m); font-weight: 700; text-shadow: 0 1px 2px oklch(0.15 0.08 260 / .8), 0 0 10px oklch(0.15 0.08 260 / .55); }

/* Short screens (landscape phones): two columns beside the heading, so all seven stay reachable. */
@media (max-height: 540px) {
  .sns-list { top: 64px; left: 168px; right: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 6px; }
}
/* No-video fallback with a light background (set from JS): ink switches to navy. */
.stage.is-light .seg:not(.seg-key) { color: var(--navy); text-shadow: none; }
.stage.is-light .sns-link { color: var(--navy); }
.stage.is-light .sns-name { text-shadow: none; }

/* 04 Orange — events */
.seg-events {
  color: var(--white);
  text-shadow: 0 2px 18px oklch(0.12 0.06 260 / .6);
  padding: 64px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.events-head { display: flex; flex-direction: column; gap: 8px; }
.events-title { font-size: var(--l); font-weight: 900; line-height: var(--lh-l); }
.events-ja { font-size: var(--m); line-height: var(--lh-m); font-weight: 900; }
.event-list { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.event-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  background: oklch(0.98 0.01 240 / .94);
  color: oklch(0.24 0.1 262);
  text-shadow: none;
  box-shadow: 0 14px 30px -14px oklch(0.1 0.06 260 / .8);
  transition: transform .15s ease;
}
.event-card:hover { transform: translateY(-2px); }
.ev-date { display: flex; flex-direction: column; line-height: 1; }
.ev-month { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); }
.ev-day { font-size: var(--l); line-height: var(--lh-l); font-weight: 900; }
.ev-range { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); }
.ev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-name { font-size: var(--m); font-weight: 900; line-height: var(--lh-m); }
.ev-place { font-size: var(--note); line-height: var(--lh-note); }
.ev-until { font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); font-weight: 500; color: oklch(0.5 0.2 258); }
.ev-arrow { font-size: var(--m); }
.events-empty { font-size: var(--m); line-height: var(--lh-m); font-weight: 900; }
.events-note { font-size: var(--note); line-height: var(--lh-note); }

/* 05 Red — Choc */
.seg-choc {
  color: var(--white);
  text-shadow: 0 2px 18px oklch(0.12 0.06 260 / .65);
  display: flex;
  flex-direction: column;
  padding: 64px var(--gutter) 40px;
  gap: 16px;
}
.choc-space { flex: 1; min-height: 0; }
.choc-name-wrap { display: flex; flex-direction: column; gap: 8px; }
.choc-name {
  font-size: var(--xl);
  font-weight: 900;
  line-height: .8;
  letter-spacing: var(--tr-xl);
  white-space: nowrap;
}
.choc-sub { display: flex; align-items: baseline; gap: 16px; }
.choc-ja { font-size: var(--l); line-height: var(--lh-l); font-weight: 900; }
.pill-choc {
  height: 56px;
  gap: 10px;
  background: var(--white);
  color: var(--navy);
  text-shadow: none;
  box-shadow: 0 10px 24px -12px oklch(0.1 0.06 260 / .8);
  font-weight: 900;
}
.pill-choc svg { color: #111111; }
.pill-choc:hover { transform: translateY(-1px); }

/* ---------- After the video ---------- */
.fanart {
  background: var(--page);
  color: oklch(0.98 0.005 250);
  padding: 40px 0;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fanart-head { padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fanart-title { word-break: keep-all; font-size: var(--l); line-height: var(--lh-l); font-weight: 900; }
.fanart-count { white-space: nowrap; font-family: var(--mono); font-size: var(--note); line-height: var(--lh-note); color: oklch(0.8 0.04 225); }
.fanart-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 20px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding: 0 20px;
}
.fanart-strip::-webkit-scrollbar { display: none; }
.fa-tile {
  flex: none;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
}
.fa-tile > a, .fa-tile img { display: block; height: 100%; width: 100%; }
.fa-tile img { object-fit: cover; }
.fa-placeholder { background: repeating-linear-gradient(135deg, oklch(0.26 0.02 240) 0 8px, oklch(0.3 0.02 240) 8px 16px); }
.fa-num { position: absolute; left: 8px; top: 8px; font-family: var(--mono); font-size: var(--note); color: oklch(0.8 0.03 225); }
.pill-outline {
  margin: 0 20px;
  border: 1px solid oklch(0.98 0.005 250 / .4);
  color: oklch(0.98 0.005 250);
}
.pill-outline[aria-disabled="true"] { opacity: .5; cursor: default; }
.footer { padding: 16px var(--gutter) 0; font-size: var(--note); line-height: var(--lh-note); color: oklch(0.7 0.01 250); }

/* ---------- Page dots (pinned to the column's right edge) ---------- */
.dots {
  position: fixed;
  /* Buttons are 44px wide and as tall as the dot plus the old 8px gap, so hit areas never overlap and the dots keep
     their original spacing and spot (10px from the edge). */
  right: max(-7px, calc((100vw - var(--col)) / 2 - 7px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
}
.dots.is-off { opacity: 0; visibility: hidden; }
.dot {
  all: unset;
  cursor: pointer;
  position: relative;
  width: 44px;
  height: 18px;
  transition: height .2s ease;
}
.dot[aria-current="true"] { height: 36px; }
.dot::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dot-off, oklch(0.98 0.01 240 / .35));
  box-shadow: 0 0 0 1.5px oklch(0.98 0.005 250 / .8);
  transition: height .2s ease, background-color .2s ease;
}
.dot[aria-current="true"]::after { height: 28px; background: var(--dot-on, var(--white)); }
.dot:focus-visible { outline: none; }
.dot:focus-visible::after { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: oklch(0.12 0.01 250 / .97);
  color: oklch(0.97 0.008 80);
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: transparent; }
.lb-bar {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 20px;
  margin-top: env(safe-area-inset-top);
}
.lb-title { font-size: var(--m); font-weight: 700; }
.lb-close {
  all: unset;
  cursor: pointer;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: oklch(0.97 0.008 80);
  color: oklch(0.22 0.012 60);
  font-size: var(--m);
  font-weight: 700;
  display: flex;
  align-items: center;
}
.lb-close:focus-visible { outline: 2px solid oklch(0.97 0.008 80); outline-offset: 3px; }
.lb-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.lb-img-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.lb-foot {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 16px 20px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-credit { font-size: var(--note); line-height: var(--lh-note); text-decoration: underline; text-underline-offset: 3px; }
.lb-download {
  height: 52px;
  border-radius: 999px;
  background: oklch(0.78 0.13 150);
  color: oklch(0.18 0.05 155);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--m);
  font-weight: 900;
}

/* ---------- Tracking: one rule per size ---------- */
.sheet-title, .sns-title, .events-title, .ev-day, .choc-ja, .fanart-title {
  letter-spacing: var(--tr-l);
  font-feature-settings: 'palt';
}
.label, .mono-12, .mono-13, .key-credit-by, .key-meta, .ev-month, .ev-range, .ev-until, .fanart-count, .fa-num {
  letter-spacing: var(--tr-note-mono);
}
.ev-place, .events-note, .footer, .lb-credit, .pill-ja { letter-spacing: var(--tr-note); }
.pill, .pill-sheet, .sns-name, .ev-name, .events-ja, .key-credit-name, .lb-title, .lb-close, .lb-download { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .ks-word { transform: none; }
  .key-stack.is-in .ks-word, .key-stack.is-in ~ .key-foot { transition: none; }
  .sd-img, .sd-shadow { animation: none; }
  .sns-link, .event-card, .pill, .dot, .dot::after { transition: none; }
  .sns-link:hover, .event-card:hover, .pill-choc:hover { transform: none; }
}