/* Plantas de La Florería: intro del inicio + plantas de los bordes que crecen al hacer scroll.
   Van detrás del contenido: las tarjetas (fondo opaco) las tapan y nunca quedan sobre texto en tarjetas. */

@property --g {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

#plantas {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.planta {
  position: absolute;
  overflow: visible;
  --g: 0;
  transition: --g 0.45s var(--ease-out);
}

.planta.der { transform: scaleX(-1); }

/* Tallo: se dibuja de la base a la punta */
.planta .tallo {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--g));
}

/* Ramas: empiezan a crecer cuando el tallo principal llega a su punto (--s) */
.planta .rama {
  stroke-dashoffset: calc(1 - clamp(0, (var(--g) - var(--s)) / (1 - var(--s)), 1));
}

/* Hojas y flores: brotan cuando el tallo llega a su altura (--t) */
.planta .brote {
  transform: scale(clamp(0, calc((var(--g) - var(--t)) * 7), 1));
}

/* ---------- Intro: plantas que brotan alrededor de la foto del inicio ---------- */

#plantas-intro {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.planta.intro {
  transition: none;
  animation: brotar 2.2s var(--ease-out) both;
  filter: drop-shadow(0 6px 10px rgba(29, 74, 56, 0.12));
}

@keyframes brotar {
  from { --g: 0; }
  to { --g: 1; }
}

#plantas-intro.crecido .planta.intro { animation: none; --g: 1; }

/* En pantallas angostas las plantas enmarcan la foto por delante */
@media (max-width: 1023px) {
  #plantas-intro { z-index: 20; }
}

/* La foto aparece un instante antes que las plantas */
.foto-intro {
  animation: foto-entra 0.9s var(--ease-out) both;
}

@keyframes foto-entra {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
}

/* Pétalos que caen una vez sobre el inicio */
#petalos {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.petalo {
  position: absolute;
  top: -24px;
  border-radius: 80% 10% 80% 10%;
  opacity: 0;
  animation: caer 4s linear both;
}

@keyframes caer {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  10% { opacity: 0.95; }
  85% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--x), 640px) rotate(var(--r)); }
}

@media (max-width: 767px) {
  .planta:not(.intro) { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .planta { transition: none; --g: 1; }
  .planta.intro { animation: none; --g: 1; }
  .foto-intro { animation: aparece 0.4s ease both; }
  #petalos { display: none; }
}

@keyframes aparece {
  from { opacity: 0; }
}