/* Static — one motion system for every page (landing, journal, policies, services).
   Tokens are read by script.js too, so CSS and JS reveals share timing. */
:root {
  --ease-out: cubic-bezier(.2,.74,.2,1);   /* = --ease; close to GSAP power3.out */
  --ease-in: cubic-bezier(.4,0,1,1);
  --dur-reveal: .9s;                        /* scroll reveals + hero entrance */
  --reveal-distance: 60px;
  --hero-distance: 40px;
  --stagger: .12s;                          /* between items of one data-appear-group */
  --dur-page: .32s;                         /* cross-document view transition */
  --dur-page-out: .2s;
  --page-rise: 14px;
  --dur-morph: .5s;                         /* shared image between pages */
}

/* Scroll reveals (JS adds .motion-ready; without JS everything stays visible). */
.motion-ready [data-appear] { opacity: 0; transform: translateY(var(--reveal-distance)); }
.motion-ready [data-appear].is-in { opacity: 1; transform: none; }
.motion-ready [data-hero] { opacity: 0; transform: translateY(var(--hero-distance)); }
.motion-ready [data-hero].is-in { opacity: 1; transform: none; }
/* The entrance transition only applies while it runs. Once settled, the element
   gets its own transitions back (FAQ backgrounds, financing accordion, hovers)
   and no leftover stagger delay. */
.motion-ready [data-appear].is-in:not(.is-settled),
.motion-ready [data-hero].is-in:not(.is-settled) {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.motion-ready [data-words] { opacity: 1; }
/* Revealed without animation (arrived by view transition, or back navigation). */
.motion-ready .is-instant, .motion-ready .is-instant .w > span { transition: none !important; }

/* Cross-document view transitions between all same-origin pages. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-group(root) { animation-duration: var(--dur-page); }
::view-transition-old(root) { animation: var(--dur-page-out) var(--ease-in) both vt-fade-out; }
::view-transition-new(root) { animation: var(--dur-page) var(--ease-out) both vt-rise-in; }
::view-transition-group(site-nav) { animation-duration: var(--dur-page); animation-timing-function: var(--ease-out); }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation-duration: var(--dur-page); }
/* Continuity: the clicked image grows into the next page's hero (names set in JS). */
::view-transition-group(hero-img) { animation-duration: var(--dur-morph); animation-timing-function: var(--ease-out); }
::view-transition-old(hero-img), ::view-transition-new(hero-img) {
  width: 100%; height: 100%; object-fit: cover; overflow: clip;
  animation-duration: var(--dur-morph); animation-timing-function: var(--ease-out);
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(var(--page-rise)); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .nav { view-transition-name: none; }
  .motion-ready [data-appear], .motion-ready [data-hero] { opacity: 1; transform: none; transition: none; }
}