/* ========================================================
   GRADIENTS & ENTRANCE MOTION
   ========================================================
   Site-wide linear-gradient surfaces plus the on-initial-load
   animation system (hero text, buttons, hero bands). Everything
   here is drawn from the tokens in variables.css, so light and
   dark modes get their own palette without any theme branches.

   Fail-safe: every entrance below is a self-running CSS animation
   that always ends in the visible state, so a missing script or a
   browser without IntersectionObserver can never leave content
   hidden — the same guarantee scroll-animations.js documents.
   ======================================================== */

/* ─── Gradient washes (pages + cards) ────────────────────── */
/* .section-alt keeps its flat token as the base colour; the image layer
   adds a barely-there vertical sweep so long pages feel less flat. */
.section-alt,
.stats-section {
  background-image: var(--gradient-surface);
}

/* section-surface helper + the main card/panel surfaces pick up a soft
   diagonal sheen (same gradient family as the section bands). */
.section-surface,
.surface-panel,
.surface-panel-lg,
.stat-card,
.giving-card,
.card {
  background-image: var(--gradient-card);
}

/* ─── Hero bands: animated brand-gradient tint ───────────── */
/* NOTE: banner/hero photos are intentionally left untinted — no gradient
   wash is applied to .page-hero or .carousel-overlay backgrounds, so the
   banner photos render clear. (Owner request.) */

/* ─── On-load entrance: hero + page-hero content ─────────── */
/* Above-the-fold text arrives in a short cascade the moment the page
   paints (below-the-fold sections still use the scroll-triggered system). */
.page-hero > .container > *,
.carousel-overlay .container > .badge,
.hero-carousel .hero-content > * {
  animation: enter-up var(--t-enter) var(--ease-out-soft) both;
}

.page-hero > .container > *:nth-child(1),
.carousel-overlay .container > .badge                 { animation-delay: 0.05s; }
.page-hero > .container > *:nth-child(2),
.hero-carousel .hero-content > *:nth-child(1)         { animation-delay: 0.18s; }
.page-hero > .container > *:nth-child(3),
.hero-carousel .hero-content > *:nth-child(2)         { animation-delay: 0.30s; }
.page-hero > .container > *:nth-child(4),
.hero-carousel .hero-content > *:nth-child(3)         { animation-delay: 0.42s; }
.page-hero > .container > *:nth-child(5)              { animation-delay: 0.54s; }

/* One-time sweep across the hero calls-to-action, shortly after paint.
   Out-and-back so the button rests at its default state afterwards —
   the hover glide (buttons.css) keeps working. */
.hero-actions .btn,
.page-hero .btn {
  animation: btn-sheen-load 1.8s var(--ease-out-soft) 0.6s both;
}
@keyframes btn-sheen-load {
  0%   { background-position: 0% 50%; }
  45%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Gradient text: statistic numbers ───────────────────── */
/* The @supports guard keeps plain-coloured text on older renderers
   (transparent colour with no clip support would hide the number). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-number {
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(var(--enter-shift, 1.25rem)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-hero > .container > *,
  .carousel-overlay .container > .badge,
  .hero-carousel .hero-content > *,
  .hero-actions .btn,
  .page-hero .btn {
    animation: none;
  }
}