#intro-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2e8f0;
  --intro-parallax-x: 0px;
  --intro-parallax-y: 0px;
  --intro-glow-shift-x: 50%;
  --intro-glow-shift-y: 50%;
  background: radial-gradient(circle at 20% 15%, rgba(34, 211, 238, 0.18), rgba(0, 0, 0, 0) 45%),
              radial-gradient(circle at 80% 20%, rgba(94, 234, 212, 0.17), rgba(0, 0, 0, 0) 55%),
              radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.95), #020617 70%);
  overflow: hidden;
}

#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(130%) brightness(1.1);
}

#intro-aurora,
#intro-rings,
#intro-scanlines,
#intro-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#intro-aurora {
  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.4), rgba(30, 64, 175, 0) 45%),
              radial-gradient(circle at 70% 65%, rgba(94, 234, 212, 0.45), rgba(12, 74, 110, 0) 50%),
              conic-gradient(from 180deg at 50% 50%, rgba(14, 116, 144, 0.4), rgba(30, 64, 175, 0.2), rgba(56, 189, 248, 0.45), rgba(30, 64, 175, 0.2));
  background-position:
    var(--intro-glow-shift-x, 50%) var(--intro-glow-shift-y, 50%),
    calc(100% - var(--intro-glow-shift-x, 50%)) calc(100% - var(--intro-glow-shift-y, 50%)),
    center;
  animation: auroraDrift 18s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.75;
}

#intro-rings {
  background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.09) 0%, rgba(14, 165, 233, 0.03) 45%, rgba(148, 163, 184, 0) 65%),
              radial-gradient(circle at 50% 50%, rgba(136, 58, 234, 0.08) 8%, transparent 60%);
  background-position:
    calc(50% + var(--intro-parallax-x, 0px)) calc(50% + var(--intro-parallax-y, 0px)),
    calc(50% - var(--intro-parallax-x, 0px)) calc(50% - var(--intro-parallax-y, 0px));
  animation: ringPulse 6s ease-in-out infinite;
}

#intro-scanlines {
  background-image: repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0px, rgba(15, 23, 42, 0.1) 2px, rgba(23, 37, 84, 0.05) 2px, rgba(23, 37, 84, 0.05) 4px);
  mix-blend-mode: soft-light;
  opacity: 0.35;
  animation: scanlineSweep 9s linear infinite;
}

#intro-sparks::before,
#intro-sparks::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.35) 0%, rgba(148, 163, 184, 0) 55%),
                    radial-gradient(circle, rgba(45, 212, 191, 0.45) 0%, rgba(45, 212, 191, 0) 65%);
  background-position:
    calc(50% + var(--intro-parallax-x, 0px)) calc(50% + var(--intro-parallax-y, 0px)),
    calc(50% - var(--intro-parallax-x, 0px)) calc(50% - var(--intro-parallax-y, 0px));
  opacity: 0.4;
  animation: sparkBlink 4.8s ease-in-out infinite;
}

#intro-sparks::after {
  animation-delay: 2s;
  transform: scaleX(-1);
}

#ui-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#logo {
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  font-weight: 700;
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: #e2e8f0;
  text-shadow: 0 0 22px rgba(14, 165, 233, 0.4), 0 0 45px rgba(129, 140, 248, 0.2);
}

#logo .delta {
  color: #38bdf8;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.8), 0 0 60px rgba(14, 165, 233, 0.6);
}

#subtitle {
  font-size: clamp(0.8rem, 1.8vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.35rem;
  color: #cbd5f5;
  text-transform: uppercase;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.35));
}

#subtitle span {
  opacity: 0;
  transform: translateY(6px);
  display: inline-block;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#subtitle span.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#enter-button {
  margin-top: 3rem;
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.35), rgba(56, 189, 248, 0.18));
  border: 1px solid rgba(125, 211, 252, 0.45);
  color: #f8fafc;
  padding: 1rem 2.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, opacity 0.5s ease;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.85);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.25);
}

#enter-button:hover {
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.55), rgba(34, 211, 238, 0.3));
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.4);
  transform: scale(1.05) translateY(-2px);
}

#enter-button:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 4px;
}

#intro-container.fade-out {
  animation: introFadeOut 0.6s ease forwards;
}

@keyframes introFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#bh-field,
#bh-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#bh-core {
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  z-index: 20;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(6, 11, 32, 0.05) 0%, rgba(6, 11, 32, 0.2) 45%, #000 70%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(34, 211, 238, 0.35);
  animation: corePulse 4.2s ease-in-out infinite;
}

