/* ==========================================================================
   GSL Marketing — css/gsl-effects.css  ·  motion layer (load after gsl-v2.css)

   Rules of the layer
   · Content is visible with no JS, broken JS and prefers-reduced-motion.
     The hidden "before" state only exists under `html.fx` — a class the
     inline <head> snippet adds and removes again after 2.5s unless
     js/gsl.js has confirmed it is running (window.GSL_FX).
   · Section reveals are scroll-triggered: js/gsl.js toggles `.is-in` on
     [data-fx="reveal"] and [data-fx="stagger"] via IntersectionObserver.
   · 12px rise · 400ms · ease-out · stagger 60ms, capped at 4 steps.
   · The home hero has a one-shot CSS entrance (no JS needed).
   · No count-ups. One loop only: the mobile client-logo marquee (paused on
     hover/focus, static under reduced motion). Hero parallax ±6px, desktop
     pointer only, off under reduced motion.
   ========================================================================== */

:root {
  --gsl-fx-rise: 12px;
  --gsl-fx-dur:  400ms;
  --gsl-fx-step: 60ms;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- scroll reveals --------------------------------------------------- */
  html.fx [data-fx="reveal"],
  html.fx [data-fx="stagger"] > * {
    transition:
      opacity var(--gsl-fx-dur) var(--gsl-ease-out),
      transform var(--gsl-fx-dur) var(--gsl-ease-out);
  }
  html.fx [data-fx="reveal"]:not(.is-in),
  html.fx [data-fx="stagger"]:not(.is-in) > * {
    opacity: 0;
    transform: translate3d(0, var(--gsl-fx-rise), 0);
  }
  html.fx [data-fx="stagger"].is-in > :nth-child(2) { transition-delay: calc(1 * var(--gsl-fx-step)); }
  html.fx [data-fx="stagger"].is-in > :nth-child(3) { transition-delay: calc(2 * var(--gsl-fx-step)); }
  html.fx [data-fx="stagger"].is-in > :nth-child(n+4) { transition-delay: calc(3 * var(--gsl-fx-step)); }
  /* hover lifts on cards must not inherit the reveal delay */
  html.fx [data-fx="stagger"].is-in > :hover { transition-delay: 0ms; }

  /* ---- home hero entrance (CSS only) ------------------------------------ */
  @keyframes gsl-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
  @keyframes gsl-card-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

  .home-hero .gsl-eyebrow   { animation: gsl-rise 520ms var(--gsl-ease-out) both; }
  .home-hero__title         { animation: gsl-rise 520ms var(--gsl-ease-out) 60ms both; }
  .home-hero__sub           { animation: gsl-rise 520ms var(--gsl-ease-out) 140ms both; }
  .home-hero__actions,
  .home-hero__meta          { animation: gsl-rise 520ms var(--gsl-ease-out) 220ms both; }
  .home-hero__stack .browser-frame { animation: gsl-card-in 800ms var(--gsl-ease-out) backwards; } /* backwards: leaves `translate` free for the pointer parallax */
  .home-hero__stack .browser-frame:nth-child(1) { animation-delay: 200ms; }
  .home-hero__stack .browser-frame:nth-child(2) { animation-delay: 320ms; }
  .home-hero__stack .browser-frame:nth-child(3) { animation-delay: 440ms; }
}

/* reduced motion: never hide, never move */
@media (prefers-reduced-motion: reduce) {
  [data-fx="reveal"], [data-fx="stagger"] > * { opacity: 1 !important; transform: none !important; }
  .offer-card:hover, .work-card:hover, .offer-card:focus-within, .work-card:focus-within,
  .btn--primary:hover, .btn--secondary:hover, .btn--wa:hover, .wa-float:hover { transform: none !important; }
  .work-card:hover .browser-frame__img { transform: none !important; }
}