/* =====================================================
   MERGED INTRO — "Moldy walks the lab"
   5 seconds. Side-scrolling lab, Moldy walks past 5 spore
   cassettes carrying a microscope, sets it down, focus pull
   through the eyepiece reveals the site.
   ===================================================== */

.intro{--teal:#00A8A8;--teal-2:#00C4C4;--ink:#0A0F0F;--paper:#FAFCFC;--sand:#F5EFE7;--amber:#D4A655;--rust:#A82A1F}

/* full-bleed lab stage */
.lab{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%,rgba(0,168,168,.16),transparent 70%),
    linear-gradient(180deg,#070a0b 0%,#0a0f10 50%,#0f1718 100%);
  overflow:hidden;
}

/* faint reticle / dot grid backdrop */
.lab-grid{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(0,168,168,.18) 1px,transparent 1.5px),
    linear-gradient(90deg,transparent 49.7%,rgba(0,168,168,.08) 50%,transparent 50.3%),
    linear-gradient(0deg,transparent 49.7%,rgba(0,168,168,.08) 50%,transparent 50.3%);
  background-size:32px 32px,100% 100%,100% 100%;
  opacity:.55;
}

/* floor line */
.lab-floor{
  position:absolute;left:0;right:0;bottom:18%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,168,168,.4),rgba(0,168,168,.4),transparent);
}

/* scrolling parallax track holds the cassette wall */
.lab-track{
  position:absolute;left:0;top:18%;bottom:18%;width:200%;
  transform:translateX(0);
  transition:transform 5s cubic-bezier(.4,0,.2,1);
}
.intro.go .lab-track{transform:translateX(-32%)}

/* ambient drifting spores */
.lab-spore{
  position:absolute;border-radius:50%;background:#00A8A8;
  box-shadow:0 0 8px rgba(0,168,168,.5);
  animation:labDrift var(--dur,9s) linear var(--delay,0s) infinite;
  opacity:0;
}
@keyframes labDrift{
  0%   {transform:translate(var(--sx),100%);opacity:0}
  10%  {opacity:.4}
  90%  {opacity:.4}
  100% {transform:translate(calc(var(--sx) + var(--drift,30px)),-20%);opacity:0}
}

/* ============ CASSETTES ============ */
.cassette-row{
  position:absolute;left:18%;top:50%;transform:translateY(-50%);
  display:flex;gap:96px;
}
.cassette{
  position:relative;width:120px;height:200px;
  background:linear-gradient(180deg,rgba(20,30,32,.95),rgba(10,15,16,.95));
  border:1px solid rgba(0,168,168,.3);border-radius:6px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;padding:14px 10px 10px;
}
/* the slide window */
.cassette .slide{
  width:80px;height:120px;border-radius:3px;
  background:var(--c, rgba(0,196,196,.4));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 0 24px var(--g, rgba(0,196,196,.5)),
    inset 0 0 14px rgba(0,0,0,.3);
  position:relative;overflow:hidden;
  filter:saturate(1.1);
}
/* spore particles inside slide */
.cassette .slide::before,
.cassette .slide::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.45) 1px,transparent 2px),
    radial-gradient(circle at 70% 60%,rgba(255,255,255,.4) 1.5px,transparent 2.5px),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.5) 1px,transparent 2px),
    radial-gradient(circle at 85% 30%,rgba(255,255,255,.4) 1.5px,transparent 2.5px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.3) 2px,transparent 3px),
    radial-gradient(circle at 15% 40%,rgba(255,255,255,.35) 1px,transparent 2px),
    radial-gradient(circle at 80% 80%,rgba(255,255,255,.4) 1px,transparent 2px);
}
.cassette .slide::after{
  background-image:
    radial-gradient(circle at 40% 70%,rgba(255,255,255,.4) 1px,transparent 2px),
    radial-gradient(circle at 60% 25%,rgba(255,255,255,.3) 1px,transparent 2px),
    radial-gradient(circle at 25% 55%,rgba(255,255,255,.35) 1.5px,transparent 2.5px),
    radial-gradient(circle at 75% 75%,rgba(255,255,255,.4) 1px,transparent 2px);
  animation:slideShimmer 3s ease-in-out infinite;
}
@keyframes slideShimmer{0%,100%{opacity:.7}50%{opacity:1}}
.cassette .label{
  margin-top:10px;color:rgba(255,255,255,.55);
  font:600 9px/1 var(--font,'Plus Jakarta Sans',system-ui);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
}
.cassette .code{
  margin-top:4px;color:rgba(0,196,196,.7);
  font:500 8px/1 var(--font);letter-spacing:.18em;
}
/* cassette glow pulse as Moldy walks past */
.cassette.lit{animation:cassetteGlow 600ms ease-out}
@keyframes cassetteGlow{
  0%  {box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.4)}
  50% {box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 40px var(--g, rgba(0,196,196,.6)),inset 0 1px 0 rgba(255,255,255,.04)}
  100%{box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.4)}
}
/* small mounting bracket above each cassette */
.cassette::before{
  content:'';position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  width:40px;height:6px;border-radius:2px;
  background:#1a2426;border:1px solid rgba(0,168,168,.25);
}

