/* ==========================================================================
   JUNGAL SAFARI — animations.css
   Pure CSS animation library
   ========================================================================== */

/* ==========================================================================
   1. CORE KEYFRAMES — Fade
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

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

/* ==========================================================================
   2. SLIDE
   ========================================================================== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

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

/* ==========================================================================
   3. SCALE
   ========================================================================== */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}

@keyframes scaleInSpring {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   4. BOUNCE
   ========================================================================== */
@keyframes bounceIn {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(8px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

@keyframes bounceInDown {
  0%   { opacity: 0; transform: translateY(-60px); }
  60%  { opacity: 1; transform: translateY(12px); }
  80%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes bounceInUp {
  0%   { opacity: 0; transform: translateY(60px); }
  60%  { opacity: 1; transform: translateY(-12px); }
  80%  { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

/* ==========================================================================
   5. PULSE
   ========================================================================== */
@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  50%  { transform: scale(1.08); opacity: 0.4; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes pulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
}

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

/* ==========================================================================
   6. SHIMMER (loading skeleton)
   ========================================================================== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Skeleton placeholder applied via .skeleton / .skeleton-dark in main.css */

/* ==========================================================================
   7. FLOAT
   ========================================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

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

@keyframes floatHorizontal {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(12px); }
}

/* ==========================================================================
   8. LEAF DRIFT
   ========================================================================== */
@keyframes leafDrift {
  0%   { transform: translate(0, 0) rotate(0deg);     opacity: 0.15; }
  25%  { transform: translate(8px, -12px) rotate(12deg);  opacity: 0.2; }
  50%  { transform: translate(-5px, -20px) rotate(-8deg); opacity: 0.12; }
  75%  { transform: translate(10px, -8px) rotate(15deg);  opacity: 0.18; }
  100% { transform: translate(0, 0) rotate(0deg);     opacity: 0.15; }
}

@keyframes leafFall {
  0%   { transform: translate(0, -40px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translate(30px, 100vh) rotate(360deg); opacity: 0; }
}

/* ==========================================================================
   9. COUNTER UP (number animation — base transition)
   ========================================================================== */
@keyframes counterUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   10. TYPING / CURSOR BLINK
   ========================================================================== */
@keyframes typingCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* Applied to element with overflow:hidden; white-space:nowrap */
.typing-effect {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--gold);
  animation: typing 2.5s steps(40, end) both,
             typingCursor 0.8s step-end infinite;
}

/* ==========================================================================
   11. GLOW PULSE (gold glow)
   ========================================================================== */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(212,175,55,0.3),
                0 0 12px rgba(212,175,55,0.2),
                0 0 20px rgba(212,175,55,0.1);
  }
  50% {
    box-shadow: 0 0 12px rgba(212,175,55,0.6),
                0 0 24px rgba(212,175,55,0.4),
                0 0 40px rgba(212,175,55,0.25);
  }
}

@keyframes glowText {
  0%, 100% { text-shadow: 0 0 8px rgba(212,175,55,0.4); }
  50%       { text-shadow: 0 0 20px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.4); }
}

.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
.glow-text  { animation: glowText 2.5s ease-in-out infinite; }

/* ==========================================================================
   12. ANIMAL PEEK (silhouettes emerge from edges)
   ========================================================================== */
@keyframes animalPeek {
  0%   { transform: translateX(-70px); opacity: 0; }
  15%  { transform: translateX(0);     opacity: 0.18; }
  75%  { transform: translateX(0);     opacity: 0.18; }
  90%  { transform: translateX(0);     opacity: 0.12; }
  100% { transform: translateX(-70px); opacity: 0; }
}

@keyframes animalPeekRight {
  0%   { transform: scaleX(-1) translateX(-70px); opacity: 0; }
  15%  { transform: scaleX(-1) translateX(0);     opacity: 0.18; }
  75%  { transform: scaleX(-1) translateX(0);     opacity: 0.18; }
  90%  { transform: scaleX(-1) translateX(0);     opacity: 0.12; }
  100% { transform: scaleX(-1) translateX(-70px); opacity: 0; }
}

@keyframes animalWalk {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120vw); }
}

/* ==========================================================================
   13. WAVEFORM (audio bars)
   ========================================================================== */
@keyframes waveform {
  0%, 100% { height: 4px; }
  25%       { height: 16px; }
  50%       { height: 24px; }
  75%       { height: 10px; }
}

@keyframes waveformAlt {
  0%, 100% { height: 8px; }
  33%       { height: 20px; }
  66%       { height: 12px; }
}

@keyframes waveformSlow {
  0%, 100% { height: 6px; }
  50%       { height: 28px; }
}

/* ==========================================================================
   14. PROGRESS FILL
   ========================================================================== */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes progressFillPartial {
  from { width: 0%; }
  to   { width: var(--fill-to, 70%); }
}

@keyframes progressIndeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { width: 100%; }
  100% { left: 100%; width: 40%; }
}

