/* ─────────────────────────────────────────────────────────────
   Motion extras — custom storytelling moments per page
   Layered on top of the generic [data-reveal] system.
   ───────────────────────────────────────────────────────────── */

/* ───────── Page 05 — Logo: hero lockup zooms in ───────── */
.logo-hero[data-reveal] img {
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1000ms ease;
  transform: scale(0.92);
  opacity: 0.8;
}
.logo-hero[data-reveal].is-revealed img {
  transform: scale(1);
  opacity: 1;
}

/* Meaning-card glyphs animate the orbital paths on reveal */
.meaning-card[data-reveal] .glyph svg ellipse {
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.meaning-card[data-reveal].is-revealed .glyph svg ellipse {
  stroke-dashoffset: 0;
}
.meaning-card[data-reveal] .glyph svg ellipse:nth-of-type(2) {
  transition-delay: 480ms;
}
.meaning-card[data-reveal] .glyph svg circle {
  transition: opacity 600ms ease 900ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 900ms;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transform-box: fill-box;
}
.meaning-card[data-reveal].is-revealed .glyph svg circle {
  opacity: 1;
  transform: scale(1);
}

/* ───────── Page 06 — Color: primitives drop in ───────── */
.primitive[data-reveal] .chip {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
  transform: scale(0.92) translateY(-6px);
  opacity: 0;
}
.primitive[data-reveal].is-revealed .chip {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.primitive-row > .primitive[data-reveal]:nth-child(1) .chip { transition-delay: 100ms; }
.primitive-row > .primitive[data-reveal]:nth-child(2) .chip { transition-delay: 220ms; }
.primitive-row > .primitive[data-reveal]:nth-child(3) .chip { transition-delay: 340ms; }
.primitive-row > .primitive[data-reveal]:nth-child(4) .chip { transition-delay: 460ms; }
.primitive-row > .primitive[data-reveal]:nth-child(5) .chip { transition-delay: 580ms; }

/* Scale strips fill in horizontally on reveal */
.scale-strip[data-reveal] .bar {
  position: relative;
  overflow: hidden;
}
.scale-strip[data-reveal] .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-canvas);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
  pointer-events: none;
}
.scale-strip[data-reveal].is-revealed .bar::after {
  transform: scaleX(0);
}

