/* ============ MLP INTRO ANIMATION ============ */
/* Locks scroll while the intro overlay is live. */
html.intro-active, body.intro-active {
  overflow: hidden;
  height: 100%;
}

#mlp-intro {
  position: fixed; inset: 0; z-index: 99999;
  background: #04030A;
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
  contain: strict;
}
#mlp-intro.done {
  animation: introDismiss .8s cubic-bezier(.4,0,1,1) forwards;
  pointer-events: none;
}
@keyframes introDismiss {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

#intro-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* The logo, tagline and burst stay hidden until JS adds `.go` to #mlp-intro,
   which it does only once the logo video has a frame ready. This prevents the
   empty circular frame from flashing while the video is still loading. */
#intro-logo-wrap {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  opacity: 0;
  transform-origin: center center;
}
#mlp-intro.go #intro-logo-wrap {
  animation: logoJourney 2.8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes logoJourney {
  0%   { transform: scale(4.5); opacity: 0; filter: blur(20px); }
  15%  { opacity: 1; filter: blur(0); }
  70%  { transform: scale(1); opacity: 1; filter: blur(0); }
  88%  { transform: scale(.9) translateY(-8px); opacity: .9; filter: blur(0); }
  100% { transform: scale(.75) translateY(-12px); opacity: 0; filter: blur(8px); }
}

#intro-logo {
  width: 180px; height: 180px; border-radius: 50%;
  box-shadow:
    0 0 60px rgba(140,80,255,.6),
    0 0 120px rgba(100,50,220,.3),
    0 0 200px rgba(80,40,200,.15);
  object-fit: cover;
}
#mlp-intro.go #intro-logo {
  animation: logoPulse 2.8s ease forwards;
}
@keyframes logoPulse {
  0%, 15% {
    box-shadow:
      0 0 80px rgba(160,100,255,.9),
      0 0 160px rgba(120,60,240,.5);
  }
  70% {
    box-shadow:
      0 0 60px rgba(140,80,255,.6),
      0 0 120px rgba(100,50,220,.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(120,70,220,.2);
  }
}

#intro-tagline {
  font-family: 'Geist Mono','Manrope',monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .35em;
  color: rgba(180,140,255,.9);
  text-transform: uppercase;
  margin-top: 20px;
  opacity: 0;
  text-shadow: 0 0 20px rgba(140,100,255,.6);
}
#mlp-intro.go #intro-tagline {
  animation: taglineIn 2.8s ease forwards;
}
@keyframes taglineIn {
  0%, 20% { opacity: 0; letter-spacing: .6em; }
  40%     { opacity: 1; letter-spacing: .35em; }
  85%     { opacity: 1; }
  100%    { opacity: 0; }
}

#intro-burst {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle,
    rgba(130,80,255,.18) 0%,
    rgba(100,60,220,.08) 35%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
}
#mlp-intro.go #intro-burst {
  animation: burstPulse 2.8s ease forwards;
}
@keyframes burstPulse {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  20%  { transform: translate(-50%,-50%) scale(1.5); opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(1);   opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(.5);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #mlp-intro { display: none !important; }
}