/* ==========================================================================
   motion.css: scroll reveals, default hover easing, and page-header entrances.
   Loaded last on every page. Everything here is switched off for visitors who
   ask for reduced motion (see base.css).
   ========================================================================== */

/* ---------- Default hover easing ----------
   Anything interactive eases its hover changes. Zero specificity, so any
   component that sets its own transition keeps it. */
:where(a, button, select, input, textarea, .cal-chip, .card, .robe, .health-card) {
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease,
    box-shadow 0.3s ease, opacity 0.22s ease, transform 0.25s ease, filter 0.22s ease;
}

/* ---------- Reveal on scroll ----------
   reveal.js gives each element that enters together its own --d offset, so a
   row of cards arrives one after another. Text blocks then stagger their own
   lines (kicker, heading, paragraph...) on top of that offset. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s ease var(--d, 0s), transform 0.9s var(--ease-out) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* While an element is still entering, its entrance timing wins over its own
   hover transition (reveal.js removes .reveal once the entrance has played). */
.reveal.reveal {
  transition: opacity 0.8s ease var(--d, 0s), transform 0.9s var(--ease-out) var(--d, 0s),
    box-shadow 0.35s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.22s ease;
}

/* Text blocks stagger their own lines. */
.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal { opacity: 1; transform: none; }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal) > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s ease var(--d, 0s), transform 0.85s var(--ease-out) var(--d, 0s);
}
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > * { opacity: 1; transform: none; }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > :nth-child(2) { transition-delay: calc(var(--d, 0s) + 0.1s); }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > :nth-child(3) { transition-delay: calc(var(--d, 0s) + 0.2s); }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > :nth-child(4) { transition-delay: calc(var(--d, 0s) + 0.3s); }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > :nth-child(5) { transition-delay: calc(var(--d, 0s) + 0.4s); }
:is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal).in > :nth-child(n+6) { transition-delay: calc(var(--d, 0s) + 0.5s); }
.no-js :is(.section-head.reveal, .letter-body.reveal, .midnight-grid > .reveal:first-child, .split > div.reveal) > * { opacity: 1; transform: none; }

/* ---------- Page-header entrances (on load) ----------
   The text arrives line by line (kicker, headline, quote, attribution, intro,
   buttons) while the background photo settles in slowly. */
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slow-settle { from { transform: scale(1.08); } to { transform: scale(1); } }

.page-hero .wrap > * { animation: rise-in 0.9s var(--ease-out) both; }
.page-hero .wrap > :nth-child(1) { animation-delay: 0.1s; }
.page-hero .wrap > :nth-child(2) { animation-delay: 0.22s; }
.page-hero .wrap > :nth-child(3) { animation-delay: 0.42s; }
.page-hero .wrap > :nth-child(4) { animation-delay: 0.54s; }
.page-hero .bg-photo { animation: fade-in 1.4s ease both; }
.page-hero .bg-photo img { animation: slow-settle 9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }

/* Home: the two photographs fade in and settle. Each line of Pastor Davis's words rises on
   its own, then the attribution, intro and buttons follow. */
/* The two photos settle together, so their fans stay lined up. */
.hero-bg { animation: fade-in 1.4s ease both, slow-settle 9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.hero-copy > :not(.hero-cite), .hero-quote .q-line, .hero-cite .attribution { animation: rise-in 0.9s var(--ease-out) both; }
.hero-copy > .kicker { animation-delay: 0.1s; }
.hero-quote .q-line:nth-child(1) { animation-delay: 0.2s; }
.hero-quote .q-line:nth-child(2) { animation-delay: 0.32s; }
.hero-quote .q-line:nth-child(3) { animation-delay: 0.5s; }
.hero-quote .q-line:nth-child(4) { animation-delay: 0.62s; }
.hero-cite .attribution { animation-delay: 0.78s; }
.hero-copy > .lede { animation-delay: 0.9s; }
.hero-copy > .btn-row { animation-delay: 1.02s; }