/* Independent depth planes, matching the immersive concept's traveler and stamp. */
.lineup-display{width:100%;max-width:560px;justify-self:end;min-width:0}
.stage{max-width:none;perspective:1100px;perspective-origin:50% 48%;background:none;box-shadow:none;isolation:isolate;touch-action:pan-y;--shadow-x:0px;--shadow-y:15px;--shadow-blur:13px;--light-x:50%;--light-y:40%;--shine:.08}
.stage-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-2deg) rotateY(-3deg);will-change:transform}
.stage[data-visual="logo"] .stage-scene{pointer-events:none;z-index:1}
.stage[data-visual="logo"] .product-layer,.stage[data-visual="logo"] .stage-floor{display:none}
.logo-visual{position:absolute;inset:0;pointer-events:none;z-index:0}
.logo-visual canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.logo-gl{opacity:0}
.logo-dither{image-rendering:pixelated;filter:drop-shadow(var(--logo-shadow-x,0px) var(--logo-shadow-y,18px) var(--logo-shadow-blur,14px) rgba(8,5,32,.38))}
.logo-visual[data-pipeline="gpu"] .logo-gl{opacity:1;filter:drop-shadow(var(--logo-shadow-x,0px) var(--logo-shadow-y,18px) var(--logo-shadow-blur,14px) rgba(8,5,32,.38))}
.logo-visual[data-pipeline="gpu"] .logo-dither{display:none}
.day .logo-visual[data-pipeline="gpu"] .logo-gl{filter:brightness(.65) saturate(1.15) drop-shadow(var(--logo-shadow-x,0px) var(--logo-shadow-y,18px) var(--logo-shadow-blur,14px) rgba(27,29,74,.25))}
.stage[data-logo-style="halftone"] .logo-dither{image-rendering:auto}
.stage[data-logo-quality="refined"] .logo-dither{image-rendering:auto}
.day .stage[data-logo-quality="refined"] .logo-dither{filter:brightness(.65) saturate(1.15) drop-shadow(var(--logo-shadow-x,0px) var(--logo-shadow-y,18px) var(--logo-shadow-blur,14px) rgba(27,29,74,.25))}
.logo-fallback{position:absolute;left:28%;top:24%;width:44%;height:52%;object-fit:contain}
.logo-interaction{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;border-radius:26px;padding:0;background:transparent;cursor:pointer;touch-action:pan-y}
.logo-interaction:focus-visible{outline:2px solid var(--accent-hi);outline-offset:4px}
.logo-interaction:disabled{cursor:default}
.stage[data-visual="products"] .logo-visual,.stage[data-visual="products"] .logo-interaction{display:none}
.stage-floor{position:absolute;left:9%;right:9%;bottom:14%;height:3%;border-radius:50%;background:rgba(10,6,50,.3);filter:blur(12px);transform:translateZ(2px);pointer-events:none}
.product-layer{position:absolute;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.product-layer img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(8,5,32,.38))}
.product-layer.bottle{left:4%;bottom:14%;width:39%;height:68%;transform:translateZ(58px)}
.product-layer.dropper{left:39%;bottom:12%;width:24%;height:49%;transform:translateZ(90px)}
.product-layer.carton{left:59%;bottom:15%;width:35%;height:71%;transform:translateZ(32px)}
.product-layer.complete{left:5%;right:5%;top:17%;bottom:12%;transform:translateZ(66px)}
.stage [hidden]{display:none!important}
.stage .fc{
  --pill-face-top:#FFFFFF;--pill-face-bottom:#ECECF6;
  --pill-edge-light:#D5D2EC;--pill-edge-mid:#B5B2D0;--pill-edge-dark:#777498;
  --pill-bevel:rgba(255,255,255,.98);--pill-bevel-bottom:rgba(74,66,120,.22);
  animation:none;pointer-events:none;will-change:transform;
  transform:translateZ(110px) rotateX(8deg) rotateY(-5deg);
  transform-style:preserve-3d;backface-visibility:hidden;
  padding:0;background:none;box-shadow:none;
}
/* Depth specimens: hard lip + lit bevel + separate contact and cast shadows.
   Five opaque slices continue the rounded edge into real CSS depth. Keep the
   outer pill free of filters/opacity/overflow that would flatten its children. */
