/* hero-motion.css: the hero's motion only (frame draw-in, reduced motion). Loaded after hero.css.
   One motion, once: when the hero is first in view, its tiles are drawn in by hand (mosaic.js builds the cover,
   hero.js asks for it on the first render). The copy, the cue and the pencil grid never move; at rest nothing
   animates. The owner's scroll light (hero.js) only moves while scrolling. */

/* The light layer repaints while scrolling: its own compositor layer, so the filtered tiles never re-raster. */
.hero-frame svg.mosaic-light { will-change: transform; }

/* Draw-in, as the reference stage's per-stroke draw: each band of a tile is uncovered left to right in 240ms,
   easeOutCubic. mosaic.js writes stroke-dasharray "34 34" on the cover and each band's start as an inline
   animation-delay (tile start 0-700ms + band offset 0-81ms), so the whole frame is drawn in about 1s. */
@keyframes tile-draw {
  from { stroke-dashoffset: 68px; }
  to   { stroke-dashoffset: 34px; }
}

.hero-frame svg.mosaic-cover path { animation: tile-draw 240ms cubic-bezier(.33, 1, .68, 1) both; }

/* Off-screen (hero.js: .hero.is-still) the draw waits, so it plays when the hero is first seen (leaving view
   mid-draw ends it: hero.js finishes the draw). */
.hero.is-still svg.mosaic-cover path { animation-play-state: paused; }

/* Reduced motion: the frame appears complete at once (hero.js never asks for a draw-in; this also ends one
   that is running if the setting changes). */
@media (prefers-reduced-motion: reduce) {
  .hero-frame svg.mosaic-cover { display: none; }
}