/* Home hero vials (rx-hero.js): the real catalog vial renders (hero3d/vial-*.webp) standing on a lit stage.
   One entrance moment on load, then quiet: slow float, a light glint across the glass, depth that follows the mouse. */
.rx-stage {
  --rx-floor: 86%;
  position: absolute; z-index: 1; pointer-events: none;
  perspective: 1100px;
}
.rx-3d-on > .e-con-inner, .rx-3d-on > .elementor-element { position: relative; z-index: 2; }

/* soft spotlight behind the vials */
.rx-stage::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 8%; bottom: 6%;
  background: radial-gradient(50% 55% at 50% 62%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
              radial-gradient(40% 20% at 50% 88%, rgba(122,0,255,.10), rgba(122,0,255,0) 70%);
  opacity: 0; transition: opacity 1.2s ease .1s;
}
.rx-3d-on .rx-stage::before { opacity: 1; }

.rx-vial {
  --w: 21%; --x: 50%; --z: 0; --delay: .15s; --float: 6.5s;
  position: absolute; bottom: calc(100% - var(--rx-floor)); left: var(--x); width: var(--w);
  transform: translateX(-50%); pointer-events: auto; display: block; outline: none;
}
.rx-vial:nth-child(1) { --w: 17.5%; --x: 29%; --z: -1; --delay: .38s; --float: 7.3s; }
.rx-vial:nth-child(3) { --w: 17.5%; --x: 71%; --z: -1; --delay: .5s;  --float: 6.9s; }
.rx-vial:nth-child(2) { z-index: 2; }

/* depth: moved by rx-hero.js (--mx/--my from -1 to 1) */
.rx-vial-tilt {
  display: block; transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx, 0) * (6px + var(--z) * -4px)), calc(var(--my, 0) * 4px), 0)
             rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -3deg));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* entrance: rise out of a soft blur, staggered, middle vial first */
.rx-vial-body {
  display: block; position: relative;
  opacity: 0; transform: translateY(18%); filter: blur(10px);
}
.rx-3d-on .rx-vial-body { animation: rx-rise 1.35s cubic-bezier(.16,.84,.24,1) var(--delay) forwards,
                                     rx-float var(--float) ease-in-out calc(var(--delay) + 1.35s) infinite; }
@keyframes rx-rise { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes rx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2%); } }

.rx-vial img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* light glint sweeping across the glass, clipped to the vial's own shape */
.rx-vial-glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--shape) center / 100% 100% no-repeat; mask: var(--shape) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.15) 52%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: screen;
}
.rx-3d-on .rx-vial-glint { animation: rx-glint 7s ease-in-out calc(var(--delay) + 1.6s) infinite; }
@keyframes rx-glint { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }

/* reflection on the stage floor: a flipped copy right under the vial, faded out quickly */
.rx-vial-reflect {
  position: absolute; left: 0; right: 0; top: 100%; height: 100%; pointer-events: none; opacity: .2;
  -webkit-mask-image: linear-gradient(#000, transparent 24%); mask-image: linear-gradient(#000, transparent 24%);
}
.rx-vial-reflect img { transform: scaleY(-1); }

/* contact shadow */
.rx-vial-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -2.5%; height: 6%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22,48,107,.38), rgba(22,48,107,0));
  opacity: 0; transition: opacity .6s ease, transform .5s ease;
}
.rx-3d-on .rx-vial-shadow { opacity: 1; transition-delay: calc(var(--delay) + .5s); }

/* hover / keyboard focus: lift towards the viewer */
.rx-vial:hover .rx-vial-tilt, .rx-vial:focus-visible .rx-vial-tilt { translate: 0 -3%; }
.rx-vial:hover .rx-vial-shadow { transform: scale(.82); opacity: .7; }
.rx-vial:focus-visible img { outline: 3px solid #e6007e; outline-offset: 6px; border-radius: 14px; }

/* desktop hero: vials on the right half, original slideshow fades out */
.elementor-element-145438f .rx-stage { left: 48%; right: 0; top: 6%; bottom: 0; }
.elementor-element-145438f.rx-3d-on .elementor-background-slideshow { opacity: 0; transition: opacity 1s ease; }
.elementor-element-145438f.rx-3d-on { background: #eef2f8 url(hero3d/stage-desktop.webp) center / cover no-repeat; }
.elementor-element-145438f .rx-vial:nth-child(2) { --w: 27%; }
.elementor-element-145438f .rx-vial { --w: 22.5%; }
.elementor-element-145438f .rx-vial:nth-child(1) { --x: 27%; }
.elementor-element-145438f .rx-vial:nth-child(3) { --x: 73%; }

/* tablet + phone hero: vials under the headline */
.elementor-element-cc79246 .rx-stage { left: 0; right: 0; top: 40%; bottom: 0; --rx-floor: 90%; }
.elementor-element-cc79246 .rx-vial:nth-child(2) { --w: 30%; }
.elementor-element-cc79246 .rx-vial:nth-child(1), .elementor-element-cc79246 .rx-vial:nth-child(3) { --w: 25%; }
.elementor-element-cc79246 .rx-vial:nth-child(1) { --x: 23%; }
.elementor-element-cc79246 .rx-vial:nth-child(3) { --x: 77%; }
.elementor-50 .elementor-element.elementor-element-cc79246.rx-3d-on { background-image: url(hero3d/stage-tablet.webp) !important; }
@media (max-width: 767px) {
  .elementor-element-cc79246 .rx-stage { top: 34%; }
  .elementor-50 .elementor-element.elementor-element-cc79246.rx-3d-on { background-image: url(hero3d/stage-mobile.webp) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rx-3d-on .rx-vial-body { animation: none; opacity: 1; transform: none; filter: none; }
  .rx-3d-on .rx-vial-glint { animation: none; }
  .rx-vial-tilt { transform: none; transition: none; }
}