/* ==========================================================================
   K06 Motion — page styles
   Duration/easing demos, the scroll-trigger catalog (01–09), motion budget.

   Every demo reads its duration from a custom property. The "Simulate
   prefers-reduced-motion" switch adds .is-reduced-motion to the main column,
   which sets those durations to 0 ms inside the sections — the same thing
   the real media query does to --dur-* in tokens.css.
   ========================================================================== */

.motion-page {
  --motion-aperture: 1400ms;
  --motion-headline: 1100ms;
  --motion-stagger: 80ms;
}

.motion-page.is-reduced-motion .kit-section {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
  --dur-4: 0ms;
  --dur-5: 0ms;
  --motion-aperture: 0ms;
  --motion-headline: 0ms;
  --motion-stagger: 0ms;
}


/* ── Reduced-motion switch (page header) ────────────────────────────────── */

.motion-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  cursor: pointer;
}

.motion-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Literal 200ms: the switch itself keeps animating while motion is simulated off */
.motion-switch__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--graphite-300);
  transition: background 200ms;
}
.motion-switch__input:checked + .motion-switch__track { background: var(--scrub-600); }
.motion-switch__input:focus-visible + .motion-switch__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.motion-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--graphite-0);
  box-shadow: 0 1px 2px rgba(10, 18, 22, .3);
  transition: left 200ms var(--ease-systole);
}
.motion-switch__input:checked + .motion-switch__track .motion-switch__knob { left: 19px; }

.motion-switch__label { font: 500 14px/1 'Geist', sans-serif; }

/* ── 06.1 Durations ─────────────────────────────────────────────────────── */

.motion-play-all {
  height: 44px;
  padding: 0 18px;
  background: var(--graphite-0);
}

.duration-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}

.duration-row {
  display: grid;
  grid-template-columns: 120px 80px minmax(0, 1fr) minmax(0, 240px);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-a07);
}

.duration-row__token { font: 400 13px/1 'Geist Mono', monospace; }

.duration-row__value {
  font: 500 14px/1 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--graphite-600);
}

.duration-row__track {
  position: relative;
  height: 20px;
  border-bottom: 1px solid var(--ink-a14);
}

.duration-row__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--graphite-900);
  transform: translateX(0);
  transition: transform var(--duration) var(--ease-diastole);
}
.duration-list.is-played .duration-row__dot { transform: translateX(280px); }

.duration-row__use {
  font: 400 13px/1.35 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 06.1 Easings ───────────────────────────────────────────────────────── */

.easing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.easing-card {
  --ease-duration: var(--dur-4);
  --ease-curve: var(--ease-systole);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}
.easing-card--diastole {
  --ease-duration: var(--dur-5);
  --ease-curve: var(--ease-diastole);
}

.easing-card__curve {
  flex: none;
  overflow: visible;
}

.easing-card__body {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.easing-card__name { font: 500 20px/1.2 'Geist', sans-serif; }

.easing-card__css {
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-600);
}

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

.easing-card__track {
  position: relative;
  height: 16px;
  margin-top: 6px;
  border-bottom: 1px solid var(--ink-a14);
}

.easing-card__dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--scrub-600);
  transform: translateX(0);
  transition: transform var(--ease-duration) var(--ease-curve);
}
.easing-grid.is-played .easing-card__dot { transform: translateX(180px); }

/* ── 06.2 Trigger card shell ────────────────────────────────────────────── */

.trigger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.trigger-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}

.trigger-card__stage {
  height: 220px;
  border-bottom: 1px solid var(--ink-a08);
  background: var(--graphite-25);
}

.trigger-card__stage--center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.trigger-card__stage--dark {
  background: var(--graphite-950);
  color: var(--graphite-mist);
}

.trigger-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}
.trigger-card__foot--stack {
  flex-direction: column;
  justify-content: normal;
  align-items: normal;
  gap: 4px;
}

.trigger-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trigger-card__title { font: 500 16px/1.2 'Geist', sans-serif; }

.trigger-card__spec {
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.replay-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-a20);
  border-radius: 50%;
  background: var(--graphite-0);
  font: 500 14px/1 'Geist', sans-serif;
  cursor: pointer;
}

/* ── 01 Aperture reveal ─────────────────────────────────────────────────── */

.aperture__frame {
  position: relative;
  width: 160px;
  height: 160px;
}

.aperture__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink-a16);
  border-radius: 50%;
}

.aperture__disc {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 8px, var(--sage-250) 8px 16px);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--motion-aperture) var(--ease-diastole);
}
.aperture.is-revealed .aperture__disc { clip-path: circle(50% at 50% 50%); }

/* ── 02 Line-draw annotation ────────────────────────────────────────────── */

.line-draw {
  position: relative;
  background-image:
    linear-gradient(var(--ink-a04) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-a04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.line-draw__node {
  position: absolute;
  left: 60px;
  top: 90px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--graphite-900);
  border-radius: 50%;
  background: var(--graphite-0);
  opacity: 0;
  transition: opacity 200ms;
}

.line-draw__line {
  position: absolute;
  left: 72px;
  top: 95px;
  width: 140px;
  height: 1px;
  background: var(--graphite-900);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-5) var(--ease-diastole) 120ms;
}

