/* ============================================
   ULVERO.CYOU — Animation System
   ============================================ */

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes cloud-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

@keyframes cloud-drift-reverse {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

@keyframes blossom-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

@keyframes wave-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}

@keyframes leaves-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(15px) rotate(5deg); }
  66% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes snow-fall {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(20px); }
}

@keyframes water-flow {
  0% { top: 0; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

@keyframes sunbeam-sway {
  0%, 100% { opacity: 0.3; transform: rotate(var(--beam-angle, 8deg)); }
  50% { opacity: 0.6; transform: rotate(calc(var(--beam-angle, 8deg) + 3deg)); }
}

@keyframes canopy-leaves {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes storm-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

@keyframes lightning-flash {
  0%, 89%, 91%, 93%, 100% { opacity: 0; }
  90%, 92% { opacity: 1; }
}

@keyframes sun-rise {
  0% { transform: translateX(-50%) translateY(40px); opacity: 0.5; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes vane-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes aurora-wave {
  0% { transform: translateX(-10%) skewX(-5deg); }
  50% { transform: translateX(10%) skewX(5deg); }
  100% { transform: translateX(-10%) skewX(-5deg); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes season-reveal {
  0% { opacity: 0; transform: translateY(3rem); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Apply continuous animations */

.cloud--1 { animation: cloud-drift 45s ease-in-out infinite; }
.cloud--2 { animation: cloud-drift-reverse 55s ease-in-out infinite; }
.cloud--3 { animation: cloud-drift 40s ease-in-out infinite 5s; }
.cloud--4 { animation: cloud-drift-reverse 50s ease-in-out infinite 10s; }
.cloud--5 { animation: cloud-drift 48s ease-in-out infinite 3s; }

.weather-vane__arrow {
  animation: vane-sway 6s ease-in-out infinite;
}

.cloud-formation {
  animation: cloud-drift 30s ease-in-out infinite;
}

.cloud-formation--large {
  animation: cloud-drift-reverse 35s ease-in-out infinite;
}

.cloud-formation[data-category="rivers"] {
  animation: cloud-drift 28s ease-in-out infinite 4s;
}

.cloud-formation[data-category="weather"] {
  animation: cloud-drift-reverse 32s ease-in-out infinite 2s;
}

.season.visible .season__content {
  animation: season-reveal 1.2s ease-out forwards;
}

.season.visible .season__environment {
  animation: season-reveal 1.2s ease-out 0.2s forwards;
}

/* Star elements generated by JS */
.star {
  position: absolute;
  background: #FFFFFF;
  border-radius: 50%;
  animation: star-twinkle 3s ease-in-out infinite;
}