/* ============ MOLDY WALKING ============ */
.moldy-walker{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200px;height:280px;
  z-index:3;
  opacity:0;
  transition:opacity .5s,transform 1s cubic-bezier(.4,0,.2,1);
}
.intro.go .moldy-walker{opacity:1}

/* he walks "in place" — the bg scrolls. but a slight bob/sway sells walking */
.moldy-walker .body{
  position:absolute;inset:0;
  animation:walkBob 600ms ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes walkBob{
  0%,100% {transform:translateY(0) rotate(-1deg)}
  50%     {transform:translateY(-6px) rotate(1deg)}
}
.moldy-walker svg{width:100%;height:100%;color:#00C4C4;overflow:visible;filter:drop-shadow(0 4px 16px rgba(0,196,196,.4))}

/* the microscope he's carrying — sits in front of him at hand height */
.moldy-walker .scope-carry{
  position:absolute;left:60%;top:42%;width:90px;height:110px;
  color:#FAFCFC;
  animation:carryBob 600ms ease-in-out infinite;
  transition:transform 1s cubic-bezier(.5,.1,.3,1),top 1s cubic-bezier(.5,.1,.3,1),left 1s cubic-bezier(.5,.1,.3,1),width 1s,height 1s;
}
.moldy-walker .scope-carry svg{width:100%;height:100%;overflow:visible;color:inherit}
@keyframes carryBob{
  0%,100% {transform:translateY(0)}
  50%     {transform:translateY(-4px)}
}

/* speech bubble */
.moldy-bubble{
  position:absolute;left:50%;top:14%;transform:translateX(-50%) translateY(8px) scale(.9);
  background:#FAFCFC;color:#0A0F0F;
  font:700 18px/1.1 var(--font,'Plus Jakarta Sans',system-ui);
  letter-spacing:-.01em;
  padding:14px 22px;border-radius:14px;
  box-shadow:0 8px 30px rgba(0,196,196,.3),0 1px 0 rgba(0,168,168,.4);
  opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.5,1.5,.5,1);
  white-space:nowrap;z-index:4;
}
.moldy-bubble::after{
  content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:#FAFCFC;
  border-bottom-right-radius:3px;
}
.moldy-bubble em{color:#00A8A8;font-style:normal}
.intro.speak .moldy-bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* ============ MICROSCOPE PLANT (final beat) ============ */
.intro.plant .moldy-walker{transform:translate(-50%,-50%) translateX(-100px) scale(.85);opacity:.5}
.intro.plant .moldy-walker .body{animation:none;transform:rotate(0deg)}
.intro.plant .moldy-walker .scope-carry{
  left:140%;top:60%;width:200px;height:240px;
  animation:none;transform:translateY(0);
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
}

/* ============ FOCUS PULL / EYEPIECE DIVE ============ */
.eye-iris{
  position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.1);
  background:radial-gradient(circle,rgba(0,196,196,.35) 0%,rgba(10,15,15,.95) 70%);
  box-shadow:0 0 60px rgba(0,196,196,.5);
  opacity:0;
  transition:transform 1.4s cubic-bezier(.5,0,.2,1),opacity 1s;
  z-index:5;
}
.intro.dive .eye-iris{opacity:1;transform:translate(-50%,-50%) scale(80)}

/* nested aperture rings during focus pull */
.iris-ring{
  position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(0,196,196,.6);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:transform 1s cubic-bezier(.5,0,.2,1),opacity .8s;
  z-index:4;pointer-events:none;
}
.iris-ring.r1{width:140px;height:140px}
.iris-ring.r2{width:240px;height:240px}
.iris-ring.r3{width:380px;height:380px}
.intro.plant .iris-ring.r1{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:0s}
.intro.plant .iris-ring.r2{transform:translate(-50%,-50%) scale(1);opacity:.6;transition-delay:.15s}
.intro.plant .iris-ring.r3{transform:translate(-50%,-50%) scale(1);opacity:.3;transition-delay:.3s}
.intro.dive .iris-ring{transform:translate(-50%,-50%) scale(6);opacity:0;transition:transform 1.2s cubic-bezier(.5,0,.2,1),opacity 1.2s}

/* ============ HEADLINE ============ */
.intro-headline{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(60px);
  color:#fff;font:700 clamp(28px,4.5vw,52px)/1.05 var(--font,'Plus Jakarta Sans',system-ui);
  letter-spacing:-.02em;text-align:center;
  opacity:0;transition:opacity .8s,transform .8s cubic-bezier(.4,0,.2,1);
  z-index:6;text-wrap:balance;
}
.intro-headline em{color:#00C4C4;font-style:normal}
.intro.plant .intro-headline{opacity:1;transform:translate(-50%,-50%) translateY(0)}
.intro.dive .intro-headline{opacity:0;transform:translate(-50%,-50%) translateY(-30px) scale(1.2)}

/* skip button — keep it visible during merged intro */
.intro-skip{
  position:absolute;top:24px;right:24px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 16px;font-size:12px;
  font-family:var(--font,'Plus Jakarta Sans',system-ui);font-weight:500;letter-spacing:.04em;
  cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;z-index:10;
}
.intro-skip:hover{background:rgba(255,255,255,.12);color:#fff}

/* fade-out at the very end */
.intro.done{pointer-events:none;animation:introFade 600ms ease-out forwards}
@keyframes introFade{to{opacity:0;visibility:hidden}}

/* ===== DEV PICKER (only shown when ?dev=1) ===== */
.intro-picker{display:none}
.intro.dev .intro-picker{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:min(720px,92vw);
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:6px;backdrop-filter:blur(10px);z-index:8;
}
.intro-picker button{
  background:transparent;color:rgba(255,255,255,.65);border:0;
  font:500 11px/1 var(--font,'Plus Jakarta Sans',system-ui);
  letter-spacing:.04em;padding:8px 12px;border-radius:999px;cursor:pointer;
  transition:all .18s;white-space:nowrap;
}
.intro-picker button:hover{color:#fff;background:rgba(255,255,255,.06)}
.intro-picker button.on{color:#0A0F0F;background:#00C4C4;font-weight:600}

/* replay pill — in nav corner after intro ends */
.intro-replay{
  position:fixed;top:90px;left:20px;z-index:90;
  background:rgba(10,15,15,.85);color:#fff;
  border:1px solid rgba(0,196,196,.3);border-radius:999px;
  padding:8px 14px;font:500 11px/1 var(--font,'Plus Jakarta Sans',system-ui);
  letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(8px);
  display:none;align-items:center;gap:6px;transition:all .2s;
}
.intro-replay:hover{background:#0A0F0F;border-color:rgba(0,196,196,.6)}
.intro-replay svg{width:12px;height:12px}
.intro-replay.show{display:flex}