/* ============================================================
   BACKSTAGE lobby — a curtain of light before the studio
   ============================================================ */

body.locked{overflow:hidden;height:100vh}

.lobby{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:transparent; /* the canvas paints the backdrop, and lets the studio bleed through as the curtain parts */
  transition:opacity .5s ease .9s,visibility 0s linear 1.5s;
}
body:not(.entered) .lobby{background:#04050A} /* safety while canvas boots */
body.entered .lobby{opacity:0;visibility:hidden;pointer-events:none}
#curtain{position:absolute;inset:0;width:100%;height:100%}

.lobby-inner{
  position:relative;z-index:2;
  text-align:center;
  padding:0 clamp(20px,5vw,60px);
  max-width:900px;
}
.lb-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:#E8C48A;
}
.lb-t{
  margin-top:26px;
  font-family:"Instrument Serif",serif;font-weight:400;
  font-size:clamp(52px,9vw,120px);
  line-height:.99;letter-spacing:-.01em;
  color:#F4F5FA;
  text-shadow:0 2px 40px rgba(0,0,0,.85);
}
.lb-line{display:block;overflow:hidden}
.lb-line > span{display:inline-block;transform:translateY(112%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
body.lobby-on .lb-line > span{transform:none}
.lb-line:nth-child(2) > span{transition-delay:.1s}
.lb-line:nth-child(3) > span{transition-delay:.2s}
.lb-t em{font-style:normal;color:var(--blue-hi)}
.lb-it{font-style:italic;color:#9DC9FF}
.lb-s{
  margin-top:22px;
  font-size:clamp(13.5px,1.5vw,16.5px);color:#B9BFD4;
  text-shadow:0 1px 18px rgba(0,0,0,.9);
}

.lb-enter{
  margin-top:40px;
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--ui);font-size:15.5px;font-weight:600;letter-spacing:.02em;
  color:#F4F5FA;
  background:rgba(10,12,20,.55);
  border:1px solid rgba(157,201,255,.35);
  border-radius:100px;
  padding:14px 30px 14px 16px;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:border-color .25s,box-shadow .3s,transform .25s,background .25s;
}
.lb-enter:hover{
  border-color:var(--blue-hi);
  background:rgba(0,102,220,.16);
  box-shadow:0 0 0 6px rgba(0,102,220,.12), 0 18px 60px rgba(0,102,220,.35);
  transform:translateY(-2px);
}
.lbe-play{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:13px;padding-left:3px;
  transition:transform .25s;
}
.lb-enter:hover .lbe-play{transform:scale(1.1)}
@media (prefers-reduced-motion:no-preference){
  .lbe-play{animation:pulse-ring 2.6s ease-out infinite}
  @keyframes pulse-ring{
    0%{box-shadow:0 0 0 0 rgba(0,102,220,.55)}
    70%{box-shadow:0 0 0 16px rgba(0,102,220,0)}
    100%{box-shadow:0 0 0 0 rgba(0,102,220,0)}
  }
}

.lb-tc{
  margin-top:34px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:#494E68;
}
.tc-state{color:#7C82A0}
body.rolling .tc-state{color:#31D0AA}

/* staggered fade for lobby content on load */
.lb-a{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
body.lobby-on .lb-a{opacity:1;transform:none}
.lb-a:nth-child(1){transition-delay:.05s}
.lb-a:nth-child(2){transition-delay:.15s}
.lb-a:nth-child(3){transition-delay:.5s}
.lb-a:nth-child(4){transition-delay:.72s}
.lb-a:nth-child(5){transition-delay:.9s}

/* lobby content exit during the part */
body.parting .lb-a{opacity:0;transform:translateY(-18px);transition:opacity .5s ease,transform .6s cubic-bezier(.5,0,.75,0)}
body.parting .lb-a:nth-child(2){transition-delay:.05s}
body.parting .lb-a:nth-child(3){transition-delay:.02s}

/* ---------- studio entrance ---------- */
.studio{opacity:0;transform:scale(.988);transition:opacity .55s ease .05s,transform .9s cubic-bezier(.16,1,.3,1) .05s}
body.entered .studio{opacity:1;transform:none}
.studio .side{transform:translateX(-26px);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1) .2s,opacity .7s ease .2s}
body.entered .studio .side{transform:none;opacity:1}
.studio .topline,.studio .upload-note,.studio .h1,.studio .lede,.studio .player{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);
}
body.entered .studio .topline{opacity:1;transform:none;transition-delay:.25s}
body.entered .studio .upload-note{opacity:1;transform:none;transition-delay:.35s}
body.entered .studio .h1{opacity:1;transform:none;transition-delay:.45s}
body.entered .studio .lede{opacity:1;transform:none;transition-delay:.58s}
body.entered .studio .player{opacity:1;transform:none;transition-delay:.72s}

@media (prefers-reduced-motion:reduce){
  .lb-a,.lb-line > span{opacity:1;transform:none;transition:none}
  .studio,.studio .side,.studio .topline,.studio .upload-note,.studio .h1,.studio .lede,.studio .player{
    opacity:1;transform:none;transition:none;
  }
  body:not(.entered) .studio{opacity:0}
  body.entered .studio{opacity:1}
  .lobby{transition:opacity .3s ease,visibility 0s linear .4s}
}