/* ==========================================================================
   K00 Cover & Index — page styles (index.html)
   Full-width cover with the lumen ring, "How to use" steps and the page index.
   The intro (headline rises, copy fades in, aperture opens) runs in CSS only;
   with prefers-reduced-motion base.css drops the animations and the final
   state shows immediately.
   ========================================================================== */

.cover-page {
  min-height: 100vh;
  background: var(--graphite-50);
}

/* ── Intro keyframes ────────────────────────────────────────────────────── */

@keyframes coverRise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes coverFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes coverAperture {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(50% at 50% 50%); }
}

/* ── Cover ──────────────────────────────────────────────────────────────── */

.cover {
  position: relative;
  min-height: min(100vh, 960px);
  box-sizing: border-box;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 4.2vw, 60px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-hairline);
}

.cover__meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-600);
}

.cover__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cover__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--graphite-900);
  box-shadow: inset 0 0 0 3px var(--graphite-50), inset 0 0 0 5px var(--scrub-600);
}

.cover__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
  align-items: center;
}

.cover__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cover__title {
  margin: 0;
  font: 500 clamp(84px, 2rem + 14vw, 248px)/.84 'Geist', sans-serif;
  letter-spacing: -.06em;
}

.cover__title-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;
}

.cover__title-text {
  display: block;
  animation: coverRise 1100ms var(--ease-diastole) 270ms backwards;
}

.cover__tagline {
  margin: 0;
  font: italic 400 clamp(34px, 1.2rem + 2.6vw, 64px)/1 'Instrument Serif', serif;
  letter-spacing: -.01em;
  animation: coverFade var(--dur-5) var(--ease-diastole) 620ms backwards;
}

.cover__lead {
  margin: 0;
  max-width: 520px;
  font: 400 18px/1.55 'Geist', sans-serif;
  color: var(--graphite-750);
  text-wrap: pretty;
  animation: coverFade var(--dur-5) var(--ease-diastole) 770ms backwards;
}

.cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: coverFade var(--dur-5) var(--ease-diastole) 920ms backwards;
}

.cover__cta { position: relative; }

/* One-off pulse ring once the CTA is in place */
.cover__cta-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  pointer-events: none;
  animation: lumenPulse 1000ms var(--ease-diastole) 1.4s 1 both;
}

/* ── Lumen ring (hero illustration) ─────────────────────────────────────── */

.lumen-ring {
  position: relative;
  justify-self: center;
  width: min(100%, 600px);
  aspect-ratio: 1;
}

.lumen-ring__axis {
  position: absolute;
  background: var(--ink-a14);
}
.lumen-ring__axis--x { left: -8%; right: -8%; top: 50%; height: 1px; }
.lumen-ring__axis--y { top: -8%; bottom: -8%; left: 50%; width: 1px; }

/* Calibration ticks every 5°, masked to a thin band outside the circle */
.lumen-ring__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ink-a50) 0 .35deg, transparent .35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  transform: scale(1.14);
}

.lumen-ring__circle {
  position: absolute;
  border-radius: 50%;
}
.lumen-ring__circle--outer { inset: 0;   border: 1px solid var(--ink-a16); }
.lumen-ring__circle--mid   { inset: 6%;  border: 1px solid var(--ink-a12); }
.lumen-ring__circle--inner { inset: 11%; border: 1px solid var(--ink-a10); }

.lumen-ring__aperture {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--graphite-950);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: coverAperture 1600ms var(--ease-diastole) 270ms backwards;
}

.lumen-ring__glow-ring {
  position: absolute;
  border-radius: 50%;
}
.lumen-ring__glow-ring--outer { inset: 18%; border: 1px solid rgba(82, 224, 168, .35); }
.lumen-ring__glow-ring--inner { inset: 34%; border: 1px solid rgba(82, 224, 168, .55); }

.lumen-ring__core {
  position: absolute;
  inset: 46%;
  border-radius: 50%;
  background: var(--scrub-300);
  box-shadow: 0 0 40px 8px rgba(82, 224, 168, .35);
}

.lumen-ring__caption {
  position: absolute;
  bottom: 14%;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .1em;
  color: var(--mist-400);
}

.lumen-ring__label {
  position: absolute;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}
.lumen-ring__label--channel {
  right: -2%;
  top: 6%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lumen-ring__label--count { left: -2%; bottom: 8%; }

.lumen-ring__leader {
  width: 44px;
  height: 1px;
  background: var(--graphite-600);
}

/* ── Facts row ──────────────────────────────────────────────────────────── */

.cover__facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--color-hairline);
}

.cover__fact {
  padding: 18px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cover__fact-key {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.cover__fact-value { font: 500 16px/1.3 'Geist', sans-serif; }

/* ── Content sections (00.1, 00.2) ──────────────────────────────────────── */

.cover-section {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.cover-section--howto {
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4.2vw, 60px);
  gap: 40px;
}

.cover-section--index {
  padding: 0 clamp(20px, 4.2vw, 60px) clamp(64px, 8vw, 120px);
  gap: 48px;
  scroll-margin-top: 24px;
}

/* ── 00.1 How to use this kit ───────────────────────────────────────────── */

.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.howto__step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.howto__number {
  font: 400 64px/1 'Geist Mono', monospace;
  letter-spacing: -.04em;
  color: var(--graphite-900);
}

.howto__title {
  font: 500 22px/1.2 'Geist', sans-serif;
  letter-spacing: -.01em;
}

.howto__text {
  margin: 0;
  font: 400 16px/1.6 'Geist', sans-serif;
  color: var(--graphite-600);
  text-wrap: pretty;
}

/* ── 00.2 Index ─────────────────────────────────────────────────────────── */

/* Status marker: filled dot = ready, outlined dot = in production */
.kit-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kit-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--graphite-900);
}
.kit-status--soon .kit-status__dot {
  background: none;
  border: 1px solid var(--graphite-500);
}

.kit-index__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 13px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.kit-index__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--color-hairline);
}

.kit-index__intro {
  padding: 20px 20px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit-index__group-name {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .1em;
  color: var(--graphite-500);
}

.kit-index__group-desc {
  max-width: 260px;
  font: 400 15px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* Page card */
.kit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 20px;
  border-left: 1px solid var(--ink-a10);
  border-bottom: 1px solid var(--ink-a10);
  background: var(--graphite-0);
  color: var(--graphite-900);
  text-decoration: none;
  transition: background var(--dur-2);
}
a.kit-card:hover {
  background: var(--graphite-25);
  color: var(--graphite-900);
}

.kit-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 12px/1 'Geist Mono', monospace;
  color: var(--graphite-600);
}

.kit-card__name {
  font: 500 20px/1.2 'Geist', sans-serif;
  letter-spacing: -.01em;
}

.kit-card__desc {
  font: 400 14px/1.45 'Geist', sans-serif;
  color: var(--graphite-600);
}

.kit-card__open {
  margin-top: auto;
  font: 500 14px/1 'Geist', sans-serif;
  color: var(--scrub-600);
}

/* Page not built yet (no link) */
.kit-card--soon { background: none; }
.kit-card--soon .kit-card__meta { color: var(--graphite-500); }
.kit-card--soon .kit-card__name { color: var(--graphite-600); }
.kit-card--soon .kit-card__desc { color: var(--graphite-500); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.cover-footer {
  padding: 28px clamp(20px, 4.2vw, 60px);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font: 400 12px/1.5 'Geist Mono', monospace;
  color: var(--graphite-500);
}