/* NCMA design chooser. paf "Night ops" dark theme, signal-red accent. The first screen combines the motifs of
   both options: option A's red disc and option B's mat floor, with the roundel and three cut-outs moving at
   their own speeds. Phone first; desktop from 900px. */

:root {
  color-scheme: dark;
  --hangar: #12161c;
  --hangar-raised: #1c222b;
  --ink: #eceef1;
  --muted: #a3adb8;
  --gold: #e8b931;
  --ink-on-gold: #14181f;
  --gunmetal: #3a4756;
  --steel: #8392a3;
  --line: rgb(131 146 163 / .28);
  --mat-blue: #2350b8;
  --rim: drop-shadow(0 0 1px rgb(236 238 241 / .35)) drop-shadow(0 16px 22px rgb(0 0 0 / .55));
}

.ch-top {
  position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand span { font: 700 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ch-nav { display: flex; gap: 16px; }
.ch-nav a { padding: 10px 0; font: 700 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--signal-red); }
@media (max-width: 419px) { .brand span { display: none; } }

/* ---------- First screen ---------- */
.ch-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); }
.ch-copy { position: relative; z-index: 5; padding: 22px var(--gutter) 0; }
.ch-copy .kicker { margin-bottom: 10px; }
.ch-hero h1 { font: 700 clamp(40px, 11.6vw, 92px)/.9 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.ch-sub { margin-top: 14px; max-width: 56ch; color: var(--muted); }
.ch-jump { margin-top: 16px; }

.ch-stage { position: relative; z-index: 0; flex: 1 0 400px; margin-top: 10px; --disc: min(84vw, 44svh, 560px); }
.ch-ring, .ch-disc, .ch-roundel, .ch-cut, .ch-mat { position: absolute; will-change: transform; }
.ch-disc, .ch-ring, .ch-roundel { left: var(--cx, 58%); top: var(--cy, 44%); border-radius: 50%; }
.ch-disc {
  z-index: 1; width: var(--disc); height: var(--disc); margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
  background: var(--signal-red); transform: translate3d(0, calc(var(--p, 0) * -34svh), 0);
}
.ch-ring {
  z-index: 0; --r: calc(var(--disc) * 1.26); width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2);
  border: 1px solid rgb(131 146 163 / .42); transform: translate3d(0, calc(var(--p, 0) * -20svh), 0);
}
.ch-roundel {
  z-index: 2; --s: calc(var(--disc) * .5); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / .45)); transform: translate3d(0, calc(var(--p, 0) * -18svh), 0);
}
.ch-mat { /* option B's mat floor: blue field, red border, seen in perspective */
  z-index: 1; left: 4%; right: 4%; bottom: 0; height: 22%;
  background-color: var(--mat-blue);
  background-image: linear-gradient(90deg, rgb(255 255 255 / .14) 1px, transparent 1px), linear-gradient(0deg, rgb(255 255 255 / .14) 1px, transparent 1px);
  background-size: 12.5% 33.4%;
  border: 12px solid var(--signal-red);
  transform: perspective(600px) rotateX(60deg); transform-origin: 50% 100%;
}
.ch-cut { z-index: 3; width: auto; max-width: none; filter: var(--rim); pointer-events: none; }
.ch-randori { left: -5%; bottom: 4%; height: 66%; transform: translate3d(0, calc(var(--p, 0) * 10svh), 0); }
.ch-kata { right: -2%; top: -4%; height: 38%; transform: translate3d(0, calc(var(--p, 0) * 26svh), 0); }
.ch-tomoe { right: 4%; bottom: 6%; height: 40%; transform: translate3d(0, calc(var(--p, 0) * 4svh), 0); }

/* ---------- Option cards ---------- */
.ch-options { position: relative; padding: 56px var(--gutter) 64px; background: var(--hangar); border-top: 3px solid var(--signal-red); }
.ch-options > h2 { max-width: 1200px; margin: 0 auto 24px; font: 700 clamp(32px, 9vw, 56px)/.95 var(--display); text-transform: uppercase; }
.opt-grid { display: grid; gap: 18px; max-width: 1200px; margin: 0 auto; }
.opt-card { display: flex; flex-direction: column; background: var(--hangar-raised); border: 1px solid var(--line); }
.opt-thumb { display: block; border-bottom: 1px solid var(--line); overflow: hidden; }
.opt-thumb img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; transition: transform .3s ease; }
.opt-card:hover .opt-thumb img { transform: scale(1.02); }
.opt-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px; }
.opt-label { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.opt-label span {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--signal-red); color: var(--on-fill); font: 700 18px/1 var(--display);
}
.opt-body h3 { font: 700 30px/32px var(--display); text-transform: uppercase; }
.opt-body p:not(.opt-label) { max-width: 60ch; }
.opt-body .btn { align-self: flex-start; margin-top: auto; }
.opt-body p + .btn { margin-top: 8px; }
.ch-note { max-width: 1200px; margin: 22px auto 0; font: 500 12px/18px var(--mono); color: var(--muted); }

.footer { padding: 36px var(--gutter) 40px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin-bottom: 14px; }
.footer-links a {
  padding-bottom: 3px; border-bottom: 2px solid var(--signal-red); color: var(--ink); text-decoration: none;
  font: 700 18px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.fine { margin: 4px 0; font: 500 12px/18px var(--mono); }
.fine a { text-underline-offset: 3px; }
.footer .credit { margin-top: 10px; }

@media (min-width: 760px) {
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ch-hero {
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center;
    min-height: min(calc(100svh - var(--header-h) - 120px), 760px); padding: 0 var(--gutter);
  }
  .ch-copy { grid-column: 1; grid-row: 1; padding: 40px 0 60px; }
  .ch-hero h1 { font-size: clamp(56px, 5.6vw, 88px); }
  .ch-randori { left: -4%; height: 72%; }
  .ch-kata { right: 2%; top: 2%; height: 44%; }
  .ch-sub { font-size: 18px; line-height: 28px; }
  .ch-stage { grid-column: 2; grid-row: 1; align-self: stretch; margin: 0; min-height: 560px; --disc: min(38vw, 58svh, 520px); --cx: 56%; --cy: 46%; }
  .ch-options { padding: 72px var(--gutter) 88px; }
  .opt-body { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .opt-thumb img { transition: none; }
}