/* ============================================================
   RESEARCH ONLY — Hero vial stage
   3 glass ampoules in an "N", spinning, on black.
   ============================================================ */
:root { --hero-speed: 1; }

.hero {
  position: relative;
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
  min-height: clamp(620px, 92vh, 1000px);
  display: flex;
  align-items: center;
}
body[data-hero-mode="light"] .hero { background: var(--paper); color: var(--ink); }

/* radial glow behind vials */
.hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 50% 46%, oklch(0.8 var(--accent-c) var(--accent-h) / 0.16), transparent 70%),
    radial-gradient(60% 70% at 50% 50%, oklch(0.3 0.03 var(--accent-h) / 0.5), transparent 75%);
}
body[data-hero-mode="light"] .hero__glow {
  background: radial-gradient(45% 55% at 50% 46%, oklch(0.85 var(--accent-c) var(--accent-h) / 0.22), transparent 72%);
}

/* full-bleed video background */
.hero__fallback { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, oklch(0.12 0.02 var(--accent-h) / 0.92) 0%, oklch(0.12 0.02 var(--accent-h) / 0.7) 38%, oklch(0.12 0.02 var(--accent-h) / 0.25) 70%, transparent 100%),
    linear-gradient(to top, oklch(0.12 0.02 var(--accent-h) / 0.85), transparent 45%);
}
body[data-hero-mode="light"] .hero__veil {
  background:
    linear-gradient(90deg, oklch(0.98 0.004 var(--accent-h) / 0.92) 0%, oklch(0.98 0.004 var(--accent-h) / 0.72) 40%, oklch(0.98 0.004 var(--accent-h) / 0.2) 72%, transparent 100%),
    linear-gradient(to top, oklch(0.98 0.004 var(--accent-h) / 0.8), transparent 45%);
}
@media (max-width: 760px) {
  .hero__veil {
    background:
      linear-gradient(to top, oklch(0.12 0.02 var(--accent-h) / 0.94) 8%, oklch(0.12 0.02 var(--accent-h) / 0.5) 55%, oklch(0.12 0.02 var(--accent-h) / 0.55) 100%);
  }
  body[data-hero-mode="light"] .hero__veil {
    background: linear-gradient(to top, oklch(0.98 0.004 var(--accent-h) / 0.92) 8%, oklch(0.98 0.004 var(--accent-h) / 0.55) 55%, oklch(0.98 0.004 var(--accent-h) / 0.6) 100%);
  }
}

/* stage holding vials */
.vial-stage {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1400px;
  pointer-events: none;
}
.vial-cluster {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1px; height: 1px;
  transform-style: preserve-3d;
}
@media (min-width: 900px) {
  .hero h1, .hero__sub, .hero__kicker, .hero__cta { max-width: 640px; }
}

/* ------- single ampoule ------- */
.vial {
  position: absolute;
  width: var(--vw, 88px);
  height: var(--vh, 320px);
  left: calc(var(--x, 0px) - var(--vw, 88px) / 2);
  top: calc(var(--y, 0px) - var(--vh, 320px) / 2);
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  animation: vialFloat calc(7s / var(--hero-speed)) var(--ease) infinite alternate;
  animation-delay: var(--delay, 0s);
}
.vial.bg {
  filter: blur(13px) brightness(0.8);
  opacity: 0.55;
  animation: vialFloat calc(11s / var(--hero-speed)) ease-in-out infinite alternate;
}
@keyframes vialFloat {
  0%   { transform: rotate(var(--tilt,0deg)) translateY(0); }
  100% { transform: rotate(var(--tilt,0deg)) translateY(-22px); }
}

/* shared glass piece base */
.vp { position: absolute; left: 50%; transform: translateX(-50%); overflow: hidden; }
.vp::before { /* moving specular sweep = rotation cue */
  content: ""; position: absolute; top: -10%; bottom: -10%;
  width: 36%; left: -40%;
  background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.55), transparent);
  filter: blur(3px);
  animation: spin calc(3.4s / var(--hero-speed)) linear infinite;
  animation-delay: var(--spin-delay, 0s);
}
@keyframes spin { 0% { left: -45%; } 100% { left: 130%; } }

