/* ============================================================
   GPL Master Vial — shared animated hero component
   Used on the homepage hero and every Research File hero.
   "Magnetic levitation" rig: no vertical bob, slow rotation,
   microscopic jitter, glass sheen, independent cap glint.
   ============================================================ */

.rf-hero-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1024/1536;
}
.rf-stage-layer { position: absolute; pointer-events: none; }
.rf-stage-dna {
  left: 0%; top: 0%; width: 29.3%; height: 78.13%;
  background-image: url('../assets/hero-vial/dna.png');
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  animation: rfDriftDNA 14s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rfDriftDNA {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(-4px,6px) rotate(-0.5deg); }
}
.rf-stage-molecules {
  left: 66.41%; top: 0%; width: 33.59%; height: 39.06%;
  background-image: url('../assets/hero-vial/molecules.png');
  background-size: 100% 100%;
  filter: blur(3px);
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
  animation: rfDriftMol 19s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rfDriftMol {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(3px,5px); }
}
.rf-stage-podium {
  left: 0%; top: 71.61%; width: 100%; height: 28.39%;
  background-image: url('../assets/hero-vial/podium.png');
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
}
.rf-stage-podium-scrim {
  left: 0%; top: 71.61%; width: 100%; height: 28.39%;
  background: #000;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
  animation: rfPodiumBreathe 6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rfPodiumBreathe {
  0%,100% { opacity: 0.15; }
  50%     { opacity: 0.22; }
}
.rf-vial-orbit {
  position: absolute;
  left: 14.65%; top: 9.11%; width: 65.43%; height: 78.78%;
  transform-origin: 50% 84%;
  animation: rfVialRotate 28s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes rfVialRotate {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(1.5deg); }
}
.rf-vial-jitter {
  position: relative; width: 100%; height: 100%;
  animation: rfVialJitter 0.6s steps(6) infinite;
}
@keyframes rfVialJitter {
  0%   { transform: translate(0,0); }
  17%  { transform: translate(0.3px,-0.2px); }
  34%  { transform: translate(-0.2px,0.3px); }
  50%  { transform: translate(0.2px,0.2px); }
  67%  { transform: translate(-0.3px,-0.1px); }
  84%  { transform: translate(0.1px,-0.3px); }
  100% { transform: translate(0,0); }
}
.rf-vial-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rf-vial-sheen {
  position: absolute; inset: 0;
  -webkit-mask-image: url('../assets/hero-vial/vial.png');
          mask-image: url('../assets/hero-vial/vial.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  overflow: hidden; mix-blend-mode: screen;
}
.rf-vial-sheen-bar {
  position: absolute; top: -20%; left: -70%;
  width: 30%; height: 140%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 48%, rgba(200,230,245,0.08) 60%, transparent 75%);
  transform: rotate(8deg);
  animation: rfSheenSweep 9s ease-in-out infinite;
}
@keyframes rfSheenSweep {
  0%   { left: -70%; }
  24%  { left: 140%; }
  100% { left: 140%; }
}
.rf-cap-glint {
  position: absolute; left: 40%; top: 4%; width: 20%; height: 7%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.15) 55%, transparent 80%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: rfCapGlint 6.5s ease-in-out infinite;
}
@keyframes rfCapGlint {
  0%,100% { opacity: 0.15; transform: translate(-6px,0); }
  45%     { opacity: 0.75; transform: translate(4px,-1px); }
  60%     { opacity: 0.3;  transform: translate(6px,0); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-stage-dna, .rf-stage-molecules, .rf-stage-podium-scrim,
  .rf-vial-orbit, .rf-vial-jitter, .rf-vial-sheen-bar, .rf-cap-glint {
    animation: none;
  }
}