/* ==========================================================================
   15. FIREFLY
   ========================================================================== */
@keyframes firefly {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0; }
  10%  { opacity: 0.8; }
  45%  { transform: translate(var(--fx,30px), var(--fy,-40px)) scale(1.2); opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translate(var(--fx2,-20px), var(--fy2,-80px)) scale(0.8); opacity: 0; }
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  pointer-events: none;
  box-shadow: 0 0 6px 2px rgba(240,208,96,0.6);
  animation: firefly 4s ease-in-out infinite;
}

.firefly:nth-child(1)  { --fx:  40px; --fy: -50px; --fx2: -20px; --fy2: -90px; animation-delay: 0s;    top: 70%; left: 20%; }
.firefly:nth-child(2)  { --fx: -30px; --fy: -40px; --fx2:  30px; --fy2: -70px; animation-delay: 1.2s;  top: 55%; left: 65%; }
.firefly:nth-child(3)  { --fx:  20px; --fy: -60px; --fx2: -40px; --fy2: -50px; animation-delay: 2.4s;  top: 80%; left: 40%; }
.firefly:nth-child(4)  { --fx: -40px; --fy: -30px; --fx2:  10px; --fy2: -80px; animation-delay: 0.8s;  top: 60%; left: 80%; }
.firefly:nth-child(5)  { --fx:  30px; --fy: -70px; --fx2: -30px; --fy2: -40px; animation-delay: 3.0s;  top: 75%; left: 10%; }
.firefly:nth-child(6)  { --fx: -20px; --fy: -45px; --fx2:  40px; --fy2: -60px; animation-delay: 1.8s;  top: 65%; left: 50%; }
.firefly:nth-child(7)  { --fx:  50px; --fy: -35px; --fx2: -15px; --fy2: -75px; animation-delay: 0.4s;  top: 85%; left: 30%; }
.firefly:nth-child(8)  { --fx: -35px; --fy: -55px; --fx2:  25px; --fy2: -45px; animation-delay: 2.1s;  top: 50%; left: 90%; }

/* ==========================================================================
   16. ANIMAL ENTRANCE ANIMATIONS
   ========================================================================== */

