/* WYW — venues section motion layer. Loads on the five /for-venues/ pages
   only, after page.css and before the page's own stylesheet.

   This is the landing page's motion restated for pages without GSAP: the
   same rise-and-settle (power3.out ≈ cubic-bezier(0.22,1,0.36,1)), the same
   marker sweep (background-size, cubic-bezier(0.77,0,0.18,1)), the same
   staggered arrivals. Two halves:

   1. THE HERO ENTRANCE — pure CSS, plays once from first paint, no JS in
      the loop. fill-mode is backwards (holds the from-state through each
      delay) and every keyframe set except the sweep is from-only, so the
      end state IS the declared style and nothing snaps — the
      venues-integrations idiom. The whole block sits inside a
      no-preference query, so reduced motion never sees a frame of it.

   2. THE SCROLL REVEALS — venues.js arms elements carrying [data-vm]
      (one element) or the children of [data-vm-group] (staggered in DOM
      order) with .vm, flips them to .vm-in as they enter the viewport,
      and STRIPS both classes once the transition lands. Three rules keep
      it safe:
      - nothing is armed under reduced motion, without
        IntersectionObserver, or without JS at all — the classes below
        only ever exist while the script is driving;
      - anything inside the first viewport is never armed, so there is no
        first-paint flash and no dead reveal;
      - because the classes are transient, a revealed element returns to
        its stylesheet state and the reveal never shares a transition
        property with a hover spring (the landing page's footer-CTA
        lesson: one property, one owner). */

/* ---------- 1 · hero entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes vm-rise {
    from { opacity: 0; transform: translateY(26px); }
  }

  @keyframes vm-fade {
    from { opacity: 0; }
  }

  /* .hl paints at 100% by default, so the sweep holds its 0% start through
     the delay (`both`) or the marker would flash full then rewind */
  @keyframes vm-sweep {
    from { background-size: 0% 0.85em; }
    to   { background-size: 100% 0.85em; }
  }

  .page-hero__title { animation: vm-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
  .page-hero__sub   { animation: vm-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards; }
  .page-hero__cta   { animation: vm-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards; }

  .page-hero .hl { animation: vm-sweep 0.7s cubic-bezier(0.77, 0, 0.18, 1) 0.55s both; }
}

/* ---------- 2 · scroll reveals ---------- */

.vm {
  opacity: 0;
  transform: translateY(26px);
}

.vm-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s ease var(--vm-d, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--vm-d, 0s);
}

/* a marker inside a revealing element sweeps in AFTER the element has
   started to settle, exactly like the landing page's section titles.
   --vm-d rides in from the group stagger, so a staggered row of markers
   (the how-it-runs 01/02/03) sweeps in sequence. */
.vm .hl { background-size: 0% 0.85em; }

.vm-in .hl {
  background-size: 100% 0.85em;
  transition: background-size 0.6s cubic-bezier(0.77, 0, 0.18, 1) calc(var(--vm-d, 0s) + 0.3s);
}

/* ---------- 3 · parallax drift ---------- */

/* [data-vm-plx] elements are driven by venues.js: a small translate against
   the scroll (factor in the attribute), transform-only, clamped, rAF'd.
   The hint keeps the drift on its own layer so scrolling never repaints. */
[data-vm-plx] { will-change: transform; }

/* ---------- reduced motion ----------
   venues.js never arms anything under reduced motion, so this branch is
   belt-and-braces for a preference toggled after load: everything lands
   in its final state instantly. The hero block above is already inert
   (it lives inside the no-preference query). */

@media (prefers-reduced-motion: reduce) {
  .vm,
  .vm-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vm .hl,
  .vm-in .hl {
    background-size: 100% 0.85em;
    transition: none;
  }

  [data-vm-plx] { will-change: auto; }
}