.pill-edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(var(--pill-light-angle,145deg),var(--pill-edge-light),var(--pill-edge-mid) 46%,var(--pill-edge-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 0 var(--pill-edge-dark);
  transform:translateZ(calc(var(--pill-step,2px) * -1));
}
.pill-edge:nth-child(2){transform:translateZ(calc(var(--pill-step,2px) * -2))}
.pill-edge:nth-child(3){transform:translateZ(calc(var(--pill-step,2px) * -3))}
.pill-edge:nth-child(4){transform:translateZ(calc(var(--pill-step,2px) * -4))}
.pill-edge:nth-child(5){
  transform:translateZ(calc(var(--pill-step,2px) * -5));
  box-shadow:0 1px 0 var(--pill-edge-dark),0 2px 3px rgba(10,6,50,.3),var(--pill-shadow-x,1px) var(--pill-shadow-y,10px) var(--pill-shadow-blur,19px) -5px rgba(10,6,50,.42);
}
.pill-face{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 7px;border-radius:inherit;transform:translateZ(0);
  background:linear-gradient(var(--pill-light-angle,145deg),var(--pill-face-top),var(--pill-face-bottom));
  box-shadow:inset 0 1.5px 0 var(--pill-bevel),inset 0 -1.5px 0 var(--pill-bevel-bottom),inset 0 0 0 1px rgba(27,29,74,.09),0 1px 0 var(--pill-edge-light);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.pill-face::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at var(--light-x,40%) var(--light-y,25%),rgba(255,255,255,.2),transparent 72%);
}
.stage .fc.now{
  --pill-face-top:#7976FF;--pill-face-bottom:#4F46E5;
  --pill-edge-light:#7772E6;--pill-edge-mid:#4A31C8;--pill-edge-dark:#302481;
  --pill-bevel:rgba(255,255,255,.48);--pill-bevel-bottom:rgba(33,20,112,.42);
}
.stage .fc.now .pill-face{text-shadow:0 1px 1px rgba(27,20,92,.35)}
.stage .fc.done i{background:linear-gradient(150deg,#F4FCF8,var(--ok-bg));box-shadow:inset 0 1px 2px rgba(23,123,87,.18),inset 0 0 0 1px var(--ok-line),0 1px 0 #FFF}
.stage .fc.now i{box-shadow:inset 0 1px 3px rgba(27,20,92,.3),0 1px 0 rgba(255,255,255,.25)}
.stage .fc.next i{background:rgba(213,210,236,.15);box-shadow:inset 0 1px 2px rgba(27,29,74,.14),inset 0 0 0 1px var(--line2),0 1px 0 #FFF}
.stage .fc.f1{left:5%;top:7%}.stage .fc.f2{right:9%;top:17%}
.stage .fc.f3{left:5%;bottom:4.5%}.stage .fc.f4{right:7%;bottom:4.5%}
.stage .fc.now i::before{animation:none}
.stage:is([data-motion="paused"],[data-motion="reduced"]) :is(.stage-scene,.product-layer,.fc,.logo-visual){will-change:auto}
.motion-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:64px 3px 0;color:var(--hm);font:400 10px/1.4 var(--mono);letter-spacing:.04em}
.motion-caption .touch-hint{display:none}
.motion-toggle{appearance:none;font:inherit;color:var(--hm);background:transparent;border:0;padding:8px 0 8px 12px;min-height:44px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;flex-shrink:0}
.motion-toggle:hover{color:var(--hf)}
.motion-toggle:focus-visible{outline:2px solid var(--accent-hi);outline-offset:4px;border-radius:4px}
.motion-toggle:disabled{opacity:.7;cursor:default}
.motion-toggle .pause-symbol{font-size:13px;letter-spacing:-2px}
@media(max-width:980px){.lineup-display{justify-self:start}}
@media(min-width:981px) and (max-width:1200px){
  .stage .fc{font-size:10.5px}
  .pill-face{padding:5px 9px 5px 5px;gap:6px}
  .stage .fc i{width:20px;height:20px}
}
@media(max-width:560px){
  .stage{perspective:950px}
  .stage .fc{font-size:10px}
  .pill-face{padding:5px 9px 5px 5px;gap:6px}
  .stage .fc i{width:19px;height:19px}
  .stage .fc.f1{left:1%;top:6%}.stage .fc.f2{right:1%;top:21%}
  .stage .fc.f3{left:1%;bottom:0}.stage .fc.f4{right:1%;bottom:11%}
  .motion-caption{margin-top:16px;font-size:9px;gap:8px}
  .product-layer.bottle{left:5%;width:36%;height:64%}
  .product-layer.carton{left:58%;width:34%;height:67%}
}
@media(hover:none),(pointer:coarse){.motion-caption .pointer-hint{display:none}.motion-caption .touch-hint{display:inline}}
@media(max-width:400px){
  .stage .fc.f4{bottom:-17%}
  .stage:is([data-logo-style="halftone"],[data-logo-style="mosaic"]) .fc.f3{bottom:16%}
  .stage:is([data-logo-style="halftone"],[data-logo-style="mosaic"]) .fc.f4{bottom:-3%}
  .motion-caption{margin-top:64px}
}
@media(prefers-reduced-motion:reduce){.motion-caption .pointer-hint,.motion-caption .touch-hint{display:none}}
/* Quiet caption: the hint line is gone and the pause control takes no space and stays invisible
   to the mouse. It still exists for keyboard and screen-reader users: it appears when it receives
   keyboard focus, and stays visible while motion is paused so the state can be undone. */
.hero .motion-caption.quiet{position:relative;height:0;margin:0;justify-content:flex-end}
.hero .motion-caption.quiet .motion-toggle{position:absolute;right:0;top:10px;opacity:0;pointer-events:none;padding:8px 14px;border-radius:999px;background:var(--hpanel);box-shadow:inset 0 0 0 1px var(--hl);transition:opacity .2s}
.hero .motion-caption.quiet .motion-toggle:focus-visible,.hero .motion-caption.quiet .motion-toggle[aria-pressed="true"]:not(:disabled){opacity:1;pointer-events:auto}