/* LO QUE SALE MIENTRAS CARGA LA PÁGINA (EL INTRO DE FLORES) */
#intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader, 9999);
  background: var(--body-bg, #FFF0F3);
  transition: opacity 0.5s ease;
}

#intro.done {
  opacity: 0;
  pointer-events: none;
}

#intro .bloom-img {
  position: absolute;
  /* Hice las flores grandes para que no haya que cargar tantas y la compu no se trabe */
  width: 180px;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3) translateZ(0);

}

/* EL MOMENTO EN QUE EMPIEZAN A MOVERSE LAS FLORES */
#intro.start-anim .bloom-img {
  will-change: transform, opacity;
  /* Bajamos el tiempo a la mitad para un impacto rápido */
  animation: bloomInOut 1.6s ease-in-out forwards;
}

/* Limpio todo para que el navegador descanse cuando ya terminó */
#intro.done .bloom-img {
  will-change: auto;
}

@keyframes bloomInOut {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(var(--r-start)) translateZ(0);
  }

  25% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateZ(0);
  }

  75% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateZ(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.4) rotate(var(--r-end)) translateZ(0);
  }
}

/* ═══════════════════════════════════════════
   COSAS QUE APARECEN CUANDO VAS BAJANDO LA PÁGINA
   ═══════════════════════════════════════════ */

.reveal-up {
  opacity: 0;
  transform: translateY(30px) translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95) translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal-up.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0) scale(1) translateZ(0);
  will-change: auto;
  /* Libero la GPU para ahorrar recursos */
}

/* Para que las tarjetas aparezcan una tras otra, no todas al mismo tiempo */
.reveal-stagger>* {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal-stagger.is-visible>* {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
}

.reveal-stagger.is-visible>*:nth-child(1) {
  transition-delay: 0.05s;
}

.reveal-stagger.is-visible>*:nth-child(2) {
  transition-delay: 0.15s;
}

.reveal-stagger.is-visible>*:nth-child(3) {
  transition-delay: 0.25s;
}

.reveal-stagger.is-visible>*:nth-child(4) {
  transition-delay: 0.35s;
}

.reveal-stagger.is-visible>*:nth-child(5) {
  transition-delay: 0.45s;
}

.reveal-stagger.is-visible>*:nth-child(6) {
  transition-delay: 0.55s;
}

.reveal-stagger.is-visible>*:nth-child(7) {
  transition-delay: 0.65s;
}

.reveal-stagger.is-visible>*:nth-child(8) {
  transition-delay: 0.75s;
}