/* ============================================================
   ASSIGNMENT PANEL — Scroll-COUPLED section reveals
   ------------------------------------------------------------
   The motion is tied to scroll position, not a timer. As the next
   section first peeks in at the bottom of the screen it sits off in
   the corner (shifted + scaled + transparent); as you scroll, it
   slides into place in lock-step — scroll a little, it moves a
   little. So the incoming section starts arriving from the corner
   WHILE the current one is still on screen, instead of snapping in
   after you've already scrolled to it.

   /scroll-reveal.js drives transform + opacity every scroll frame
   from the offsets below toward "none". These resting values are the
   pre-JS hidden state (and must mirror the FROM table in the JS).

   Deliberately NOT tagged: the hero (above the fold) and the case
   study .cs-section (owns position:fixed children + its own scroll
   choreography). Horizontal travel is clipped by body{overflow-x:hidden}.
   ============================================================ */

[data-reveal] {
  opacity: 0;
  /* No CSS transition on purpose — the scroll position itself is the
     "clock". A transition here would lag/fight the per-frame updates. */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Where each section travels FROM (must match FROM in scroll-reveal.js). */
[data-reveal="slide-right"] { transform: translate3d(34vw, 6vh, 0) scale(0.98); }  /* bottom-right corner */
[data-reveal="slide-left"]  { transform: translate3d(-34vw, 6vh, 0) scale(0.98); } /* bottom-left corner  */
[data-reveal="zoom-in"]     { transform: translate3d(0, 7vh, 0) scale(0.74); }     /* grows in            */
[data-reveal="zoom-out"]    { transform: translate3d(0, 7vh, 0) scale(1.22); }     /* shrinks in          */

/* Accessibility: reduced-motion users get everything in place, no motion. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}