#bh-field {
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  z-index: 15;
  opacity: 0;
  filter: blur(6px) saturate(140%);
  background: conic-gradient(from 0deg, rgba(34, 211, 238, 0.25), rgba(0, 0, 0, 0) 40%, rgba(34, 211, 238, 0.25) 70%, rgba(0, 0, 0, 0));
}

#intro-container.blackhole #bh-core {
  opacity: 1;
  animation: bhCoreGrow 1.1s ease-in forwards;
}

#intro-container.blackhole #bh-field {
  opacity: 1;
  animation: bhFieldSpin 1.2s linear infinite, bhFieldGrow 1.1s ease-in forwards;
}

#intro-container.blackhole #intro-aurora,
#intro-container.blackhole #intro-rings,
#intro-container.blackhole #intro-scanlines,
#intro-container.blackhole #intro-sparks {
  opacity: 0;
  transition: opacity 0.65s ease;
}

#intro-container.blackhole #ui-container {
  animation: bhSuck 0.9s ease-in forwards;
  filter: blur(0px);
}

#intro-container.blackhole #bg-canvas {
  animation: bhBackdrop 1.1s ease-in forwards;
}

#intro-container.blackhole {
  background-color: transparent;
  transition: background-color 0.35s ease;
}

#intro-container.blackhole,
#intro-container.fade-out {
  pointer-events: none !important;
}

@keyframes bhCoreGrow {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(35);
  }
}

@keyframes bhFieldSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes bhFieldGrow {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: blur(6px);
  }
  100% {
    transform: translate(-50%, -50%) scale(14);
    filter: blur(18px);
  }
}

@keyframes bhSuck {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    filter: blur(8px);
  }
}

@keyframes bhBackdrop {
  0% {
    filter: blur(0px) brightness(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    filter: blur(6px) brightness(0.8);
    transform: scale(1.05);
    opacity: 0;
  }
}

#intro-container.blackhole::after {
  content: '';
  position: fixed;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 9999;
  -webkit-mask: radial-gradient(circle 0vmax at 50% 50%, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 1) 0vmax);
  mask: radial-gradient(circle 0vmax at 50% 50%, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 1) 0vmax);
  animation: bhHole 1.1s ease-in forwards;
}

@keyframes bhHole {
  0% {
    -webkit-mask: radial-gradient(circle 0vmax at 50% 50%, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 1) 0vmax);
    mask: radial-gradient(circle 0vmax at 50% 50%, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 0) 0vmax, rgba(0, 0, 0, 1) 0vmax);
  }
  100% {
    -webkit-mask: radial-gradient(circle 120vmax at 50% 50%, rgba(0, 0, 0, 0) 120vmax, rgba(0, 0, 0, 0) calc(120vmax - 1px), rgba(0, 0, 0, 1) 120vmax);
    mask: radial-gradient(circle 120vmax at 50% 50%, rgba(0, 0, 0, 0) 120vmax, rgba(0, 0, 0, 0) calc(120vmax - 1px), rgba(0, 0, 0, 1) 120vmax);
  }
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(-5%, -3%, 0) scale(1.05) rotate(0deg);
  }
  50% {
    transform: translate3d(6%, 2%, 0) scale(1.12) rotate(2deg);
  }
  100% {
    transform: translate3d(-5%, -3%, 0) scale(1.05) rotate(0deg);
  }
}

@keyframes ringPulse {
  0% {
    opacity: 0.4;
    transform: translate(var(--intro-parallax-x, 0px), var(--intro-parallax-y, 0px)) scale(0.92);
  }
  50% {
    opacity: 0.75;
    transform: translate(var(--intro-parallax-x, 0px), var(--intro-parallax-y, 0px)) scale(1.05);
  }
  100% {
    opacity: 0.4;
    transform: translate(var(--intro-parallax-x, 0px), var(--intro-parallax-y, 0px)) scale(0.92);
  }
}

@keyframes scanlineSweep {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}

@keyframes sparkBlink {
  0% {
    opacity: 0.15;
  }
  40% {
    opacity: 0.45;
  }
  70% {
    opacity: 0.08;
  }
  100% {
    opacity: 0.28;
  }
}

@keyframes corePulse {
  0%,
  100% {
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.35);
  }
  50% {
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9), 0 0 55px rgba(56, 189, 248, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  #intro-aurora,
  #intro-rings,
  #intro-scanlines,
  #intro-sparks,
  #bh-core,
  #bh-field {
    animation-duration: 1s;
    animation-iteration-count: 1;
  }

  #intro-aurora,
  #intro-rings,
  #intro-scanlines,
  #intro-sparks {
    animation-play-state: paused;
  }
}