/* The shared shell head owns early opt-in and reduced-motion opt-out.
   Native animation styling only: catalog and Swup keep their own lifecycle. */

html:has(body.reference-shell) { background-color: #f7f7f5; }
html:has(body.commerce-shell) { background-color: #fff; }

::view-transition-group(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-out;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-out;
}

/* Keep the browser's paired cross-fade; no layout morphing or navigation lock. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}