/* ==========================================================================
   Homepage section entrance motion (scripts/section-motion.js).
   html.vgl-motion is set in <head> (skipped under prefers-reduced-motion), so the
   hero copy is hidden from the first paint and fades in when the loader lifts.
   Everything else is only hidden once it is about to scroll into view: the
   script tags it [data-m] about a screen ahead, then adds .m-in with a stagger
   delay (--m-d). After the transition the attribute is removed, so each
   element goes back to its own styles (hover lifts, transitions, transforms).
   ========================================================================== */
/* Transition only on the way in: tagging an element [data-m] must hide it at
   once, not fade it out. */
html.vgl-motion [data-m].m-in {
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--m-d, 0ms),
    transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) var(--m-d, 0ms),
    clip-path 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) var(--m-d, 0ms) !important;
}
html.vgl-motion [data-m]:not(.m-in) { opacity: 0 !important; transition: none !important; }
/* copy and small items: rise */
html.vgl-motion [data-m="rise"]:not(.m-in) { transform: translate3d(0, 26px, 0) !important; }
/* cards and media: rise further, settle from slightly smaller */
html.vgl-motion [data-m="lift"]:not(.m-in) { transform: translate3d(0, 44px, 0) scale(0.97) !important; }
/* headings: masked line rising into place */
html.vgl-motion [data-m="mask"]:not(.m-in) {
  transform: translate3d(0, 0.45em, 0) !important;
  clip-path: inset(0 0 100% 0);
}
html.vgl-motion [data-m="mask"].m-in { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
/* "fade" items only change opacity */

/* Hero: hidden from the first paint until the loader lifts (no flash of the
   resting layout on session return visits, which skip the loader). */
html.vgl-motion .vgl-hero:not(.m-ready) .vgl-hero__overlay > *,
html.vgl-motion .vgl-hero:not(.m-ready) .vgl-hero__scroll { opacity: 0; }
/* the first tagline line gets its own box so it can move on its own */
.vgl-hero__title-lead { display: block; }