/* One gentle 4.8-second movement, then the drawing remains still.
   JavaScript opts in only the inner SVG details; copy and containers never move. */
[data-illustrated-hero] [data-banner-art] :is(.craft-leaf,.art-leaf,.craft-steam,.art-steam,.art-glint,.craft-product){animation:none}

[data-illustrated-hero]:is([data-banner-motion="running"],[data-banner-motion="paused"]) [data-banner-art] :is(.craft-leaf,.art-leaf){
  transform-box:fill-box;
  transform-origin:bottom center;
  animation:banner-leaf-settle 4.8s ease-in-out 1 both;
  animation-play-state:paused;
}
[data-illustrated-hero]:is([data-banner-motion="running"],[data-banner-motion="paused"]) [data-banner-art] :is(.craft-steam,.art-steam){
  animation:banner-steam-settle 4.8s ease-in-out 1 both;
  animation-play-state:paused;
}
[data-illustrated-hero]:is([data-banner-motion="running"],[data-banner-motion="paused"]) [data-banner-art] .art-glint{
  animation:banner-glint-settle 4.8s ease-in-out 1 both;
  animation-play-state:paused;
}
[data-illustrated-hero][data-banner-motion="running"] [data-banner-art] :is(.craft-leaf,.art-leaf,.craft-steam,.art-steam,.art-glint){animation-play-state:running}

@keyframes banner-leaf-settle{
  0%,100%{transform:rotate(0deg)}
  30%{transform:rotate(1.1deg)}
  70%{transform:rotate(-.6deg)}
}
@keyframes banner-steam-settle{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(-5px);opacity:.6}
}
@keyframes banner-glint-settle{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

@media(prefers-reduced-motion:reduce){
  [data-illustrated-hero]:is([data-banner-motion="running"],[data-banner-motion="paused"]) [data-banner-art] :is(.craft-leaf,.art-leaf,.craft-steam,.art-steam,.art-glint){animation:none}
}