/* body (main cylinder) */
.vial__body {
  bottom: 0; width: 100%; height: 70%;
  border-radius: 14px 14px 26px 26px / 10px 10px 34px 34px;
  background:
    linear-gradient(90deg,
      hsla(0,0%,100%,0.55) 0%, hsla(0,0%,100%,0.08) 7%,
      hsla(0,0%,100%,0.0) 20%, hsla(0,0%,100%,0.03) 50%,
      hsla(0,0%,100%,0.0) 80%, hsla(0,0%,100%,0.10) 92%,
      hsla(0,0%,100%,0.6) 100%);
  box-shadow:
    inset 2px 0 6px hsla(0,0%,100%,0.18),
    inset -2px 0 6px hsla(0,0%,100%,0.18),
    inset 0 -18px 30px hsla(0,0%,0%,0.5);
}
body[data-hero-mode="light"] .vial__body {
  background:
    linear-gradient(90deg,
      hsla(160,15%,55%,0.5) 0%, hsla(0,0%,100%,0.5) 16%,
      hsla(0,0%,100%,0.05) 42%, hsla(0,0%,100%,0.4) 62%,
      hsla(160,15%,60%,0.3) 86%, hsla(160,18%,45%,0.5) 100%);
  box-shadow: inset 0 -16px 26px hsla(160,12%,40%,0.25), inset 0 2px 8px #fff;
}

/* liquid fill for the labelled vial */
.vial__liquid {
  position: absolute; left: 6%; right: 6%; bottom: 4%; height: 80%;
  border-radius: 8px 8px 20px 20px;
  background: linear-gradient(90deg,
    oklch(0.30 0.05 var(--accent-h)) 0%,
    oklch(0.5 0.08 var(--accent-h)) 26%,
    oklch(0.62 0.09 var(--accent-h)) 42%,
    oklch(0.34 0.06 var(--accent-h)) 70%,
    oklch(0.22 0.04 var(--accent-h)) 100%);
  box-shadow: inset 0 6px 12px hsla(0,0%,100%,0.18), inset 0 -10px 20px rgba(0,0,0,0.5);
}
.vial__liquid::after { /* meniscus */
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 6px;
  background: oklch(0.7 0.06 var(--accent-h) / 0.6); border-radius: 50%;
}

/* shoulder (trapezoid neck→body) */
.vial__shoulder {
  width: 100%; height: 12%; bottom: 70%;
  clip-path: polygon(50% 0, 50% 0, 78% 100%, 22% 100%);
  background: linear-gradient(90deg, hsla(0,0%,100%,0.5), hsla(0,0%,100%,0.04) 30%, hsla(0,0%,100%,0.04) 70%, hsla(0,0%,100%,0.5));
}
/* neck */
.vial__neck {
  width: 30%; height: 16%; bottom: 82%;
  border-radius: 4px;
  background: linear-gradient(90deg, hsla(0,0%,100%,0.5), hsla(0,0%,100%,0.05) 40%, hsla(0,0%,100%,0.05) 60%, hsla(0,0%,100%,0.5));
}
/* tip */
.vial__tip {
  width: 18%; height: 8%; bottom: 96%;
  border-radius: 50% 50% 30% 30%;
  background: radial-gradient(circle at 35% 30%, hsla(0,0%,100%,0.85), hsla(0,0%,100%,0.15) 60%, transparent);
}
/* base highlight */
.vial__floor {
  position: absolute; left: 14%; right: 14%; bottom: 1.5%; height: 5%;
  border-radius: 50%;
  background: hsla(0,0%,100%,0.25); filter: blur(2px);
}

/* wrapping label */
.vial__label {
  position: absolute; bottom: 12%; left: 0; right: 0; height: 44%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.vial__label .lbl-track {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  animation: labelWrap calc(3.4s / var(--hero-speed)) linear infinite;
  animation-delay: var(--spin-delay, 0s);
}
.vial__label .lbl-word {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.34em; font-size: 0.7rem; color: #fff;
  text-transform: uppercase; white-space: nowrap;
}
.vial__label .lbl-mark { width: 18px; height: 18px; color: var(--green); }
@keyframes labelWrap { 0% { transform: translateX(110%); } 100% { transform: translateX(-110%); } }

/* hero content */
.hero__content { position: relative; z-index: 3; width: 100%; pointer-events: none; }
.hero__content .wrap > * { pointer-events: auto; }
.hero__kicker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.92; letter-spacing: -0.04em; max-width: 16ch; }
.hero__sub { max-width: 42ch; margin-top: 22px; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--on-dark-mut); }
body[data-hero-mode="light"] .hero__sub { color: var(--muted); }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-mut);
}
body[data-hero-mode="light"] .hero__scroll { color: var(--muted); }
.hero__scroll .line { width: 1px; height: 40px; background: currentColor; opacity: 0.4; animation: scrollLine 2s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0%,100% { transform: scaleY(0.3); opacity: 0.2; } 50% { transform: scaleY(1); opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  .vial, .vial__label .lbl-track, .vp::before, .hero__scroll .line { animation: none !important; }
}

@media (max-width: 760px) {
  .hero { min-height: 90vh; align-items: flex-start; }
  .hero__content { margin-top: clamp(90px, 18vh, 150px); }
  .vial { --vw: 56px; --vh: 208px; }
  .vial-cluster { top: 66%; left: 58%; }
  .vial.bg { opacity: 0.32; }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
}