/* waiv-factory.css — pinned, scroll-scrubbed "making of a waiv" scene that
   climaxes in a dimensional tunnel of cards flowing toward the viewer.
   Tokens from waiv.css; finish look borrowed from waiv-hero-b.css. */

.fz-track{position:relative;height:440vh;background:
  radial-gradient(120% 70% at 50% 0%, #061a3e 0%, transparent 55%),
  linear-gradient(180deg,#000814 0%,#00102b 30%,#00060f 70%,#000814 100%);}
.fz-sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;}

/* ── ambient field ── */
.fz-field{position:absolute;inset:0;z-index:0;pointer-events:none;}
.fz-grid{position:absolute;inset:-30% -10%;
  background-image:linear-gradient(rgba(120,160,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.07) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 50%,#000 25%,transparent 76%);will-change:transform;}
.fz-vglow{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,213,39,.10),transparent 70%);filter:blur(60px);will-change:opacity;}
.fz-grain{position:absolute;inset:0;background-image:var(--noise);background-size:170px;opacity:.1;mix-blend-mode:overlay;}

/* ── heading + step index ── */
.fz-head{position:absolute;top:7.5vh;left:0;right:0;text-align:center;z-index:6;padding:0 24px;pointer-events:none;}
.fz-head .wv-kicker{justify-content:center;}
.fz-step-no{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.3em;color:rgba(230,235,255,.4);margin-top:8px;}
.fz-step-no b{color:var(--yellow);}

/* ── 3D stage ── */
.fz-stage{position:relative;width:min(560px,70vw);aspect-ratio:1.585;perspective:1500px;z-index:2;transform:translateY(1vh);}
.fz-rig{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;}

/* machine bed + rails */
.fz-bed{position:absolute;left:-16%;right:-16%;top:-14%;bottom:-14%;z-index:0;transform:translateZ(-60px);will-change:opacity;}
.fz-rail{position:absolute;height:3px;left:0;right:0;background:linear-gradient(90deg,transparent,rgba(120,160,255,.35),transparent);}
.fz-rail.t{top:6%;}.fz-rail.b{bottom:6%;}
.fz-bed-tag{position:absolute;top:-3%;left:0;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;color:rgba(120,160,255,.5);text-transform:uppercase;}

/* the card faces */
.fz-card{position:absolute;inset:0;border-radius:5%/8%;overflow:hidden;will-change:opacity;}
.fz-blank{background:linear-gradient(135deg,#1a1f29,#2c333f 50%,#161a22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(150,160,180,.18),0 30px 60px -24px rgba(0,2,12,.9);}
.fz-blank::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:130px;opacity:.18;mix-blend-mode:overlay;}
.fz-printed{will-change:clip-path;
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,231,170,.26), transparent 52%),
    linear-gradient(125deg,#050a16 0%,#11203f 24%,#26406a 45%,#0b1426 60%,#02060f 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,228,160,.4),inset 0 0 0 1px rgba(180,150,90,.32),0 30px 60px -24px rgba(0,2,12,.9);}
.fz-printed-logo{position:absolute;left:7%;top:9%;height:15%;}
.fz-printed-nfc{position:absolute;right:7%;top:10%;width:13%;aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 2px rgba(234,201,130,.5),0 0 0 5px rgba(234,201,130,.28),0 0 0 9px rgba(234,201,130,.12);}
.fz-printed-meta{position:absolute;left:7%;bottom:8%;font-family:'Space Mono',monospace;font-size:2.4%;letter-spacing:.2em;
  color:rgba(234,201,130,.6);text-transform:uppercase;}
.fz-gloss{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;will-change:opacity,transform;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.0) 60%);}

/* print head */
.fz-head-bar{position:absolute;top:-20%;bottom:-20%;width:30px;margin-left:-15px;z-index:6;will-change:transform,opacity;pointer-events:none;}
.fz-head-bar::before{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(180deg,#3a4458,#10151f);
  box-shadow:0 0 0 1px rgba(120,160,255,.4),0 8px 20px rgba(0,0,0,.5);}
.fz-nozzle{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--yellow);box-shadow:0 0 12px 2px rgba(255,213,39,.8);}
.fz-mist{position:absolute;left:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,213,39,.8);box-shadow:0 0 6px rgba(255,213,39,.9);}

