/* ---------- World intro ---------- */
html{ scrollbar-gutter:stable; transition:background-color .9s ease; }
html.intro-lock{ background:#050608; }
html.intro-lock,
html.intro-lock body{ overflow:hidden; }

#intro{ display:none; }
html.intro-active #intro{ display:block; }

#intro{
  position:fixed; inset:0;
  z-index:100;
  overflow:hidden;
  background:#050608;
  color:#f4f3f1;
  perspective:1400px;
  transition:background-color .9s ease;
}
#intro.revealing{
  background-color:transparent;
  pointer-events:none;
}
#intro .i-stage{
  position:absolute; inset:0;
  transform:scale(1.04);
  will-change:transform;
}
#intro canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
#intro .i-base,
#intro .i-dots{ opacity:0; }

#intro .i-top{
  position:absolute; top:0; left:0; right:0;
  z-index:2;
}
#intro .i-skip{
  background:none; border:0; padding:0 0 2px;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  color:var(--ink-mute);
  border-bottom:1px solid #3a3a3a;
  cursor:pointer;
  transition:color .25s var(--easing);
}
#intro .i-skip:hover{ color:var(--ink); }

#intro .i-utc{
  position:absolute; left:0; right:0; bottom:6vh;
  z-index:2;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
#intro .i-utc.on{ opacity:1; }
#intro .i-utc b{
  display:block;
  color:#f4f3f1;
  font-size:clamp(30px, 3.4vw, 48px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

#intro .fade{ transition:opacity .6s ease; }
#intro .gone{ opacity:0 !important; pointer-events:none !important; }

/* Seoul marker */
#intro .i-pin{
  position:absolute;
  width:0; height:0;
  z-index:2;
  opacity:0;
  transition:opacity 1.4s ease;
  pointer-events:none;
}
#intro .i-pin.show{ opacity:1; }
#intro .i-ring{
  position:absolute; left:-26px; top:-26px;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s;
}
#intro .i-ring.r2{ animation:iBreathe 3s ease-out infinite; border-color:rgba(255,255,255,.35); }
#intro .i-ring.r3{ animation:iBreathe 3s 1.5s ease-out infinite; border-color:rgba(255,255,255,.35); }
@keyframes iBreathe{
  0%{ transform:scale(.7); opacity:1; }
  100%{ transform:scale(2.6); opacity:0; }
}
#intro .i-line{
  position:absolute; left:30px; top:0;
  height:1px; width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.12));
  transition:width 1.1s .5s cubic-bezier(.2,.8,.2,1);
}
#intro .i-pin.show .i-line{ width:90px; }
#intro .i-lab{
  position:absolute; left:132px; top:-46px;
  white-space:nowrap;
  text-align:left;
  background:none; border:0; padding:0;
  color:inherit;
  font-family:var(--font);
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .9s 1.2s, transform .9s 1.2s;
  cursor:pointer;
  pointer-events:none;
}
#intro .i-pin.show .i-lab{ opacity:1; transform:none; pointer-events:auto; }
#intro .i-lab:focus-visible{ outline:none; }
#intro .i-lab small{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:#8a8a86;
}
#intro .i-lab b{
  display:block;
  margin-top:6px;
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:#fff;
  text-shadow:0 0 24px rgba(255,255,255,.25);
}
#intro .i-lab span{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:#f4f3f1;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  padding:8px 16px;
  transition:background .3s, color .3s, border-color .3s;
}
#intro .i-pin.hover .i-ring{ transform:scale(1.3); border-color:#fff; }
#intro .i-pin.hover .i-lab span{ background:#f4f3f1; color:#0a0a0b; border-color:#f4f3f1; }

@media (max-width: 700px){
  #intro .i-line{ display:none; }
  #intro .i-lab{ left:-60px; top:40px; }
  #intro .i-lab b{ font-size:30px; }
}

/* 본문 히어로에 남는 빛 입자 */
.hero-dust{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:-1;
  pointer-events:none;
}