/* Ninja MDE — every door. Phone first; DIRECTION.md is the brief.
   Sizes: 32 · 24 · 18 · 16 · 13 · 11 only (Ninja Design System v1). The wordmark is the
   brand lockup (the Ninja Flow cover's face), sized to the column, not a text size. */
@font-face {
  font-family: 'Ninja Mark';
  src: url('fonts/playfair-900.woff2') format('woff2');
  font-weight: 900; font-display: swap;
  unicode-range: U+0020-007E; /* basic Latin: the mark and a song title */
}

:root {
  --robe: #000000;
  --belt: #FFFFFF;
  --quiet: #A3A3A3;
  --step: #121212;
  --hairline: #262626;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: 16px;
  --col: 600px;
  --ease: cubic-bezier(0, 0, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--robe); }
body { margin: 0; background: var(--robe); color: var(--belt); font: 400 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--belt); outline-offset: 2px; }
#app { overflow-x: clip; padding-bottom: 32px; }
.noscript { padding: var(--gutter); }

/* ── The name: the cover's lockup ────────────────────── */
.hero { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 48px var(--gutter) 0; }
.mark {
  margin: 0; display: flex; flex-direction: column;
  font: 900 clamp(64px, 21vw, 128px)/0.92 'Ninja Mark', 'Playfair Display', Georgia, serif;
  letter-spacing: 0.06em;
}
.rule { display: block; width: 96px; height: 2px; margin: 24px 0 0; background: var(--belt); }
.why { margin: 24px 0 0; font-size: 18px; line-height: 1.4; }

/* ── The belt: the one bold thing ────────────────────── */
.belt { position: relative; height: 136px; margin-top: 48px; --knot-at: max(64px, calc(50% - var(--col) / 2 + 48px)); }
.band {
  position: absolute; left: 0; right: 0; top: 24px; height: 32px;
  background: var(--belt);
  transform-origin: var(--knot-at) 50%;
  transition: transform 600ms var(--ease), background-color 600ms var(--ease);
}
/* the rank bar: a black patch on the belt, as on a real one, where every tape reads */
.stripes { position: absolute; top: 4px; bottom: 4px; left: calc(var(--knot-at) + 64px); display: flex; gap: 4px; padding: 0 4px; background: #000000; }
.stripes:empty { padding: 0; }
.stripe { width: 10px; height: 100%; background: var(--tape); }
.knot {
  position: absolute; top: 0; left: calc(var(--knot-at) - 48px); width: 96px; height: 120px; overflow: visible;
  transition: opacity 240ms var(--ease) 360ms;
}
.knot .body, .knot .tail { fill: var(--belt); stroke: var(--robe); stroke-width: 2; stroke-linejoin: round; transition: fill 600ms var(--ease); }
.knot .fold { fill: none; stroke: var(--robe); stroke-width: 2; stroke-linecap: round; opacity: 0.5; }
.knot .tail { transform-box: fill-box; transition: transform 240ms var(--ease), fill 600ms var(--ease); }
.knot .tail-l { transform-origin: 90% 0%; }
.knot .tail-r { transform-origin: 10% 0%; }
.belt.loose .tail-l { transform: rotate(10deg); }
.belt.loose .tail-r { transform: rotate(-10deg); }

/* every door opened: the belt turns black, its edge drawn by the stitching it always had */
.black-belt .band { background: #000000; border-block: 2px solid var(--belt); }
.black-belt .knot .body, .black-belt .knot .tail { fill: #000000; stroke: var(--belt); }
.black-belt .knot .fold { stroke: var(--belt); }
.earned { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); font-size: 16px; font-weight: 600; }
.earned:empty { margin: 0; min-height: 0; } /* stays in the page so its first words are announced */

/* ── The doors: one rounded list ─────────────────────── */
.doors { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 24px auto 0; padding: 0 var(--gutter); }
.list { list-style: none; margin: 0; padding: 0; background: var(--step); border-radius: 16px; overflow: hidden; }
.door { position: relative; }
.door + .door::before { content: ''; position: absolute; top: 0; left: 36px; right: 0; height: 1px; background: var(--hairline); }
.row {
  display: grid; grid-template-columns: 4px 1fr auto 24px; align-items: center; column-gap: 16px;
  width: 100%; min-height: 64px; padding: 12px 16px 12px 16px;
  border: 0; background: none; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease);
}
.row:active { background: #1C1C1C; }
.row:focus-visible { outline-offset: -2px; border-radius: 16px; }
.tape { width: 4px; height: 36px; border-radius: 2px; background: var(--tape); }
.text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.name { font-size: 18px; font-weight: 600; line-height: 1.2; }
.line { font-size: 13px; line-height: 1.3; color: var(--quiet); }
.count { font-size: 13px; color: var(--quiet); white-space: nowrap; }
.count .n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--belt); }
.chev {
  width: 10px; height: 10px; justify-self: center;
  border-right: 2px solid var(--belt); border-bottom: 2px solid var(--belt);
  transform: rotate(45deg) translateY(-2px); transition: transform 240ms var(--ease);
}
.open .chev { transform: rotate(-135deg) translate(-2px, 0); }

