/* OUT23 home intro splash — inspired by Liberty Club boot screen, OUT23 palette */

html.out23-loading,
html.out23-loading body {
  overflow: hidden;
  height: 100%;
}

#out23-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #0d0f40 0%, #000 72%);
  color: #f5f5f7;
  overflow: hidden;
  isolation: isolate;
}

#out23-boot-splash.out23-boot-splash--exit {
  animation: out23SplashExit 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

#out23-boot-splash.out23-boot-splash--exit .out23-boot-splash__logo-wrap {
  animation: out23LogoExit 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.out23-boot-splash__aurora {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background:
    radial-gradient(ellipse 45% 35% at 20% 40%, rgba(9, 255, 234, 0.28), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 60%, rgba(115, 62, 238, 0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(29, 200, 205, 0.14), transparent 70%);
  animation: out23AuroraDrift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.out23-boot-splash__aurora--2 {
  animation-duration: 11s;
  animation-direction: alternate-reverse;
  opacity: 0.7;
  filter: blur(40px);
}

.out23-boot-splash__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(9, 255, 234, 0.05) 1px, transparent 0),
    linear-gradient(90deg, rgba(115, 62, 238, 0.07) 1px, transparent 0);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  animation: out23GridPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.out23-boot-splash__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 0,
    rgba(0, 0, 0, 0.12) 4px
  );
  opacity: 0.25;
  pointer-events: none;
}

.out23-boot-splash__stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 420px);
  height: min(72vw, 420px);
  flex-shrink: 0;
}

.out23-boot-splash__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(9, 255, 234, 0.18);
  box-shadow:
    0 0 60px rgba(9, 255, 234, 0.12),
    inset 0 0 40px rgba(115, 62, 238, 0.08);
  animation: out23RingSpin 12s linear infinite;
  pointer-events: none;
}

.out23-boot-splash__ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #09ffea;
  border-right-color: rgba(115, 62, 238, 0.45);
  animation: out23RingSpin 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.out23-boot-splash__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.out23-boot-splash__orb--1 {
  width: 8px;
  height: 8px;
  background: #09ffea;
  top: 22%;
  left: 18%;
  box-shadow: 0 0 24px #09ffea;
  animation: out23OrbFloat1 5s ease-in-out infinite;
}

.out23-boot-splash__orb--2 {
  width: 6px;
  height: 6px;
  background: #733eee;
  top: 30%;
  right: 20%;
  box-shadow: 0 0 20px #733eee;
  animation: out23OrbFloat2 6.5s ease-in-out infinite;
}

.out23-boot-splash__orb--3 {
  width: 5px;
  height: 5px;
  background: #1dc8cd;
  bottom: 28%;
  left: 42%;
  box-shadow: 0 0 18px #1dc8cd;
  animation: out23OrbFloat3 4.2s ease-in-out infinite;
}

.out23-boot-splash__pulse-ring {
  position: absolute;
  inset: 16.666%;
  border-radius: 50%;
  border: 1px solid rgba(9, 255, 234, 0.35);
  animation: out23PulseRing 2.8s ease-out infinite;
  pointer-events: none;
}

.out23-boot-splash__logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: out23LogoReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.out23-boot-splash__logo-glow {
  position: absolute;
  width: 120%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(9, 255, 234, 0.35) 0%,
    rgba(115, 62, 238, 0.2) 42%,
    transparent 68%
  );
  animation: out23GlowPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

.out23-boot-splash__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(220px, 52vw);
  height: auto;
  object-fit: contain;
  object-position: center;
  animation: out23LogoBreath 3s ease-in-out infinite;
}

.out23-boot-splash__progress {
  position: relative;
  z-index: 2;
  width: min(200px, 56vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.out23-boot-splash__progress-bar {
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #09ffea, #733eee, transparent);
  animation: out23ProgressSweep 1.4s ease-in-out infinite;
}

@keyframes out23LogoExit {
  to {
    opacity: 0;
    transform: scale(1.12);
    filter: blur(6px);
  }
}

@keyframes out23SplashExit {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  55% {
    opacity: 1;
    transform: scale(1.02);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(16px);
  }
}

@keyframes out23AuroraDrift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  to { transform: translate(3%, -2%) rotate(3deg) scale(1.05); }
}

@keyframes out23GridPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

@keyframes out23RingSpin {
  to { transform: rotate(1turn); }
}

@keyframes out23OrbFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(24px, -18px); }
}

@keyframes out23OrbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 22px); }
}

@keyframes out23OrbFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(16px, 14px); }
}

@keyframes out23LogoReveal {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(12px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes out23GlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes out23LogoBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(9, 255, 234, 0.35));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 36px rgba(115, 62, 238, 0.55));
  }
}

@keyframes out23ProgressSweep {
  0% { transform: translateX(-120%); }
  to { transform: translateX(320%); }
}

@keyframes out23PulseRing {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #out23-boot-splash *,
  #out23-boot-splash::before,
  #out23-boot-splash::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  #out23-boot-splash.out23-boot-splash--exit {
    animation-duration: 0.25s !important;
  }
}