/* ============================================================
   orbit.css – styling support for the JS-driven 3D orbit system
   All transforms/blur/z-index are applied via orbit.js (rAF loop).
   This file only provides layout positioning and transitions.
   ============================================================ */

/* Container lives inside .bottle-item and fills it.
   No z-index here — removing it prevents .fruit-orbit from forming its own
   stacking context, so .orbit-object z-indexes are evaluated in the same
   context as the bottle image (z-index:100) and can surpass or fall behind it. */
.fruit-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* Each orbiting image is centred at the origin of the container.
   orbit.js applies translate3d + scale to position it in 3D space.
   Opacity starts at 0; orbit.js adds .is-visible to trigger the fade-in.
   FADE_DURATION in orbit.js (400 ms) must match the opacity transition here.
   NOTE: selector uses .fruit-orbit prefix (specificity 0-2-0) to override
   .bottle-item img (0-1-1) which would otherwise clobber position/size. */
.fruit-orbit .orbit-object {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform, filter, opacity;
    opacity: 0;
    transition: filter 0.05s linear, opacity 400ms ease;
}

.fruit-orbit .orbit-object.is-visible {
    opacity: 1;
}

.orbit-object {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center orbiting objects around bottles */
}