/* =============================================================================
   Marketing page-to-page cross-fade — Dental Acquisitions
   -----------------------------------------------------------------------------
   ONE at-rule and three names, in a file of their own. That is not tidiness: a
   cross-document view transition runs only when BOTH documents opt in, so the
   file the at-rule lives in is the only thing that decides which pages get it.
   There is no selector-level scope for an at-rule.

   Linked by app/views/layouts/marketing.html.erb, and by nothing else. It cannot
   go in any of the shared marketing stylesheets:

     colors_and_type.css   5 layouts (auth, marketing, explore, onboarding, native_modal)
     site.css              the same 5
     pages.css             2 layouts (marketing AND onboarding)

   pages.css looked marketing-only and is not. marketing_motion_test now asserts
   the loader count, because that assumption is invisible from this file.

   Excluding onboarding matters: its steps are form posts in a funnel nobody asked
   to restyle, and giving its <main> a transition name plus an opt-in is motion in
   a place it was never designed for. Turbo is loaded there and would probably
   render same-document anyway, which makes it inert; "probably inert" is not a
   reason to opt a payment-adjacent funnel into animation.
   ============================================================================= */

/* ═══ PAGE-TO-PAGE CROSS-FADE ══════════════════════════════════════════════
   Native CSS cross-document view transitions. No JavaScript, and no Turbo: the
   marketing layout deliberately loads the importmap only in Hotwire Native, so
   on the web a nav click is a real document navigation, which is exactly what
   this at-rule is for. Browsers without it navigate normally.

   Inert in the app: native loads Turbo, Turbo Drive renders same-document, and a
   cross-document transition never starts. Nothing to guard.

   The chrome and the footer are NAMED, so they hold still and only the document
   body cross-fades. Without the names the whole viewport cross-fades against
   itself and the identical nav visibly flickers. Each name appears once per
   document, which is the requirement. */
@view-transition { navigation: auto; }

.marketing-chrome { view-transition-name: da-chrome; }
main              { view-transition-name: da-main; }
.da-foot          { view-transition-name: da-foot; }

::view-transition-old(root),     ::view-transition-new(root),
::view-transition-old(da-main),  ::view-transition-new(da-main),
::view-transition-old(da-chrome),::view-transition-new(da-chrome),
::view-transition-old(da-foot),  ::view-transition-new(da-foot) {
  animation-duration: var(--dur-xfade);
  animation-timing-function: var(--ease-reveal);
}

/* Named explicitly rather than with (*), which is a later addition to the spec
   and not everywhere the at-rule is. A cross-fade carries no motion, so this
   shortens it rather than removing it. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),     ::view-transition-new(root),
  ::view-transition-old(da-main),  ::view-transition-new(da-main),
  ::view-transition-old(da-chrome),::view-transition-new(da-chrome),
  ::view-transition-old(da-foot),  ::view-transition-new(da-foot) {
    animation-duration: 120ms;
  }
}