/* ============================================================
   ENGINE-TO-PAGE TRANSITION  (slow, simple, seamless)
   Cross-document View Transitions: the clicked engine image
   smoothly expands into the same image on its detail page, and
   on Back it settles right back into the card it came from.
   Minimal motion — just a slow, clean morph + calm cross-fade.
   Unsupported browsers navigate normally (progressive fallback).
   ============================================================ */

/* Opt in to cross-document (MPA) view transitions on both pages. */
@view-transition{ navigation: auto; }

/* The shared engine image (listing card <-> detail hero) carries this name,
   applied via JS to just the relevant image, so exactly one product morphs.
   The browser handles the size/position morph; we only set the pace. */
::view-transition-group(engine-hero){
  animation-duration: 1.35s;
  animation-timing-function: cubic-bezier(.62,0,.2,1);
}
/* Clean cross-fade of the image content while it morphs — no scale/blur,
   so the same engine simply grows into (and back out of) the page. */
::view-transition-old(engine-hero),
::view-transition-new(engine-hero){
  height: 100%;
  object-fit: contain;
  animation-duration: 1.35s;
  animation-timing-function: cubic-bezier(.62,0,.2,1);
}

/* Everything else (backgrounds, text, chrome) gets a calm, even cross-fade. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}

/* Accessibility & performance: reduced-motion gets an instant cut. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation: none !important;
  }
}