/*
  scenes.css -- GRID v1.1 scenes + gloss layer + two-voice spread
  Complements grid-motion.css; does not modify stica.css.
  All hide-states gated on .st-motion-ready.
  prefers-reduced-motion: final frames only, via CSS.
*/

/* ================================================================
   1. TWO-VOICE SPREAD LAYOUT
   7/12 machine column, 5/12 pen rail. Rail alternates left/right.
   ================================================================ */

.sv-spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 0 40px;
  align-items: start;
}
.sv-spread.sv-flip {
  grid-template-columns: 5fr 7fr;
}
.sv-spread.sv-flip .sv-machine { order: 2; }
.sv-spread.sv-flip .sv-rail    { order: 1; }

.sv-machine {
  max-width: 68ch; /* safety cap; 60-75ch readable range */
  min-width: 0;
}
.sv-rail {
  position: relative;
  min-height: 60px;
  padding-top: 4px;
}

/* Rail dashed separator (left-side rail gets right border, right-side gets left) */
.sv-spread:not(.sv-flip) .sv-rail {
  border-left: 1px dashed var(--line2);
  padding-left: 28px;
}
.sv-spread.sv-flip .sv-rail {
  border-right: 1px dashed var(--line2);
  padding-right: 28px;
  text-align: right;
}

/* Mobile: single column, rail becomes inline below machine */
@media (max-width: 719px) {
  .sv-spread,
  .sv-spread.sv-flip {
    grid-template-columns: 1fr;
  }
  .sv-spread.sv-flip .sv-machine { order: 1; }
  .sv-spread.sv-flip .sv-rail    { order: 2; }
  .sv-spread:not(.sv-flip) .sv-rail,
  .sv-spread.sv-flip .sv-rail {
    border-left: 0;
    border-right: 0;
    border-top: 1px dashed var(--line2);
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
    text-align: left;
  }
}


/* ================================================================
   2. GLOSS LAYER
   Dotted underline on machine terms; Kalam plain-words in rail.
   ================================================================ */

/* Machine-set term with dotted underline */
.sv-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--mut);
  text-underline-offset: 3px;
  cursor: default;
}

/* Gloss block in the rail */
.sv-gloss {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 24px;
}
.sv-gloss:last-child { margin-bottom: 0; }

/* SVG connector arrow */
.sv-gloss-arrow {
  display: block;
  overflow: visible;
  width: 40px;
  height: 32px;
  flex-shrink: 0;
}
.sv-gloss-arrow path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Animate arrow draw then words fade */
.sv-gloss-arrow path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}
.sv-gloss-words {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--acc);
  opacity: 1;
}

/* JS-animated states */
.st-motion-ready .sv-gloss-arrow path {
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.st-motion-ready .sv-gloss-words {
  opacity: 0;
  transition: opacity 280ms ease 480ms;
}
.st-motion-ready .sv-gloss.st-drawn .sv-gloss-arrow path {
  stroke-dashoffset: 0;
}
.st-motion-ready .sv-gloss.st-drawn .sv-gloss-words {
  opacity: 1;
}

/* Mobile gloss: inline beneath paragraph, arrow becomes tick */
@media (max-width: 719px) {
  .sv-gloss {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
  }
  .sv-gloss-arrow {
    width: 14px;
    height: 18px;
  }
  /* Replace arrow path with a simple tick on mobile via transform */
  .sv-gloss-tick {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--acc);
    line-height: 1;
  }
  .sv-gloss-words {
    font-size: 13px;
  }
}