/* x-ray internals (chip embed) */
.fz-xray{position:absolute;inset:0;z-index:4;opacity:0;overflow:hidden;border-radius:inherit;will-change:opacity;}
.fz-xray-dim{position:absolute;inset:0;background:radial-gradient(125% 125% at 56% 46%,rgba(0,8,22,.55),rgba(0,5,14,.9));}
.fz-coil{position:absolute;inset:10% 8%;}
.fz-coil span{position:absolute;border:1.5px solid #EAC982;border-radius:5%;box-shadow:0 0 8px rgba(234,201,130,.6);opacity:0;will-change:opacity;}
.fz-coil span:nth-child(1){inset:0;}.fz-coil span:nth-child(2){inset:5%;}.fz-coil span:nth-child(3){inset:10%;}
.fz-coil span:nth-child(4){inset:15%;}.fz-coil span:nth-child(5){inset:20%;}.fz-coil span:nth-child(6){inset:25%;}.fz-coil span:nth-child(7){inset:30%;}
.fz-chip{position:absolute;right:27%;top:38%;width:16%;aspect-ratio:1.2;border-radius:14%;opacity:0;will-change:opacity,transform;
  background:linear-gradient(140deg,#222732,#4a5160 52%,#161922);
  box-shadow:0 0 22px rgba(255,213,39,.55),inset 0 0 0 1px rgba(200,218,255,.5);}
.fz-chip::before{content:"";position:absolute;inset:22%;border-radius:12%;
  background:repeating-linear-gradient(0deg,rgba(234,201,130,.9) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(234,201,130,.6) 0 2px,transparent 2px 5px);opacity:.7;}

/* activation stamp + pulse */
.fz-stamp{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%) scale(.4) rotate(-12deg);opacity:0;will-change:opacity,transform;
  font-family:'Ubuntu',sans-serif;font-weight:700;font-size:7%;letter-spacing:.04em;color:var(--yellow);text-transform:uppercase;
  padding:2.5% 5%;border-radius:10px;border:2px solid var(--yellow);box-shadow:0 0 30px rgba(255,213,39,.4);white-space:nowrap;display:flex;align-items:center;gap:8px;}
.fz-stamp svg{width:1.4em;height:1.4em;stroke:var(--yellow);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.fz-pulse{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;}
.fz-pulse span{position:absolute;width:120px;height:120px;margin:-60px;border-radius:50%;border:1.5px solid rgba(255,213,39,.5);transform:scale(.2);opacity:0;}
.fz-sticky.is-live .fz-pulse span{animation:fz-pulse 2.6s ease-out infinite;}
.fz-sticky.is-live .fz-pulse span:nth-child(2){animation-delay:.85s;}
.fz-sticky.is-live .fz-pulse span:nth-child(3){animation-delay:1.7s;}
@keyframes fz-pulse{0%{transform:scale(.2);opacity:.8}100%{transform:scale(4.2);opacity:0}}

/* ── DIMENSIONAL TUNNEL ── */
.fz-tunnel{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;transform-style:preserve-3d;perspective:900px;
  opacity:0;will-change:opacity;pointer-events:none;}
/* ── DIMENSIONAL WORMHOLE ── */
.fz-tunnel{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;transform-style:preserve-3d;perspective:680px;
  opacity:0;will-change:opacity,transform;pointer-events:none;}

/* depth fog + vignette so the far center reads as a vanishing point */
.fz-fog{position:absolute;left:50%;top:50%;width:240vw;height:240vh;transform:translate(-50%,-50%);z-index:5;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(circle at 50% 50%,transparent 0%,transparent 6%,rgba(0,4,14,.0) 16%,rgba(0,4,14,.55) 60%,#00040e 100%);}

/* multi-layer portal: bloom core + chromatic halo + rotating light rays */
.fz-portal{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px;border-radius:50%;will-change:transform,filter;}
.fz-portal-core{position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0%,rgba(255,236,170,.95) 22%,rgba(255,213,39,.7) 45%,transparent 72%);
  box-shadow:0 0 80px 20px rgba(255,213,39,.5),0 0 160px 60px rgba(255,180,40,.35);}
.fz-portal-halo{position:absolute;inset:18%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,transparent 40%,rgba(63,123,255,.5) 58%,rgba(180,80,255,.0) 74%);}
.fz-portal-rays{position:absolute;inset:-10%;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,236,170,.45) 8deg,transparent 16deg,transparent 40deg,rgba(255,213,39,.3) 48deg,transparent 56deg,transparent 84deg,rgba(120,160,255,.35) 92deg,transparent 100deg);
  -webkit-mask:radial-gradient(closest-side,transparent 40%,#000 52%,transparent 80%);mask:radial-gradient(closest-side,transparent 40%,#000 52%,transparent 80%);
  animation:fz-rays 22s linear infinite;}
@keyframes fz-rays{to{transform:rotate(360deg);}}

/* receding tunnel hoops */
.fz-ring{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px;border-radius:50%;will-change:transform,opacity;
  border:2px solid rgba(120,170,255,.5);box-shadow:0 0 26px rgba(80,140,255,.35),inset 0 0 40px rgba(80,140,255,.15);}

/* warp starfield streaks */
.fz-star{position:absolute;left:0;top:0;width:3px;height:3px;margin:-1.5px;border-radius:2px;background:#dCEBFF;
  box-shadow:0 0 6px rgba(200,225,255,.9);will-change:transform,opacity;}

/* hero cards flying through */
.fz-fly{position:absolute;left:0;top:0;width:172px;height:108px;margin:-54px 0 0 -86px;border-radius:11px;will-change:transform,opacity,filter;
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1.5px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.08);backface-visibility:hidden;overflow:hidden;}
.fz-fly::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.4),transparent 46%);}
.fz-fly img{position:absolute;left:11px;top:10px;height:15px;opacity:.92;}
.fz-fly i{position:absolute;right:11px;top:10px;width:13px;height:13px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.45),0 0 0 4px rgba(255,255,255,.22),0 0 0 7px rgba(255,255,255,.1);}

