/* D12. Initial states exist only after the early JS/reduced-motion check. */
html.motion-ok [data-motion-fade]:not([data-motion-seen]) {
  opacity: 0;
  transform: translateY(8px);
}
html.motion-ok svg[data-motion-pending] [data-w]:not([data-red]) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.motion-ok svg[data-motion-pending] [data-hatch] { fill: none; }
html.motion-ok svg[data-motion-pending] text,
html.motion-ok svg[data-motion-pending] [data-red] { opacity: 0; }
/* Definitions must remain intact. Their painted instances reveal separately. */
html.motion-ok svg[data-motion-pending] defs [data-w] {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* F4: visuals.css owns the cover crop for both the image and the inline SVG. */

/* D09 uses hidden, dialog[open], and aria-expanded (no data attributes).
   JS bridges hidden's immediate display:none for the 100ms mega exit.
   Board equivalents: .panel, .phone, .m-g.open, and .m-col. */
html.motion-ok :is(.agai-nav-panel, .panel) {
  --motion-menu-in: 140ms;
  --motion-menu-out: 100ms;
  --motion-menu-slide: -6px;
}
html.motion-ok .agai-mobile-menu { --motion-menu-in: 160ms; }
html.motion-ok .agai-mobile-group > div,
html.motion-ok .m-g > .m-col { --motion-accordion: 180ms; transform-origin: top; }

/* A fixed 28px box grows optically from 16px. Only transform animates. */
.stage-index a, .cards a { transition: transform 150ms ease-out; }
.stage-index a::after,
.cards a::before {
  width: 28px;
  transform: scaleX(.5714285714);
  transform-origin: right;
  transition: transform 150ms ease-out;
}
.cards a::before { transform-origin: left; }
.stage-index a:is(:hover, :focus-visible)::after,
.cards a:is(:hover, :focus-visible)::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.motion-ok [data-motion-fade]:not([data-motion-seen]) { opacity: 1; transform: none; }
  html.motion-ok svg[data-motion-pending] [data-w] { stroke-dasharray: revert; stroke-dashoffset: revert; }
  html.motion-ok svg[data-motion-pending] [data-hatch] { fill: revert; }
  html.motion-ok svg[data-motion-pending] text,
  html.motion-ok svg[data-motion-pending] [data-red] { opacity: revert; }
  .stage-index a, .cards a, .stage-index a::after, .cards a::before { transition: none; }
  .stage-index a:hover, .cards a:hover { transform: none; }
}