/* Rail decorative flourish (grid marks) when no gloss present */
.sv-rail-mark {
  display: block;
}
.sv-rail-mark svg {
  overflow: visible;
}
.sv-rail-mark path, .sv-rail-mark line, .sv-rail-mark circle {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


/* ================================================================
   3. SCENE CONTAINERS (pinned scroll)
   ================================================================ */

/* Tall scroll container for pinned scenes */
.sv-scene-track {
  position: relative;
}
.sv-scene-track--b { height: 250vh; }
.sv-scene-track--c { height: 200vh; }
.sv-scene-track--d { height: 300vh; }

/* Pinned canvas */
.sv-scene-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* No-JS: collapse track to natural height, scene pin is normal in-flow block */
html:not(.st-motion-ready) .sv-scene-track,
html:not(.st-motion-ready) .sv-scene-pin {
  position: static;
  height: auto;
}

/* Reduced motion: same collapse, final frames only */
@media (prefers-reduced-motion: reduce) {
  .sv-scene-track { height: auto !important; }
  .sv-scene-pin   { position: static !important; height: auto !important; }
}

/* Mobile: collapse all pinned scenes */
@media (max-width: 719px) {
  .sv-scene-track { height: auto !important; }
  .sv-scene-pin   { position: static !important; height: auto !important; padding: 32px 0; }
}

/* Scene canvas sizing */
.sv-scene-canvas {
  width: 100%;
  max-width: 900px;
  position: relative;
}

/* Scene A (hero) -- not pinned, lives inside the banner rail */
.sv-scene-a-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 380px;
}
.sv-scene-a-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* SVG scene base styles */
.sv-scene-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Machine caption text inside scenes -- always visible, no JS needed */
.sv-scene-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  fill: var(--mut);
}
.sv-scene-axis-label {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--mut);
  letter-spacing: 0.3px;
}
.sv-scene-machine-text {
  font-family: var(--sans);
  font-size: 13px;
  fill: var(--ink);
}
.sv-scene-hand-note {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 16px;
  fill: var(--acc);
}

/* Pillar display type */
.sv-pillar-text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -2px;
  fill: var(--ink);
  transition: opacity 400ms ease, transform 400ms ease;
}
.sv-pillar-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  fill: var(--mut);
  text-transform: uppercase;
}

