/* ============================================================
   PURA MOTION v2 — lab-native cinematic scroll system
   Microscope-focus letters · liquid display type · instrument
   readouts · purity-gate reveals · chromatogram dividers ·
   molecular field · peptide chain rail · calibration reticle ·
   orbiting certification ring.  See pura-motion.js
   ============================================================ */

/* ---------- 1. microscope focus (per-letter reveal) ---------- */
.fxw{display:inline-block;white-space:nowrap}
.fxl{
  display:inline-block;
  opacity:0;
  transform:translateY(.38em);
  filter:blur(9px);
  transition:
    opacity .55s ease var(--d,0s),
    transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),
    filter .6s ease var(--d,0s);
}
.fx-in .fxl{opacity:1;transform:none;filter:blur(0)}
/* soft: gradient / background-clip:text headings (no filter) */
.fx-soft .fxl{filter:none;transform:translateY(.5em)}
.fx-soft.fx-in .fxl{filter:none;transform:none}
/* pure decode: no fades, no rise, no motion — only the characters change */
.fx-pure .fxl{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
/* liquid: transform is owned by the wave engine — reveal via focus only */
.fx-liquid .fxl{transform:none;transition:opacity .55s ease var(--d,0s),filter .6s ease var(--d,0s)}

/* ---------- 2. instrument readouts (typewriter) ---------- */
.fxt-caret{
  display:inline-block;width:.55em;height:1em;
  margin-left:2px;vertical-align:text-bottom;
  background:rgba(159,212,232,.85);
  animation:fxt-blink .9s steps(1) infinite;
}
.fxt-caret.done{opacity:0;transition:opacity .6s ease}
@keyframes fxt-blink{50%{opacity:0}}

/* ---------- 4. purity gate (mosaic + counter chip) ---------- */
.px-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;
  transition:opacity .55s ease;
}
.px-canvas.px-done{opacity:0}
.px-chip{
  position:absolute;right:10px;bottom:10px;z-index:3;pointer-events:none;
  font-family:'Courier New',ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;
  color:rgba(244,244,245,.75);
  background:rgba(5,5,6,.72);
  border:1px solid rgba(159,212,232,.3);
  border-radius:2px;padding:4px 8px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:opacity .6s ease,border-color .3s ease,color .3s ease;
}
.px-chip b{font-weight:700;color:#9fd4e8}
.px-chip.lock{border-color:rgba(159,212,232,.75);color:rgba(244,244,245,.95)}
.px-chip.off{opacity:0}

/* ---------- 5. chromatogram dividers ---------- */
.divider.mo-chroma{
  height:64px !important;
  background:none !important;
  opacity:1 !important;
  position:relative;
}
.mo-chroma svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.mo-chroma-path{
  fill:none;
  stroke:rgba(159,212,232,.55);
  stroke-width:1.4;
  filter:drop-shadow(0 0 6px rgba(159,212,232,.35));
}
.mo-chroma-label{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:9px;letter-spacing:.12em;
  fill:rgba(159,212,232,0);
  text-anchor:middle;
  transition:fill .5s ease;
}
.mo-chroma svg.drawn .mo-chroma-label{fill:rgba(159,212,232,.85)}

/* ---------- 6. molecular field ---------- */
#nodeField{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;opacity:.5;pointer-events:none;
}

/* ---------- 7. calibration reticle cursor ---------- */
.mo-ret,.mo-ret-dot{
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;opacity:0;
}
.mo-ret.live,.mo-ret-dot.live{opacity:1}
.mo-ret{
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(159,212,232,.65);
  box-shadow:0 0 14px rgba(159,212,232,.18) inset;
  transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .4s ease,background .25s ease;
}
.mo-ret::before,.mo-ret::after{
  content:"";position:absolute;background:rgba(159,212,232,.55);
  top:50%;left:50%;transition:opacity .25s ease;
}
.mo-ret::before{width:9px;height:1px;transform:translate(-50%,-50%)}
.mo-ret::after{width:1px;height:9px;transform:translate(-50%,-50%)}
.mo-ret.hot{
  width:44px;height:44px;
  border-color:#9fd4e8;
  background:rgba(159,212,232,.07);
}
.mo-ret.hot::before,.mo-ret.hot::after{opacity:0}
.mo-ret.press{width:24px;height:24px}
.mo-ret-dot{
  width:4px;height:4px;border-radius:50%;
  background:#9fd4e8;
  box-shadow:0 0 8px rgba(159,212,232,.9);
}

