/* Splash Screen */
.splash {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1s var(--ease-out);
  overflow: hidden;
}

.splash.hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-particles {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.splash-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--cornflower);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 6s infinite;
}

.splash-logo-frame {
  width: min(360px, 85vw);
  height: min(220px, 52vw);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffffff 50%, #f0f0f0 65%, #c0c0c0 82%, #666 100%);
  border: 2px solid rgba(100, 149, 237, 0.25);
  box-shadow:
    0 0 80px rgba(100, 149, 237, 0.12),
    0 0 160px rgba(100, 149, 237, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeIn 2s 0.3s var(--ease-out) forwards;
  overflow: hidden;
}

.splash-logo {
  width: 150px;
  height: auto;
  opacity: 0;
  animation: fadeIn 2s 0.8s var(--ease-out) forwards;
}

.splash-title {
  font-family: var(--font-legacy);
  font-size: var(--text-lg);
  color: var(--cornflower);
  letter-spacing: 0.15em;
  margin-top: var(--space-6);
  opacity: 0;
  animation: fadeInUp 1.5s 1.5s var(--ease-out) forwards;
  position: relative;
  z-index: 1;
}

.splash-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--warm-500);
  font-style: italic;
  margin-top: var(--space-8);
  opacity: 0;
  animation: fadeIn 2s 2.5s var(--ease-out) forwards;
  position: relative;
  z-index: 1;
}

.splash-begin {
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-legacy);
  font-size: var(--text-base);
  color: white;
  background: transparent;
  border: 1px solid var(--cornflower);
  border-radius: var(--radius-full);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: fadeInUp 1s 3s var(--ease-out) forwards;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  z-index: 1;
}

.splash-begin:hover {
  background: var(--cornflower);
  color: #0a0a0a;
  box-shadow: 0 0 30px rgba(100, 149, 237, 0.4);
}

.splash-begin::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px; bottom: -3px; left: -3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--cornflower);
  opacity: 0;
  animation: pulseGlow 2s 3.5s infinite;
}

.splash-begin:hover::after {
  animation: none;
  opacity: 0;
}