/* ─────────────────────────────────────────────────────────────
   ANIMACIONES
   Todo es lento y pequeño a propósito: que se sienta vivo, no que distraiga.

   1. Portada: cada parte entra una tras otra al abrir la página.
   2. Video de fondo: aparece poco a poco cuando empieza a reproducirse.
   3. Pétalos que caen sobre el video (los crea js/animaciones.js).
   4. Flores que se mecen con el viento.
   5. Tarjetas y videos que suben suavecito al llegar a ellos.

   Para quitar una, borra su bloque. Para hacerla más lenta,
   sube los segundos de su "animation".
   ───────────────────────────────────────────────────────────── */

/* ── 1. Portada: entrada escalonada ── */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.portada > .etiqueta  { animation: aparecer 1.4s var(--suave) .2s both; }
.portada .corona      { animation: aparecer 1.4s var(--suave) .45s both, flotar 7s ease-in-out 2s infinite; }
.portada h1           { animation: aparecer 1.6s var(--suave) .7s both; }
.portada-fecha        { animation: aparecer 1.4s var(--suave) 1.05s both; }
.portada-para         { animation: aparecer 1.4s var(--suave) 1.3s both; }
.portada .abrir       { animation: aparecer 1.4s var(--suave) 1.7s both; }

/* La corona sube y baja muy poquito (usa "translate" para no chocar con la entrada) */
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* La flor de cerezo del centro gira despacito; las espigas se mecen */
@keyframes girar-lento {
  to { rotate: 360deg; }
}

@keyframes mecer-espiga {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}

.corona img:nth-child(2) {
  animation: girar-lento 40s linear infinite;
}

.corona img:nth-child(1),
.corona img:nth-child(3) {
  transform-origin: 50% 100%;
  animation: mecer-espiga 5s ease-in-out infinite;
}

.corona img:nth-child(3) {
  animation-delay: -2.5s;
}

/* ── 2. Video de fondo: aparece suave sobre su imagen ── */
.fondo video {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fondo video.reproduciendo {
  opacity: 1;
}

/* ── 3. Pétalos que caen (encima del video, detrás de las tarjetas) ── */
.petalos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* El <span> cae y se desvía; el <i> de adentro gira y se balancea */
.petalo {
  position: absolute;
  top: -40px;
  left: var(--x);
  animation: caer var(--duracion) linear var(--retraso) infinite;
}

.petalo i {
  display: block;
  /* Pétalo de cerezo con su muesca (assets/petalo.svg) */
  width: var(--tamano);
  height: calc(var(--tamano) * 1.9);
  background: url("../assets/petalo.svg") center / contain no-repeat;
  opacity: .92;
  filter: drop-shadow(0 2px 3px rgba(120, 50, 60, .18));
  animation: revolotear var(--vaiven) ease-in-out var(--retraso) infinite alternate;
}

@keyframes caer {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--deriva), calc(100lvh + 80px), 0); }
}

@keyframes revolotear {
  from { transform: rotate(0deg) rotateY(0deg) translateX(0); }
  to { transform: rotate(220deg) rotateY(160deg) translateX(26px); }
}

/* ── 4. Flores que se mecen ── */
@keyframes mecer {
  0%, 100% { transform: rotate(-3.5deg) scale(1); }
  50% { transform: rotate(3.5deg) scale(1.02); }
}

/* Flores de las esquinas de las tarjetas: cada una a su ritmo */
.flor {
  transform-origin: 50% 85%;
  animation: mecer 7s ease-in-out infinite;
}

.tarjeta .flor:nth-of-type(2) { animation-duration: 8.5s; animation-delay: -3s; }
.tarjeta:nth-child(2n) .flor { animation-duration: 9s; animation-delay: -1.5s; }
.tarjeta:nth-child(3n) .flor { animation-duration: 6.5s; animation-delay: -4s; }

/* Florecita del separador bajo cada título */
@keyframes asentir {
  0%, 100% { rotate: -10deg; }
  50% { rotate: 10deg; }
}

.separador img {
  animation: asentir 5s ease-in-out infinite;
}

/* Flores del itinerario: se mecen una después de otra, como ola */
.itinerario .tallo img {
  animation: asentir 4.5s ease-in-out infinite;
}

.itinerario li:nth-child(2) .tallo img { animation-delay: -.9s; }
.itinerario li:nth-child(3) .tallo img { animation-delay: -1.8s; }
.itinerario li:nth-child(4) .tallo img { animation-delay: -2.7s; }
.itinerario li:nth-child(5) .tallo img { animation-delay: -3.6s; }
.itinerario li:nth-child(6) .tallo img { animation-delay: -4.5s; }

/* Flor de los espacios vacíos de video */
.marco-video .espacio img {
  animation: asentir 5s ease-in-out infinite;
}

/* Pétalos de colores de la vestimenta: crecen un poco al pasar el cursor */
.colores i {
  transition: transform .4s var(--suave);
}

.colores li:hover i {
  transform: scale(1.1) rotate(-8deg);
}

/* ── 5. Tarjetas y videos que suben al llegar a ellos ──
   Usa animaciones ligadas al scroll del navegador (Chrome, Edge, Safari 26+).
   Donde no existen, todo se ve normal, sin animación: nunca se queda escondido. */
@keyframes asomar {
  from { opacity: 0; transform: translateY(56px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes asomar-video {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  .tarjeta {
    animation: asomar linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  .galeria .marco-video,
  .datos-cita > div,
  .itinerario li,
  .colores li,
  .si-no > div {
    animation: asomar-video linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
  }
}