/* ---------- 8. progress chrome ---------- */
.mo-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#9fd4e8,rgba(159,212,232,.35));
  box-shadow:0 0 12px rgba(159,212,232,.55);
  pointer-events:none;
}
.mo-chain{
  position:fixed;left:18px;top:50%;
  transform:translateY(-50%);
  height:44vh;width:20px;z-index:90;
  pointer-events:none;
}
.mo-chain-hex{
  position:absolute;left:50%;top:-30px;
  width:14px;height:16px;transform:translateX(-50%);
}
.mo-chain-hex path{fill:none;stroke:rgba(159,212,232,.55);stroke-width:1.4}
.mo-chain-line,.mo-chain-fill{
  position:absolute;left:50%;top:0;width:1px;height:100%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.10);
}
.mo-chain-fill{
  height:0%;
  background:linear-gradient(to bottom,rgba(159,212,232,.9),rgba(159,212,232,.35));
  box-shadow:0 0 8px rgba(159,212,232,.5);
  transition:height .18s linear;
}
.mo-bead{
  position:absolute;left:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#0a0a0c;border:1px solid rgba(159,212,232,.4);
  transition:background .4s ease,box-shadow .4s ease,transform .4s ease;
}
.mo-bead.on{
  background:#9fd4e8;
  box-shadow:0 0 10px rgba(159,212,232,.85);
  transform:translate(-50%,-50%) scale(1.25);
  animation:mo-bead-pulse 2.6s ease-in-out infinite;
}
@keyframes mo-bead-pulse{
  0%,100%{box-shadow:0 0 8px rgba(159,212,232,.6)}
  50%{box-shadow:0 0 16px rgba(159,212,232,1)}
}
@media(max-width:1099px){
  .mo-chain{left:8px;width:14px;height:38vh}
  .mo-chain-hex{top:-24px;width:11px;height:13px}
  .mo-bead-tip{display:none}
}

/* ---------- 9. orbit of certainty (footer ring) ---------- */
footer{position:relative}
.mo-orbit{
  position:absolute;right:clamp(16px,5vw,64px);top:-70px;
  width:140px;height:140px;z-index:2;
  pointer-events:none;
}
.mo-orbit-hex{fill:none;stroke:rgba(159,212,232,.6);stroke-width:1.4}
.mo-orbit-text{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.22em;
  fill:rgba(159,212,232,.55);
}
@media(max-width:900px){
  .mo-orbit{width:96px;height:96px;top:-52px;right:10px}
  .mo-orbit-text{font-size:11px;letter-spacing:.18em}
}

/* ---------- kinetic mega type ---------- */
.mega{
  position:relative;z-index:1;
  overflow:hidden;
  padding:clamp(18px,4vh,52px) 0;
  user-select:none;pointer-events:none;
  white-space:nowrap;
}
.mega-track{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(56px,12vw,170px);
  line-height:.92;letter-spacing:.02em;
  color:rgba(244,244,245,.07);
  -webkit-text-stroke:1.5px rgba(159,212,232,.6);
  will-change:transform;
}
.mega-track em{
  font-style:normal;
  -webkit-text-stroke:0;
  color:rgba(159,212,232,.8);
}
@media(min-width:761px){
  /* pre-offset so the kinetic sweep never exposes a blank edge */
  .mega-track{margin-left:-12vw}
}
@media(max-width:760px){
  .mega-track{font-size:clamp(40px,11vw,80px);margin-left:-14vw}
}

