/* ============================================================
   AgroRise — Animations & Motion
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@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); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(4deg); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(82, 183, 136, 0.25); }
  50% { box-shadow: 0 0 44px rgba(82, 183, 136, 0.5); }
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(40px) scale(0.95); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes leafFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@keyframes coinSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes growPlant {
  0% { transform: scaleY(0.4); transform-origin: bottom; opacity: 0.4; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---------- Utility animation classes ---------- */
.anim-fade { animation: fadeIn 0.6s ease both; }
.anim-fade-up { animation: fadeInUp 0.7s var(--ease-out) both; }
.anim-fade-down { animation: fadeInDown 0.6s var(--ease-out) both; }
.anim-scale { animation: scaleIn 0.5s var(--ease-out) both; }
.anim-slide-right { animation: slideInRight 0.6s var(--ease-out) both; }
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 7s ease-in-out infinite; }
.anim-glow { animation: glow 3.5s ease-in-out infinite; }
.anim-pulse { animation: pulse 2.4s ease-in-out infinite; }

/* Staggered reveal (via data-delay) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* Delay helpers */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Animated gradient text/bg */
.gradient-anim {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-accent), var(--brand-secondary), var(--brand-primary));
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}

/* Spinner */
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner.lg { width: 40px; height: 40px; border-width: 4px; }

/* Loading overlay on cards/sections */
.loading-blur { position: relative; pointer-events: none; }
.loading-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-app) 55%, transparent);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 5;
}

/* Page transition */
body.page-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }

/* Hover lift */
.hover-lift { transition: transform var(--transition) var(--ease-out), box-shadow var(--transition) ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Leaf particles (landing) */
.leaves-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.leaf {
  position: absolute;
  top: -60px;
  width: 22px; height: 22px;
  opacity: 0;
  animation: leafFall linear infinite;
}
.leaf svg { width: 100%; height: 100%; color: var(--primary); }

/* Floating coins */
.coin {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: #A67B2F;
  background: radial-gradient(circle at 35% 30%, #F7D88A, #E4B75C 55%, #C9983A);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), inset 0 2px 4px rgba(255,255,255,0.6);
  animation: float 5s ease-in-out infinite;
  z-index: 2;
}
.coin::after {
  content: "₿";
  font-size: var(--fs-12);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .anim-fade, .anim-fade-up, .anim-fade-down, .anim-scale, .anim-slide-right,
  .anim-float, .anim-float-slow, .anim-glow, .anim-pulse,
  [data-reveal], .leaf, .coin, .gradient-anim, .progress-bar::after {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}