/* final resolved card */
.fz-final{position:absolute;left:50%;top:50%;width:min(440px,58vw);aspect-ratio:1.585;margin:0;z-index:8;
  transform:translate(-50%,-50%) scale(.6);opacity:0;will-change:opacity,transform;border-radius:5%/8%;overflow:hidden;
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,231,170,.26), transparent 52%),
    linear-gradient(125deg,#050a16 0%,#11203f 24%,#26406a 45%,#0b1426 60%,#02060f 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,228,160,.4),inset 0 0 0 1px rgba(180,150,90,.32),0 50px 90px -28px rgba(0,2,12,.95);}
.fz-final .fz-printed-logo{height:15%;}
.fz-final-cta{position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);z-index:9;text-align:center;opacity:0;will-change:opacity;}
.fz-final-cta b{font-family:'Ubuntu',sans-serif;font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;color:#fff;display:block;}
.fz-final-cta span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);}

/* captions + phase rail */
.fz-caps{position:absolute;bottom:7vh;left:0;right:0;text-align:center;z-index:6;padding:0 24px;pointer-events:none;}
.fz-cap{position:relative;height:2.4em;}
.fz-cap p{position:absolute;left:0;right:0;margin:0 auto;max-width:22em;font-family:'Ubuntu',sans-serif;font-weight:700;
  font-size:clamp(18px,2vw,27px);letter-spacing:-.02em;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;text-wrap:balance;}
.fz-cap p.is-on{opacity:1;transform:none;}
.fz-cap p em{font-style:normal;color:var(--yellow);}
.fz-rail{display:flex;gap:8px;justify-content:center;margin-top:20px;}
.fz-rail i{width:28px;height:3px;border-radius:2px;background:rgba(230,235,255,.16);transition:background .3s;}
.fz-rail i.is-on{background:var(--yellow);box-shadow:0 0 10px rgba(255,213,39,.7);}

@media (prefers-reduced-motion: reduce){
  .fz-sticky.is-live .fz-pulse span{animation:none;}
}
/* mobile: collapse to a simple static showcase */
@media (max-width:860px){
  .fz-track{height:auto;}
  .fz-sticky{position:relative;height:auto;min-height:0;padding:110px 0 90px;}
  .fz-stage{display:none;}
  .fz-head{position:relative;top:auto;}
  .fz-caps{position:relative;bottom:auto;margin-top:40px;}
  .fz-cap{height:auto;}
  .fz-cap p{position:relative;opacity:1;transform:none;}
  .fz-cap p:not(:first-child){display:none;}
  .fz-final{position:relative;left:auto;top:auto;transform:none;opacity:1;margin:40px auto 0;}
  .fz-final-cta{position:relative;bottom:auto;opacity:1;margin-top:20px;}
}