/* Scene B/C/D SVG stroke paths (animated via JS) */
.sv-path-draw {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sv-path-decay {
  stroke: var(--acc);
  stroke-width: 2.5;
}
.sv-path-bump {
  stroke: var(--ink2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.sv-path-lifted {
  stroke: var(--acc);
  stroke-width: 2.5;
}
.sv-path-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.sv-path-pen {
  stroke: var(--acc);
  stroke-width: 2;
}
.sv-path-circle {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sv-dot {
  fill: var(--acc);
}
.sv-dot-ink {
  fill: var(--ink);
}
.sv-dot-mut {
  fill: var(--mut);
}
.sv-block-machine {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.sv-block-acc {
  fill: var(--acc);
  opacity: 0.12;
}
.sv-block-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  fill: var(--mut);
}
.sv-tick-mark {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* PDF chip in scene C */
.sv-pdf-chip rect {
  fill: var(--surface);
  stroke: var(--acc);
  stroke-width: 1.5;
  rx: 4;
  vector-effect: non-scaling-stroke;
}
.sv-pdf-chip text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  fill: var(--acc);
}

/* Clock chip */
.sv-clock-text {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  fill: var(--ink);
  letter-spacing: -0.5px;
}

/* Scene D pillar overlay */
.sv-pillar-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 40px;
  box-sizing: border-box;
}
.sv-pillar-item {
  position: absolute;
  width: 100%;
  max-width: 700px;
  text-align: center;
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.sv-pillar-item.sv-active {
  opacity: 1;
  transform: scale(1);
}
.sv-pillar-item.sv-past {
  opacity: 0;
  transform: scale(0.94) translateY(-20px);
}
.sv-pillar-item.sv-future {
  opacity: 0;
  transform: scale(0.97) translateY(20px);
}
.sv-pillar-phrase {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 64px);
  letter-spacing: -2px;
  line-height: 1;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.sv-pillar-number {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mut);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sv-pillar-gloss {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 17px;
  color: var(--acc);
  margin-top: 14px;
  display: block;
  transition: opacity 300ms ease 200ms;
}
/* Scene B fade elements: hidden only when motion is active.
   No-JS and reduced-motion render them visible (complete final frame). */
.st-motion-ready .sv-b-fade {
  opacity: 0;
}
html:not(.st-motion-ready) .sv-b-fade {
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .sv-b-fade { opacity: 1 !important; }
}

/* Hide-state only when motion is active (no-JS keeps glosses visible) */
.st-motion-ready .sv-pillar-gloss {
  opacity: 0;
}
.st-motion-ready .sv-pillar-item.sv-active .sv-pillar-gloss,
html:not(.st-motion-ready) .sv-pillar-gloss {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sv-pillar-gloss { opacity: 1 !important; }
}
.sv-pillar-item.sv-active .sv-pillar-gloss {
  opacity: 1;
}

/* Ink sweep for pillar phrases (reuses st-sweep logic) */
.sv-pillar-sweep {
  display: inline;
  background-image: linear-gradient(var(--sweep-color, rgba(245,51,63,0.18)), var(--sweep-color, rgba(245,51,63,0.18)));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 55%;
  border-radius: 2px;
}
.sv-pillar-sweep.sv-swept {
  background-size: 100% 55%;
  transition: background-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced-motion: final states for all scene elements */
@media (prefers-reduced-motion: reduce) {
  .sv-gloss-arrow path { stroke-dashoffset: 0 !important; transition: none !important; }
  .sv-gloss-words      { opacity: 1 !important; transition: none !important; }
  .sv-pillar-phrase .sv-pillar-sweep { background-size: 100% 55% !important; transition: none !important; }
  .sv-pillar-item { transition: none !important; }
}

/* Night mode: scenes recolour via existing CSS variables -- no hardcoded colours */
/* All fills/strokes already use var(--acc), var(--ink), var(--mut), var(--line), etc. */
/* The body.dark override in stica.css swaps those variables; no extra rules needed. */


/* ================================================================
   3b. SCENE D v2 -- five customer-outcome statements
   Grid backdrop, progress indicator, glyph, keep-scrolling hint.
   ================================================================ */

/* Drifting grid backdrop layer inside the pin */
.sv-d-grid-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.sv-d-grid-backdrop svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Progress indicator: mono counter + dot row */
.sv-d-progress {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.sv-d-counter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mut);
}
.sv-d-dots {
  display: flex;
  gap: 6px;
}
.sv-d-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line2);
  transition: background 300ms ease;
}
.sv-d-dot.sv-d-dot-filled {
  background: var(--acc);
}

/* Keep-scrolling hint */
.sv-d-hint {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--mut);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms ease;
}
.sv-d-hint.sv-d-hint-gone {
  opacity: 0;
}

/* Statement item: each outcome statement with glyph */
.sv-d-item {
  position: absolute;
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 40px;
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-d-item.sv-active {
  opacity: 1;
  transform: translateY(0);
}
.sv-d-item.sv-past {
  opacity: 0;
  transform: translateY(-28px);
}
.sv-d-item.sv-future {
  opacity: 0;
  transform: translateY(28px);
}

/* Text column within the statement item */
.sv-d-text {
  flex: 1;
  min-width: 0;
}

/* Glyph column */
.sv-d-glyph {
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-d-glyph svg {
  overflow: visible;
}
.sv-d-glyph path,
.sv-d-glyph circle,
.sv-d-glyph line,
.sv-d-glyph polyline {
  fill: none;
  stroke: var(--acc);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Glyph draw animation via stroke-dashoffset (JS sets inline) */
.sv-d-glyph-path {
  fill: none;
  stroke: var(--acc);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* No-JS / reduced-motion: all glyph paths fully drawn */
html:not(.st-motion-ready) .sv-d-glyph-path,
html:not(.st-motion-ready) .sv-d-glyph path {
  stroke-dashoffset: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .sv-d-glyph-path, .sv-d-glyph path { stroke-dashoffset: 0 !important; }
}

/* Hide progress indicator on mobile / no-JS */
@media (max-width: 719px) {
  .sv-d-progress, .sv-d-hint { display: none; }
  .sv-d-grid-backdrop { display: none; }
}
html:not(.st-motion-ready) .sv-d-progress,
html:not(.st-motion-ready) .sv-d-hint { display: none; }

/* Reduced-motion: item transitions off */
@media (prefers-reduced-motion: reduce) {
  .sv-d-item { transition: none !important; }
  .sv-d-progress, .sv-d-hint { display: none; }
}


/* ================================================================
   3c. SCENE C v2 -- 48-hour plan assembly
   Grid backdrop, five phases, clock linear 0->48h.
   ================================================================ */

/* Grid backdrop (same pattern as D) */
.sv-c-grid-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.sv-c-grid-backdrop svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Keep-scrolling hint for scene C */
.sv-c-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--mut);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms ease;
}
.sv-c-hint.sv-c-hint-gone {
  opacity: 0;
}
@media (max-width: 719px) { .sv-c-hint { display: none; } }
html:not(.st-motion-ready) .sv-c-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .sv-c-hint { display: none; } }

/* Plan canvas wrapper */
.sv-c-canvas {
  position: relative;
  width: 75vw;
  max-width: 840px;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding: 28px 32px 36px;
  box-sizing: border-box;
}
@media (max-width: 719px) {
  .sv-c-canvas { width: 100%; padding: 20px 16px 24px; }
}

/* Canvas grid lines (subtle, always visible) */
.sv-c-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    var(--line) 23px,
    var(--line) 24px
  );
  opacity: 0.25;
  pointer-events: none;
}

