/**
 * @file
 * Slider Grid Component (vertical fade+slide model, non-clipping)
 *
 * DESIGN CONTRACT
 * ============================================================================
 * - The slider is a DUMB HOST. It shows ONE slide at a time and never
 *   modifies the card inside — no shadows added, no borders, no rounding.
 *   Whatever markup you drop into `.slider-grid__slide` renders exactly as
 *   it would standalone.
 * - Cards keep their NATURAL size. The viewport height animates to match
 *   the currently visible card, so different-height cards don't force each
 *   other to a common size.
 * - NO overflow clipping. Card shadows/borders extend freely.
 * - Slide transition is VERTICAL: on Next, the incoming card drops in from
 *   above; on Prev, it lifts in from below. Fade + translate layered for
 *   an elegant, un-jumpy movement.
 * ============================================================================
 *
 * PASTE-READY EXAMPLE (see the accompanying JS docblock for a full sample)
 *
 *   <div class="slider-grid" data-slider-grid>
 *     <div class="slider-grid__viewport">
 *       <div class="slider-grid__track">
 *         <div class="slider-grid__slide">
 *           <div class="side-image-card side-image-card-animate">…</div>
 *         </div>
 *         <div class="slider-grid__slide">
 *           <div class="side-image-card side-image-card-bordered gradient-smaragd-aquamarin">…</div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * ============================================================================
 * OPTIONAL LAST-SLIDE JUMP TARGET
 * ============================================================================
 *   <div class="slider-grid" data-slider-grid data-next-target="#pricing">
 *     …slides…
 *   </div>
 *
 *   On the last slide, Next stays visible and smooth-scrolls to `#pricing`
 *   instead of trying to advance.
 * ============================================================================
 */

.slider-grid {
  position: relative;
  width: 100%;
}

/* Viewport — the container whose height animates to match the current
   slide. NO overflow clipping and NO border-radius: those would clip the
   inner card's shadow / border / rounding. The card owns its own visual
   treatment; the slider stays invisible. */
.slider-grid__viewport {
  position: relative;
  width: 100%;
  /* JS writes an inline `height:` in px whenever the active slide
     changes. Longer duration (780ms) with an easeOutExpo curve so the
     resize between differently-sized cards feels like a gentle settle,
     not a snap. Matches the slide-in/out timing below for coherence. */
  transition: height 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-grid__track {
  position: relative;
  width: 100%;
}

/* Slides are STACKED via absolute positioning. Only `.is-active` is
   visible; the others sit at opacity 0, translated 72 px up (default)
   or down (data-direction="prev"). The 72 px travel — up from 32 px in
   the earlier round — is deliberately larger so the vertical motion
   READS as a slide-in rather than a soft fade. Combined with the 780 ms
   easeOutExpo easing (fast start → slow settle) the effect is: card
   drops in decisively, then eases to rest. */
.slider-grid__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-72px);
  transition: opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-grid__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Prev direction: incoming slides start BELOW instead of above. */
.slider-grid[data-direction="prev"] .slider-grid__slide:not(.is-active) {
  transform: translateY(72px);
}

/* Prev / Next round-icon buttons — flush against the wrapper's bottom-left
   and bottom-right corners so their corner-merge radius curls into the
   card corner (Nav Pill Left / Nav Pill Right pattern).

   Round 9 refinement: override `--rib-corner-merge-radius` to match
   `.side-image-card`'s `--radius-lg` (16 px). The atom's default merge
   radius (12 px for size-lg) was designed for basic-card / drawer which
   use --radius-md (8 px). Since our slider hosts side-image-cards
   (radius-lg = 16 px), the button now curls at 16 px too — no visual
   gap at the joint. */
.slider-grid__prev,
.slider-grid__next {
  --rib-corner-merge-radius: var(--radius-lg);
  position: absolute;
  bottom: 0;
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease-out;
}

.slider-grid__prev { left: 0; }
.slider-grid__next { right: 0; }

.slider-grid__prev.is-hidden,
.slider-grid__next.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Reduced-motion: keep the state change but drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .slider-grid__viewport,
  .slider-grid__slide {
    transition: none;
  }
}