/* ==========================================================================
   Backdrop additions — new parallax layers for .pasture
   Same contract as the existing layers: pasture_controller shifts each one by
   distance × data-speed, modulo data-tile. Positions are all off --horizon.
   ========================================================================== */
.pasture__layer--cloudbank { top: calc(var(--horizon) - 215px); height: 120px; }
.pasture__layer--range     { top: calc(var(--horizon) - 230px); height: 200px; }
.pasture__layer--town      { top: calc(var(--horizon) - 150px); height: 110px; }
.pasture__layer--ridge,
.pasture__layer--grove,
.pasture__layer--homestead { top: calc(var(--horizon) - 96px);  height: 150px; }
.pasture__layer--meadow    { top: calc(var(--horizon) + 2rem);  bottom: 0; }

/* --- ambient motion (on elements inside layers, never the layer itself) --- */
.bd-puff { animation: bd-puff 6s steps(14) infinite; opacity: 0; }
@keyframes bd-puff {
  0%   { transform: translate(0, 0);                     opacity: 0; }
  12%  { opacity: .75; }
  100% { transform: translate(var(--dx), var(--dy));     opacity: 0; }
}

.bd-flame--a { animation: bd-flicker .5s steps(1) infinite; }
.bd-flame--b { animation: bd-flicker .5s steps(1) infinite reverse; }
@keyframes bd-flicker { 0% { opacity: 1; } 50% { opacity: 0; } }

.bd-fly { animation: bd-fly 9s linear infinite; }
@keyframes bd-fly {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(18px, -14px); }
  40%  { transform: translate(40px, -4px); }
  60%  { transform: translate(28px, 12px); }
  80%  { transform: translate(8px, 6px); }
  100% { transform: translate(0, 0); }
}
.bd-wing--open { animation: bd-flicker .32s steps(1) infinite; }
.bd-wing--shut { animation: bd-flicker .32s steps(1) infinite reverse; }

.bd-caravan--still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bd-puff, .bd-flame--a, .bd-flame--b, .bd-fly, .bd-wing--open, .bd-wing--shut { animation: none; }
  .bd-puff, .bd-flame--b, .bd-wing--shut { opacity: 0; }
  .bd-caravan--moving { display: none; }
  .bd-caravan--still  { display: inline; }
}