/* ============================================================
   KILIMANJARO AVOCADO FARM — animations.css
   All @keyframes + animation utility classes
   ============================================================ */

/* ── STATS TICKER ─────────────────────────────────────────── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── PAGE TRANSITIONS ─────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* ── SCROLL REVEAL ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

/* ── HERO — AVOCADO FALL ──────────────────────────────────── */
/*
  --fall-distance and --fall-rotation are set as inline CSS
  custom properties on each .avocado element via JavaScript.
*/
@keyframes avocadoFall {
  0% {
    transform: translateY(-140px) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  100% {
    transform: translateY(var(--fall-distance, 600px)) rotate(var(--fall-rotation, 20deg));
    opacity: 1;
  }
}

/* ── HERO — WATER RIPPLE ──────────────────────────────────── */
@keyframes rippleExpand {
  0%   { transform: scale(0.1); opacity: 0.75; }
  60%  { opacity: 0.35; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ── HERO — WATER SURFACE SHIMMER ────────────────────────── */
@keyframes waterShimmer {
  0%, 100% {
    opacity: 0.45;
    transform: scaleX(1) translateX(0);
  }
  50% {
    opacity: 0.85;
    transform: scaleX(1.06) translateX(-2%);
  }
}

/* ── HERO — WATER SWELL ───────────────────────────────────── */
@keyframes waterSwell {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%       { transform: scaleY(1.04) scaleX(0.98); }
}

/* ── ABOUT PAGE — FLOATING LEAF ──────────────────────────── */
@keyframes leafFloat {
  0%   { transform: translateY(0px)   rotate(0deg)   translateX(0px); }
  25%  { transform: translateY(-18px) rotate(6deg)   translateX(8px); }
  50%  { transform: translateY(-28px) rotate(-4deg)  translateX(-5px); }
  75%  { transform: translateY(-12px) rotate(8deg)   translateX(10px); }
  100% { transform: translateY(0px)   rotate(0deg)   translateX(0px); }
}

/* ── PRODUCTS PAGE — BLURRED AVOCADO DRIFT ───────────────── */
@keyframes avocadoDrift {
  0%   { transform: translate(0%, 0%)     rotate(0deg); }
  25%  { transform: translate(4%, -6%)    rotate(90deg); }
  50%  { transform: translate(-3%, -10%)  rotate(180deg); }
  75%  { transform: translate(-6%, -4%)   rotate(270deg); }
  100% { transform: translate(0%, 0%)     rotate(360deg); }
}

/* ── SUSTAINABILITY PAGE — ORGANIC PARTICLES ─────────────── */
@keyframes particleDrift {
  0%   { transform: translateY(0)    translateX(0)   scale(1);   opacity: 0.12; }
  33%  { transform: translateY(-24px) translateX(10px) scale(1.12); opacity: 0.22; }
  66%  { transform: translateY(-40px) translateX(-6px) scale(0.95); opacity: 0.16; }
  100% { transform: translateY(0)    translateX(0)   scale(1);   opacity: 0.12; }
}

/* ── CONTACT PAGE — ANIMATED GRADIENT ────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── IMAGE — ZOOM OUT ON REVEAL ──────────────────────────── */
@keyframes imgZoomOut {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* ── HERO BACKGROUND — CONTINUOUS SLOW ZOOM ──────────────── */
@keyframes heroBgZoom {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.00); }
}

/* ── IMAGE — KEN BURNS ────────────────────────────────────── */
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0%, 0%); }
  50%  { transform: scale(1.06) translate(-0.5%, -0.4%); }
  100% { transform: scale(1.00) translate(0%, 0%); }
}

/* ── GALLERY REVEAL ───────────────────────────────────────── */
@keyframes galleryReveal {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── CTA PULSE ────────────────────────────────────────────── */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.35); }
  50%       { box-shadow: 0 0 0 14px rgba(76, 175, 80, 0); }
}

/* ── SKELETON SHIMMER ─────────────────────────────────────── */
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SPINNER ──────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── FADE IN ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── HERO TEXT REVEAL ─────────────────────────────────────── */
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── BUTTON RIPPLE ────────────────────────────────────────── */
@keyframes btnRipple {
  to { transform: scale(4); opacity: 0; }
}

/* ── STAT COUNT HIGHLIGHT ─────────────────────────────────── */
@keyframes statGlow {
  0%, 100% { color: var(--green-deep); }
  50%       { color: var(--green-fresh); }
}

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

/* Ken Burns on section images */
.ken-burns {
  animation: kenBurns 18s ease-in-out infinite;
}

/* About: floating leaf background */
.leaf-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.leaf {
  position: absolute;
  border-radius: 50% 4% 50% 4%;
  background: var(--green-light);
  opacity: 0.18;
  animation: leafFloat var(--leaf-duration, 10s) ease-in-out infinite;
  animation-delay: var(--leaf-delay, 0s);
  will-change: transform;
  transform-origin: center center;
}

/* Products: blurred drifting avocado shapes */
.avocado-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.avocado-blob {
  position: absolute;
  border-radius: 40% 60% 55% 45% / 45% 55% 60% 40%;
  filter: blur(60px);
  animation: avocadoDrift var(--blob-duration, 30s) ease-in-out infinite alternate;
  animation-delay: var(--blob-delay, 0s);
  will-change: transform;
}

/* Sustainability: organic particles */
.particle-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--green-fresh);
  animation: particleDrift var(--p-duration, 12s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
  will-change: transform, opacity;
}

/* ── LEAF BURST (hover on images) ─────────────────────────── */
.leaf-burst-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  transform-origin: center center;
  will-change: transform, opacity;
  animation: leafBurstFly var(--dur, 900ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0ms) both;
}

@keyframes leafBurstFly {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  12% {
    transform: translate(
      calc(-50% + var(--tx) * 0.15),
      calc(-50% + var(--ty) * 0.15)
    ) scale(1.6) rotate(calc(var(--rot) * 0.15));
    opacity: 1;
  }
  55% {
    opacity: 0.85;
  }
  100% {
    transform: translate(
      calc(-50% + var(--tx)),
      calc(-50% + var(--ty))
    ) scale(0.5) rotate(var(--rot));
    opacity: 0;
  }
}


/* Contact: animated gradient — applied via body class */
.contact-gradient-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    #F1F8F1,
    #E8F5E9,
    #FAFCFA,
    #F5F9F5,
    #EDF5ED
  );
  background-size: 400% 400%;
  animation: gradientShift 14s ease infinite;
}