/* Proportion-card bars fill from left */
.proportion-card[data-reveal] .bar .seg {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.proportion-card[data-reveal].is-revealed .bar .seg {
  transform: scaleX(1);
}
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(1) { transition-delay: 100ms; }
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(2) { transition-delay: 240ms; }
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(3) { transition-delay: 380ms; }
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(4) { transition-delay: 520ms; }
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(5) { transition-delay: 660ms; }
.proportion-card[data-reveal].is-revealed .bar .seg:nth-child(6) { transition-delay: 800ms; }

/* Semantic swatches stagger in */
.semantic-card[data-reveal] .swatches .s {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.semantic-card[data-reveal].is-revealed .swatches .s { transform: scaleY(1); }
.semantic-card[data-reveal].is-revealed .swatches .s:nth-child(1) { transition-delay: 100ms; }
.semantic-card[data-reveal].is-revealed .swatches .s:nth-child(2) { transition-delay: 220ms; }
.semantic-card[data-reveal].is-revealed .swatches .s:nth-child(3) { transition-delay: 340ms; }
.semantic-card[data-reveal].is-revealed .swatches .s:nth-child(4) { transition-delay: 460ms; }

/* ───────── Page 07 — Typography: glyphs scale in ───────── */
.family-card[data-reveal] .glyph-large {
  transform: scale(0.86);
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, opacity 800ms ease 200ms;
  display: block;
}
.family-card[data-reveal].is-revealed .glyph-large {
  transform: scale(1);
  opacity: 1;
}
.family-card[data-reveal] .alphabet {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease 700ms, transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
}
.family-card[data-reveal].is-revealed .alphabet {
  opacity: 1;
  transform: translateY(0);
}

/* Scale-ladder step specimens slide in from left */
.scale-ladder .step[data-reveal] .specimen {
  transform: translateX(-12px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
}
.scale-ladder .step[data-reveal].is-revealed .specimen {
  transform: translateX(0);
  opacity: 1;
}

/* Weight specimens — gentle scale */
.weight-card[data-reveal] .glyph {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(0.88);
}
.weight-card[data-reveal].is-revealed .glyph {
  transform: scale(1);
}

/* Pair-card lead text fades up */
.pair-card[data-reveal] .lead {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms ease 300ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}
.pair-card[data-reveal].is-revealed .lead {
  opacity: 1;
  transform: translateY(0);
}
.pair-card[data-reveal] .body {
  opacity: 0;
  transition: opacity 700ms ease 600ms;
}
.pair-card[data-reveal].is-revealed .body { opacity: 1; }
.pair-card[data-reveal] .annotation {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 600ms ease 900ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 900ms;
}
.pair-card[data-reveal].is-revealed .annotation {
  opacity: 1;
  transform: translateX(0);
}

/* ───────── Page 08 — Imagery: cosmic-slate orbits spin in ───────── */
.cosmic-slate[data-reveal] svg.scene {
  opacity: 0;
  transform: scale(0.92) rotate(-2deg);
  transition: opacity 1200ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cosmic-slate[data-reveal].is-revealed svg.scene {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Structural diagrams: lines draw in */
.structural-slate[data-reveal] .stage svg path,
.structural-slate[data-reveal] .stage svg line,
.structural-slate[data-reveal] .stage svg rect {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 1, 0.36, 1) 300ms, fill 800ms ease 1400ms;
}
.structural-slate[data-reveal].is-revealed .stage svg path,
.structural-slate[data-reveal].is-revealed .stage svg line,
.structural-slate[data-reveal].is-revealed .stage svg rect {
  stroke-dashoffset: 0;
}
.structural-slate[data-reveal] .stage svg circle,
.structural-slate[data-reveal] .stage svg text {
  opacity: 0;
  transition: opacity 600ms ease 1600ms;
}
.structural-slate[data-reveal].is-revealed .stage svg circle,
.structural-slate[data-reveal].is-revealed .stage svg text {
  opacity: 1;
}

/* Icon-cell — slight scale-in stagger */
.icon-cell[data-reveal] .glyph {
  transform: scale(0.85);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.icon-cell[data-reveal].is-revealed .glyph { transform: scale(1); }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(1)  .glyph { transition-delay: 30ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(2)  .glyph { transition-delay: 80ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(3)  .glyph { transition-delay: 130ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(4)  .glyph { transition-delay: 180ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(5)  .glyph { transition-delay: 230ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(6)  .glyph { transition-delay: 280ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(7)  .glyph { transition-delay: 330ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(8)  .glyph { transition-delay: 380ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(9)  .glyph { transition-delay: 70ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(10) .glyph { transition-delay: 120ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(11) .glyph { transition-delay: 170ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(12) .glyph { transition-delay: 220ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(13) .glyph { transition-delay: 270ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(14) .glyph { transition-delay: 320ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(15) .glyph { transition-delay: 370ms; }
.icon-section .grid > .icon-cell[data-reveal]:nth-child(16) .glyph { transition-delay: 420ms; }

/* ───────── Page 03 — Two registers: comparison rows ───────── */
.compare-row[data-reveal] .compare-cell {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease;
  transform: translateY(12px);
  opacity: 0;
}
.compare-row[data-reveal].is-revealed .compare-cell.daylight {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 100ms;
}
.compare-row[data-reveal].is-revealed .compare-cell.nightfall {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 280ms;
}

.register-feature[data-reveal] .demo-vitals,
.register-feature[data-reveal] .demo-marketing {
  transform: scale(0.97);
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, opacity 800ms ease 200ms;
}
.register-feature[data-reveal].is-revealed .demo-vitals,
.register-feature[data-reveal].is-revealed .demo-marketing {
  transform: scale(1);
  opacity: 1;
}

/* ───────── Page 11 — Architecture: primitive cards slide-glyph ───────── */
.primitive-card[data-reveal] .glyph {
  transform: scale(0.6) rotate(-12deg);
  opacity: 0;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms, opacity 600ms ease 200ms;
}
.primitive-card[data-reveal].is-revealed .glyph {
  transform: scale(1) rotate(0);
  opacity: 1;
}

/* Domain-card icons scale */
.domain-card[data-reveal] .ico {
  transform: scale(0.7);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 100ms, opacity 600ms ease 100ms;
}
.domain-card[data-reveal].is-revealed .ico {
  transform: scale(1);
  opacity: 1;
}

/* ───────── Page 12 — Components: buttons fade in stagger ───────── */
.comp-frame[data-reveal] .stage .cb,
.comp-frame[data-reveal] .stage .chip-c,
.comp-frame[data-reveal] .stage .cp {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comp-frame[data-reveal].is-revealed .stage .cb,
.comp-frame[data-reveal].is-revealed .stage .chip-c,
.comp-frame[data-reveal].is-revealed .stage .cp {
  opacity: 1;
  transform: translateY(0);
}
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(1) { transition-delay: 80ms; }
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(2) { transition-delay: 160ms; }
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(3) { transition-delay: 240ms; }
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(4) { transition-delay: 320ms; }
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(5) { transition-delay: 400ms; }
.comp-frame[data-reveal].is-revealed .stage > *:nth-child(6) { transition-delay: 480ms; }

/* Don't-card slash bar animates in */
.dont[data-reveal] .stage::after,
.color-dont[data-reveal] .demo::after,
.type-dont[data-reveal] .demo::after,
.img-dont[data-reveal] .demo::after,
.icon-dont[data-reveal] .stage::after,
.layout-dont[data-reveal] .stage::after,
.viz-dont[data-reveal] .stage::after,
.motion-dont[data-reveal] .stage::after {
  transform: rotate(-10deg) scaleX(0);
  transform-origin: center;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}
.dont[data-reveal].is-revealed .stage::after,
.color-dont[data-reveal].is-revealed .demo::after,
.type-dont[data-reveal].is-revealed .demo::after,
.img-dont[data-reveal].is-revealed .demo::after,
.icon-dont[data-reveal].is-revealed .stage::after,
.layout-dont[data-reveal].is-revealed .stage::after,
.viz-dont[data-reveal].is-revealed .stage::after,
.motion-dont[data-reveal].is-revealed .stage::after {
  transform: rotate(-10deg) scaleX(1);
}

/* Reduced motion: instant resolution */
@media (prefers-reduced-motion: reduce) {
  .logo-hero[data-reveal] img,
  .meaning-card[data-reveal] .glyph svg ellipse,
  .meaning-card[data-reveal] .glyph svg circle,
  .primitive[data-reveal] .chip,
  .scale-strip[data-reveal] .bar::after,
  .proportion-card[data-reveal] .bar .seg,
  .semantic-card[data-reveal] .swatches .s,
  .family-card[data-reveal] .glyph-large,
  .family-card[data-reveal] .alphabet,
  .scale-ladder .step[data-reveal] .specimen,
  .weight-card[data-reveal] .glyph,
  .pair-card[data-reveal] .lead,
  .pair-card[data-reveal] .body,
  .pair-card[data-reveal] .annotation,
  .cosmic-slate[data-reveal] svg.scene,
  .structural-slate[data-reveal] .stage svg path,
  .icon-cell[data-reveal] .glyph,
  .compare-row[data-reveal] .compare-cell,
  .register-feature[data-reveal] .demo-vitals,
  .register-feature[data-reveal] .demo-marketing,
  .primitive-card[data-reveal] .glyph,
  .domain-card[data-reveal] .ico,
  .comp-frame[data-reveal] .stage > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .scale-strip[data-reveal] .bar::after { content: none !important; }
  .dont[data-reveal] .stage::after,
  .color-dont[data-reveal] .demo::after,
  .type-dont[data-reveal] .demo::after,
  .img-dont[data-reveal] .demo::after,
  .icon-dont[data-reveal] .stage::after,
  .layout-dont[data-reveal] .stage::after,
  .viz-dont[data-reveal] .stage::after,
  .motion-dont[data-reveal] .stage::after {
    transform: rotate(-10deg) scaleX(1) !important;
    transition: none !important;
  }
}