/* ================================================================
   CINEMATIC LOADER  v3
================================================================ */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;
}
#loader.gone{ opacity:0; pointer-events:none }

/* canvas fills the loader */
#loader-canvas{
  position:absolute;inset:0;
  width:100%!important;height:100%!important;
  display:block;
}

/* ── corner frame brackets ── */
.cf{
  position:absolute;width:32px;height:32px;
  opacity:0;transition:opacity .4s ease;
}
.cf svg{ width:100%;height:100%;stroke:#D4FF00;stroke-width:1.2;fill:none }
.cf.on{ opacity:.7 }
.cf.tl{ top:22px;left:22px }
.cf.tr{ top:22px;right:22px;transform:scaleX(-1) }
.cf.bl{ bottom:22px;left:22px;transform:scaleY(-1) }
.cf.br{ bottom:22px;right:22px;transform:scale(-1,-1) }

/* ── top strip ── */
#topStrip{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:16px;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.3em;color:#333;text-transform:uppercase;
  opacity:0;transition:opacity .5s ease;
  white-space:nowrap;
}
#topStrip.on{ opacity:1 }
#topStrip .live{ color:#D4FF00;animation:blink 1s step-end infinite }
@keyframes blink{ 50%{ opacity:0 } }

/* ── vertical side text ── */
.vtext{
  position:absolute;
  font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:.3em;color:#222;white-space:nowrap;
  opacity:0;transition:opacity .8s ease;
  text-transform:uppercase;
}
.vtext.on{ opacity:1 }
#vL{ left:18px;top:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:top left }
#vR{ right:18px;top:50%;transform:translateX(50%) rotate(90deg);transform-origin:top right }

/* ── counter ── */
#ldr-ctr{
  position:absolute;bottom:28px;right:28px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.2em;color:#222;
  opacity:0;transition:opacity .4s ease;
  text-align:right;line-height:1.9;
}
#ldr-ctr.on{ opacity:1 }

/* ── progress bar ── */
#progWrap{
  position:absolute;
  bottom:20px;left:50%;transform:translateX(-50%);
  width:min(260px,40vw);height:1px;
  background:rgba(255,255,255,.06);
  opacity:0;transition:opacity .4s ease;
}
#progWrap.on{ opacity:1 }
#progFill{
  height:100%;width:0;
  background:linear-gradient(90deg,#D4FF00,#B8A6FF);
  transition:width .1s linear;
  box-shadow:0 0 8px #D4FF00;
}

/* ── name reveal ── */
#nameWrap{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:left;
  opacity:0;transition:opacity .5s ease;
}
#nameWrap.on{ opacity:1 }
.nline{ overflow:hidden;line-height:1.0 }
.nword{
  display:inline-block;
  /* Editorial: thin weight, tight tracking — matches the hero headline */
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(42px,9vw,128px);
  font-weight:300;
  letter-spacing:-.04em;
  color:#fff;
  transform:translateY(110%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.nword.up{ transform:translateY(0) }
.nword.acc{
  /* "Lolla." in Instrument Serif italic — same as portfolio hero */
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  color:#B8A6FF;
}

/* ── tagline ── */
#ldr-tag{
  position:absolute;
  left:50%;bottom:clamp(56px,8vh,90px);
  transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.38em;
  color:#444;text-transform:uppercase;
  opacity:0;transition:opacity .8s ease;
  white-space:nowrap;
}
#ldr-tag.on{ opacity:1 }