/* Gagarin Splash Screen */

/* === Container === */
.splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, #1a103a 0%, #0d0618 50%, #050210 100%);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* === Stars background === */
.splash-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.splash-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite alternate;
}
.splash-stars span:nth-child(odd) { animation-delay: 0.5s; }
.splash-stars span:nth-child(3n) { width: 3px; height: 3px; }
.splash-stars span:nth-child(5n) { animation-duration: 3s; }

@keyframes starTwinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* === Rocket wrapper (translate only — keeps comet aligned) === */
.splash-rocket-wrap {
  position: relative;
  z-index: 2;
  translate: -46vw 46vh;
  will-change: translate;
  animation: rocketMove 1.5s linear forwards;
}

/* === Rocket (scale, rotate, glow — NO translate) === */
.splash-rocket {
  font-size: 64px;
  position: relative;
  will-change: scale, rotate, opacity, filter;
  scale: 0.15;
  rotate: -40deg;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.2));
  animation:
    rocketGrow 1.5s linear forwards,
    rocketSpin 1.5s linear forwards,
    rocketFade 0.2s linear forwards,
    rocketGlow 1.5s linear forwards;
}

@keyframes rocketMove {
  from { translate: -46vw 46vh; }
  to   { translate: 0 0; }
}
@keyframes rocketGrow {
  from { scale: 0.15; }
  to   { scale: 1; }
}
@keyframes rocketSpin {
  from { rotate: -40deg; }
  to   { rotate: 0deg; }
}
@keyframes rocketFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rocketGlow {
  from { filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.2)); }
  to   { filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6)); }
}


/* === Logo text === */
.splash-logo {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 12px;
  color: #a855f7;
  text-transform: uppercase;
  animation: logoAppear 0.8s 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  opacity: 0;
  text-shadow:
    0 0 20px rgba(168, 85, 247, 0.5),
    0 0 60px rgba(168, 85, 247, 0.2);
}

@keyframes logoAppear {
  0% {
    opacity: 0;
    letter-spacing: 40px;
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  80% {
    letter-spacing: 10px;
  }
  100% {
    opacity: 1;
    letter-spacing: 12px;
    filter: blur(0);
  }
}

/* === ПОЕХАЛИ — Back to the Future style === */
.splash-poehali {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 52px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ff1744;
  -webkit-text-stroke: 1px rgba(255, 60, 60, 0.6);
  text-shadow:
    0 0 10px rgba(255, 23, 68, 0.9),
    0 0 30px rgba(255, 23, 68, 0.6),
    0 0 60px rgba(255, 23, 68, 0.4),
    0 0 100px rgba(255, 23, 68, 0.2),
    0 2px 0 #b71c1c,
    0 4px 0 #8b0000;
  transform: skewX(-8deg);
  animation:
    poehaliAppear 0.8s 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    poehaliGlow 2s 2.6s ease-in-out infinite alternate;
  opacity: 0;
}

@keyframes poehaliAppear {
  0% {
    opacity: 0;
    transform: skewX(-8deg) scale(0.3) translateY(30px);
    filter: blur(10px);
    text-shadow:
      0 0 40px rgba(255, 23, 68, 1),
      0 0 80px rgba(255, 23, 68, 0.8),
      0 0 120px rgba(255, 23, 68, 0.6);
  }
  50% {
    opacity: 1;
    filter: blur(0);
    transform: skewX(-8deg) scale(1.15) translateY(-5px);
    text-shadow:
      0 0 20px rgba(255, 23, 68, 1),
      0 0 60px rgba(255, 23, 68, 0.6),
      0 0 100px rgba(255, 23, 68, 0.4);
  }
  70% {
    transform: skewX(-8deg) scale(0.97) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: skewX(-8deg) scale(1) translateY(0);
    text-shadow:
      0 0 10px rgba(255, 23, 68, 0.9),
      0 0 30px rgba(255, 23, 68, 0.6),
      0 0 60px rgba(255, 23, 68, 0.4),
      0 0 100px rgba(255, 23, 68, 0.2),
      0 2px 0 #b71c1c,
      0 4px 0 #8b0000;
  }
}

@keyframes poehaliGlow {
  0% {
    text-shadow:
      0 0 10px rgba(255, 23, 68, 0.9),
      0 0 30px rgba(255, 23, 68, 0.6),
      0 0 60px rgba(255, 23, 68, 0.4),
      0 0 100px rgba(255, 23, 68, 0.2),
      0 2px 0 #b71c1c,
      0 4px 0 #8b0000;
  }
  100% {
    text-shadow:
      0 0 15px rgba(255, 23, 68, 1),
      0 0 40px rgba(255, 23, 68, 0.8),
      0 0 80px rgba(255, 23, 68, 0.5),
      0 0 120px rgba(255, 23, 68, 0.3),
      0 2px 0 #b71c1c,
      0 4px 0 #8b0000;
  }
}

/* === Orbit rings === */
.splash-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 50%;
  animation: orbitPulse 3s ease-in-out infinite alternate;
}
.splash-orbit:nth-child(1) {
  width: 200px; height: 200px;
  animation-delay: 0s;
}
.splash-orbit:nth-child(2) {
  width: 320px; height: 320px;
  animation-delay: 0.5s;
  border-color: rgba(168, 85, 247, 0.08);
}
.splash-orbit:nth-child(3) {
  width: 450px; height: 450px;
  animation-delay: 1s;
  border-color: rgba(168, 85, 247, 0.04);
}

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

/* === Glowing dot on orbit === */
.splash-orbiter {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #c084fc;
  border-radius: 50%;
  box-shadow: 0 0 10px #c084fc, 0 0 20px rgba(192, 132, 252, 0.4);
  animation: orbiterMove 4s linear infinite;
  z-index: 3;
}

@keyframes orbiterMove {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}