/* ============================================================
   ANIMATIONS.CSS - Keyframes & Animation Classes
   JK Pool House - Premium Vacation Rental
   ============================================================ */

/* === Loading Screen === */
@keyframes loaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loaderFadeOut {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes loaderBar {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* === Gold Shimmer Effect === */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
}

@keyframes goldGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
  50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.6); }
}

/* === Entrance Animations === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* === Hero Specific === */
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroImageZoom {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}

@keyframes scrollBorder {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* === Particles === */
@keyframes particleFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* === Card Hover === */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes cardShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* === Counter === */
@keyframes counterFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Button Golden Shine === */
@keyframes buttonShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* === Image Gallery === */
@keyframes imageZoomIn {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* === Custom Cursor === */
@keyframes cursorPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* === Parallax Depth === */
@keyframes parallaxFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* === Scroll Progress === */
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* === Reveal Classes === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }