/* ==========================================================================
   SERVICE SLIDER - shared motion/position layer (.ski-service-slider)
   Loaded AFTER the page stylesheets (home2-hero.css, clases-esqui.css,
   clases-hub.css) on every page that carries the slider - see
   ski_school_child_service_slider_component() in functions.php.
   Component-scoped: no page id in the selectors (except the one documented
   token override below), so every instance gets the same fix. Sizes,
   colours and card anatomy still live in the page files, untouched.

   WHY (2026-09-26):
   1. Two systems owned the SAME `transform` on .ski-service-card: the global
      reveal (gsap-motion.js, .ski-reveal-stagger -> inline translate(0,26px))
      and the slider recede/active state (stylesheet scale()/translateY()).
      Inline GSAP transforms beat the stylesheet, so original cards could keep
      a stale translate(0,26px) (16px on phones) while the loop clones showed
      scale(.97): uneven card tops and differing image heights.
   2. `transition: transform ... !important` on the cards made the browser
      interpolate every GSAP frame too (lag/jank).
   Fix: the slider emphasis uses the individual `scale` / `translate`
   properties (they compose with, never overwrite, `transform`); the
   stylesheet no longer sets `transform` on the cards; only the individual
   properties are transitioned. home2-hero.js clears the reveal's inline
   leftovers once that reveal has finished.
   3. The arrows straddled the active card's edge (onto its image on /clases/,
      where the card padding is 20px). On tablet/desktop they now sit centred
      in the gap between the active card and its neighbours.
   Roll back: delete this file (the enqueue is guarded by file_exists) and
   restore experiments/home2-hero.js.bak-20260926.
   ========================================================================== */

/* Emphasis tokens (values preserved from the page files) */
body .ski-service-slider {
  --ski-card-recede: 0.97;
  --ski-card-lift: -5px;
}
/* /clases/ used a 3px lift on desktop too (clases-hub.css section 13+) */
body.page-id-338 .ski-service-slider {
  --ski-card-lift: -3px;
}
@media (max-width: 767px) {
  body .ski-service-slider {
    --ski-card-recede: 0.985;
    --ski-card-lift: -3px;
  }
}

/* The stylesheet no longer writes `transform` on a card: that property is
   left to the entrance reveal (inline, GSAP) alone. */
body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card,
body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card.is-active {
  transform: none;
}
body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card {
  scale: var(--ski-card-recede);
  translate: none;
}
body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card.is-active {
  scale: none;
  translate: 0 var(--ski-card-lift);
}

/* Transition only the slider's own properties - never `transform`, so the
   reveal's per-frame writes are not re-interpolated by CSS. */
@media (prefers-reduced-motion: no-preference) {
  body .ski-service-slider .ski-service-slider__viewport .ski-service-card {
    transition:
      scale 420ms var(--ski-ease),
      translate 420ms var(--ski-ease),
      opacity 420ms var(--ski-ease),
      border-color 380ms var(--ski-ease),
      box-shadow 420ms var(--ski-ease) !important;
  }
}
/* loop wrap: the equivalent card takes over in place, no animation */
body .ski-service-slider .ski-service-slider__viewport.is-jumping .ski-service-card {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card,
  body .ski-service-slider .ski-service-slider__viewport.is-looping .ski-service-card.is-active {
    scale: none;
    translate: none;
  }
}

/* Arrows (tablet/desktop): centred in the gap beside the active card, so
   they cover neither the active image nor a neighbour's. The vertical anchor
   (--ski-rail-mid, measured by home2-hero.js) is unchanged. Phones keep the
   page files' placement inside the active image. */
@media (min-width: 768px) {
  body .ski-service-slider .ski-service-slider__btn:first-child {
    left: calc(var(--ski-rail-edge) - var(--ski-rail-gap) / 2 - var(--ski-arrow) / 2);
    right: auto;
  }
  body .ski-service-slider .ski-service-slider__btn:last-child {
    right: calc(var(--ski-rail-edge) - var(--ski-rail-gap) / 2 - var(--ski-arrow) / 2);
    left: auto;
  }
}