/* A door opens in place, growing from its row. */
.panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms var(--ease), visibility 0s linear 240ms; }
.open .panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms var(--ease), visibility 0s; }
.panel-in { min-height: 0; overflow: hidden; padding: 0 16px 0 36px; }
.open .panel-in { padding-bottom: 24px; }
.detail { margin: 0; font-size: 16px; line-height: 1.4; }
.embeds { display: grid; gap: 16px; margin-top: 16px; }
.embed { margin: 0; }
.embed img { display: block; width: 144px; height: auto; border-radius: 4px; }
.stage { position: relative; height: 152px; border-radius: 12px; overflow: hidden; background: #1C1C1C; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster {
  position: absolute; inset: 0; width: 100%; padding: 0 24px; border: 0; cursor: pointer; background: #1C1C1C;
  display: flex; align-items: center; gap: 16px; text-align: left;
}
.ptitle { font-family: 'Ninja Mark', 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 32px; line-height: 1; }
.poster:active .disc { transform: scale(0.97); }
.poster { outline-offset: -4px; } /* the stage clips anything drawn outside it */
.disc { width: 56px; height: 56px; border-radius: 50%; background: var(--belt); display: grid; place-items: center; }
.disc::after { content: ''; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--robe); }
.embed .quiet { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font-size: 13px; }
.embed .quiet:hover { text-decoration: underline; text-underline-offset: 4px; }

.primary {
  display: flex; align-items: center; justify-content: center;
  height: 56px; margin-top: 24px; padding: 0 32px; border-radius: 28px;
  background: var(--tape); color: var(--on);
  font-size: 18px; font-weight: 600; text-decoration: none;
  transition: transform 100ms var(--ease);
}
.primary:active { transform: scale(0.97); }
.links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 24px; }
.links a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Contact and the last line ───────────────────────── */
.foot { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 48px auto 0; padding: 0 var(--gutter); }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mail { font-size: 18px; font-weight: 600; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.copy { min-height: 48px; padding: 0 24px; border: 0; border-radius: 24px; background: var(--step); font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 100ms var(--ease); }
.copy:active { transform: scale(0.97); }
.sign { margin: 32px 0 0; font-size: 18px; font-style: italic; }
.legal { margin: 8px 0 0; font-size: 13px; color: var(--quiet); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10; margin: 0;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 12px 24px; border-radius: 24px; background: var(--belt); color: var(--robe);
  font-size: 16px; font-weight: 600;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── From 768: the same column, centred; the mark grows ── */
@media (min-width: 768px) {
  .hero { padding-top: 96px; }
  .belt { margin-top: 64px; }
}

/* ── The one orchestrated moment: the belt ties itself ── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.tied) .band { transform: scaleX(0); }
  html:not(.tied) .knot { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}