/* One-time DMX-channel intro overlay shown before the real homepage.
   Scoped entirely under #lh-intro so it can never leak into style.css. */
#lh-intro{
  --ink:#0a0d13;
  --dim:#262c3a;
  --dim-bright:#3c4459;
  --amber:#ffb04c;
  --cyan:#34e0c2;
  --violet:#b98bff;
  --paper:#eef1f6;
  --muted:#8a92a8;
  --font-kr:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",-apple-system,sans-serif;
  --font-mono:"SFMono-Regular","SF Mono",Consolas,"Roboto Mono","Courier New",monospace;

  position:fixed;
  inset:0;
  z-index:99999;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 8%, rgba(255,176,76,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 85%, rgba(52,224,194,0.07), transparent 65%),
    radial-gradient(ellipse 45% 40% at 12% 82%, rgba(185,139,255,0.07), transparent 65%),
    linear-gradient(180deg, var(--ink), #0d1119 60%, var(--ink));
  color:var(--paper);
  font-family:var(--font-kr);
  transition:opacity .45s cubic-bezier(.4,0,.2,1), filter .45s cubic-bezier(.4,0,.2,1), visibility 0s linear .45s;
}
#lh-intro.lh-intro-exit{ opacity:0; filter:blur(6px); visibility:hidden; pointer-events:none; }
#lh-intro[hidden]{ display:none; }

/* The real homepage waits quietly under the intro, then eases into view in
   sync with the intro's fade-out so the handoff reads as one continuous
   dissolve instead of a hard cut. */
body.lh-pre-reveal nav.LED-House,
body.lh-pre-reveal section:first-of-type{
  opacity:0;
  transform:translateY(16px);
}
nav.LED-House,
section:first-of-type{
  transition:opacity .55s cubic-bezier(.4,0,.2,1) .075s, transform .55s cubic-bezier(.4,0,.2,1) .075s;
}

#lh-intro .lhi-grid{
  position:absolute; inset:-20px;
  display:grid;
  grid-template-columns:repeat(var(--cols,40),1fr);
  grid-template-rows:repeat(var(--rows,24),1fr);
  gap:7px;
}
#lh-intro .lhi-slot{
  border-radius:3px;
  background:var(--dim);
  opacity:.09;
  animation:lhiChaseBase .75s cubic-bezier(.2,.7,.3,1) var(--delay,0s) both;
}
#lh-intro .lhi-slot.pop{
  animation:lhiChasePop .75s cubic-bezier(.2,.7,.3,1) var(--delay,0s) both,
            lhiAmbient 7s ease-in-out calc(var(--delay,0s) + .75s) infinite;
}
@keyframes lhiChaseBase{
  0%{ opacity:.05; }
  55%{ opacity:.5; background:var(--dim-bright); }
  100%{ opacity:.1; background:var(--dim); }
}
@keyframes lhiChasePop{
  0%{ opacity:.05; background:var(--dim); box-shadow:none; }
  55%{ opacity:1; background:var(--pop); box-shadow:0 0 16px var(--pop); }
  100%{ opacity:.55; background:var(--pop); box-shadow:0 0 7px var(--pop); }
}
@keyframes lhiAmbient{
  0%,100%{ opacity:.45; box-shadow:0 0 6px var(--pop); }
  50%{ opacity:.85; box-shadow:0 0 13px var(--pop); }
}

#lh-intro .lhi-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 46%, transparent 30%, rgba(10,13,19,0.82) 78%, var(--ink) 100%);
  pointer-events:none;
}

#lh-intro .lhi-topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:12px;
  padding:22px clamp(20px,4vw,48px);
  opacity:0; animation:lhiFadeDown .35s ease .075s forwards;
}
#lh-intro .lhi-badge{
  height:30px; width:auto;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
#lh-intro .lhi-badge img{ height:100%; width:auto; display:block; object-fit:contain; }
#lh-intro .lhi-name{ font-size:14px; font-weight:700; letter-spacing:.01em; }
#lh-intro .lhi-name small{ display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:.16em; color:var(--muted); margin-top:2px; }

#lh-intro .lhi-content{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 24px;
}

#lh-intro .lhi-kicker{
  font-family:var(--font-mono);
  font-size:11.5px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 22px;
  opacity:0; animation:lhiFadeUp .35s ease .775s forwards;
}

#lh-intro .lhi-headline{
  margin:0 0 26px;
  font-weight:800;
  font-size:clamp(2.1rem, 6.6vw, 4.75rem);
  line-height:1.16;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
#lh-intro .lhi-line{ display:block; overflow:hidden; position:relative; }
#lh-intro .lhi-reveal{
  display:block;
  transform:translateY(115%);
  animation:lhiRevealUp .425s cubic-bezier(.16,.8,.24,1) forwards;
}
#lh-intro .lhi-l1 .lhi-reveal{ animation-delay:.89s; }
#lh-intro .lhi-l2 .lhi-reveal{ animation-delay:.99s; }
#lh-intro .lhi-accent{
  background:linear-gradient(92deg, var(--amber) 0%, #ffd28a 45%, var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#lh-intro .lhi-line::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:6px;
  background:linear-gradient(180deg, transparent, var(--paper), transparent);
  opacity:0;
  animation:lhiScanBar .35s ease forwards;
  filter:drop-shadow(0 0 6px rgba(238,241,246,.7));
}
#lh-intro .lhi-l1::after{ animation-delay:.89s; }
#lh-intro .lhi-l2::after{ animation-delay:.99s; }

#lh-intro .lhi-subcopy{
  max-width:46ch;
  font-size:15.5px; line-height:1.7;
  color:var(--muted);
  margin:0;
  opacity:0; animation:lhiFadeUp .4s ease 1.175s forwards;
}

#lh-intro .lhi-readout{
  position:absolute; left:0; right:0; bottom:26px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.14em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0; animation:lhiFadeUp .4s ease 1.3s forwards;
}
#lh-intro .lhi-sep{ color:var(--dim-bright); }
#lh-intro .lhi-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:lhiPulseDot 1.8s ease-in-out infinite;
}

@keyframes lhiFadeDown{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:translateY(0);} }
@keyframes lhiFadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes lhiRevealUp{ to{ transform:translateY(0); } }
@keyframes lhiScanBar{
  0%{ opacity:0; transform:translateX(0); }
  12%{ opacity:1; }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateX(110%); }
}
@keyframes lhiPulseDot{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

@media (max-width:640px){
  #lh-intro .lhi-readout{ font-size:9px; gap:9px; bottom:18px; padding:0 12px; text-align:center; }
  #lh-intro .lhi-name{ font-size:12.5px; }
}

@media (prefers-reduced-motion: reduce){
  #lh-intro .lhi-slot{ animation:none !important; opacity:.14; }
  #lh-intro .lhi-slot.pop{ animation:none !important; opacity:.6; background:var(--pop,var(--dim)); box-shadow:0 0 8px var(--pop,transparent); }
  #lh-intro .lhi-topbar, #lh-intro .lhi-kicker, #lh-intro .lhi-subcopy, #lh-intro .lhi-readout{ opacity:1; animation:none !important; }
  #lh-intro .lhi-reveal{ transform:none; animation:none !important; }
  #lh-intro .lhi-line::after{ display:none; }
}