/* Brief card -- phase 1 */
.sv-c-brief {
  background: var(--grid);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* Timeline row -- phase 2 */
.sv-c-timeline {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}
.sv-c-timeline-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 10px;
}
.sv-c-timeline-moves {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.sv-c-move {
  flex: 1;
  padding: 10px 10px 10px;
  border-right: 1px solid var(--line);
  position: relative;
}
.sv-c-move:last-child { border-right: 0; }
.sv-c-move-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--ink2);
  display: block;
  line-height: 1.3;
}
/* Connector stroke overlay SVG (positioned absolute over timeline moves) */
.sv-c-connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

/* Hand annotation chips -- phase 3 */
.sv-c-annotations {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sv-c-ann-chip {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 14px;
  color: var(--acc);
  background: transparent;
  border: 1.5px solid var(--acc);
  border-radius: 20px;
  padding: 5px 12px;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.sv-c-ann-chip:nth-child(2) { transform: rotate(1deg); }

/* Sample content chip -- phase 4 */
.sv-c-sample-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grid);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ink2);
  margin-bottom: 20px;
}
.sv-c-sample-chip span {
  color: var(--acc);
  font-weight: 700;
}

/* Clock + PDF row -- phase 5 */
.sv-c-footer-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sv-c-clock-chip {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
  letter-spacing: 0.5px;
}
.sv-c-clock-val {
  font-weight: 700;
  color: var(--ink);
}
.sv-c-pdf-chip {
  background: var(--surface);
  border: 1.5px solid var(--acc);
  border-radius: 5px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--acc);
  letter-spacing: 0.5px;
}

/* JS-animated hide states for scene C v2 phases */
.st-motion-ready .sv-c-brief,
.st-motion-ready .sv-c-timeline,
.st-motion-ready .sv-c-annotations,
.st-motion-ready .sv-c-sample-chip,
.st-motion-ready .sv-c-footer-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* No-JS / reduced-motion: all visible */
html:not(.st-motion-ready) .sv-c-brief,
html:not(.st-motion-ready) .sv-c-timeline,
html:not(.st-motion-ready) .sv-c-annotations,
html:not(.st-motion-ready) .sv-c-sample-chip,
html:not(.st-motion-ready) .sv-c-footer-row {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .sv-c-brief, .sv-c-timeline, .sv-c-annotations,
  .sv-c-sample-chip, .sv-c-footer-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Move connector paths: drawn by JS */
.sv-c-conn-path {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
html:not(.st-motion-ready) .sv-c-conn-path { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) { .sv-c-conn-path { stroke-dashoffset: 0 !important; } }


/* ================================================================
   4. SCENE A -- opening banner figure canvas (rail, not pinned)
   ================================================================ */
.sv-scene-a {
  background: var(--grid);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

/* Scene A data dot initial hidden state */
.st-motion-ready .sv-dot-data {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.st-motion-ready .sv-dot-data.sv-settled {
  opacity: 1;
  transform: translateY(0);
}

/* Scene A pen path -- scrubbed by scroll; no dashoffset transition (JS sets inline) */
#sv-a-path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Final state (no-JS / reduced-motion): path fully drawn */
html:not(.st-motion-ready) #sv-a-path {
  stroke-dashoffset: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  #sv-a-path { stroke-dashoffset: 0 !important; }
}

/* Scene A circle annotation */
#sv-a-circle {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 80;
  stroke-dashoffset: 0;
}
.st-motion-ready #sv-a-circle {
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}
.st-motion-ready #sv-a-circle.sv-drawn {
  stroke-dashoffset: 0;
}

