/* Splash screen overlay */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #494f5c 0%, #2c3038 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: splashFadeOut 0.8s ease-out 2.5s forwards;
  overflow: hidden;
}

#splash-screen.hide {
  display: none;
}

/* Bouncing ball animation */
.splash-ball {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5);
  animation: ballRoll 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Ball rolling and bouncing animation */
@keyframes ballRoll {
  0% {
    left: -10%;
    top: -10%;
    transform: rotate(0deg);
  }
  15% {
    left: 10%;
    top: 60%;
    transform: rotate(180deg);
  }
  25% {
    left: 18%;
    top: 20%;
    transform: rotate(360deg);
  }
  35% {
    left: 26%;
    top: 60%;
    transform: rotate(540deg);
  }
  45% {
    left: 33%;
    top: 35%;
    transform: rotate(720deg);
  }
  55% {
    left: 39%;
    top: 60%;
    transform: rotate(900deg);
  }
  65% {
    left: 43%;
    top: 50%;
    transform: rotate(1080deg);
  }
  75% {
    left: 46%;
    top: 60%;
    transform: rotate(1260deg);
  }
  85% {
    left: 48%;
    top: 57%;
    transform: rotate(1440deg);
  }
  95% {
    left: 49%;
    top: 60%;
    transform: rotate(1620deg);
  }
  100% {
    left: 50%;
    top: 60%;
    transform: rotate(1800deg);
    opacity: 0;
  }
}

/* Welcome text animation */
.splash-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  text-align: center;
  animation: textAnimation 2.5s ease-out forwards;
  animation-delay: 0.8s;
  opacity: 0;
  z-index: 1;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  70% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
}

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

/* Smooth transitions for interactive elements */
a, button {
  transition: all 0.3s ease;
}

/* Responsive text size */
@media (max-width: 768px) {
  .splash-text {
    font-size: 1.8rem;
    padding: 0 20px;
  }
}