/* Motion enhances the existing composition; content never depends on it. */
body .hero-art { animation: light-awakens 1800ms cubic-bezier(.23,1,.32,1) both; }
@keyframes light-awakens {
  from { filter: brightness(.35) saturate(.65); opacity: .7; transform: scale(1.025); }
  to { filter: brightness(1) saturate(1); opacity: 1; transform: scale(1); }
}
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference) {
  body .hero-art { width:calc(100% + 28px); height:calc(100% + 28px); inset:-14px; translate:var(--scene-x,0px) var(--scene-y,0px); transition:translate 700ms cubic-bezier(.23,1,.32,1); }
}
body .preview img { transition:filter 260ms ease-out; }
body .pill { transition:background 180ms ease-out,transform 140ms ease-out; }
body .pill:active { transform:scale(.98); }
body .moods button { transition:border-color 180ms ease-out,background 180ms ease-out; }
body .moods button .swatch { transition:box-shadow 220ms ease-out; }
body .moods button[aria-pressed=true] .swatch { box-shadow:0 0 18px #ffb38930; }
@media (prefers-reduced-motion:reduce) {
  body .hero-art { animation:none!important; translate:none!important; transform:none!important; filter:none!important; }
  body .preview img,body .pill,body .moods button,body .moods button .swatch { transition:none!important; }
  body .pill:active { transform:none; }
}