/* Decorative fruit-slice motion layer.
   Applies only to the homepage hero, the homepage flavour panels and the
   product-page hero. Everything here is presentation: the layer is injected by
   fruit-motion.js, is aria-hidden, and never receives pointer events, so the
   page reads and behaves identically without it. */

.fruit-field {
  position: absolute;
  inset: -4% -8%;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

/* The bottle sits inside the field, not on top of it. */
.fruit-field[data-layer="back"] { z-index: 0; }
.fruit-field[data-layer="front"] { z-index: 2; }
/* The hero and product bottles are already positioned; only the panel bottle
   needs it, so their own layout model is left alone. */
.has-fruit-field > img { z-index: 1; }
.panel-art.has-fruit-field > img { position: relative; }

/* The hero and panel bottles are rotated by their own scroll handlers. Holding
   the field upright keeps the fruit floating independently of the bottle tilt. */
.panel-art > .fruit-field { transform: rotate(calc(-1 * var(--bottle-angle, -5deg))); }

.fruit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  /* Percentage margins resolve against the field's width, which is also what
     --size is a share of, so this keeps each slice centred on its orbit point. */
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.6);
  transition: opacity .9s var(--ease, cubic-bezier(.22,.61,.36,1)) var(--enter-delay, 0s),
              transform .9s var(--ease, cubic-bezier(.22,.61,.36,1)) var(--enter-delay, 0s);
  will-change: transform;
}

/* Raised specificity on purpose: `.panel-art img` and `.detail-hero-bottle img`
   both match these too, and would otherwise impose the bottle's own position,
   rotation and reveal opacity on every slice. */
.fruit-field .fruit img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: none;
  opacity: var(--depth-opacity, 1);
  /* Stacked zero-offset shadows act as a soft cream rim, so a red berry still
     separates from the red hero behind it. The last one is the cast shadow,
     which is what sells the slice as floating above the page. */
  filter:
    blur(var(--blur, 0px))
    drop-shadow(0 0 1px rgba(255, 249, 233, .85))
    drop-shadow(0 0 2px rgba(255, 249, 233, .55))
    drop-shadow(0 14px 18px rgba(48, 10, 24, .45));
  animation: fruit-spin var(--spin, 26s) linear infinite;
  animation-direction: var(--spin-direction, normal);
}

/* Rotating a blurred element re-runs the filter every frame. The distant layer
   is the blurred one and reads no rotation anyway, so it holds a fixed tilt and
   only drifts — which stays on the compositor. */
.fruit-field[data-layer="back"] .fruit img {
  animation: none;
  rotate: var(--tilt, 0deg);
}

/* Once the section is in view each slice settles onto its orbit. The parallax
   offsets are written by fruit-motion.js as --px / --py / --pz. */
.fruit-field.is-live .fruit {
  opacity: 1;
  transform:
    translate3d(
      calc(var(--px, 0px) * var(--depth)),
      calc(var(--py, 0px) * var(--depth)),
      var(--z)
    )
    scale(1);
  animation: fruit-float var(--float, 9s) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--float-delay, 0s) infinite alternate;
}

@keyframes fruit-float {
  from { translate: 0 0; }
  to   { translate: var(--drift-x, 10px) var(--drift-y, -22px); }
}

@keyframes fruit-spin {
  from { rotate: var(--tilt, 0deg); }
  to   { rotate: calc(var(--tilt, 0deg) + 360deg); }
}

/* The product hero is a single tall column, so the slices hug its edges. */
.detail-hero-bottle > .fruit-field { inset: -4% -14%; }

@media (max-width: 1000px) {
  .fruit-field { inset: -4% -8%; }
}

@media (max-width: 700px) {
  /* Fewer, smaller slices on a phone: the bottle has to stay the subject. */
  .fruit-field { inset: -2% -4%; perspective: 600px; }
  .fruit { width: calc(var(--size) * .8);
           margin: calc(var(--size) * -.4) 0 0 calc(var(--size) * -.4); }
  .fruit[data-rank="4"], .fruit[data-rank="5"], .fruit[data-rank="6"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the composition, drop the movement. */
  .fruit, .fruit-field.is-live .fruit {
    transition: none;
    animation: none;
    opacity: 1;
    transform: translate3d(0, 0, var(--z)) scale(1);
  }
  .fruit-field .fruit img { animation: none; rotate: var(--tilt, 0deg); }
}