/* Generic entrance */
.animal-enter {
  opacity: 0;
  transform: scale(0.85) translateY(30px);
  animation: animalEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes animalEnter {
  0%   { opacity: 0; transform: scale(0.85) translateY(30px); }
  70%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Entrance from left */
.animal-enter-left {
  opacity: 0;
  transform: translateX(-60px) rotate(-4deg);
  animation: animalEnterLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes animalEnterLeft {
  0%   { opacity: 0; transform: translateX(-60px) rotate(-4deg); }
  60%  { opacity: 1; transform: translateX(8px) rotate(1deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Entrance from right */
.animal-enter-right {
  opacity: 0;
  transform: translateX(60px) rotate(4deg);
  animation: animalEnterRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes animalEnterRight {
  0%   { opacity: 0; transform: translateX(60px) rotate(4deg); }
  60%  { opacity: 1; transform: translateX(-8px) rotate(-1deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* ==========================================================================
   17. SCROLL-TRIGGERED REVEAL CLASSES
       JS adds .revealed to trigger the transition defined in main.css
   ========================================================================== */

/* Base classes — initial state (opacity:0 / transform) set in main.css */
/* Transitions are already on .js-reveal-up / .js-reveal-fade / .js-reveal-scale */
/* This file adds optional variants */

.js-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal-zoom {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-reveal-rotate {
  opacity: 0;
  transform: rotate(-8deg) scale(0.9);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Revealed state — shared */
.js-reveal-left.revealed,
.js-reveal-right.revealed,
.js-reveal-zoom.revealed,
.js-reveal-rotate.revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   18. STAGGER DELAYS (complementary to main.css — extended)
   ========================================================================== */
.delay-50  { transition-delay: 0.05s !important; }
.delay-100 { transition-delay: 0.1s  !important; }
.delay-150 { transition-delay: 0.15s !important; }
.delay-200 { transition-delay: 0.2s  !important; }
.delay-250 { transition-delay: 0.25s !important; }
.delay-300 { transition-delay: 0.3s  !important; }
.delay-350 { transition-delay: 0.35s !important; }
.delay-400 { transition-delay: 0.4s  !important; }
.delay-450 { transition-delay: 0.45s !important; }
.delay-500 { transition-delay: 0.5s  !important; }
.delay-550 { transition-delay: 0.55s !important; }
.delay-600 { transition-delay: 0.6s  !important; }
.delay-700 { transition-delay: 0.7s  !important; }
.delay-800 { transition-delay: 0.8s  !important; }

/* Animation fill mode helpers */
.anim-fill-both     { animation-fill-mode: both; }
.anim-fill-forward  { animation-fill-mode: forwards; }
.anim-fill-backward { animation-fill-mode: backwards; }

/* ==========================================================================
   19. SKELETON LOADING PLACEHOLDERS
   ========================================================================== */
.skeleton-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, #e8e2d8 25%, #f0ebe0 50%, #e8e2d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md, 8px);
}

.skeleton-image.dark {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
}

.skeleton-text {
  height: 1em;
  background: linear-gradient(90deg, #e8e2d8 25%, #f0ebe0 50%, #e8e2d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  margin-bottom: 0.5em;
}

.skeleton-text:last-child { width: 70%; }

.skeleton-text.dark {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
}

.skeleton-circle {
  border-radius: 50%;
  background: linear-gradient(90deg, #e8e2d8 25%, #f0ebe0 50%, #e8e2d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Card skeleton */
.skeleton-card {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: #f5f0e8;
}

.skeleton-card.dark {
  background: rgba(255,255,255,0.04);
}

/* ==========================================================================
   20. UTILITY ANIMATION CLASSES
   ========================================================================== */

/* One-shot animations */
.animate-fade-in         { animation: fadeIn 0.5s ease both; }
.animate-fade-in-up      { animation: fadeInUp 0.6s ease both; }
.animate-fade-in-down    { animation: fadeInDown 0.6s ease both; }
.animate-slide-up        { animation: slideUp 0.6s ease both; }
.animate-slide-down      { animation: slideDown 0.6s ease both; }
.animate-slide-left      { animation: slideLeft 0.6s ease both; }
.animate-slide-right     { animation: slideRight 0.6s ease both; }
.animate-scale-in        { animation: scaleIn 0.5s ease both; }
.animate-scale-in-spring { animation: scaleInSpring 0.6s ease both; }
.animate-bounce-in       { animation: bounceInDown 0.7s ease both; }

/* Continuous animations */
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-float-slow  { animation: float 6s ease-in-out infinite; }
.animate-float-fast  { animation: float 2.5s ease-in-out infinite; }
.animate-pulse       { animation: pulseDot 2s ease-in-out infinite; }
.animate-glow        { animation: glowPulse 2.5s ease-in-out infinite; }
.animate-leaf-drift  { animation: leafDrift 5s ease-in-out infinite; }

/* Spin (loading) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spin 3s linear infinite; }

/* Shake (form validation error) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
}
.animate-shake { animation: shake 0.5s ease; }

/* Tada (success) */
@keyframes tada {
  0%   { transform: scale(1); }
  10%  { transform: scale(0.9) rotate(-3deg); }
  20%  { transform: scale(0.9) rotate(-3deg); }
  30%  { transform: scale(1.1) rotate(3deg); }
  40%  { transform: scale(1.1) rotate(-3deg); }
  50%  { transform: scale(1.1) rotate(3deg); }
  60%  { transform: scale(1.1) rotate(-3deg); }
  70%  { transform: scale(1.1) rotate(3deg); }
  80%  { transform: scale(1.1) rotate(-3deg); }
  90%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.animate-tada { animation: tada 0.8s ease; }

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%  { transform: scale(1.15); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.12); }
  70%  { transform: scale(1); }
}
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }

/* ==========================================================================
   21. TRANSITION UTILITIES
   ========================================================================== */
.transition-none   { transition: none !important; }
.transition-all    { transition: all 0.3s ease; }
.transition-fast   { transition: all 0.15s ease; }
.transition-slow   { transition: all 0.6s ease; }
.transition-spring { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ==========================================================================
   22. PREFERS-REDUCED-MOTION
       Respect accessibility preference — strip motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }

  .firefly { display: none; }
  .preloader-leaf { display: none; }
  .hero-silhouette { display: none; }
}