/* Deskrune v4c — Phase E: View Transitions kit-cover morph.
 *
 * Each kit cover image gets a `view-transition-name` keyed by its slug.
 * The same name is used on /buy/ kit-card covers AND on the corresponding
 * /buy/preview/{slug}/ sticky cover. Browsers that support the View
 * Transitions API auto-morph the cover element across the page transition.
 *
 * Browsers that don't (Firefox, older Safari) just navigate normally —
 * graceful fallback.
 *
 * Names are scoped on the .kit-cover-frame element. The /buy/ kit cards
 * also get the matching name via JS that runs once per page load
 * (see v4-page-transitions-v20260509c.js).
 */

/* Per-kit cover names. JS sets the inline style on /buy/ cards. */
:root.dr-v4 .kit-cover-frame[data-kit="ef-kit"]        { view-transition-name: dr-cover-ef-kit; }
:root.dr-v4 .kit-cover-frame[data-kit="self-healer"]   { view-transition-name: dr-cover-self-healer; }
:root.dr-v4 .kit-cover-frame[data-kit="job-search"]    { view-transition-name: dr-cover-job-search; }
:root.dr-v4 .kit-cover-frame[data-kit="finance"]       { view-transition-name: dr-cover-finance; }
:root.dr-v4 .kit-cover-frame[data-kit="mood-tracker"]  { view-transition-name: dr-cover-mood-tracker; }
:root.dr-v4 .kit-cover-frame[data-kit="starter-pair"]  { view-transition-name: dr-cover-starter-pair; }
:root.dr-v4 .kit-cover-frame[data-kit="full-stack"]    { view-transition-name: dr-cover-full-stack; }

/* Cover-morph timing — slightly longer so the journey is felt */
::view-transition-old(dr-cover-ef-kit),
::view-transition-new(dr-cover-ef-kit),
::view-transition-old(dr-cover-self-healer),
::view-transition-new(dr-cover-self-healer),
::view-transition-old(dr-cover-job-search),
::view-transition-new(dr-cover-job-search),
::view-transition-old(dr-cover-finance),
::view-transition-new(dr-cover-finance),
::view-transition-old(dr-cover-mood-tracker),
::view-transition-new(dr-cover-mood-tracker),
::view-transition-old(dr-cover-starter-pair),
::view-transition-new(dr-cover-starter-pair),
::view-transition-old(dr-cover-full-stack),
::view-transition-new(dr-cover-full-stack) {
  animation-duration: 380ms;
  animation-timing-function: var(--dr-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(dr-cover-ef-kit),
  ::view-transition-new(dr-cover-ef-kit) { animation-duration: 0.01ms !important; }
}