/* waiv-journey.css — one continuous scroll story: hero → x-ray → tap → Onelynk.
   A single card persists across all beats, driven by scroll progress. */

.jr-track{position:relative;height:560vh;
  background:
    radial-gradient(120% 80% at 82% 8%, #073066 0%, transparent 50%),
    linear-gradient(180deg,#00112b 0%,#001026 22%,#000814 58%,#000814 100%);}
.jr-sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;isolation:isolate;}

/* ── background field ── */
.jr-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.jr-glow{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform,opacity;}
.jr-glow-1{width:680px;height:680px;right:0%;top:-4%;background:radial-gradient(closest-side,rgba(255,213,39,.40),transparent 70%);}
.jr-glow-2{width:640px;height:640px;left:-14%;top:38%;background:radial-gradient(closest-side,rgba(63,123,255,.40),transparent 70%);}
.jr-grid{position:absolute;inset:-20% -10%;opacity:0;will-change:opacity;
  background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px);
  background-size:62px 62px;mask-image:radial-gradient(70% 70% at 50% 46%,#000 30%,transparent 78%);}
.jr-grain{position:absolute;inset:0;background-image:var(--noise);background-size:170px;opacity:.12;mix-blend-mode:overlay;}

/* ── hero copy (beat A) ── */
.jr-hero-copy{position:absolute;left:clamp(28px,4vw,64px);top:calc(50% + 34px);transform:translateY(-50%);
  max-width:min(46vw,560px);z-index:6;will-change:opacity,transform;}
.jr-hero-copy .hb-display{font-family:'Ubuntu',sans-serif;font-weight:700;}

/* ── shared card ── */
.jr-card-pos{position:absolute;left:50%;top:50%;width:540px;height:340px;z-index:4;will-change:transform;
  transform:translate(-50%,-50%);}
.jr-card-pos .wv-card3d-float{animation:none;}        /* we own all motion */
.jr-card-pos .hb-stage{transition:none;}

/* ── phone (beats C/D) ── */
.jr-phone-pos{position:absolute;left:50%;top:50%;z-index:5;opacity:0;will-change:transform,opacity;
  transform:translate(-50%,-50%) translate3d(120vw,0,0);}
.jr-phone{width:300px;height:610px;border-radius:46px;padding:11px;position:relative;
  background:linear-gradient(160deg,#0a1c3e,#001127);
  box-shadow:0 56px 100px -30px rgba(0,0,0,.85),inset 0 0 0 2px rgba(120,150,210,.28),inset 0 0 0 8px #00254f;}
.jr-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(175deg,#04183a,#001026);}
.jr-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#000a1c;border-radius:12px;z-index:8;}
.jr-cover{height:150px;position:relative;background:
  radial-gradient(120% 130% at 20% 0%,rgba(63,123,255,.55),transparent 60%),linear-gradient(135deg,#13407e,#0a2a5c);}
.jr-cover::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:120px;opacity:.18;mix-blend-mode:overlay;}
.jr-pbody{padding:0 22px 22px;position:relative;}
.jr-avatar{width:84px;height:84px;border-radius:50%;margin-top:-46px;position:relative;z-index:2;
  background:linear-gradient(135deg,var(--yellow),var(--sapphire));box-shadow:0 8px 22px -6px rgba(63,123,255,.6),0 0 0 4px #04183a;}
.jr-pname{font-family:'Ubuntu',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:16px 0 3px;}
.jr-prole{font-size:13px;color:rgba(230,235,255,.6);margin:0;}
.jr-ptag{display:inline-block;margin-top:12px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;
  color:var(--yellow);padding:5px 10px;border-radius:999px;background:rgba(255,213,39,.12);box-shadow:inset 0 0 0 1px rgba(255,213,39,.3);}
.jr-plinks{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.jr-plink{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  background:rgba(230,235,255,.05);box-shadow:inset 0 0 0 1px rgba(230,235,255,.1);}
.jr-plink-ico{width:30px;height:30px;border-radius:9px;flex:none;background:rgba(255,213,39,.14);display:flex;align-items:center;justify-content:center;}
.jr-plink-ico svg{width:16px;height:16px;stroke:var(--yellow);fill:none;stroke-width:1.8;}
.jr-plink-txt b{display:block;font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.jr-plink-txt span{font-size:11px;color:rgba(230,235,255,.5);}
.jr-psave{margin-top:16px;background:rgba(255,213,39,.12);color:#fff;font-weight:700;font-size:15px;text-align:center;padding:14px;border-radius:14px;font-family:'Ubuntu',sans-serif;box-shadow:inset 0 0 0 1px rgba(255,213,39,.45);}

/* staggered profile build-in */
.jr-cover,.jr-avatar,.jr-pname,.jr-prole,.jr-ptag,.jr-plink,.jr-psave{
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.jr-screen.is-built .jr-cover{opacity:1;transform:none;transition-delay:0s;}
.jr-screen.is-built .jr-avatar{opacity:1;transform:none;transition-delay:.08s;}
.jr-screen.is-built .jr-pname{opacity:1;transform:none;transition-delay:.14s;}
.jr-screen.is-built .jr-prole{opacity:1;transform:none;transition-delay:.18s;}
.jr-screen.is-built .jr-ptag{opacity:1;transform:none;transition-delay:.24s;}
.jr-screen.is-built .jr-plink:nth-of-type(1){opacity:1;transform:none;transition-delay:.30s;}
.jr-screen.is-built .jr-plink:nth-of-type(2){opacity:1;transform:none;transition-delay:.38s;}
.jr-screen.is-built .jr-plink:nth-of-type(3){opacity:1;transform:none;transition-delay:.46s;}
.jr-screen.is-built .jr-psave{opacity:1;transform:none;transition-delay:.54s;}

/* tap pulse rings (emitted from phone top where the card touches) */
.jr-tap{position:absolute;left:50%;top:6%;z-index:6;pointer-events:none;opacity:0;transition:opacity .3s;}
.jr-sticky.is-tapping .jr-tap{opacity:1;}
.jr-tap span{position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;
  border:2px solid rgba(255,213,39,.6);transform:scale(.2);opacity:0;}
.jr-sticky.is-tapping .jr-tap span{animation:jr-pulse 2.4s ease-out infinite;}
.jr-sticky.is-tapping .jr-tap span:nth-child(2){animation-delay:.8s;}
.jr-sticky.is-tapping .jr-tap span:nth-child(3){animation-delay:1.6s;}
@keyframes jr-pulse{0%{transform:scale(.2);opacity:.85}100%{transform:scale(4);opacity:0}}

/* floating stat chips that appear with the profile */
.jr-stat{position:absolute;z-index:7;background:rgba(0,8,20,.82);backdrop-filter:blur(8px);border-radius:14px;padding:13px 16px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(230,235,255,.12);display:flex;align-items:center;gap:11px;
  opacity:0;transition:opacity .6s ease,transform .6s ease;will-change:transform,opacity;}
.jr-stat .jr-num{font-family:'Ubuntu',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--yellow);}
.jr-stat .jr-cap{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(230,235,255,.6);line-height:1.3;}

/* captions + dots */
.jr-caps{position:absolute;bottom:7.5vh;left:0;right:0;text-align:center;z-index:7;padding:0 24px;pointer-events:none;}
.jr-cap{position:relative;height:2.6em;}
.jr-cap p{position:absolute;left:0;right:0;margin:0 auto;max-width:20em;font-size:clamp(17px,1.7vw,23px);font-weight:600;
  letter-spacing:-.01em;color:rgba(230,235,255,.92);opacity:0;transform:translateY(10px);
  transition:opacity .5s,transform .5s;text-wrap:balance;font-family:'Ubuntu',sans-serif;}
.jr-cap p.is-on{opacity:1;transform:none;}
.jr-cap p em{font-style:normal;color:var(--yellow);}
.jr-dots{display:flex;gap:9px;justify-content:center;margin-top:20px;}
.jr-dots i{width:30px;height:3px;border-radius:2px;background:rgba(230,235,255,.16);transition:background .35s;}
.jr-dots i.is-on{background:var(--yellow);box-shadow:0 0 10px rgba(255,213,39,.7);}

/* scroll cue */
.jr-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(230,235,255,.45);text-transform:uppercase;
  transition:opacity .4s;will-change:opacity;}
.jr-cue-line{width:1px;height:32px;background:linear-gradient(rgba(230,235,255,.5),transparent);animation:jr-cue 2s ease-in-out infinite;transform-origin:top;}
@keyframes jr-cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .jr-sticky.is-tapping .jr-tap span,.jr-cue-line,.wv-scanline{animation:none !important;}
}

/* ── mobile: collapse the choreography into a simple stacked hero ── */
@media (max-width:1080px){
  .jr-track{height:auto;}
  .jr-sticky{position:relative;height:auto;min-height:0;padding:120px 0 80px;}
  .jr-hero-copy{position:relative;top:auto;left:auto;transform:none;max-width:90%;margin:0 auto;padding:0 28px;text-align:center;}
  .jr-hero-copy .hb-cta-row,.jr-hero-copy .hb-eyebrow{justify-content:center;}
  .jr-hero-copy .hb-controls{justify-content:center;}
  .jr-card-pos{position:relative;left:auto;top:auto;transform:none !important;width:min(440px,86vw);height:auto;
    margin:48px auto 0;display:flex;justify-content:center;}
  .jr-card-pos .hb-stage{transform:scale(.8);}
  .jr-phone-pos,.jr-caps,.jr-cue,.jr-tap,.jr-stat,.jr-grid{display:none;}
}