.line-draw__label {
  position: absolute;
  left: 218px;
  top: 80px;
  padding: 8px 10px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
  font: 500 12px/1.3 'Geist Mono', monospace;
  opacity: 0;
  transition: opacity var(--dur-4) ease 700ms;
}

.line-draw.is-revealed .line-draw__node,
.line-draw.is-revealed .line-draw__label { opacity: 1; }
.line-draw.is-revealed .line-draw__line { transform: scaleX(1); }

/* ── 03 Masked headline ─────────────────────────────────────────────────── */

.masked-headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 28px;
  font: 500 40px/.98 'Geist', sans-serif;
  letter-spacing: -.04em;
}

.masked-headline__mask {
  display: block;
  overflow: hidden;
}
.masked-headline__mask--last { padding-bottom: 4px; }

.masked-headline__line {
  display: block;
  transform: translateY(105%);
  transition: transform var(--motion-headline) var(--ease-diastole);
}
.masked-headline__line--2 { transition-delay: 120ms; }
.masked-headline__line em { font: italic 400 1.1em 'Instrument Serif', serif; }

.masked-headline.is-revealed .masked-headline__line { transform: translateY(0); }

/* ── 04 Staggered fade-up ───────────────────────────────────────────────── */

.stagger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 24px;
  box-sizing: border-box;
}

.stagger__tile {
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  background: var(--graphite-0);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-5) var(--ease-diastole) calc(var(--i) * var(--motion-stagger)),
    transform var(--dur-5) var(--ease-diastole) calc(var(--i) * var(--motion-stagger));
}
.stagger.is-revealed .stagger__tile {
  opacity: 1;
  transform: translateY(0);
}

/* ── 05 Count-up ────────────────────────────────────────────────────────── */

.count-up {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.count-up__value {
  font: 500 64px/1 'Geist', sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.count-up__unit {
  font: 500 18px 'Geist Mono', monospace;
  color: var(--mist-400);
}

.count-up__label {
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--mist-400);
}

/* ── 06 Scroll-progress ring ────────────────────────────────────────────── */

.progress-ring {
  position: relative;
  width: 96px;
  height: 96px;
}

.progress-ring__svg { transform: rotate(-90deg); }

.progress-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 18px/1 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.progress-ring__range {
  width: 120px;
  accent-color: var(--graphite-900);
}

/* ── 07 Sticky exploded view (--progress 0…1 set by JS) ─────────────────── */

.exploded {
  --progress: 0;
  position: relative;
  overflow-y: auto;
}

.exploded__sticky {
  position: sticky;
  top: 0;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exploded__layer {
  position: absolute;
  height: 26px;
  border: 1px solid var(--graphite-900);
  border-radius: 6px;
  background: var(--graphite-0);
}
.exploded__layer--top    { width: 120px; transform: translateY(calc(var(--progress) * -60px)); }
.exploded__layer--middle { width: 100px; background: var(--scrub-50); transform: translateY(0); }
.exploded__layer--bottom { width: 80px;  transform: translateY(calc(var(--progress) * 60px)); }

.exploded__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.exploded__spacer { height: 440px; }

/* ── 08 Horizontal learning path ────────────────────────────────────────── */

.learning-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px;
  box-sizing: border-box;
}

.learning-track__step {
  flex: 0 0 150px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  background: var(--graphite-0);
}

.learning-track__num {
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.learning-track__name { font: 500 15px/1.25 'Geist', sans-serif; }

/* ── 09 FLIP filtering (--col / --row set by JS) ────────────────────────── */

.flip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
}

.flip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.flip__chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ink-a20);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 12px/1 'Geist', sans-serif;
  cursor: pointer;
}
.flip__chip[aria-pressed="true"] {
  border-color: var(--graphite-900);
  background: var(--graphite-900);
  color: var(--graphite-50);
}

.flip__grid {
  position: relative;
  flex: 1;
}

/* Opacity fade stays at a literal 320ms, as in the original demo */
.flip__item {
  --kind: var(--viz-1);
  --scale: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(33.33% - 6px);
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--ink-a14);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
  font: 500 12px/1.2 'Geist', sans-serif;
  transform: translate(calc(var(--col) * (100% + 9px)), calc(var(--row) * 66px)) scale(var(--scale));
  transition: transform var(--dur-4) var(--ease-diastole), opacity 320ms;
}
.flip__item::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--kind);
}
.flip__item--rct      { --kind: var(--viz-1); }
.flip__item--registry { --kind: var(--viz-2); }
.flip__item--econ     { --kind: var(--viz-4); }

.flip__item.is-hidden {
  --scale: .96;
  opacity: 0;
}

/* ── 06.3 Motion budget ─────────────────────────────────────────────────── */

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

.budget-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.budget-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.budget-card__title { font: 500 20px/1.2 'Geist', sans-serif; }

.budget-card__pages {
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.budget-card__text {
  font: 400 15px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* Three-bar intensity meter */
.intensity {
  display: flex;
  gap: 3px;
}

.intensity__bar {
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--graphite-900);
}
.intensity__bar--off { background: var(--graphite-200); }

/* Dark rules panel */
.motion-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--radius-l);
  background: var(--graphite-950);
  color: var(--graphite-mist);
  font: 400 14px/1.5 'Geist', sans-serif;
}

.motion-rules__label {
  display: block;
  margin-bottom: 8px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--scrub-300);
}