/**
 * @file
 * MVSD motion system — scroll-reveal + entrance stagger (Pazazz Phase 1).
 *
 * Reusable: add .reveal (+ optional .reveal--left/--right/--scale) to any
 * element; motion.js adds .is-visible via IntersectionObserver as it scrolls
 * into view. On the district front, known blocks are revealed without markup.
 *
 * Robustness (deliberate):
 *  - Hidden state applies ONLY under html.mvsd-js (set by an inline head script
 *    BEFORE paint). No JS / JS failure => nothing hides => content stays visible.
 *  - prefers-reduced-motion => everything visible, zero motion.
 *  - Animates transform + opacity only (GPU-cheap; protects the perf budget).
 */

:root {
  --motion-duration: 600ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 24px;
  --motion-stagger-step: 90ms;
}

/* Showcase pages push bolder. mvsd-front-motion = district front for Phase 1;
   broaden the inline-script condition to roll out to all fronts + landings. */
html.mvsd-front-motion {
  --motion-duration: 700ms;
  --motion-distance: 40px;
  --motion-stagger-step: 110ms;
}

/* ---- Reusable .reveal primitive (gated on JS being active) ---- */
html.mvsd-js .reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger-step));
}
html.mvsd-js .reveal.reveal--left  { transform: translateX(calc(-1 * var(--motion-distance))); }
html.mvsd-js .reveal.reveal--right { transform: translateX(var(--motion-distance)); }
html.mvsd-js .reveal.reveal--scale { transform: scale(0.94); }
html.mvsd-js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- District front-page application (Phase 1) ----
   Targets existing front markup, so no template edits. Pre-hidden from first
   paint because html.mvsd-front-motion is set by the inline head script. */
html.mvsd-front-motion .news-card--primary,
html.mvsd-front-motion .news-card--teaser,
html.mvsd-front-motion .mission-panel,
html.mvsd-front-motion .split-panel,
html.mvsd-front-motion .dept-content > *,
html.mvsd-front-motion [id$="school-highlights"] {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger-step));
  will-change: opacity, transform;
}
html.mvsd-front-motion .news-card--primary.is-visible,
html.mvsd-front-motion .news-card--teaser.is-visible,
html.mvsd-front-motion .mission-panel.is-visible,
html.mvsd-front-motion .split-panel.is-visible,
html.mvsd-front-motion .dept-content > .is-visible,
html.mvsd-front-motion [id$="school-highlights"].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* School Spotlight (district front) fades in as ONE unit: the whole section
   reveals together; cards inside ride with it and do not animate individually
   (stakeholder, 2026-05-21). */
html.mvsd-front-motion [id$="school-highlights"] .news-card--primary,
html.mvsd-front-motion [id$="school-highlights"] .news-card--teaser {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Accessibility: reduced motion = always visible, no motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.mvsd-js .reveal,
  html.mvsd-js .reveal.is-visible,
  html.mvsd-front-motion .news-card--primary,
  html.mvsd-front-motion .news-card--teaser,
  html.mvsd-front-motion .mission-panel,
  html.mvsd-front-motion .split-panel,
  html.mvsd-front-motion .dept-content > *,
  html.mvsd-front-motion [id$="school-highlights"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* Dept navigation is chrome, not content — exclude it from the content
   stagger so it never renders as a washed-out / fading menu (was most
   noticeable on sub-dept pages catching it mid-reveal). Always solid. */
html.mvsd-front-motion .dept-content > .dept-nav {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Print: reveal everything ------------------------------------------
   Scroll-reveal (IntersectionObserver) never fires for below-the-fold content
   in a print render, so any element still in its hidden start-state prints
   INVISIBLE. This silently dropped department-landing cards (every `page`
   node with field_department gets html.mvsd-front-motion -> .dept-content
   children start at opacity:0) and any reusable .reveal block. Mirror the
   reduced-motion un-hide for print so the printed page matches the screen.
   Added 2026-06-22 (printing rethink: print "as viewed"). */
@media print {
  html.mvsd-js .reveal,
  html.mvsd-js .reveal.is-visible,
  html.mvsd-js .reveal.reveal--left,
  html.mvsd-js .reveal.reveal--right,
  html.mvsd-js .reveal.reveal--scale,
  html.mvsd-front-motion .news-card--primary,
  html.mvsd-front-motion .news-card--teaser,
  html.mvsd-front-motion .mission-panel,
  html.mvsd-front-motion .split-panel,
  html.mvsd-front-motion .dept-content > *,
  html.mvsd-front-motion [id$="school-highlights"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}