/* TARD home hero: the river village that grows from 1981 to 2026.
   Every class here starts with v- and every keyframe with v. Elements that
   appear in a year carry data-y; setVillageYear() adds .v-on to show them. */

.village { display: block; }

/* ---- appearing and disappearing by year ---- */
.village [data-y] {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.5, .55, 1), visibility 0s linear .6s;
}
.village [data-y].v-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, transform .6s cubic-bezier(.3, 1.5, .55, 1), visibility 0s;
}
/* pop up from the element's base */
.village .v-pop { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.3); }
/* grow upwards from the ground: buildings, poles, the tower, the bridge */
.village .v-rise { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.village .v-pop.v-on, .village .v-rise.v-on { transform: none; }

/* the sapling grows into the big shady tree */
.village .v-tree {
  transform: scale(var(--v-grow, .18));
  transform-origin: 0 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

/* ---- gentle idle loops ---- */
/* clouds drift a little to and fro, so they stay clear of the headline and the nav */
.village .v-cloud { animation: vDrift var(--dur, 60s) var(--d, 0s) ease-in-out infinite alternate; }
@keyframes vDrift { from { transform: translateX(-34px); } to { transform: translateX(34px); } }

/* a few birds cross the bright part of the sky now and then */
.village .v-birds { animation: vFly 42s -9s linear infinite; }
@keyframes vFly {
  0% { transform: translate(-30px, 16px); opacity: 0; }
  7% { opacity: 1; }
  70% { opacity: 1; }
  78%, 100% { transform: translate(560px, -24px); opacity: 0; }
}
.village .v-flap { animation: vFlap .55s var(--d, 0s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes vFlap { to { transform: scaleY(-.5); } }

/* kitchen and engine smoke: soft puffs that rise, spread and fade */
.village .v-smoke {
  animation: vSmoke 4.2s var(--d, 0s) ease-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes vSmoke {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  18% { opacity: .32; }
  100% { transform: translate(-12px, -46px) scale(1.5); opacity: 0; }
}

.village .v-bob { animation: vBob 3.6s var(--d, 0s) ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes vBob { 50% { transform: translateY(-3px) rotate(-1.2deg); } }

/* ducks paddle out and back, 12 s each way, turning round at each end so they always face ahead */
.village .v-paddle { animation: vPaddle 24s ease-in-out infinite; }
@keyframes vPaddle { 50% { transform: translate(22px, -8px); } }
.village .v-turn { animation: vTurn 24s step-end infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes vTurn { 50% { transform: scaleX(-1); } }

.village .v-glint { animation: vGlint 5s var(--d, 0s) ease-in-out infinite; }
@keyframes vGlint { 50% { opacity: .15; } }

.village .v-wave { animation: vWave 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes vWave { from { transform: skewY(-5deg) scaleX(.93); } to { transform: skewY(4deg) scaleX(1); } }

/* Traffic. Each vehicle is drawn where it is parked when motion is off; the
   loops run along the road from there. The van and the easy-bike share a
   30 s cycle half a cycle apart, so they never pass the schoolchildren together. */
.village .v-roll { animation: vRoll 30s -12s linear infinite; }
@keyframes vRoll {
  0% { transform: translate(-360px, 17.5px); opacity: 0; }
  3% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(700px, -34.1px); opacity: 0; }
}
.village .v-ebike { animation: vEbike 30s -27s linear infinite; }
@keyframes vEbike {
  0% { transform: translate(-272px, 11.3px); opacity: 0; }
  3% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(788px, -32.8px); opacity: 0; }
}
/* the schoolgirl rides the other way, in the far lane (she is drawn facing left) */
.village .v-ride { animation: vRide 44s -30s linear infinite; }
@keyframes vRide {
  0% { transform: translate(335px, -13.9px); opacity: 0; }
  3% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate(-725px, 30.2px); opacity: 0; }
}

/* loops inside things that have not appeared yet, or while the banner is off screen, rest */
.village [data-y]:not(.v-on) * { animation-play-state: paused; }
.village.v-paused *, .village.v-held * { animation-play-state: paused !important; }

/* ---- motion off when the visitor asks for less ---- */
@media (prefers-reduced-motion: reduce) {
  .village [data-y], .village [data-y].v-on, .village .v-tree { transition: none !important; }
  .village .v-pop, .village .v-rise { transform: none; }
  .village .v-cloud, .village .v-birds, .village .v-flap, .village .v-smoke, .village .v-bob, .village .v-paddle, .village .v-turn,
  .village .v-glint, .village .v-wave, .village .v-roll, .village .v-ride, .village .v-ebike { animation: none !important; }
}