/* ============================================================
   42-hero-morph.css — cross-document hero photo morph

   When a visitor navigates from one page to another (e.g.
   Home → Granny Flats), View Transitions can morph shared
   elements rather than cross-fade them. We give each page's
   hero a stable `view-transition-name` so the photo morphs
   smoothly between pages.

   This builds on the cross-doc View Transitions already opted
   in via css/31-modern-platform.css (@view-transition).
   Browsers without support fall back to the cross-fade defined
   there.

   Each named element should appear on AT MOST ONE place on
   each page (per the View Transitions spec). The #hero
   element is unique per page, so giving it a single shared
   name lets the browser tween between them.
   ============================================================ */

#hero {
  view-transition-name: btb-hero;
}

/* The hero copy and CTAs get their own names so they can fade
   independently as the photo morphs */
#hero .hero-copy h1 {
  view-transition-name: btb-hero-headline;
}
#hero .hero-actions {
  view-transition-name: btb-hero-actions;
}

/* Customise the morph animation — slower than the default
   cross-fade so the photo crossover is satisfying, not jarring */
::view-transition-old(btb-hero),
::view-transition-new(btb-hero) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(btb-hero-headline),
::view-transition-new(btb-hero-headline) {
  animation-duration: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(btb-hero),
  ::view-transition-new(btb-hero),
  ::view-transition-old(btb-hero-headline),
  ::view-transition-new(btb-hero-headline),
  ::view-transition-old(btb-hero-actions),
  ::view-transition-new(btb-hero-actions) {
    animation: none;
  }
}