/**
 * Animations for Hotel Start Kežmarok WordPress Theme
 * Hero Section Stars, Clouds, and Shooting Stars
 * 
 * @package HotelStartKezmarok
 */

/* Realistic star animations */
.star-realistic {
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff, 0 0 12px #87ceeb, 0 0 18px #87ceeb;
  animation: twinkle-realistic 4s ease-in-out infinite alternate;
}

.star-realistic::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  transform: translate(-50%, -50%);
}

.star-realistic::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 200%;
  background: linear-gradient(0deg, transparent, #ffffff, transparent);
  transform: translate(-50%, -50%);
}

@keyframes twinkle-realistic {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Smooth shooting star animation */
.shooting-star-smooth {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #87ceeb;
  animation: shooting-smooth 3s linear infinite;
}

.shooting-star-smooth::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, transparent);
  transform: translate(-100%, -50%) rotate(-30deg);
}

@keyframes shooting-smooth {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(300px) translateY(150px);
    opacity: 0;
  }
}

/* Natural cloud layers and movements */
.cloud-layer {
  position: absolute;
  width: 120%;
  height: 100%;
}

.cloud-layer-1 {
  top: 0;
  animation: cloud-drift-1 120s linear infinite;
}

.cloud-layer-2 {
  top: 20%;
  animation: cloud-drift-2 150s linear infinite;
}

.cloud-realistic {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  backdrop-filter: blur(1px);
}

.cloud-1 {
  width: 120px;
  height: 60px;
  left: -10%;
  top: 20%;
}

.cloud-2 {
  width: 80px;
  height: 40px;
  left: 30%;
  top: 40%;
}

.cloud-3 {
  width: 100px;
  height: 50px;
  left: 70%;
  top: 25%;
}

.cloud-4 {
  width: 90px;
  height: 45px;
  left: 10%;
  top: 60%;
}

.cloud-5 {
  width: 110px;
  height: 55px;
  left: 60%;
  top: 70%;
}

/* Natural cloud movement following curved paths */
@keyframes cloud-drift-1 {
  0% {
    transform: translateX(-20%) translateY(0px);
  }
  25% {
    transform: translateX(25%) translateY(-10px);
  }
  50% {
    transform: translateX(50%) translateY(5px);
  }
  75% {
    transform: translateX(75%) translateY(-5px);
  }
  100% {
    transform: translateX(120%) translateY(0px);
  }
}

@keyframes cloud-drift-2 {
  0% {
    transform: translateX(-25%) translateY(0px);
  }
  30% {
    transform: translateX(20%) translateY(8px);
  }
  60% {
    transform: translateX(60%) translateY(-8px);
  }
  100% {
    transform: translateX(125%) translateY(5px);
  }
}

@keyframes cloud-drift-3 {
  0% {
    transform: translateX(-30%) translateY(0px);
  }
  35% {
    transform: translateX(15%) translateY(-12px);
  }
  70% {
    transform: translateX(55%) translateY(6px);
  }
  100% {
    transform: translateX(130%) translateY(-3px);
  }
}

@keyframes cloud-drift-4 {
  0% {
    transform: translateX(-15%) translateY(0px);
  }
  40% {
    transform: translateX(30%) translateY(10px);
  }
  80% {
    transform: translateX(70%) translateY(-8px);
  }
  100% {
    transform: translateX(115%) translateY(2px);
  }
}

@keyframes cloud-drift-5 {
  0% {
    transform: translateX(-35%) translateY(0px);
  }
  45% {
    transform: translateX(10%) translateY(-15px);
  }
  90% {
    transform: translateX(65%) translateY(8px);
  }
  100% {
    transform: translateX(135%) translateY(-5px);
  }
}

/* Fade in up animation for hero content */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

/* Hero gradient overlay */
.hero-gradient {
  background: linear-gradient(180deg, 
    hsl(217 91% 18% / 0.9), 
    hsl(217 91% 18% / 0.7)
  );
}