/* ============================================================
   Motion layer

   Loaded only on the motion preview. GSAP owns the timing, so the
   job here is to hand it elements in a sane starting state and to
   keep every animated property on the compositor: transform and
   opacity, nothing that triggers layout or paint.
   ============================================================ */

/* The stock reveal system uses IntersectionObserver and CSS classes.
   GSAP takes over on this page, so neutralise it rather than let the
   two fight over the same elements. */
.motion-on [data-reveal] { opacity: 1; transform: none; }

/* Hand the hero over to GSAP: stop the stock CSS animation and leave the
   elements in their RESTING state, visible. GSAP's .from() supplies the
   start state itself.

   The earlier version forced opacity:0 here and relied on JS to clear it.
   Under reduced motion the clear raced the timeline and the buttons stayed
   invisible, which is the exact failure the accessibility guidance is
   about. Resting state must be the safe state. */
.motion-on.gsap-ready .hero-fade {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Line masks for the split headline: yPercent 100 needs something to
   hide behind. */
.motion-on .split-line { overflow: hidden; display: block; }

/* ---- micro-interactions ----
   100-250ms, ease-out in, faster out, and press feedback that lands
   on the frame the finger does. */
.motion-on .btn {
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.motion-on .btn:hover { transform: translateY(-2px); }
.motion-on .btn:active { transform: scale(0.96); transition-duration: 90ms; }

/* Card lift. The shadow is painted once on a pseudo-element and only
   its opacity animates, because animating box-shadow repaints a large
   blurred region every frame. */
.motion-on .svc-card,
.motion-on .review-card {
  position: relative;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.motion-on .svc-card::after,
.motion-on .review-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 18px 40px rgba(11, 28, 69, 0.22);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.motion-on .svc-card:hover,
.motion-on .review-card:hover { transform: translateY(-4px); }
.motion-on .svc-card:hover::after,
.motion-on .review-card:hover::after { opacity: 1; }

/* ---- reduced motion, tiered rather than switched off ----
   Tier 1 removals (parallax, large travel, the pinned scene) are handled
   in JS where GSAP can be told not to build them at all. What is left
   here is Tier 2: keep the fact of a transition, drop the displacement. */
@media (prefers-reduced-motion: reduce) {
  .motion-on .btn { transition: opacity 150ms ease; }
  .motion-on .btn:hover,
  .motion-on .btn:active { transform: none; }
  .motion-on .svc-card,
  .motion-on .review-card { transition: opacity 150ms ease; }
  .motion-on .svc-card:hover,
  .motion-on .review-card:hover { transform: none; }
  /* the shadow fade is Tier 3 and stays */
  .motion-on .hero-media { transform: none !important; }
}