/* ============================================
   Shared Motion — used across every page
   ============================================

   Two layers:
   1. Hero entrance — a quiet, staggered rise on first load (CSS only,
      no JS; simply doesn't run under reduced motion).
   2. Scroll reveal — cards and panels rise gently into place as they
      enter the viewport. Progressive enhancement: `scroll-reveal.js`
      only adds the `has-reveal-js` flag (and therefore the pre-reveal
      hidden state below) once it has confirmed motion is welcome and
      IntersectionObserver exists — so with JS disabled, or reduced
      motion set, or the script failing to load, every element is just
      visible immediately. Nothing here should ever be able to leave
      content permanently invisible.

   Motion is unhurried and settles without bounce — no easing here
   overshoots or oscillates, to stay in keeping with the site's
   reverent, editorial tone. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Hero entrance ---------- */

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero__brand,
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__cta,
  .hero__verse {
    animation: hero-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hero__brand    { animation-delay: 0ms; }
  .hero__eyebrow  { animation-delay: 90ms; }
  .hero__title    { animation-delay: 180ms; }
  .hero__subtitle { animation-delay: 300ms; }
  .hero__cta      { animation-delay: 420ms; }
  .hero__verse    { animation-delay: 540ms; }

  /* The gold underline beneath "eternal" / "everyday" draws in after
     the headline has settled. */
  @keyframes underline-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .hero__title-accent::after {
    transform-origin: left;
    animation: underline-draw 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 640ms;
  }

  /* ---------- Scroll reveal ---------- */

  html.has-reveal-js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.has-reveal-js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Small hover flourishes ----------
   These are independent of the reduced-motion gate above: they're brief,
   user-initiated (only on hover/focus, never on page load) and small
   enough that global "reduce motion" guidance treats them as fine to
   keep — but each still gets an explicit opt-out below all the same. */

.site-header__brand {
  transition: transform 0.2s ease;
}
.site-header__brand:hover,
.site-header__brand:focus-visible {
  transform: scale(1.04);
}

.quote-card img {
  transition: transform 0.4s ease;
}
.quote-card:hover img {
  transform: scale(1.06);
}

.contact-channel__cta {
  display: inline-block;
  transition: transform 0.2s ease;
}
.contact-channel:hover .contact-channel__cta,
.contact-channel:focus-visible .contact-channel__cta {
  transform: translateX(4px);
}

.btn--ghost:not(.btn--block) {
  transition: transform 0.2s ease, background-color 0.15s ease;
}
.btn--ghost:not(.btn--block):hover,
.btn--ghost:not(.btn--block):focus-visible {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__brand,
  .quote-card img,
  .contact-channel__cta,
  .btn--ghost:not(.btn--block) {
    transition: none;
  }
  .site-header__brand:hover,
  .quote-card:hover img,
  .contact-channel:hover .contact-channel__cta,
  .btn--ghost:not(.btn--block):hover {
    transform: none;
  }
}