/* assembly.css — gear-construction entry animations
 *
 * Applied to .slide.light slides only. Dark slides keep their
 * existing heat-shimmer-compatible transitions; untouched here.
 *
 * Three motion modes, each reflecting Snow Peak gear being erected:
 *
 *   slot    translateX from left — pole threading through a sleeve
 *   unfold  scaleY from compressed — tent canopy releasing from its bag
 *   snap    translateX + spring easing — spring-loaded frame clicking open
 *
 * The structural strut lines (see initAssembly in deck.js) are an SVG
 * skeleton injected into each light slide — three lines radiating from
 * an anchor point like tent poles being raised, drawing themselves in
 * via stroke-dashoffset before the text content assembles.
 */

/* ── custom easings ──────────────────────────────────────────────────────
 *   gear:   crisp deceleration — pole reaching the end of its sleeve
 *   spring: slight overshoot then settle — spring latch clicking home
 *   unfold: smooth, fabric-weight release — canopy opening under tension
 */
:root {
  --ease-gear:   cubic-bezier(0.16, 1.0, 0.30, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-unfold: cubic-bezier(0.22, 1.0, 0.36, 1);
}

/* ══ STRUCTURAL STRUT LINES ════════════════════════════════════════════
 * SVG tent-pole geometry injected by deck.js into each .slide.light.
 * Three lines from a single anchor — like collapsed poles being raised.
 * Drawn via stroke-dashoffset transition; content assembles over the top.
 */
.assembly-struts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.assembly-struts .strut {
  stroke: var(--paper-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-linecap: round;
  /* dasharray longer than any line so we can animate the full draw */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 700ms var(--ease-gear);
}

/* draw each strut outward from the anchor — staggered like poles
   being slid into their sleeves one at a time */
.assembly-struts .strut--1 { transition-delay:   0ms; }
.assembly-struts .strut--2 { transition-delay:  80ms; }
.assembly-struts .strut--3 { transition-delay: 160ms; }

.slide.light.is-entered .assembly-struts .strut {
  stroke-dashoffset: 0;
}

/* ══ LIGHT SLIDE — BASE OVERRIDE ═══════════════════════════════════════
 * Replace the generic blur+float used on all slides with directional
 * structural motion: no blur (gear has sharp edges), horizontal slot.
 */
.slide.light .slide__inner > * {
  filter: none;
  transform: translateX(-16px);
  transition:
    opacity  560ms var(--ease-gear),
    transform 560ms var(--ease-gear);
}

.slide.light.is-entered .slide__inner > * {
  transform: translateX(0);
  filter: none;
}

/* ── kicker (mono eyebrow): fastest slot — thinnest pole, least mass ── */
.slide.light .slide__inner > .kicker,
.slide.light .slide__inner > * > .kicker,
.slide.light .slide__inner > * > * > .kicker {
  transform: translateX(-24px);
  transition:
    opacity  300ms var(--ease-gear),
    transform 300ms var(--ease-gear);
}
.slide.light.is-entered .slide__inner > .kicker,
.slide.light.is-entered .slide__inner > * > .kicker,
.slide.light.is-entered .slide__inner > * > * > .kicker {
  transform: translateX(0);
}

/* ── hero title / large headlines: unfold from compressed
   Canopy fabric releasing from a compressed fold — starts flat,
   opens with a slight vertical settle. ─────────────────────────────── */
.slide.light .hero-title,
.slide.light .slide-gap__headline {
  transform: scaleY(0.82) translateY(10px);
  transform-origin: top left;
  transition:
    opacity  720ms var(--ease-unfold),
    transform 720ms var(--ease-unfold);
}
.slide.light.is-entered .hero-title,
.slide.light.is-entered .slide-gap__headline {
  transform: scaleY(1) translateY(0);
}

/* ── standalone quote block (Tohru slide, etc.): panel unfold ─────── */
.slide.light .quote-block {
  transform: scaleY(0.06) translateY(-16px);
  transform-origin: top left;
  transition:
    opacity  660ms var(--ease-spring),
    transform 660ms var(--ease-spring);
}
.slide.light.is-entered .quote-block {
  transform: scaleY(1) translateY(0);
}

/* ── quote cards: each card unfolds independently
   Like folded tent panels being pressed flat one at a time. ────────── */
.slide.light .slide-stated__quotes > .quote-card {
  transform: scaleY(0.05) translateY(-12px);
  transform-origin: top;
  filter: none;
  transition:
    opacity  520ms var(--ease-spring),
    transform 520ms var(--ease-spring);
}
.slide.light.is-entered .slide-stated__quotes > .quote-card {
  transform: scaleY(1) translateY(0);
  filter: none;
}

/* ── brand-read blocks: same unfold treatment as quote cards ────────── */
.slide.light .brand-read-grid > .brand-read-block {
  transform: scaleY(0.05) translateY(-12px);
  transform-origin: top;
  filter: none;
  transition:
    opacity  520ms var(--ease-spring),
    transform 520ms var(--ease-spring);
}
.slide.light.is-entered .brand-read-grid > .brand-read-block {
  transform: scaleY(1) translateY(0);
  filter: none;
}

/* ── number band cells: horizontal slot instead of Y-float ─────────── */
.slide.light .number-band > .number-band__cell {
  transform: translateX(-14px);
  filter: none;
  transition:
    opacity  480ms var(--ease-gear),
    transform 480ms var(--ease-gear);
}
.slide.light.is-entered .number-band > .number-band__cell {
  transform: translateX(0);
  filter: none;
}

/* ── doctrine list items: sharp slot, remove blur ───────────────────── */
.slide.light .doctrine-list ul > li {
  transform: translateX(-16px);
  filter: none;
  transition:
    opacity  420ms var(--ease-gear),
    transform 420ms var(--ease-gear);
}
.slide.light.is-entered .doctrine-list ul > li {
  transform: translateX(0);
  filter: none;
}

/* ══ CONTAINER NEUTRALIZATION ══════════════════════════════════════════
 * These containers hold children we want to animate individually.
 * Set them instantly visible so child animations run in clean space.
 */
.slide.light .toc-acts,
.slide.light .gap-layout,
.slide.light .calendar-decision {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── toc-act headers (roman numeral + title): slot in as unit ────────── */
.toc-act__head {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity  420ms var(--ease-gear),
    transform 420ms var(--ease-gear);
}
.slide.is-entered .toc-act__head { opacity: 1; transform: translateX(0); }
.slide.is-entered .toc-acts .toc-act:nth-child(1) .toc-act__head { transition-delay: 220ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-act__head { transition-delay: 440ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(3) .toc-act__head { transition-delay: 860ms; }

/* ── toc rows: slot in like pole segments, sequentially ─────────────── */
.toc-row {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity  460ms var(--ease-gear),
    transform 460ms var(--ease-gear);
}
.slide.is-entered .toc-row { opacity: 1; transform: translateX(0); }

/* act I */
.slide.is-entered .toc-acts .toc-act:nth-child(1) .toc-list li:nth-child(1) { transition-delay: 320ms; }

/* act II — five entries */
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-list li:nth-child(1) { transition-delay: 540ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-list li:nth-child(2) { transition-delay: 620ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-list li:nth-child(3) { transition-delay: 700ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-list li:nth-child(4) { transition-delay: 780ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(2) .toc-list li:nth-child(5) { transition-delay: 860ms; }

/* act III */
.slide.is-entered .toc-acts .toc-act:nth-child(3) .toc-list li:nth-child(1) { transition-delay: 960ms; }
.slide.is-entered .toc-acts .toc-act:nth-child(3) .toc-list li:nth-child(2) { transition-delay: 1040ms; }

/* ══ GAP SLIDE: sequential step assembly ══════════════════════════════ */

/* header block: slot in as one unit */
.slide.light .gap-layout .slide-gap__head {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity  560ms var(--ease-gear),
    transform 560ms var(--ease-gear);
  transition-delay: 120ms;
}
.slide.light.is-entered .gap-layout .slide-gap__head {
  opacity: 1;
  transform: translateX(0);
}

/* process label: fast kicker slot */
.gap-process__label {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity  320ms var(--ease-gear),
    transform 320ms var(--ease-gear);
  transition-delay: 480ms;
}
.slide.is-entered .gap-process__label {
  opacity: 1;
  transform: translateX(0);
}

/* each gap step: stake driven into ground, left to right */
.gap-step {
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity  480ms var(--ease-gear),
    transform 480ms var(--ease-gear);
}
.slide.is-entered .gap-process .gap-step:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 580ms; }
.slide.is-entered .gap-process .gap-step:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 720ms; }
.slide.is-entered .gap-process .gap-step:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 860ms; }

/* ══ CALENDAR SLIDE: spring snap (folded chair opening) ═══════════════ */
.slide.light .slide-calendar__head {
  transform: translateX(-16px);
  transition:
    opacity  560ms var(--ease-gear),
    transform 560ms var(--ease-gear);
}
.slide.light.is-entered .slide-calendar__head {
  transform: translateX(0);
}

.calendar-now,
.calendar-next__item {
  opacity: 0;
  transform: translateX(-14px) scaleX(0.97);
  transform-origin: left center;
  transition:
    opacity  480ms var(--ease-spring),
    transform 480ms var(--ease-spring);
}
.slide.is-entered .calendar-now            { opacity: 1; transform: translateX(0) scaleX(1); transition-delay: 340ms; }
.slide.is-entered .calendar-next__item:nth-child(1) { opacity: 1; transform: translateX(0) scaleX(1); transition-delay: 480ms; }
.slide.is-entered .calendar-next__item:nth-child(2) { opacity: 1; transform: translateX(0) scaleX(1); transition-delay: 600ms; }
.slide.is-entered .calendar-next__item:nth-child(3) { opacity: 1; transform: translateX(0) scaleX(1); transition-delay: 720ms; }

/* ══ REDUCED MOTION — bypass all assembly animations ═════════════════ */
@media (prefers-reduced-motion: reduce) {
  .slide.light .slide__inner > *,
  .slide.light .hero-title,
  .slide.light .slide-gap__headline,
  .slide.light .quote-block,
  .slide.light .slide-stated__quotes > .quote-card,
  .slide.light .brand-read-grid > .brand-read-block,
  .slide.light .number-band > .number-band__cell,
  .slide.light .doctrine-list ul > li,
  .slide.light .gap-layout .slide-gap__head,
  .slide.light .slide-calendar__head,
  .toc-act__head,
  .toc-row,
  .gap-process__label,
  .gap-step,
  .calendar-now,
  .calendar-next__item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .assembly-struts .strut {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}