/* escena.css — la animación SVG del hero. El viento es rotate() con origen en la base y retardos
   escalonados; cada elemento trae su amplitud, duración y retardo en variables inline. */
.escena { width: 100%; height: 100%; }

.escena__viento {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: escena-viento var(--dur, 9s) ease-in-out var(--ret, 0s) infinite;
  animation-play-state: var(--escena-estado);
}
/* Se pausa cuando el hero sale de la vista: sin costo de pintura en el resto de la página */
.escena--pausada .escena__viento { animation-play-state: paused; }

@keyframes escena-viento {
  0%, 100% { transform: rotate(calc(var(--amp, 3deg) * -1)); }
  50% { transform: rotate(var(--amp, 3deg)); }
}

.escena__sol { fill: var(--escena-sol); }
.escena__cerro--lejano { fill: var(--escena-cerro-lejano); }
.escena__cerro { fill: var(--escena-cerro); }
.escena__suelo { fill: var(--escena-cesped-claro); }
.escena__suelo--frente { fill: var(--escena-cesped); }

.escena__muro { fill: var(--escena-muro); }
.escena__muro--sombra { fill: var(--escena-muro-sombra); }
.escena__techo { fill: var(--escena-techo); }
.escena__puerta { fill: var(--escena-puerta); }
.escena__ventana { fill: var(--escena-ventana); stroke: var(--escena-muro-sombra); stroke-width: 3; }
.escena__cruz { stroke: var(--escena-muro); stroke-width: 3; }

.escena__tronco { fill: var(--escena-tronco); }
.escena__hoja { fill: var(--escena-hoja); }
.escena__hoja--oscura { fill: var(--escena-hoja-oscura); }
.escena__arbusto { fill: var(--escena-cesped-oscuro); }
.escena__arbusto--claro { fill: var(--escena-cesped); }

.escena__brizna { fill: var(--escena-cesped); }
.escena__brizna--clara { fill: var(--escena-cesped-claro); }
.escena__brizna--oscura { fill: var(--escena-cesped-oscuro); }