/* ==========================================================================
   PETALS — lluvia de pétalos con profundidad.
   Cada pétalo son dos elementos anidados a propósito: uno solo no alcanza,
   porque dos animaciones sobre el mismo `transform` se pisan.
     .petal   → caída + giro (lineal, constante)
     .petal i → vaivén lateral (ease-in-out, alternate, otra duración)
   Al componerse con duraciones distintas el movimiento nunca se repite igual.
   ========================================================================== */

.petals-layer {
  position: fixed;
  inset: 0;
  /* Detrás del contenido (`.inv` es z-index 1) pero delante del papel: los
     pétalos pasan por atrás de los textos, las tarjetas y los mapas. */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Formas ----
   Con degradé (volumen), nervadura y sombra propia horneada en el SVG: la
   sombra va adentro del filtro para no pagar un filter de CSS por frame. */
:root {
  --petal-blanco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.55' stop-color='%23FCF4EA'/%3E%3Cstop offset='1' stop-color='%23EEDBC3'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-45%25' y='-45%25' width='190%25' height='190%25'%3E%3CfeDropShadow dx='.5' dy='1.2' stdDeviation='.9' flood-color='%236B4A20' flood-opacity='.3'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M15 2C22.5 7.2 25.5 15.5 18.2 24c-1.8 2.1-4.6 2.1-6.4 0C4.5 15.5 7.5 7.2 15 2Z' fill='url(%23g)'/%3E%3Cpath d='M15 5.5c-1.6 6-1.6 12.4 0 17.6' fill='none' stroke='%23E0CBAA' stroke-width='.65' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  --petal-rosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.5' stop-color='%23FBEDE6'/%3E%3Cstop offset='1' stop-color='%23EFD3C6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-45%25' y='-45%25' width='190%25' height='190%25'%3E%3CfeDropShadow dx='.5' dy='1.2' stdDeviation='.9' flood-color='%236B4A20' flood-opacity='.28'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M15 2C22.5 7.2 25.5 15.5 18.2 24c-1.8 2.1-4.6 2.1-6.4 0C4.5 15.5 7.5 7.2 15 2Z' fill='url(%23g)'/%3E%3Cpath d='M15 5.5c-1.6 6-1.6 12.4 0 17.6' fill='none' stroke='%23E7C6B7' stroke-width='.65' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  --petal-champan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.12' y1='0' x2='.88' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFEF9'/%3E%3Cstop offset='.5' stop-color='%23F8EED8'/%3E%3Cstop offset='1' stop-color='%23E4CDA1'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-45%25' y='-45%25' width='190%25' height='190%25'%3E%3CfeDropShadow dx='.5' dy='1.2' stdDeviation='.9' flood-color='%236B4A20' flood-opacity='.3'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M15 2C22.5 7.2 25.5 15.5 18.2 24c-1.8 2.1-4.6 2.1-6.4 0C4.5 15.5 7.5 7.2 15 2Z' fill='url(%23g)'/%3E%3Cpath d='M15 5.5c-1.6 6-1.6 12.4 0 17.6' fill='none' stroke='%23D9BC7E' stroke-width='.65' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}

.petal {
  position: absolute;
  top: -14vh;
  animation: petal-fall linear infinite;
  will-change: transform;
}
.petal > i {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center / contain var(--img, var(--petal-blanco));
  animation: petal-sway ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate3d(1, 3, 0.4, 0deg); opacity: 0; }
  7%   { opacity: var(--o, 0.85); }
  88%  { opacity: var(--o, 0.85); }
  100% { transform: translate3d(var(--drift, 40px), 128vh, 0) rotate3d(1, 3, 0.4, var(--spin, 540deg)); opacity: 0; }
}
@keyframes petal-sway {
  from { transform: translateX(calc(var(--sway, 16px) * -1)); }
  to   { transform: translateX(var(--sway, 16px)); }
}

/* ---- Polen dorado: puntitos de fondo que dan profundidad ---- */
.speck {
  position: absolute;
  top: -6vh;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(233, 206, 155, 0.95), rgba(214, 178, 110, 0) 70%);
  animation: petal-fall linear infinite;
  will-change: transform;
}

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