/* =====================================================
   ANIMATIONS.CSS — La Comadre Lola
   Keyframes, transitions & entrance animations
   ===================================================== */

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

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

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

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

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

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

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

/* ── Hero Text ── */
@keyframes heroTitleIn {
  0%   { opacity: 0; transform: translateY(60px) scale(0.9); letter-spacing: 0.5em; }
  60%  { letter-spacing: 0.15em; }
  100% { opacity: 1; transform: translateY(0)   scale(1);   letter-spacing: 0.08em; }
}

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

/* ── Logo float ── */
@keyframes floatLogo {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-8px) rotate(-1deg); }
  75%  { transform: translateY(-4px) rotate(1deg);  }
}

/* ── Pulse / Glow ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(232,145,58,0.3), 0 0 40px rgba(232,145,58,0.1); }
  50%       { box-shadow: 0 0 40px rgba(232,145,58,0.6), 0 0 80px rgba(232,145,58,0.3); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(232,145,58,0.4), 0 0 20px rgba(232,145,58,0.2); }
  50%       { text-shadow: 0 0 20px rgba(232,145,58,0.8), 0 0 40px rgba(232,145,58,0.4), 0 0 60px rgba(232,145,58,0.2); }
}

/* ── Shimmer / Shine ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes shine {
  0%   { left: -100%; }
  50%  { left: 150%;  }
  100% { left: 150%;  }
}

/* ── Gradient shift (buttons, borders) ── */
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Rotating icon ── */
@keyframes spinSlow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── Rose / petal fall ── */
@keyframes roseFall {
  0%   { transform: translateY(-10vh) translateX(0)   rotate(0deg);   opacity: 0; }
  5%   { opacity: 0.9; }
  25%  { transform: translateY(25vh)  translateX(15px) rotate(90deg); }
  50%  { transform: translateY(50vh)  translateX(-10px) rotate(180deg); }
  75%  { transform: translateY(75vh)  translateX(20px) rotate(270deg); opacity: 0.9; }
  95%  { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(0)   rotate(360deg); opacity: 0; }
}

@keyframes petalFall {
  0%   { transform: translateY(-5vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ── Scroll Reveal utility classes ── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* stagger delays */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }

/* ── Timeline line draw ── */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Card hover 3D helper ── */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s ease;
}
.card-3d:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(-3deg) scale(1.02);
}

/* ── Glassmorphism overlay base ── */
.glass {
  background: rgba(20, 20, 30, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Typing cursor blink ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Newsletter input focus ring ── */
@keyframes focusRing {
  0%   { box-shadow: 0 0 0 0   rgba(232,145,58,0.5); }
  100% { box-shadow: 0 0 0 8px rgba(232,145,58,0);   }
}

/* ── Particles (hero bg dots) ── */
@keyframes floatParticle {
  0%, 100% { transform: translate(0, 0)   scale(1);    opacity: 0.6; }
  33%       { transform: translate(20px, -30px) scale(1.2); opacity: 1;   }
  66%       { transform: translate(-15px, 20px) scale(0.9); opacity: 0.4; }
}

/* ── VIP card hover ── */
@keyframes vipGlow {
  0%, 100% { box-shadow: 0 4px 30px rgba(212,84,123,0.2); }
  50%       { box-shadow: 0 8px 60px rgba(212,84,123,0.5); }
}

/* ── Notification badge bounce ── */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1);    }
  20%  { transform: scale(1.3);  }
  40%  { transform: scale(0.95); }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.97); }
}