/* ============================================================================
   HERO SUPER-UPGRADE — additive layer on top of electrify.css `.mr-hero`.
   Everything is namespaced .mrp-* and pointer-events:none, so the existing
   slideshow, arrows, dots, marquee and pause-on-hover keep working untouched.
   To revert: delete the hero-plus.css <link> + hero-plus.js <script>.
   Depth model (existing z: aurora/bg 0, grid/noise 1, spores 2, wrap 5, bolts 7,
   flash 8, arrows/dots/marquee 9) -> rays 2, spotlight 3, hud+vignette 4, arc 7.
   ========================================================================== */

/* Real perspective so the orb can tilt in 3D. It must live on .mr-wrap, the
   DIRECT parent of .mr-stage — perspective only applies to immediate children. */
.mr-hero .mr-wrap{perspective:1600px;perspective-origin:50% 42%}
.mrp{position:absolute;inset:0;pointer-events:none}

/* ---- 1. volumetric god rays, tinted by the live slide accent -------------- */
.mrp-rays{z-index:2;opacity:0;transition:opacity 1.4s ease;
  background:repeating-linear-gradient(104deg,transparent 0 54px,
    color-mix(in srgb,var(--mr-a,#a855f7) 17%,transparent) 54px 64px,transparent 64px 142px);
  filter:blur(24px);
  -webkit-mask-image:linear-gradient(176deg,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
          mask-image:linear-gradient(176deg,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
  animation:mrpRays 17s ease-in-out infinite alternate}
.mr-hero.mrp-live .mrp-rays{opacity:.55}
@keyframes mrpRays{from{transform:translate3d(-3%,0,0) rotate(-.7deg)}to{transform:translate3d(4%,0,0) rotate(.9deg)}}

/* ---- 2. cursor spotlight: a soft light that follows the pointer ----------- */
.mrp-spot{z-index:3;opacity:0;transition:opacity .55s ease;mix-blend-mode:screen;
  background:radial-gradient(380px 380px at var(--mrp-mx,50%) var(--mrp-my,45%),
    color-mix(in srgb,var(--mr-a,#a855f7) 30%,transparent),transparent 68%)}
.mr-hero.mrp-pointer .mrp-spot{opacity:1}

/* ---- 3. lab-instrument corner brackets (HUD) ----------------------------- */
.mrp-hud{z-index:4;opacity:0;transition:opacity 1s ease .3s}
.mr-hero.mrp-live .mrp-hud{opacity:.45}
.mrp-hud i{position:absolute;width:52px;height:52px;
  border:1.5px solid color-mix(in srgb,var(--mr-a,#a855f7) 65%,transparent);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--mr-a,#a855f7) 45%,transparent))}
.mrp-hud i:nth-child(1){top:26px;left:26px;border-right:0;border-bottom:0}
.mrp-hud i:nth-child(2){top:26px;right:26px;border-left:0;border-bottom:0}
.mrp-hud i:nth-child(3){bottom:74px;left:26px;border-right:0;border-top:0}
.mrp-hud i:nth-child(4){bottom:74px;right:26px;border-left:0;border-top:0}
@media(max-width:900px){.mrp-hud{display:none}}

/* ---- 4. cinematic vignette (sits BELOW the copy so text stays crisp) ------ */
.mrp-vig{z-index:4;background:
  radial-gradient(125% 92% at 50% 42%,transparent 46%,rgba(4,0,14,.5) 100%)}

/* ---- 5. electric arc that fires across the hero on every slide change ----- */
.mrp-arc{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;opacity:0}
.mrp-arc path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px var(--mr-a,#a855f7)) drop-shadow(0 0 22px var(--mr-b,#ff3ea5));
  stroke-dasharray:1600;stroke-dashoffset:1600}
.mrp-arc.go{animation:mrpArcFade .72s ease-out}
.mrp-arc.go path{animation:mrpArcDraw .72s cubic-bezier(.3,.7,.2,1)}
@keyframes mrpArcFade{0%{opacity:0}12%{opacity:1}70%{opacity:.85}100%{opacity:0}}
@keyframes mrpArcDraw{0%{stroke-dashoffset:1600}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-360}}

/* ---- 6. the orb becomes a glass specimen sphere --------------------------- */
/* injected inside .mr-slides, which already clips to a circle */
.mrp-orbfx{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:50%;overflow:hidden}
/* glass: bright top-left specular + shaded lower rim = real sphere volume */
.mrp-glass{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(58% 48% at 30% 24%,rgba(255,255,255,.30),rgba(255,255,255,.06) 46%,transparent 68%),
    radial-gradient(80% 70% at 70% 88%,rgba(4,0,14,.55),transparent 62%);
  box-shadow:inset 0 0 60px rgba(8,2,24,.65),inset 0 2px 1px rgba(255,255,255,.28)}
/* specular sweep, continuous */
.mrp-sheen{position:absolute;top:-60%;left:-120%;width:78%;height:220%;border-radius:50%;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.34),transparent);
  filter:blur(9px);transform:rotate(16deg);animation:mrpSheen 7.5s ease-in-out infinite}
@keyframes mrpSheen{0%,62%{left:-120%}100%{left:150%}}
/* specimen scan line, fires on slide change */
.mrp-scan{position:absolute;left:-10%;right:-10%;top:0;height:16%;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mr-a,#22e0c8) 65%,transparent) 45%,rgba(255,255,255,.85) 52%,color-mix(in srgb,var(--mr-a,#22e0c8) 65%,transparent) 60%,transparent);
  filter:blur(2px) drop-shadow(0 0 14px var(--mr-a,#22e0c8))}
.mrp-orbfx.go .mrp-scan{animation:mrpScan 1.25s cubic-bezier(.4,0,.25,1)}
@keyframes mrpScan{0%{top:-18%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:104%;opacity:0}}
/* thin bright rim so the sphere reads as lit glass against the aurora */
.mrp-rim{position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--mr-a,#a855f7) 55%,rgba(255,255,255,.55));
  box-shadow:0 0 26px -4px color-mix(in srgb,var(--mr-b,#ff3ea5) 70%,transparent)}

/* ---- 7. electrons orbiting the orb --------------------------------------- */
.mrp-orbit{position:absolute;inset:-16%;z-index:1;pointer-events:none;border-radius:50%}
.mrp-orbit i{position:absolute;top:50%;left:50%;width:var(--s,7px);height:var(--s,7px);margin:calc(var(--s,7px)/-2);
  border-radius:50%;background:var(--c,var(--mr-b,#ff3ea5));
  box-shadow:0 0 14px 3px var(--c,var(--mr-b,#ff3ea5));
  animation:mrpOrbit var(--d,9s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes mrpOrbit{from{transform:rotate(0deg) translateX(var(--r,52%)) rotate(0deg)}
                     to{transform:rotate(360deg) translateX(var(--r,52%)) rotate(-360deg)}}

/* ---- 8. kinetic title: words rise + unblur on every slide change ---------- */
.mrp-w{display:inline-block;will-change:transform,opacity,filter;
  animation:mrpWordIn .66s cubic-bezier(.16,.84,.28,1) both;animation-delay:calc(var(--i,0)*62ms)}
@keyframes mrpWordIn{
  from{opacity:0;transform:translate3d(0,.5em,0) rotateX(-58deg) scale(.96);filter:blur(9px)}
  to  {opacity:1;transform:none;filter:blur(0)}}
/* kicker + sub follow, slightly later, so the block reads as one motion */
.mr-hero.mrp-swap .mr-kicker{animation:mrpUp .55s ease-out both}
.mr-hero.mrp-swap .mr-sub{animation:mrpUp .6s ease-out .12s both}
@keyframes mrpUp{from{opacity:0;transform:translate3d(0,14px,0);filter:blur(5px)}
                   to{opacity:1;transform:none;filter:blur(0)}}

/* ---- 9. entrance: the whole hero assembles on first paint ----------------- */
/* FAIL-SAFE: the hide rule is gated on .mrp-ready, which the script adds the
   moment it runs. If hero-plus.js never executes, the hero renders as normal. */
.mr-hero.mrp-ready .mr-copy,.mr-hero.mrp-ready .mr-stage{opacity:0}
.mr-hero.mrp-live .mr-copy{animation:mrpEnterL .95s cubic-bezier(.16,.84,.28,1) both}
.mr-hero.mrp-live .mr-stage{animation:mrpEnterR 1.05s cubic-bezier(.16,.84,.28,1) .1s both}
@keyframes mrpEnterL{from{opacity:0;transform:translate3d(-26px,10px,0)}to{opacity:1;transform:none}}
@keyframes mrpEnterR{from{opacity:0;transform:translate3d(0,18px,0) scale(.94)}to{opacity:1;transform:none}}
/* Once the entrance has played, drop the animation. A finished `both`-filled
   animation keeps asserting transform:none and would freeze out the parallax. */
.mr-hero.mrp-entered .mr-copy,.mr-hero.mrp-entered .mr-stage{opacity:1;animation:none}

/* ---- 10. pointer parallax + scroll drift --------------------------------- */
/* .mr-copy / .mr-stage carry no other transform animation, so these are safe. */
.mr-hero.mrp-tilt .mr-copy{transform:translate3d(calc(var(--mrp-px,0)*-14px),calc(var(--mrp-py,0)*-9px + var(--mrp-sy,0px)),0)}
.mr-hero.mrp-tilt .mr-stage{transform:
  translate3d(calc(var(--mrp-px,0)*22px),calc(var(--mrp-py,0)*14px + var(--mrp-sy,0px)),0)
  rotateY(calc(var(--mrp-px,0)*7deg)) rotateX(calc(var(--mrp-py,0)*-6deg))}
.mr-hero.mrp-tilt .mr-copy,.mr-hero.mrp-tilt .mr-stage{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mr-hero.mrp-tilt.mrp-track .mr-copy,.mr-hero.mrp-tilt.mrp-track .mr-stage{transition:none}

/* ---- 11. accessibility: honour reduced motion ---------------------------- */
@media(prefers-reduced-motion:reduce){
  .mrp-rays,.mrp-sheen,.mrp-orbit i{animation:none}
  .mrp-arc,.mrp-spot{display:none}
  .mrp-w,.mr-hero.mrp-swap .mr-kicker,.mr-hero.mrp-swap .mr-sub{animation:none}
  .mr-hero.mrp-ready .mr-copy,.mr-hero.mrp-ready .mr-stage{opacity:1}
  .mr-hero.mrp-live .mr-copy,.mr-hero.mrp-live .mr-stage{animation:none}
  .mr-hero.mrp-tilt .mr-copy,.mr-hero.mrp-tilt .mr-stage{transform:none}
}

/* ============================================================================
   V3 SUPERCHARGED — MOBILE
   Two jobs: (a) kill the scroll jank, (b) bring the desktop treatment to phones
   and add touch-native features. Loaded after electrify.css so these win.
   ========================================================================== */

/* ---- A1. THE STICKY-SCROLL FIX ------------------------------------------- */
/* `vh` re-measures when the mobile URL bar collapses, which RESIZES the hero
   mid-scroll and reads as sticking/juddering. `svh` is the small-viewport unit:
   it stays constant while the bar hides, so the hero never reflows on scroll. */
@supports (min-height:100svh){
  .mr-hero{min-height:min(88svh,860px)}
}
/* the rising spores were keyed to -105vh, re-measured on that same event */
@supports (height:100svh){
  @keyframes mrRise{
    0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}
    12%{opacity:.9}85%{opacity:.5}
    100%{transform:translateY(-105svh) translateX(var(--dx,40px)) scale(1.1);opacity:0}}
}
/* a vertical drag must never be captured (we only claim horizontal swipes) */
.mr-hero{touch-action:pan-y}

/* ---- A2. cheap paint on phones ------------------------------------------- */
@media(max-width:900px){
  /* Site-wide: `background-attachment:fixed` repaints the whole backdrop on every
     scroll frame on mobile, and body::before is a FIXED, BLURRED, ANIMATING
     full-viewport layer. Together they are the main source of the judder. Both
     are pure atmosphere, so on phones we flatten them. */
  body{background-attachment:scroll}
  body::before{filter:none;animation:none}

  /* hero layers: keep the look, drop the per-frame cost */
  .mr-hero .mr-bgimg{filter:blur(20px) saturate(1.9) brightness(.52);inset:-6%}
  .mr-hero .mr-aurora{filter:blur(36px) saturate(1.5)}
  .mr-hero .mr-noise{mix-blend-mode:normal;opacity:.26}
  .mr-hero .mr-marquee{backdrop-filter:none;background:#0c041cf2}
  .mrp-rays,.mrp-spot{display:none}          /* pointer-only, no cursor here */
  /* promote the moving pieces to their own layers so scrolling never repaints them */
  .mr-hero .mr-bgimg,.mr-hero .mr-aurora,.mr-orb{will-change:transform,opacity}
}

/* ---- A3. stop animating what nobody can see ------------------------------ */
/* While the finger is actually moving (mobile) and whenever the hero is off
   screen, park the decorative animations. This is what makes scroll buttery. */
@media(max-width:900px){
  .mr-hero.mrp-scrolling .mr-spore,
  .mr-hero.mrp-scrolling .mrp-sheen,
  .mr-hero.mrp-scrolling .mrp-orbit i,
  .mr-hero.mrp-scrolling .mr-noise,
  .mr-hero.mrp-scrolling .mr-orb{animation-play-state:paused}
}
.mr-hero.mrp-off *,.mr-hero.mrp-off *::before,.mr-hero.mrp-off *::after{animation-play-state:paused!important}

/* ---- B1. V3 mobile layout: fluid, thumb-friendly, notch-aware ------------- */
@media(max-width:900px){
  .mr-wrap{gap:1.7rem;padding:2.5rem 20px 6.2rem;
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right))}
  .mr-kicker{font-size:.6rem;letter-spacing:.24em;padding:.5em 1em}
  .mr-title{font-size:clamp(2.05rem,9vw,3.2rem);line-height:1.02;margin-bottom:.9rem}
  .mr-sub{font-size:clamp(.97rem,3.9vw,1.12rem);max-width:31ch;margin-bottom:1.6rem;line-height:1.5}
  /* real thumb targets: primary goes full width, secondary stays light */
  .mr-ctas{flex-direction:column;align-items:center;width:100%;gap:.65rem}
  .mr-ctas .btn{min-height:54px;display:inline-flex;align-items:center;justify-content:center}
  .mr-ctas .btn:not(.ghost){width:100%}
  .mr-ctas .btn.ghost{width:auto;padding-inline:1.5rem;min-height:46px}
  .mr-orb{width:min(72vw,320px)}
  /* bigger, easier-to-hit progress dots, lifted clear of the marquee */
  .mr-dots{bottom:4.4rem;gap:.6rem}
  .mr-dot{width:34px;height:8px}
  /* keep the lab framing on phones, just finer (V1 hid it on mobile; bring it back) */
  .mrp-hud{display:block;opacity:.34}
  .mrp-hud i{width:30px;height:30px}
  .mrp-hud i:nth-child(1),.mrp-hud i:nth-child(2){top:16px}
  .mrp-hud i:nth-child(1),.mrp-hud i:nth-child(3){left:16px}
  .mrp-hud i:nth-child(2),.mrp-hud i:nth-child(4){right:16px}
  .mrp-hud i:nth-child(3),.mrp-hud i:nth-child(4){bottom:66px}
}

/* ---- B2. new mobile feature: swipe affordance ---------------------------- */
.mrp-swipe{position:absolute;left:50%;bottom:7rem;transform:translateX(-50%);z-index:9;
  display:none;align-items:center;gap:.55em;pointer-events:none;
  font-family:var(--heavy);font-size:.58rem;font-weight:800;letter-spacing:.24em;color:#fff;
  background:rgba(12,4,28,.62);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:.5em 1.05em;box-shadow:0 6px 22px -8px #000;transition:opacity .45s ease}
.mrp-swipe b{font-size:1.15em;line-height:1;opacity:.85;animation:mrpNudge 2.4s ease-in-out infinite}
.mrp-swipe b:last-child{animation-delay:1.2s}
@keyframes mrpNudge{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(3px);opacity:1}}
@media(max-width:900px){.mr-hero.mrp-touch .mrp-swipe{display:inline-flex}}
.mr-hero.mrp-swiped .mrp-swipe{opacity:0}

/* ---- B3. new mobile feature: slide counter ------------------------------- */
.mrp-count{position:absolute;right:20px;right:max(20px,env(safe-area-inset-right));
  bottom:4.2rem;z-index:9;display:none;pointer-events:none;
  font-family:var(--mono,ui-monospace,monospace);font-size:.64rem;font-weight:600;letter-spacing:.16em;
  color:#fff;opacity:.62;text-shadow:0 2px 10px #000}
.mrp-count b{color:var(--mr-a);font-weight:800;opacity:1}
@media(max-width:900px){.mr-hero.mrp-touch .mrp-count{display:block}}

/* ---- B4. touch feedback: the orb answers a hold -------------------------- */
.mr-hero.mrp-held .mr-orb{transform:scale(.975);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mr-hero.mrp-held .mrp-glass{opacity:.75;transition:opacity .3s ease}

/* ---- B5. reduced motion still wins --------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .mrp-swipe b{animation:none}
  .mr-hero.mrp-held .mr-orb{transform:none}
}

/* ---- V3.1 FIX: keep the orb caption on top ------------------------------- */
/* `.mr-slides` is position:absolute with z-index:auto, so it creates NO stacking
   context — its child .mrp-orbfx (z-index:4) therefore competed directly with
   .mr-orb-label (z-index:3) inside .mr-orb and painted over the caption's top
   half (the glass layer's dark lower gradient + the rim border). Lift the
   caption above every orb layer, and give it room on phones so it never
   collides with the kicker below either. */
.mr-orb-label{z-index:20}
@media(max-width:900px){
  .mr-stage{padding-bottom:1.5rem}          /* room for the caption's overhang */
  .mr-orb-label{bottom:-.85rem;font-size:.58rem;letter-spacing:.22em;padding:.62em 1.15em;
    max-width:calc(100vw - 34px);overflow:hidden;text-overflow:ellipsis;
    box-shadow:0 8px 26px -8px #000,0 0 0 1px rgba(255,255,255,.35)}
}