/* Educircle Website V2 — shared scroll-motion layer
   =================================================
   The reveal system, in one file, loaded by every surface that wants it: the
   authenticated student pages (discovery layout) and the auth pages. It lives here
   rather than in student.css so the auth pages can have entrance motion without
   pulling in the whole student shell, and so there is exactly one definition of the
   reduced-motion behaviour to keep correct.

   Driven by website-v2/js/student-motion.js, which keys off [data-reveal] and
   [data-progress] and adds the `.js-reveal` gate itself.

   PROGRESSIVE ENHANCEMENT, NON-NEGOTIABLE
   The hidden state is scoped to `.js-reveal`, a class only the script adds. If the
   script is blocked, fails to parse, or IntersectionObserver is missing, none of these
   rules match and every element is simply visible. Content must never be hidden by a
   script that might not run. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  /* Stagger — set as an inline custom property by the observer. */
  transition-delay: var(--reveal-delay, 0ms);
}

/* Progress meters fill from zero the first time they are seen. The target width is
   carried in --progress-to so the reduced-motion path can draw it outright. */
.js-reveal [data-progress] { width: 0 !important; }

.js-reveal [data-progress].is-revealed {
  width: var(--progress-to) !important;
  transition: width var(--dur-slow) var(--ease-out) 120ms;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

/* Resolve everything instantly at its final value: revealed, full width, no transition.
   The page is identical, it just does not move. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-reveal [data-progress] { width: var(--progress-to) !important; }
  .js-reveal [data-progress].is-revealed { transition: none; }
}