/* ============================================================
   DECOR — everything alive: the garden backdrop, the butterflies,
   the petals, the cursor trail, the confetti, the ornaments.
   Nothing here is content; it is all aria-hidden.
   ============================================================ */

/* ------------------------------------------------------------
   1. Garden backdrop
   Fixed behind the column. On mobile it reads as a soft wash;
   on desktop it becomes a full scene framing the invitation.
   ------------------------------------------------------------ */
.escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, #FFE7F2 0%, #FFF1E4 45%, #F3F8E9 100%);
}

.escena__sol {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 320px;
  height: 320px;
  margin-left: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, 0.95) 0%, rgba(255, 235, 175, 0.45) 45%, rgba(255, 235, 175, 0) 70%);
  animation: respirar 9s ease-in-out infinite;
}

.escena__capa {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max(1400px, 130vw);
}

.escena__capa--colinas { bottom: 0; opacity: 0.85; }
.escena__capa--pasto   { bottom: 0; }

.escena__nube {
  position: absolute;
  opacity: 0.75;
  animation: flotarLento var(--vel, 14s) ease-in-out infinite;
}

/* Vines framing the card. They only earn their place once the viewport
   is wide enough that the margins would otherwise sit empty. */
.escena__enredadera {
  display: none;
  position: absolute;
  top: -30px;
  width: 170px;
  height: 620px;
  transform-origin: top center;
  animation: colgar 11s ease-in-out infinite;
  --giro: 1.6deg;
}

.escena__enredadera svg { width: 100%; height: 100%; overflow: visible; }
.escena__enredadera--izq { left: 2%; }
.escena__enredadera--der { right: 2%; animation-delay: 2.5s; }

/* Mirrored on the inner SVG, not the wrapper: the wrapper's transform
   belongs to the sway animation and would overwrite it. */
.escena__enredadera--der svg { transform: scaleX(-1); }

@media (min-width: 1120px) {
  .escena__enredadera { display: block; }
}

@media (min-width: 1400px) {
  .escena__enredadera--izq { left: 6%; }
  .escena__enredadera--der { right: 6%; }
}

/* ------------------------------------------------------------
   2. Floating layers
   Each is a fixed, non-interactive plane with its own z-index so
   life can sit both behind and in front of the invitation column.
   ------------------------------------------------------------ */
.capa {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.capa--petalos    { z-index: 4;  }   /* behind the column */
.capa--mariposas  { z-index: 46; }   /* in front of the column */
.capa--chispas    { z-index: 60; }
.capa--confeti    { z-index: 80; }

/* ------------------------------------------------------------
   3. Butterflies
   Built by scripts/butterflies.js. Each one is a 3D rig:
   the container is positioned + banked by JS, the two wing
   halves flap on their own hinge in CSS.
   ------------------------------------------------------------ */
.mariposa {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(74px * var(--escala, 1));
  aspect-ratio: 1 / 0.86;
  perspective: 320px;
  will-change: transform, opacity;
  opacity: var(--opacidad, 1);
  filter: drop-shadow(0 6px 8px rgba(120, 70, 90, 0.18));
}

/* Las efímeras nacen invisibles: el script sube y baja --opacidad a lo
   largo de su vida. La transición corta suaviza el salto entre cuadros. */
.mariposa--efimera {
  opacity: var(--opacidad, 0);
  transition: opacity 120ms linear;
}

.mariposa--lejana { filter: blur(0.7px) drop-shadow(0 4px 6px rgba(120, 70, 90, 0.12)); }

.mariposa__rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.mariposa__ala {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  backface-visibility: visible;
}

.mariposa__ala svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* The hinge is the body, so each half pivots on its inner edge. */
.mariposa__ala--izq { left: 0; transform-origin: right center; }
.mariposa__ala--der { right: 0; transform-origin: left center; }

/* One wing is authored; the other is the same drawing mirrored. */
.mariposa__ala--izq svg { transform: scaleX(-1); }

.mariposa__cuerpo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15%;
  height: 100%;
  transform: translateX(-50%) translateZ(1px);
}

.mariposa__cuerpo svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Ornamental butterflies sitting inside the content flap on CSS alone;
   the ones that chase the cursor are driven by scripts/butterflies.js. */
.mariposa--auto .mariposa__ala--izq {
  animation: aletearIzq var(--aleteo, 0.42s) ease-in-out infinite;
}

.mariposa--auto .mariposa__ala--der {
  animation: aletearDer var(--aleteo, 0.42s) ease-in-out infinite;
}

/* El color entra por custom properties: un solo markup produce todas las
   especies. El volumen se arma por capas — margen oscuro debajo, relleno
   encima, luz y venas — en vez de un contorno parejo de sticker. */
.ala__margen { fill: var(--ala-borde, #C34479); opacity: 0.9; }
.ala__base   { fill: var(--ala-b, #EF7CA9); }
.ala__frente { fill: var(--ala-a, #FBA3C7); }
.ala__luz    { fill: var(--ala-luz, #FFE0EC); opacity: 0.75; }
.ala__ojo    { fill: var(--ala-borde, #C34479); opacity: 0.5; }
.ala__punto  { fill: var(--ala-punto, #FFF3C4); }

.ala__vena {
  stroke: var(--ala-borde, #C34479);
  stroke-opacity: 0.3;
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
}

.ala__brillo {
  stroke: #FFFFFF;
  stroke-opacity: 0.45;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
}

.mariposa__torso { fill: var(--torso, #4A3A33); }

.mariposa__antena,
.mariposa__lomo {
  stroke-linecap: round;
  fill: none;
}

.mariposa__antena { stroke: var(--torso, #4A3A33); stroke-width: 1.5; }
.mariposa__lomo   { stroke: #FFFFFF; stroke-opacity: 0.28; stroke-width: 1.6; }

/* ------------------------------------------------------------
   4. Petals
   ------------------------------------------------------------ */
.petalo {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--tam, 14px);
  will-change: transform, opacity;
  animation: caerPetalo var(--dur, 16s) linear var(--retraso, 0s) infinite;
}

/* ------------------------------------------------------------
   5. Cursor sparkle trail
   ------------------------------------------------------------ */
.chispa-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 0;
  animation: destello 700ms ease-out forwards;
}

/* ------------------------------------------------------------
   6. Ornaments reused across sections
   ------------------------------------------------------------ */
.adorno {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.adorno--flota      { animation: flotar 6s ease-in-out infinite; }
.adorno--flota-lento{ animation: flotarLento 8.5s ease-in-out infinite; }
.adorno--brilla     { animation: chispa 2.6s ease-in-out infinite; }
.adorno--gira       { animation: girar 26s linear infinite; }

/* Scalloped divider between sections. */
.onda {
  position: relative;
  display: block;
  width: 100%;
  height: 62px;
  line-height: 0;
}

.onda > svg:first-child { width: 100%; height: 100%; display: block; }

/* Flowers sitting on the crest, kept out of the stretched SVG so they
   never distort with the wave. */
.onda__flor {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  animation: flotar 5.5s ease-in-out infinite;
}

.onda__flor:nth-of-type(3) { animation-delay: .8s; }
.onda__flor:nth-of-type(4) { animation-delay: 1.6s; }

/* Rope used by the sign and the itinerary rail. */
.cuerda {
  stroke: var(--cuerda);
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
}

.cuerda--trenza {
  stroke: var(--cuerda-osc);
  stroke-width: 5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  fill: none;
  opacity: 0.75;
}