/* ==========================================================================
   ANNAM FARM — Animations
   Reusable keyframes + scroll reveal classes (Intersection Observer driven)
   ========================================================================== */

/* -------- Keyframes -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-16px) rotate(var(--r, 0deg)); }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -450px 0; }
  100% { background-position: 450px 0; }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes marqueeX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes badgePop {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes drawLine {
  from { stroke-dashoffset: var(--dash-from, 320); }
  to   { stroke-dashoffset: 0; }
}
@keyframes leafSway {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--r, 0deg) + 7deg)) translateY(-6px); }
}

/* -------- Scroll Reveal (added by main.js IntersectionObserver) -------- */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
}
.reveal.active {
  animation-duration: .85s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}
.reveal[data-anim="fadeUp"]   { animation-name: fadeUp; }
.reveal[data-anim="fadeDown"] { animation-name: fadeDown; }
.reveal[data-anim="fadeLeft"] { animation-name: fadeLeft; }
.reveal[data-anim="fadeRight"]{ animation-name: fadeRight; }
.reveal[data-anim="scale"]    { animation-name: scaleIn; }
.reveal[data-delay="1"] { animation-delay: .12s; }
.reveal[data-delay="2"] { animation-delay: .24s; }
.reveal[data-delay="3"] { animation-delay: .36s; }
.reveal[data-delay="4"] { animation-delay: .48s; }
.reveal[data-delay="5"] { animation-delay: .60s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
}