/* Scene A hand note (SVG text element uses fill not color; opacity animates) */
#sv-a-note {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 14px;
  fill: var(--acc);
  opacity: 1;
}
.st-motion-ready #sv-a-note {
  opacity: 0;
  transition: opacity 250ms ease 900ms;
}
.st-motion-ready #sv-a-note.sv-drawn {
  opacity: 1;
}
/* Reduced motion: no JS will add sv-drawn, so force visible */
@media (prefers-reduced-motion: reduce) {
  #sv-a-note { opacity: 1 !important; }
  #sv-a-circle { stroke-dashoffset: 0 !important; transition: none !important; }
}


/* ================================================================
   5. SECTION-LEVEL LAYOUT HELPERS
   ================================================================ */

/* Problem section: left-rail variant */
.sv-problem-spread .sv-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

/* How-it-works compressed spread */
.sv-steps-spread .sv-machine {
  max-width: 60ch;
}


/* ================================================================
   6. MOBILE SCENE FALLBACKS (B, C, D non-pinned frames)
   ================================================================ */
@media (max-width: 719px) {
  /* Scene B: three stacked IO-triggered frames */
  .sv-b-frame {
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease;
  }
  .sv-b-frame.sv-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Scene C: vertical step list with IO-triggered draws */
  .sv-c-step {
    padding: 16px 0;
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 380ms ease, transform 380ms ease;
  }
  .sv-c-step.sv-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Scene D: standard stacked with IO-triggered sweeps */
  .sv-d-pillar {
    padding: 32px 0;
    border-top: 1px solid var(--line);
  }
  .sv-d-pillar:first-child { border-top: 0; }
}

/* Reduced motion overrides for mobile frames */
@media (prefers-reduced-motion: reduce) {
  .sv-b-frame, .sv-c-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ================================================================
   7. POPOVER COMPONENT
   GRID-styled: paper tile, grid edge, slight tilt.
   Trigger: dotted-underlined term (sv-pop-trigger).
   Open on hover (desktop) / tap (touch); close on mouseleave / tap-out / Esc.
   No-JS: popover content is visually hidden but accessible; also rendered
   as visible fallback under html:not(.st-motion-ready).
   ================================================================ */

/* Trigger (machine-set term with dotted underline + focusable) */
.sv-pop-trigger {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--mut);
  text-underline-offset: 3px;
  cursor: default;
  position: relative;
  display: inline;
}

/* Wrapper that holds trigger + popover together */
.sv-pop-wrap {
  position: relative;
  display: inline;
}

/* The popover card */
.sv-popover {
  position: absolute;
  z-index: 200;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--acc);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  /* Grid-edge accent: faint grid lines in background */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    var(--line) 19px,
    var(--line) 20px
  );
}

/* Popover title (machine voice) */
.sv-popover-term {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc);
  display: block;
  margin-bottom: 6px;
}

/* Popover body (plain words, Kalam hand, translation, never new facts) */
.sv-popover-body {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}

/* Open state */
.sv-pop-wrap:hover .sv-popover,
.sv-pop-wrap.sv-pop-open .sv-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) rotate(-1.5deg);
}

/* No-JS: render content visible as fallback (static inline below trigger) */
html:not(.st-motion-ready) .sv-popover {
  position: static;
  display: inline-block;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  margin-left: 8px;
  width: auto;
  max-width: 220px;
  vertical-align: middle;
  font-size: 13px;
}

/* Screen-reader accessible even when visually hidden */
.sv-pop-trigger[aria-expanded="false"] + .sv-popover {
  /* JS manages aria-expanded; fallback keeps content in DOM */
}

/* Reduced motion: remove transition */
@media (prefers-reduced-motion: reduce) {
  .sv-popover { transition: none !important; }
}

/* Mobile: popover appears below and resets tilt for readability */
@media (max-width: 719px) {
  .sv-popover {
    left: 0;
    transform: translateX(0) rotate(0deg);
    width: 200px;
  }
  .sv-pop-wrap:hover .sv-popover,
  .sv-pop-wrap.sv-pop-open .sv-popover {
    transform: translateX(0) rotate(0deg);
  }
}


/* ================================================================
   8. PRODUCT PAGE: stacked paper sheets mock-up
   ================================================================ */

