/* ============================================================
   carousel.css – overview carousel styling
   All slot transforms/opacity/z-index are applied via carousel.js
   (rAF loop). This file provides the modifier classes, transitions,
   and CSS custom properties that carousel.js relies on.
   ============================================================ */

/* ── Custom properties (appended to :root) ───────────────── */
:root {
  /* Slot scale values (centre / near / far).
     Mirror any changes in CAROUSEL_SLOTS (carousel.js). */
  --carousel-scale-center:  2.00;
  --carousel-scale-near:    1.76;
  --carousel-scale-far:     1.48;
  /* Slot opacity values */
  --carousel-opacity-center: 1.00;
  --carousel-opacity-near:   0.88;
  --carousel-opacity-far:    0.35;
  /* Transition speed for CSS-side carousel animations */
  --carousel-transition: 0.28s ease;
}

/* ── Carousel mode ─────────────────────────────── */

/**
 * When .is-carousel is on #bottleStage:
 *  - The layer becomes absolute again, so the overview carousel belongs to
 *    page 1 and scrolls away with the hero.
 *  - pointer-events: auto on the stage so mousemove fires on empty areas.
 *  - All items are pinned to the same anchor (top:55%, left:50%).
 *    JS applies translateX for slot positioning via inline transform.
 *  - The bottleFloat keyframe is disabled so JS fully controls the transform.
 */
.bottle-stage.is-carousel {
  position: absolute;
  height: 100vh;
  pointer-events: auto;
}

.bottle-stage.is-carousel .bottle-item {
  top:  55%;
  left: 50%;
  animation: none !important;
  will-change: auto;
  transition:
    filter   var(--carousel-transition);
}