/* Sistema de movimiento de la tienda. Todo es CSS; js/modulos/floral.js sólo agrega clases
   (aparecer al desplazarse, ramo a la vista, sombra del encabezado). Sólo se animan transform,
   opacity y trazos. Con «reducir movimiento» no entra nada de esta hoja (base.css además apaga
   transiciones): se ve el estado final, sin pétalos. Sin JS, todo se ve. */

@keyframes respirar {
  0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; transform: scale(1); }
  50% { border-radius: 54% 46% 45% 55% / 45% 55% 46% 54%; transform: scale(1.04); }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes llenar-anillo { from { stroke-dashoffset: 314; } }
@keyframes regar { from { transform: scaleX(0); } }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes abrir-flor {
  0% { opacity: 0; clip-path: inset(82% 16% 0 16% round 50%); filter: blur(5px); transform: translateY(34px) scale(.42) rotate(var(--giro, 0deg)); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 round 0); filter: blur(0); transform: translateY(0) scale(1) rotate(var(--giro, 0deg)); }
}
@keyframes caer-petalo {
  0% { opacity: 0; transform: translate3d(0, -4vh, 0) rotate(0deg); }
  5% { opacity: .82; }
  55% { transform: translate3d(var(--deriva, 45px), 48vh, 0) rotate(220deg); }
  88% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--regreso, -24px), 108vh, 0) rotate(520deg); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Apertura: el follaje prepara el escenario y las flores brotan en seis capas (1.9 s). */
  html.js .jardin-apertura .brote { opacity: 0; }
  html.js .hero-ramo.en-vista .brote { animation: abrir-flor 900ms var(--curva) both; }
  .jardin-apertura .b1 { --giro: -5deg; animation-delay: 80ms !important; }
  .jardin-apertura .b2 { --giro: 4deg; animation-delay: 240ms !important; }
  .jardin-apertura .b3 { --giro: -14deg; animation-delay: 430ms !important; }
  .jardin-apertura .b4 { --giro: 13deg; animation-delay: 620ms !important; }
  .jardin-apertura .b5 { --giro: -3deg; animation-delay: 800ms !important; }
  .jardin-apertura .b6 { --giro: 14deg; animation-delay: 980ms !important; }

  /* Siete pétalos espaciados caen sobre la portada mientras el ramo está a la vista. */
  html.js .hero-ramo.en-vista .lluvia-petalos { display: block; }
  html.js .hero-ramo.en-vista .petalo-caida { animation: caer-petalo var(--caida, 11s) linear var(--espera, 2s) infinite; }
  .pc1 { left: 8%; --caida: 8s; --espera: .55s; --deriva: 52px; --regreso: -26px; }
  .pc2 { left: 23%; --caida: 9.5s; --espera: 1.15s; --deriva: -40px; --regreso: 22px; width: 19px; }
  .pc3 { left: 39%; --caida: 7.5s; --espera: .8s; --deriva: 64px; --regreso: -32px; }
  .pc4 { left: 55%; --caida: 10s; --espera: 1.7s; --deriva: -55px; --regreso: 28px; width: 22px; }
  .pc5 { left: 69%; --caida: 8.5s; --espera: .65s; --deriva: 38px; --regreso: -20px; }
  .pc6 { left: 83%; --caida: 10.5s; --espera: 1.35s; --deriva: -68px; --regreso: 34px; width: 17px; }
  .pc7 { left: 94%; --caida: 8.8s; --espera: 2.1s; --deriva: 45px; --regreso: -22px; }

  .hero-ramo .mancha, .ficha-arte .mancha { animation: respirar 9s ease-in-out infinite; }
  .hero-texto > * { animation: aparecer var(--dur-3) var(--curva) both; }
  .hero-texto > :nth-child(2) { animation-delay: .1s; }
  .hero-texto > :nth-child(3) { animation-delay: .2s; }
  .hero-texto > :nth-child(4) { animation-delay: .3s; }
  .hero-texto > :nth-child(5) { animation-delay: .4s; }

  .sello .giro { animation: girar 40s linear infinite; }
  .jardin .actual .nodo { animation: latir 2s ease-in-out infinite; }
  .temporada .flores-temp img { animation: flotar 8s ease-in-out infinite; }

  /* Aparecer al entrar en pantalla, con la clase .visible que pone floral.js. */
  html.js .revelar { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-3) var(--curva), transform var(--dur-3) var(--curva); }
  html.js .revelar.visible { opacity: 1; transform: none; }
  html.js .revelar.r2 { transition-delay: .1s; }
  html.js .revelar.r3 { transition-delay: .2s; }
  html.js .revelar.r4 { transition-delay: .3s; }

  /* Así se hace tu pedido: el tallo se dibuja y los cuatro pasos florecen uno tras otro. */
  html.js .tallo-svg path { stroke-dashoffset: 1600; transition: stroke-dashoffset 2.2s var(--curva); }
  html.js .tallo-pasos.visible .tallo-svg path { stroke-dashoffset: 0; }
  html.js .pasos-flor .boton-flor { transform: scale(.4); opacity: 0; transition: transform var(--dur-3) var(--curva-rebote), opacity var(--dur-2); }
  html.js .tallo-pasos.visible .boton-flor { transform: none; opacity: 1; }
  html.js .tallo-pasos.visible li:nth-child(2) .boton-flor { transition-delay: .5s; }
  html.js .tallo-pasos.visible li:nth-child(3) .boton-flor { transition-delay: 1s; }
  html.js .tallo-pasos.visible li:nth-child(4) .boton-flor { transition-delay: 1.5s; }

  .anillo .mitad { animation: llenar-anillo 1.6s var(--curva) .3s both; }
  .jardin .riego { animation: regar 2s var(--curva) .3s both; }
}

@media (prefers-reduced-motion: reduce) {
  .lluvia-petalos { display: none; }
}