/* Sheet stack promo (home page rail) */
.sv-sheets-promo {
  position: relative;
  width: 200px;
  height: 160px;
  cursor: pointer;
}
.sv-sheets-promo .sv-sheet {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  width: 180px;
  height: 130px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.08);
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1);
}
/* Staggered tilt for each sheet */
.sv-sheets-promo .sv-sheet:nth-child(1) { transform: rotate(-3deg) translateY(10px);  z-index:1; }
.sv-sheets-promo .sv-sheet:nth-child(2) { transform: rotate(-1deg) translateY(5px);   z-index:2; }
.sv-sheets-promo .sv-sheet:nth-child(3) { transform: rotate(1deg)  translateY(0px);   z-index:3; }
/* Hover / focus: fan the sheets */
.sv-sheets-promo:hover .sv-sheet:nth-child(1),
.sv-sheets-promo:focus-within .sv-sheet:nth-child(1) { transform: rotate(-9deg) translateY(16px) translateX(-10px); }
.sv-sheets-promo:hover .sv-sheet:nth-child(2),
.sv-sheets-promo:focus-within .sv-sheet:nth-child(2) { transform: rotate(-2deg) translateY(6px)  translateX(0px); }
.sv-sheets-promo:hover .sv-sheet:nth-child(3),
.sv-sheets-promo:focus-within .sv-sheet:nth-child(3) { transform: rotate(6deg)  translateY(0px)  translateX(12px); }
/* Reduced motion: no fan */
@media (prefers-reduced-motion: reduce) {
  .sv-sheets-promo .sv-sheet { transition: none !important; }
}

/* Product page: full paper-sheet mock-ups */
.sv-paper-sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 28px 30px 24px;
  position: relative;
  box-shadow: 2px 4px 14px rgba(0,0,0,0.08);
  margin-bottom: 32px;
  overflow: hidden;
}
/* Torn-edge effect at top: irregular SVG mask via CSS clip-path */
.sv-paper-sheet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 95% 100%, 88% 40%, 81% 80%, 72% 30%, 65% 90%, 56% 20%, 48% 80%, 40% 30%, 32% 70%, 24% 20%, 16% 60%, 8% 10%, 0 50%);
}
/* Subtle grid lines on sheet */
.sv-paper-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 23px,
    var(--line) 23px,
    var(--line) 24px
  );
  opacity: 0.3;
  pointer-events: none;
}
.sv-paper-sheet-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}
.sv-paper-sheet-content {
  position: relative;
  z-index: 1;
}
/* Hand annotation on product sheet */
.sv-sheet-ann {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 15px;
  color: var(--acc);
  margin-top: 14px;
  display: block;
}
/* Highlighted quote passage */
.sv-highlight {
  background: linear-gradient(var(--sweep-color, rgba(245,51,63,0.15)), var(--sweep-color, rgba(245,51,63,0.15)));
  background-position: left center;
  background-size: 100% 55%;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding-bottom: 1px;
}
/* Follow-through strip */
.sv-ft-strip {
  display: flex;
  gap: 0;
  border: 1px dashed var(--acc);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}
.sv-ft-day {
  flex: 1;
  padding: 12px 14px;
  border-right: 1px dashed var(--acc);
  position: relative;
  z-index: 1;
}
.sv-ft-day:last-child { border-right: 0; }
.sv-ft-day-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc);
  display: block;
  margin-bottom: 6px;
}
/* Design block teaser (source tile) */
.sv-design-block {
  background: var(--surface);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--acc);
  border-radius: 4px;
  padding: 16px 18px;
  position: relative;
  z-index: 1;
}
.sv-design-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink2);
  margin-bottom: 8px;
  display: block;
}
.sv-design-tick::before {
  content: '✓';
  color: var(--acc);
  font-size: 13px;
  margin-right: 6px;
}
@media (max-width: 719px) {
  .sv-sheets-promo { width: 160px; height: 130px; }
  .sv-sheets-promo .sv-sheet { width: 150px; height: 110px; }
  .sv-ft-strip { flex-direction: column; }
  .sv-ft-day { border-right: 0; border-bottom: 1px dashed var(--acc); }
  .sv-ft-day:last-child { border-bottom: 0; }
}