/* ═══════════════════════════════════════════════════════════════════
   AnyFarm IOT — animations
   Self-contained motion styles (keyframes + driving classes). Loaded
   after main.css. Keep all animation/keyframe rules here.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── FIELD CYCLE ──────────────────────────── */
/* Looping top-view field: planter sows → crops grow → harvester reaps. */

.fc-stage {
  max-width: 880px;
  margin: 1.5rem auto 0;
}
.fc-stage svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow-paper);
}

.fc-crop {
  transform-box: fill-box;
  transform-origin: center;
  color: #4a7a3f;
  animation: fc-crop 16s linear infinite;
  animation-delay: calc(0.7s + var(--c) * 0.17s);
}
.fc-crop > * { fill: currentColor; }

@keyframes fc-crop {
  0%   { opacity: 0; transform: scale(0);    color: #6b4d36; }
  2%   { opacity: 1; transform: scale(0.14); color: #9c7b3f; }
  14%  { opacity: 1; transform: scale(0.5);  color: #7a9b4a; }
  32%  { opacity: 1; transform: scale(1);    color: #4a7a3f; }
  46%  { opacity: 1; transform: scale(1.03); color: #356a2c; }
  48%  { opacity: 1; transform: scale(1); }
  51%  { opacity: 0; transform: scale(0); }
  100% { opacity: 0; transform: scale(0); }
}

.fc-planter { animation: fc-planter 16s linear infinite; }
@keyframes fc-planter {
  0%    { transform: translateX(-200px); opacity: 1; }
  18%   { transform: translateX(840px);  opacity: 1; }
  18.6% { opacity: 0; }
  100%  { transform: translateX(840px);  opacity: 0; }
}

.fc-harvester { animation: fc-harvester 16s linear infinite; }
@keyframes fc-harvester {
  0%, 46%  { transform: translateX(-220px); opacity: 0; }
  46.5%    { transform: translateX(-220px); opacity: 1; }
  47%      { transform: translateX(-200px); opacity: 1; }
  66%      { transform: translateX(840px);  opacity: 1; }
  66.6%    { transform: translateX(840px);  opacity: 0; }
  100%     { transform: translateX(840px);  opacity: 0; }
}

/* ───────────────────────── SIDE-VIEW TRACTOR ────────────────────── */

.tr-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: tr-spin 1.7s linear infinite;
}
.tr-wheel-front { animation-duration: 1.15s; }

@keyframes tr-spin { to { transform: rotate(360deg); } }

.tr-smoke {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: tr-smoke 2.4s ease-out infinite;
}

@keyframes tr-smoke {
  0%   { transform: translate(0, 0)       scale(0.5); opacity: 0; }
  18%  { opacity: 0.55; }
  100% { transform: translate(-14px, -42px) scale(1.7); opacity: 0; }
}

/* ───────────────────────── HERO DAY / NIGHT CYCLE ───────────────── */
/* One full "day" loop: sun sets → night + moon → sunrise. */

.sky-night     { opacity: 0; animation: sky-night 20s ease-in-out infinite; }
.sky-stars     { opacity: 0; animation: sky-stars 20s ease-in-out infinite; }
.sky-nightveil { opacity: 0; animation: sky-veil  20s ease-in-out infinite; }

.sky-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: sky-sun 20s ease-in-out infinite;
}
.sky-moon {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sky-moon 20s ease-in-out infinite;
}

@keyframes sky-night {
  0%, 33%   { opacity: 0; }
  50%, 83%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes sky-stars {
  0%, 38%   { opacity: 0; }
  52%, 82%  { opacity: 0.9; }
  95%, 100% { opacity: 0; }
}
@keyframes sky-veil {
  0%, 34%   { opacity: 0; }
  50%, 84%  { opacity: 0.34; }
  100%      { opacity: 0; }
}
@keyframes sky-sun {
  0%   { transform: translateY(0);     opacity: 1; }
  36%  { transform: translateY(0);     opacity: 1; }
  48%  { transform: translateY(160px); opacity: 0; }
  92%  { transform: translateY(160px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes sky-moon {
  0%, 40%  { transform: translateY(160px); opacity: 0; }
  53%      { transform: translateY(0);     opacity: 1; }
  84%      { transform: translateY(0);     opacity: 1; }
  94%,100% { transform: translateY(160px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-crop {
    animation: none;
    opacity: 1;
    transform: scale(1);
    color: #4a7a3f;
  }
  .fc-planter, .fc-harvester { display: none; }
  .tr-wheel { animation: none; }
  .tr-smoke { animation: none; opacity: 0; }
  .sky-night, .sky-stars, .sky-nightveil, .sky-moon { animation: none; opacity: 0; }
  .sky-sun { animation: none; opacity: 1; transform: none; }
}