.age-gate{position:fixed;inset:0;z-index:10001;background:#080c10f7;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.age-gate-box{text-align:center;max-width:360px;padding:2.5rem 2rem;border:1px solid rgba(57,255,20,.12);border-radius:8px;background:#0c1118e6}.age-gate-logo{font-family:Inter,Inter,Impact,sans-serif;font-size:1.8rem;font-weight:900;color:#e8f4f8;letter-spacing:.04em;margin-bottom:1.2rem}.age-gate-logo span{color:#39ff14}.age-gate-title{font-family:Inter,Inter,system-ui,sans-serif;font-size:1rem;font-weight:700;color:#e8f4f8;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 .6rem}.age-gate-text{font-family:Inter,system-ui,sans-serif;font-size:.85rem;color:#e8f4f88c;margin:0 0 1.5rem;line-height:1.5}.age-gate-btn{display:block;width:100%;padding:.75rem 1.5rem;background:#39ff14;color:#0c1118;font-family:Inter,Inter,system-ui,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:none;border-radius:4px;cursor:pointer;transition:background .2s,box-shadow .2s}.age-gate-btn:hover{background:#45ff2a;box-shadow:0 0 20px #39ff144d}.age-gate-exit{display:inline-block;margin-top:1rem;font-family:Inter,system-ui,sans-serif;font-size:.75rem;color:#e8f4f859;text-decoration:none;letter-spacing:.5px;transition:color .2s}.age-gate-exit:hover{color:#e8f4f899}.age-gate-country-grid{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.age-country-btn{display:flex;align-items:center;gap:.75rem;width:100%;padding:.65rem 1rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#e8f4f8;cursor:pointer;transition:all .2s ease;font-family:Inter,system-ui,sans-serif;font-size:.85rem;text-align:left}.age-country-btn:hover{background:#39ff140f;border-color:#39ff1440}.age-country-btn.active{background:#39ff141a;border-color:#39ff1480;box-shadow:0 0 12px #39ff1414}.age-country-flag{display:flex;align-items:center;line-height:1}.age-country-flag img{border-radius:2px}.age-country-label{flex:1;font-weight:500}.age-country-cur{font-family:Inter,Inter,system-ui,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1px;color:#39ff14b3;text-transform:uppercase}.age-gate-disclaimer{display:flex;align-items:flex-start;gap:.6rem;padding:.75rem .85rem;margin-bottom:1.25rem;background:#ffb4000f;border:1px solid rgba(255,180,0,.15);border-radius:6px;text-align:left}.age-disclaimer-icon{width:18px;height:18px;flex-shrink:0;color:#ffb400b3;margin-top:1px}.age-gate-disclaimer p{margin:0;font-family:Inter,system-ui,sans-serif;font-size:.72rem;line-height:1.5;color:#e8f4f880}.age-gate-disclaimer strong{color:#ffb400d9}.age-gate-disclaimer em{font-style:italic}.intro-overlay{position:fixed;inset:0;z-index:10002;background:#080c10;display:flex;align-items:center;justify-content:center;overflow:hidden;will-change:transform,opacity;touch-action:none;overscroll-behavior:none}.intro-overlay canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}body.intro-active{overflow:hidden!important;height:100dvh!important;width:100%!important;touch-action:none;overscroll-behavior:none}.intro-skip{position:fixed;bottom:max(1rem,env(safe-area-inset-bottom,0px) + 1rem);right:max(1rem,env(safe-area-inset-right,0px) + 1rem);z-index:10003;background:none;border:1px solid rgba(255,255,255,.15);color:#fff6;font-family:Inter,Inter,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.5rem 1.25rem;cursor:pointer;border-radius:3px;transition:color .2s,border-color .2s}.intro-skip:hover{color:#ffffffb3;border-color:#ffffff59}.loader-screen{position:fixed;inset:0;z-index:9998;background:#080c10;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease-out;touch-action:none;overscroll-behavior:none}.loader-screen.active{opacity:1;pointer-events:auto}.loader-screen.fade-out{opacity:0!important;pointer-events:none}.loader-logo{font-family:Inter,Inter,Impact,sans-serif;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;color:#e8f4f8;letter-spacing:.04em;margin-bottom:1.5rem;animation:loaderPulse 2s ease-in-out infinite}.loader-logo span{color:#39ff14}.loader-countdown{font-family:Inter,Inter,Impact,sans-serif;font-size:clamp(1.75rem,5vw,3rem);font-weight:900;color:#39ff14;letter-spacing:.05em;margin:.5rem 0;text-shadow:0 0 20px rgba(57,255,20,.5),0 0 40px rgba(57,255,20,.2);animation:countdownPulse 1s ease-in-out infinite;min-height:4.5rem;display:flex;align-items:center;justify-content:center}@keyframes countdownPulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}.loader-spinner{width:32px;height:32px;border:2px solid rgba(57,255,20,.15);border-top-color:#39ff14;border-radius:50%;animation:loaderSpin .8s linear infinite}@keyframes loaderPulse{0%,to{opacity:.7;text-shadow:0 0 8px rgba(57,255,20,.2)}50%{opacity:1;text-shadow:0 0 20px rgba(57,255,20,.4)}}@keyframes loaderSpin{to{transform:rotate(360deg)}}.intro-overlay:before{content:"LAB SEQUENCE\aVial Activation";position:fixed;top:max(1rem,env(safe-area-inset-top,0px) + 1rem);left:max(1rem,env(safe-area-inset-left,0px) + 1rem);z-index:10003;white-space:pre;line-height:1.45;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e8f4f8e6;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(232,244,248,.18);background:linear-gradient(135deg,#080c10bf,#080c1073);box-shadow:0 16px 45px #00000059,inset 0 1px #ffffff14;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.intro-overlay:after{content:"";position:fixed;left:max(1rem,env(safe-area-inset-left,0px) + 1rem);right:max(1rem,env(safe-area-inset-right,0px) + 1rem);bottom:max(1rem,env(safe-area-inset-bottom,0px) + 1rem);z-index:10003;height:3px;border-radius:999px;background:linear-gradient(90deg,#00ff88e6,#00e5ffe6,#e8f4f8b3);transform-origin:left center;animation:introTimeline 8.5s linear both;box-shadow:0 0 18px #00ff8859}.intro-skip{top:max(1rem,env(safe-area-inset-top,0px) + 1rem)!important;right:max(1rem,env(safe-area-inset-right,0px) + 1rem)!important;bottom:auto!important;background:#080c108f!important;border:1px solid rgba(232,244,248,.26)!important;color:#e8f4f8e0!important;border-radius:999px!important;padding:.56rem 1rem!important;letter-spacing:.15em!important;font-size:.68rem!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;box-shadow:0 14px 30px #00000047,inset 0 1px #ffffff1f}.intro-skip:hover{color:#fff!important;border-color:#00ff88ad!important;box-shadow:0 0 0 1px #00ff8838,0 10px 28px #00000057!important}.intro-skip:focus-visible{outline:2px solid rgba(0,255,136,.78);outline-offset:2px}.intro-overlay{background:radial-gradient(70% 60% at 20% 10%,rgba(0,255,136,.12),transparent 60%),radial-gradient(50% 55% at 78% 14%,rgba(0,229,255,.12),transparent 62%),linear-gradient(180deg,#06090d,#090f14)!important}.intro-overlay canvas{filter:saturate(108%) contrast(105%)}@media(max-width:767px){.intro-overlay:before{font-size:.62rem;letter-spacing:.12em;padding:.62rem .78rem;line-height:1.35}.intro-overlay:after{height:2px}.intro-skip{font-size:.62rem!important;padding:.52rem .84rem!important}}@keyframes introTimeline{0%{transform:scaleX(0);opacity:.5}12%{opacity:1}92%{opacity:1}to{transform:scaleX(1);opacity:.82}}

/* EU language picker (inside age gate) */
.age-lang-modal{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:1rem;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.age-lang-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.age-lang-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:8px}
.age-lang-modal__panel{position:relative;z-index:1;width:100%;max-width:380px;padding:1.35rem 1.25rem 1.15rem;border-radius:10px;border:1px solid rgba(57,255,20,.2);background:#0e141cf2;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.age-lang-modal__title{font-family:Inter,system-ui,sans-serif;font-size:.95rem;font-weight:700;color:#e8f4f8;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .45rem}
.age-lang-modal__subtitle{font-family:Inter,system-ui,sans-serif;font-size:.78rem;color:#e8f4f8a6;line-height:1.45;margin:0 0 1rem}
.age-lang-modal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.85rem}
.age-lang-modal__btn{padding:.55rem .65rem;font-family:Inter,system-ui,sans-serif;font-size:.8rem;font-weight:600;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#e8f4f8;cursor:pointer;transition:background .2s,border-color .2s}
.age-lang-modal__btn:hover{background:#39ff1414;border-color:#39ff1466}
.age-lang-modal__close{display:block;width:100%;padding:.5rem;font-family:Inter,system-ui,sans-serif;font-size:.72rem;color:#e8f4f880;background:transparent;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.age-lang-modal__close:hover{color:#e8f4f8c0}
@media(max-width:420px){.age-lang-modal__grid{grid-template-columns:1fr 1fr}}
@media(max-width:320px){.age-lang-modal__grid{grid-template-columns:1fr}}

/* ── Age-gate "slide to confirm age" widget ───────────────────────────── */
.age-slider {
  position: relative;
  width: 100%;
  height: 56px;
  margin: 0 0 0.85rem;
  border-radius: 999px;
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(57,255,20,0.10), transparent 60%),
    rgba(8,14,20,0.65);
  border: 1px solid rgba(57,255,20,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 24px rgba(57,255,20,0.06),
    0 0 18px rgba(57,255,20,0.10);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.age-slider:focus-visible {
  outline: 2px solid #39ff14;
  outline-offset: 3px;
}
.age-slider-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg,
    rgba(57,255,20,0.18) 0%,
    rgba(0,229,255,0.14) 70%,
    rgba(57,255,20,0.30) 100%);
  border-radius: inherit;
  pointer-events: none;
  transition: width .28s cubic-bezier(.2,.7,.2,1);
}
.age-slider.is-dragging .age-slider-fill,
.age-slider.is-dragging .age-slider-thumb,
.age-slider.is-dragging .age-slider-text--filled {
  transition: none;
}
.age-slider-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(232,244,248,0.55);
  pointer-events: none;
  white-space: nowrap;
  padding-left: 32px;
}
.age-slider-text--filled {
  color: #06120a;
  -webkit-text-fill-color: #06120a;
  text-shadow: 0 0 6px rgba(57,255,20,0.5);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .28s cubic-bezier(.2,.7,.2,1);
}
.age-slider-thumb {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 30% 30%, #b6ff8a 0%, #39ff14 38%, #00cc6a 100%);
  color: #06120a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -8px 14px rgba(0,80,40,0.35),
    0 0 18px rgba(57,255,20,0.55),
    0 6px 14px rgba(0,0,0,0.35);
  transition: left .28s cubic-bezier(.2,.7,.2,1), transform .15s, box-shadow .15s;
}
.age-slider-thumb:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -8px 14px rgba(0,80,40,0.35),
    0 0 26px rgba(57,255,20,0.75),
    0 6px 14px rgba(0,0,0,0.35);
}
.age-slider-thumb:active,
.age-slider.is-dragging .age-slider-thumb {
  cursor: grabbing;
  transform: translateY(-50%) scale(0.97);
}
.age-slider-thumb svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,80,40,0.4));
}
.age-slider.is-confirmed {
  border-color: rgba(57,255,20,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 28px rgba(57,255,20,0.5);
}
.age-slider.is-confirmed .age-slider-thumb {
  background: radial-gradient(120% 90% at 30% 30%, #ffffff 0%, #6fff7a 38%, #00ffaa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 30px rgba(57,255,20,0.95);
}
.age-slider.is-confirmed .age-slider-text { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) {
  .age-slider-thumb,
  .age-slider-fill,
  .age-slider-text--filled {
    transition: none !important;
  }
}

/* ── Age-gate shutter reveal: doorway-parting + horizontal shutters ────── */
/* Stacked over the age-gate on "Continue"; parts in a choreographed flow: */
/* marquee glyphs fade in (120ms) → bands retract (720ms power4.inOut)     */
/* → doors part sideways (900ms, overlapped by 200ms) → all removed.       */
.age-gate-shutter {
  position: fixed;
  inset: 0;
  z-index: 10010;
  pointer-events: none;
  isolation: isolate;
}
.age-gate-shutter__band {
  position: absolute;
  left: 0;
  right: 0;
  background: #06090f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  will-change: transform, clip-path;
}
.age-gate-shutter__band--top    { top: 0;    height: 34%; transform-origin: top;    }
.age-gate-shutter__band--bottom { bottom: 0; height: 34%; transform-origin: bottom; }
.age-gate-shutter__door {
  position: absolute;
  top: 34%;
  bottom: 34%;
  width: 50%;
  background: #06090f;
  display: flex;
  align-items: center;
  overflow: clip;
  will-change: transform;
}
.age-gate-shutter__door--left  { left: 0;   border-right: 1px solid rgba(57,255,20,0.18); justify-content: flex-end; }
.age-gate-shutter__door--right { right: 0;  border-left:  1px solid rgba(57,255,20,0.18); justify-content: flex-start; }

.age-gate-shutter__marquee {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(0.68rem, 1.6vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #e8f4f8;
  text-transform: uppercase;
  mix-blend-mode: difference;
  opacity: 0;
  white-space: nowrap;
  padding: 0 2rem;
  transition: opacity 220ms ease-out;
}
.age-gate-shutter__marquee--top    { animation: ageGateMarqueeL 8s linear infinite; }
.age-gate-shutter__marquee--bottom { animation: ageGateMarqueeR 8s linear infinite; }

.age-gate-shutter.is-arming .age-gate-shutter__marquee { opacity: 0.82; }

/* Active: bands retract vertically, doors part sideways. */
/* Heavier ease-in-out gives the "shutter mechanism" feel. */
.age-gate-shutter.is-open .age-gate-shutter__band--top {
  transform: translateY(-101%);
  transition: transform 720ms cubic-bezier(0.77, 0, 0.175, 1);
}
.age-gate-shutter.is-open .age-gate-shutter__band--bottom {
  transform: translateY(101%);
  transition: transform 720ms cubic-bezier(0.77, 0, 0.175, 1);
}
.age-gate-shutter.is-open .age-gate-shutter__door--left {
  transform: translateX(-101%);
  transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 200ms;
}
.age-gate-shutter.is-open .age-gate-shutter__door--right {
  transform: translateX(101%);
  transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 200ms;
}
/* Marquee fades as doors part (same delay as the open) */
.age-gate-shutter.is-open .age-gate-shutter__marquee {
  opacity: 0;
  transition: opacity 400ms ease-in 200ms;
}

/* Seam accent — thin green hairline where the doors meet */
.age-gate-shutter__seam {
  position: absolute;
  left: 50%;
  top: 34%;
  bottom: 34%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #39ff14 50%, transparent);
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.age-gate-shutter.is-arming .age-gate-shutter__seam { opacity: 0.65; }
.age-gate-shutter.is-open .age-gate-shutter__seam {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

@keyframes ageGateMarqueeL {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}
@keyframes ageGateMarqueeR {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .age-gate-shutter.is-open .age-gate-shutter__band--top,
  .age-gate-shutter.is-open .age-gate-shutter__band--bottom,
  .age-gate-shutter.is-open .age-gate-shutter__door--left,
  .age-gate-shutter.is-open .age-gate-shutter__door--right {
    transition-duration: 280ms !important;
  }
  .age-gate-shutter__marquee--top,
  .age-gate-shutter__marquee--bottom { animation: none !important; }
}

/* ── Under-vial URL: "New-U.io" in cyan→purple gradient with matching glow ──
   Revealed via a left-to-right CLIP-PATH SWIPE with a glint bar that rides
   the wipe edge. The glint is a vertical cyan→white→purple streak matching
   the gradient palette — reads as "light swipes across, leaving the word
   behind". The radial wipe at reveal takes it out cleanly. Positioned via
   --intro-vial-bottom which the JS updates on every resize. */
.intro-vial-url {
  position: fixed;
  top: var(--intro-vial-bottom, 65%);
  left: 50%;
  z-index: 10002;
  font-family: "Sora", "Avenir Next", "Inter", system-ui, sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  /* Cyan → purple gradient text via background-clip */
  background: linear-gradient(96deg,
    #00e5ff  0%,
    #7df9ff 24%,
    #c49dff 58%,
    #b026ff 82%,
    #e000ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Dual drop-shadow: cyan halo + purple bloom, matches the gradient ends */
  filter:
    drop-shadow(0 0 14px rgba(0, 229, 255, 0.55))
    drop-shadow(0 0 34px rgba(176, 38, 255, 0.45))
    drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55));
  /* Swipe reveal: clip from the right 100% → 0 as .show is applied.
     -22px on top/bottom/left gives the drop-shadows and the glint bar
     (which pokes 0.9rem left of the text) room to breathe — without it
     the inset edge shears the shadow off. */
  clip-path: inset(-22px 100% -22px -22px);
  -webkit-clip-path: inset(-22px 100% -22px -22px);
  transform: translateX(-50%);
  transition: clip-path 1150ms cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path 1150ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}
/* Glint bar — vertical cyan→white→purple streak that travels L→R alongside
   the clip-path reveal. Positioned absolute inside the URL element; the
   `left` keyframe runs at the exact same duration/easing as the clip wipe
   so the bright edge always sits at the reveal boundary. Screen blend so
   the colour adds rather than overwrites the text. */
.intro-vial-url::before {
  content: "";
  position: absolute;
  top: -0.32em;
  bottom: -0.32em;
  left: 0;
  width: 2rem;
  margin-left: -1rem;
  background: linear-gradient(90deg,
    rgba(0, 229, 255, 0) 0%,
    rgba(127, 249, 255, 0.58) 32%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(224, 0, 255, 0.58) 68%,
    rgba(176, 38, 255, 0) 100%);
  filter: blur(4px) drop-shadow(0 0 18px rgba(127, 249, 255, 0.7));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.intro-vial-url.show {
  clip-path: inset(-22px -22px -22px -22px);
  -webkit-clip-path: inset(-22px -22px -22px -22px);
}
.intro-vial-url.show::before {
  animation: introUrlGlint 1150ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes introUrlGlint {
  0%   { left: 0;                    opacity: 0; }
  10%  {                              opacity: 1; }
  92%  {                              opacity: 1; }
  100% { left: calc(100% + 1rem);    opacity: 0; }
}
@media (max-width: 767px) {
  .intro-vial-url {
    font-size: clamp(1.3rem, 6vw, 2.2rem);
    letter-spacing: 0.01em;
  }
  .intro-vial-url::before { width: 1.4rem; margin-left: -0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-vial-url {
    transition: clip-path 260ms ease-out, -webkit-clip-path 260ms ease-out;
  }
  .intro-vial-url.show::before { animation: none; opacity: 0; }
}

/* ── Under-URL tagline: "Advanced Peptide Research" ──────────────────────
   Restored from the old brand-overlay (which was stripped when we moved to
   the uncovering reveal). Sits below the gradient URL, uses the Sora
   display face, and accents "Research" in the NEW-U brand green so the
   tagline ties to the logo mark. Same clip-path swipe + glint pattern as
   the URL, but smaller scale + delayed start (220 ms later via JS). */
.intro-vial-tagline {
  position: fixed;
  top: calc(var(--intro-vial-bottom, 65%) + 3.4rem);
  left: 50%;
  z-index: 10002;
  font-family: "Sora", "Avenir Next", "Inter", system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.15vw, 0.96rem);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  color: rgba(232, 244, 252, 0.82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  clip-path: inset(-10px 100% -10px -10px);
  -webkit-clip-path: inset(-10px 100% -10px -10px);
  transition: clip-path 980ms cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path 980ms cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}
.intro-vial-tagline::before {
  content: "";
  position: absolute;
  top: -0.35em;
  bottom: -0.35em;
  left: 0;
  width: 1rem;
  margin-left: -0.5rem;
  background: linear-gradient(90deg,
    rgba(127, 249, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 48%,
    rgba(57, 255, 20, 0.55) 82%,
    rgba(57, 255, 20, 0) 100%);
  filter: blur(2.5px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.intro-vial-tagline.show {
  clip-path: inset(-10px -10px -10px -10px);
  -webkit-clip-path: inset(-10px -10px -10px -10px);
}
.intro-vial-tagline.show::before {
  animation: introTaglineGlint 980ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes introTaglineGlint {
  0%   { left: 0;                     opacity: 0; }
  12%  {                               opacity: 0.95; }
  88%  {                               opacity: 0.95; }
  100% { left: calc(100% + 0.5rem);   opacity: 0; }
}
.intro-vial-tagline .intro-tag-adv,
.intro-vial-tagline .intro-tag-pep {
  color: rgba(232, 244, 252, 0.82);
}
.intro-vial-tagline .intro-tag-res {
  color: #39ff14;
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.55), 0 0 38px rgba(57, 255, 20, 0.22);
}
@media (max-width: 767px) {
  .intro-vial-tagline {
    top: calc(var(--intro-vial-bottom, 65%) + 2.8rem);
    font-size: clamp(0.62rem, 2.6vw, 0.82rem);
    letter-spacing: 0.28em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-vial-tagline {
    transition: clip-path 220ms ease-out, -webkit-clip-path 220ms ease-out;
  }
  .intro-vial-tagline.show::before { animation: none; opacity: 0; }
}

/* ── Intro sound toggle ────────────────────────────────────────────────── */
/* Bottom-left, above the timeline bar. Off by default to respect autoplay
   policies; click toggles, persisted to nup_intro_sound. Mirrors the helix-
   loader sound button visually so the feature reads as one system. */
.intro-sound-toggle {
  position: fixed;
  bottom: max(2.2rem, env(safe-area-inset-bottom, 0px) + 2.2rem);
  left: max(1rem, env(safe-area-inset-left, 0px) + 1rem);
  z-index: 10004;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.55);
  border: 1px solid rgba(232, 244, 248, 0.22);
  color: rgba(232, 244, 248, 0.62);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.08);
  transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.intro-sound-toggle:hover {
  color: #ffffff;
  border-color: rgba(232, 244, 248, 0.5);
}
.intro-sound-toggle:focus-visible {
  outline: 2px solid rgba(57, 255, 20, 0.6);
  outline-offset: 2px;
}
.intro-sound-toggle svg { width: 16px; height: 16px; display: block; }
.intro-sound-toggle .snd-on  { display: none; }
.intro-sound-toggle .snd-off { display: block; }
.intro-sound-toggle.is-on {
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.6);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.32), inset 0 1px rgba(255, 255, 255, 0.12);
}
.intro-sound-toggle.is-on .snd-on  { display: block; }
.intro-sound-toggle.is-on .snd-off { display: none; }
@media (max-width: 767px) {
  .intro-sound-toggle { width: 32px; height: 32px; }
  .intro-sound-toggle svg { width: 14px; height: 14px; }
}