/* marquee mode: a continuous chyron — words parade regardless of scroll */
.mega-half{display:inline-block}
.mega-track.mega-marquee{
  margin-left:0 !important;
  animation:mega-left 44s linear infinite;
}
.mega-track.mega-marquee.dir-r{animation:mega-right 44s linear infinite}
@keyframes mega-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mega-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:760px){
  .mega-track.mega-marquee,.mega-track.mega-marquee.dir-r{animation-duration:30s}
}

/* ---------- misc ---------- */
[data-drift],[data-vskew],[data-kinetic]{will-change:transform}

/* ---------- reduced motion: fully static ---------- */
@media (prefers-reduced-motion: reduce){
  .fxl{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .fxt-caret{display:none !important}
  .px-canvas,.px-chip{display:none !important}
  .mo-chain,.mo-progress,.mo-ret,.mo-ret-dot,.mo-orbit,#nodeField{display:none !important}
  .mo-chroma-path{stroke-dashoffset:0 !important}
  .mega-track{transform:none !important;animation:none !important}
  [data-drift],[data-vskew],[data-kinetic]{transform:none !important}
}

/* ---------- v2.1 interaction layer ---------- */
/* droplet ripple — a drop hitting solution */
.mo-ripple{
  position:fixed;z-index:9998;pointer-events:none;
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(159,212,232,.7);
  transform:translate(-50%,-50%) scale(1);
  animation:mo-rip .65s ease-out forwards;
}
.mo-ripple.r2{animation-duration:.95s;animation-delay:.07s;border-color:rgba(159,212,232,.4)}
@keyframes mo-rip{
  from{opacity:.85}
  to{transform:translate(-50%,-50%) scale(9);opacity:0}
}

/* vial inspection glare */
.mo-glare{
  position:absolute;left:50%;top:50%;
  width:240px;height:240px;border-radius:50%;
  pointer-events:none;z-index:2;opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(210,235,245,.15),transparent 62%);
  mix-blend-mode:screen;
  transition:opacity .35s ease;
}

/* 3D stage for tilting cards */
.comp-grid{perspective:1200px}
.sec-grid{perspective:1400px}
.comp,.sec-card{will-change:transform;transform-style:preserve-3d}

@media (prefers-reduced-motion: reduce){
  .mo-ripple,.mo-glare{display:none !important}
  .comp,.sec-card,.bg-stage{transform:none !important}
}

/* ---------- v2.2: chain-rail navigation + touch feedback ---------- */
.mo-chain .mo-bead{
  pointer-events:auto;cursor:pointer;
  -webkit-appearance:none;appearance:none;padding:0;margin:0;
}
.mo-bead::after{ /* generous invisible tap target */
  content:"";position:absolute;inset:-11px;border-radius:50%;
}
.mo-bead:focus-visible{outline:2px solid #9fd4e8;outline-offset:4px}
.mo-bead-tip{
  position:absolute;left:18px;top:50%;transform:translateY(-50%) translateX(-4px);
  font-family:'Courier New',ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;white-space:nowrap;
  color:rgba(244,244,245,.9);
  background:rgba(5,5,6,.85);
  border:1px solid rgba(159,212,232,.35);
  border-radius:2px;padding:3px 8px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.mo-bead:hover .mo-bead-tip,.mo-bead:focus-visible .mo-bead-tip{
  opacity:1;transform:translateY(-50%) translateX(0);
}
.mo-press{transform:scale(.96) !important;transition:transform .12s ease !important}

@media (prefers-reduced-motion: reduce){
  .mo-press{transform:none !important}
}

/* ---------- standard kit: self-installed backdrop layer ---------- */
.mo-stage{
  position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#14161b 0%,#0a0a0c 45%,#050506 80%);
}
@media (prefers-reduced-motion: reduce){.mo-stage{display:none !important}}

/* ---------- product page → guide cross-link ---------- */
.guide-link{margin:2px 0 14px}
.guide-link a{
  font-size:13px;letter-spacing:.04em;
  color:#9fd4e8;text-decoration:none;
  border-bottom:1px solid rgba(159,212,232,.35);
  padding-bottom:2px;
  transition:border-color .25s ease,color .25s ease;
}
.guide-link a:hover{color:#eaf6fb;border-color:#9fd4e8}