/* ============================================================
   ENHANCED ANIMATIONS - NATURE SHOW EXPO 2026
   ============================================================ */

/* ── Float Animation (emoji, badges, cards) ──────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* ── Pulse Dot Animation ──────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* ── Shimmer Effect (buttons) ────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* ── Fade In Up (hero content) ───────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Bounce Down (scroll hint) ───────────────────────────── */
@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── Ticker Animation ────────────────────────────────────── */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NEW ANIMATIONS FOR ENHANCED EFFECTS
   ============================================================ */

/* ── Slide In Left ───────────────────────────────────────── */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Slide In Right ──────────────────────────────────────── */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Scale In ────────────────────────────────────────────── */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Text Shimmer (gradient animation) ───────────────────── */
@keyframes text-shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* ── Glow Pulse (for glowing elements) ───────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(16,185,129,0.35), 0 0 60px rgba(16,185,129,0.10); }
  50% { box-shadow: 0 0 30px rgba(16,185,129,0.5), 0 0 80px rgba(16,185,129,0.2); }
}

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

/* ── Color Shift ─────────────────────────────────────────── */
@keyframes color-shift {
  0% { border-color: rgba(52,211,153,0.2); }
  50% { border-color: rgba(52,211,153,0.5); }
  100% { border-color: rgba(52,211,153,0.2); }
}

/* ── Fade In ─────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Word Reveal (staggered text appearance) ──────────────– */
@keyframes word-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   UTILITY ANIMATION CLASSES
   ============================================================ */

.animate-float { animation: float 5s ease-in-out infinite; }
.animate-pulse { animation: pulse-dot 2s infinite; }
.animate-shimmer { animation: shimmer 2.5s infinite; }
.animate-slide-left { animation: slide-in-left 0.8s ease-out forwards; }
.animate-slide-right { animation: slide-in-right 0.8s ease-out forwards; }
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }

/* Stagger delays for sequential animations */
.delay-100 { animation-delay: 0.1s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.2s; }
.delay-250 { animation-delay: 0.25s; }
.delay-300 { animation-delay: 0.3s; }
.delay-350 { animation-delay: 0.35s; }
.delay-400 { animation-delay: 0.4s; }
.delay-450 { animation-delay: 0.45s; }
.delay-500 { animation-delay: 0.5s; }