/* ==============================================
   ANIMATIONS
   All @keyframes in one place.
   Reference these from components.css and page files.
   ============================================== */

/* ── Deer head grazing ── */
@keyframes deer-graze {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(18deg); }   /* head dips to eat */
  40%  { transform: rotate(18deg); }   /* holds while chewing */
  60%  { transform: rotate(0deg); }    /* lifts head */
  75%  { transform: rotate(-4deg); }   /* looks around */
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ── Butterfly wing flap ── */
@keyframes wing-left-flap {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.15); }
}
@keyframes wing-right-flap {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.15); }
}

/* ── Butterfly floating path ──
   JS overrides --bfly-x1/y1/x2/y2/end-x/end-y per instance */
@keyframes butterfly-drift {
  0%   { transform: translate(var(--bfly-sx, 0px), var(--bfly-sy, 0px)); opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translate(var(--bfly-mx, 200px), var(--bfly-my, -80px)); }
  95%  { opacity: 1; }
  100% { transform: translate(var(--bfly-ex, 400px), var(--bfly-ey, 20px)); opacity: 0; }
}

/* ── Cloud drift ── */
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(110vw); }
}

/* ── Wax seal melt ── */
@keyframes seal-melt {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  30%  { transform: scale(1.08); }
  60%  { opacity: 0.4; transform: scale(0.9) translateY(8px); filter: blur(2px); }
  100% { opacity: 0; transform: scale(0.6) translateY(20px); filter: blur(6px); }
}

/* ── Letter panel unfold ── */
@keyframes panel-unfold {
  0%   {
    transform: perspective(600px) rotateX(-90deg);
    opacity: 0;
  }
  60%  {
    transform: perspective(600px) rotateX(6deg);
    opacity: 1;
  }
  100% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }
}

/* ── Plant sway (CSS fallback when JS not running) ── */
@keyframes plant-sway {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(-6deg); }
  70%       { transform: rotate(5deg); }
}

/* ── Rabbit settle-in ── */
@keyframes rabbit-settle {
  0%   { transform: translateY(60px) scale(0.8); opacity: 0; }
  60%  { transform: translateY(-8px) scale(1.05); opacity: 1; }
  80%  { transform: translateY(4px) scale(0.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── Generic sway (mushroom hover) ── */
@keyframes sway {
  0%, 100% { transform: rotate(0); }
  30%       { transform: rotate(-8deg); }
  70%       { transform: rotate(6deg); }
}

/* ── Gentle float (letter card when first shown) ── */
@keyframes float-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* ── Subtle bob (deer when idle) ── */
@keyframes body-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}