/* Una sola escena: higuera a contraluz al atardecer que pierde las hojas; el versículo debajo. */
:root{
  --cielo:#2a2320; --cielo-bajo:#5b3a2a; --tierra:#16110f;
  --tronco:#0f0b0a; --hoja:#6f7d3c; --hoja-seca:#8a6a3a; --texto:#efe4d2; --tenue:#b9a68c;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--cielo) 0%,var(--cielo-bajo) 100%);
  color:var(--texto);font-family:var(--serif);
  display:grid;place-items:center;
  padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{display:grid;justify-items:center;gap:20px;max-width:34rem;text-align:center}
svg{width:min(420px,88vw);height:auto;max-width:100%;overflow:visible}
.tronco,.suelo{fill:var(--tronco)}
.hoja{fill:var(--hoja);transform-box:fill-box;transform-origin:50% 0%;
  animation:secar 2.2s ease-in forwards,caer 2.6s cubic-bezier(.4,.1,.7,1) forwards}
.hojas>g:nth-child(3n) .hoja{animation-delay:1.2s,3.0s}
.hojas>g:nth-child(3n+1) .hoja{animation-delay:1.8s,3.8s}
.hojas>g:nth-child(3n+2) .hoja{animation-delay:2.4s,4.6s}
.hojas>g:nth-child(4n) .hoja{animation-duration:2.2s,3.2s}
.hojas>g:nth-child(5n) .hoja{animation-delay:2.9s,5.4s}
@keyframes secar{to{fill:var(--hoja-seca)}}
@keyframes caer{
  0%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(14px,60px) rotate(40deg)}
  70%{transform:translate(-10px,120px) rotate(-30deg)}
  90%{opacity:.8}
  100%{transform:translate(6px,175px) rotate(80deg);opacity:0}
}
blockquote{margin:0;font-size:clamp(1.25rem,4.6vw,1.75rem);line-height:1.35;text-wrap:balance;
  animation:aparecer 2s ease-out 6.2s both}
cite{display:block;font-style:normal;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
  animation:aparecer 1.6s ease-out 7.6s both}
.corte{font-size:clamp(2.2rem,9vw,3.4rem);letter-spacing:.02em;margin:0;
  animation:aparecer 1.2s ease-out 9s both}
.rancho span{font-style:normal;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-left:.4em}
.rancho{margin:0;line-height:1.6;font-size:1.05rem;font-style:italic;color:var(--tenue);
  animation:aparecer 1.4s ease-out 10.4s both}
.rancho-casa path,.rancho-casa rect{fill:var(--tronco)}
.rancho-casa .tejado{fill:#2a1d18}
.rancho-casa .puerta{fill:#3a2a22}
.paloma .cuerpo,.paloma .ala{fill:#e9e4dc}
.paloma .pico{fill:#d49a4a}
.paloma{animation:volar 4s linear 11.5s both}
.ala{transform-box:fill-box;transform-origin:50% 100%;animation:aletear .28s ease-in-out infinite alternate}
.caca{fill:#f4f1ea;opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:caer-caca .55s ease-in 14.68s forwards,plaf .3s ease-out 15.23s forwards}
@keyframes volar{from{transform:translateX(0)}to{transform:translateX(480px)}}
@keyframes aletear{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes caer-caca{0%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(158px)}}
@keyframes plaf{from{opacity:1;transform:translateY(158px) scale(1,1)}to{opacity:1;transform:translateY(160px) scale(2.4,.55)}}
.bici circle,.bici path{fill:none;stroke:#d9a93c;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bici .destello{fill:#fff6d6;stroke:none;transform-box:fill-box;transform-origin:center;animation:brillo 2.4s ease-in-out infinite}
@keyframes brillo{0%,70%,100%{opacity:0;transform:scale(.4)}82%{opacity:1;transform:scale(2.2)}}
@keyframes aparecer{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hoja{animation:none;opacity:0}
  blockquote,cite,.corte,.rancho{animation:none}
  .paloma{display:none}
  .bici .destello{animation:none}
  .caca{animation:none;opacity:1;transform:translateY(160px) scale(2.4,.55)}
}