.product-image:hover img { transform: none; }
.product-image img { transition: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: bb-arrive 700ms cubic-bezier(.2, .65, .3, 1) backwards; }
  .hero-content > h1 { animation-delay: 0ms; }
  .hero-content > .eyebrow { animation-delay: 90ms; }
  .hero-content > .hero-line { animation-delay: 150ms; }
  .hero-content > .hero-description { animation-delay: 240ms; }
  .hero-content > .button { animation-delay: 330ms; }
  .hero-content > .button:focus-visible { animation: none; }
  .button, .icon-button, .bag-trigger { transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
  .button:not(:disabled):active, .icon-button:active, .bag-trigger:active { transform: scale(.98); }
  #bag-dialog[open] { animation: bb-bag-in 300ms cubic-bezier(.2, .65, .3, 1) both; }
  #bag-dialog[open]::backdrop { animation: bb-backdrop-in 220ms ease both; }
}

@keyframes bb-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bb-bag-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bb-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}