/* ── Gatha Waldorf — Scroll-Driven Reveals ───────────────────────────────── */

/* Keyframes */
@keyframes gw-wipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 -4px 0 0); }
}
@keyframes gw-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gw-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Page-load: above-fold hero content (time-based, not scroll-driven) ─── */

/* Inner page heroes — single-column layout (curriculum, admissions, etc.) */
.ph-in > .bc   { animation: gw-fade 0.45s 0.05s ease-out both; }
.ph-in > h1    { animation: gw-rise 0.65s 0.15s cubic-bezier(0.25,0,0.15,1) both; }
.ph-in > p     { animation: gw-fade 0.5s  0.35s ease-out both; }
/* Two-column layout (school page: ph-in > div > h1) */
.ph-in > div:first-child > .bc { animation: gw-fade 0.45s 0.05s ease-out both; }
.ph-in > div:first-child > h1  { animation: gw-rise 0.65s 0.15s cubic-bezier(0.25,0,0.15,1) both; }
.ph-in > div:first-child > p   { animation: gw-fade 0.5s  0.35s ease-out both; }
.ph-in > div:last-child        { animation: gw-fade 0.6s  0.3s  ease-out both; }

/* Homepage hero */
.hero-eyebrow            { animation: gw-fade 0.4s  0.1s  ease-out both; }
.hero-content h1         { animation: gw-rise 0.7s  0.2s  cubic-bezier(0.25,0,0.15,1) both; }
.hero-sub                { animation: gw-fade 0.5s  0.4s  ease-out both; }
.hero-actions            { animation: gw-fade 0.45s 0.6s  ease-out both; }
.hero-stats              { animation: gw-fade 0.45s 0.78s ease-out both; }
.hero-visual             { animation: gw-fade 0.65s 0.25s ease-out both; }

/* ── Scroll-driven: below-fold reveals ─────────────────────────────────── */

@supports (animation-timeline: view()) {

  /* Labels — ink wipe, left-to-right */
  .lbl {
    animation: gw-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }
  /* Centred labels get a simple fade (wipe on centred text looks unbalanced) */
  .lbl.center {
    animation: gw-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }

  /* Section headings */
  .about-content h2,
  .why-header h2,
  .comm-header h2,
  .stage-content h2,
  .comm-events-header h3,
  .cta-inner h2,
  .cta-in h2 {
    animation: gw-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }

  /* Body paragraphs */
  .about-content > p,
  .why-header > p,
  .comm-header > p,
  .stage-content > p:not(.lbl),
  .comm-events-header > p,
  .cta-inner > p,
  .cta-in > p,
  blockquote {
    animation: gw-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  /* Curriculum stage images — slight delay after content heading */
  .stage-img {
    animation: gw-fade linear both;
    animation-timeline: view();
    animation-range: entry 3% entry 45%;
  }

  /* Quote attribution */
  .quote-author {
    animation: gw-fade linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 70%;
  }
}

/* ── Stagger grid children — activated by IntersectionObserver in reveals.js */

.gw-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.5s cubic-bezier(0.25, 0, 0.15, 1) var(--gw-d, 0ms),
    transform 0.5s cubic-bezier(0.25, 0, 0.15, 1) var(--gw-d, 0ms);
}

.gw-stagger.in > * {
  opacity: 1;
  transform: none;
}

/* ── Prefers-reduced-motion: restore everything immediately ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .ph-in > .bc,
  .ph-in > h1,
  .ph-in > p,
  .ph-in > div:first-child > .bc,
  .ph-in > div:first-child > h1,
  .ph-in > div:first-child > p,
  .ph-in > div:last-child,
  .hero-eyebrow,
  .hero-content h1,
  .hero-sub,
  .hero-actions,
  .hero-stats,
  .hero-visual { animation: none; }

  .gw-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  @supports (animation-timeline: view()) {
    .lbl,
    .lbl.center,
    .about-content h2,
    .why-header h2,
    .comm-header h2,
    .stage-content h2,
    .comm-events-header h3,
    .cta-inner h2,
    .cta-in h2,
    .about-content > p,
    .why-header > p,
    .comm-header > p,
    .stage-content > p:not(.lbl),
    .comm-events-header > p,
    .cta-inner > p,
    .cta-in > p,
    blockquote,
    .stage-img,
    .quote-author { animation: none; }
  }
}