/* Final refinement layer (2026-10-17). Loaded last; each rule answers a defect observed in rendered review. */

/* 1 · First impression: the SVG knot holds the hero window until WebGL draws its first frame, then hands over. */
.has-motion .thread-static { display: block; opacity: 1; transition: opacity var(--beat) var(--ease); pointer-events: none; }
.has-motion.gl-ready .thread-static { opacity: 0; }

/* 2 · The category scene on phones: one workflow step at a time and the diagram gets the reclaimed space. */
@media (max-width: 960px) {
  .has-motion .scene-scope .scene-head .body { display: none; }
  .has-motion .scene-scope .scope-system-key { grid-template-columns: minmax(0, 1fr); }
  .has-motion .scene-scope .scope-system-key > span { display: none; }
  .has-motion .scene-scope[data-workflow-step="1"] .scope-system-key > span:nth-child(1),
  .has-motion .scene-scope[data-workflow-step="2"] .scope-system-key > span:nth-child(2),
  .has-motion .scene-scope[data-workflow-step="3"] .scope-system-key > span:nth-child(3) { display: block; }
  .has-motion .scene-scope[data-workflow-step="all"] .scope-system-key { display: none; }
  .has-motion .scene-scope .scope-art { height: 60svh; min-height: 0; }
  .has-motion .scene-scope .scope-art figcaption { display: none; }
}

/* 3 · Asymmetry: cards in transit stay narrow enough on phones that neighbouring gates never overlap. */
@media (max-width: 600px) {
  .has-motion .asym-slips li:not(.is-routed) { max-width: 27%; font-size: 12px; padding: 6px 8px; line-height: 1.25; }
}

/* 4 · Asymmetry on phones: once routed, show only the three explained examples (the decks clipped at the edge),
   and give the three lanes enough height that an example card never presses into the next lane's label. */
@media (max-width: 600px) {
  .has-motion .scene-asym .asym-art { height: 62svh; }
  .has-motion .asym-slips li.is-routed:not([data-route-example]) { opacity: 0 !important; }
}

/* Reduced motion: the knot hands over to WebGL instantly rather than crossfading. */
@media (prefers-reduced-motion: reduce) {
  .has-motion .thread-static { transition: none; }
}