/* ==================== ANIMACIONES CON SCROLL ==================== */
/* Usa CSS animations con IntersectionObserver en JavaScript */
/* Compatible con todos los navegadores (Chrome, Firefox, Safari, etc) */

/* Estado inicial: sin animar */
section.bio > p:nth-of-type(1),
section.bio > p:nth-of-type(3),
section.bio > p:nth-of-type(5) {
  opacity: 0;
  transform: translateX(-6rem); /* Aumentado de 3rem a 6rem para mayor efecto */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transición suave */
}

section.bio > p:nth-of-type(2),
section.bio > p:nth-of-type(4) {
  opacity: 0;
  transform: translateX(6rem); /* Aumentado de 3rem a 6rem para mayor efecto */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transición suave */
}

/* Cuando se añade la clase .animado, el estado final */
section.bio > p:nth-of-type(1).animado,
section.bio > p:nth-of-type(3).animado,
section.bio > p:nth-of-type(5).animado,
section.bio > p:nth-of-type(2).animado,
section.bio > p:nth-of-type(4).animado {
  opacity: 1;
  transform: translateX(0);
}

section.bio > div.animado {
  animation: entraDesdeAbajo 0.8s ease-out forwards;
}

/* ==================== CARRUSEL: ESCALA DESDE FUERA ==================== */
/* Solo anima el div que contiene los articles */

section.carrusel > div {
  transform: scale(0.6);
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transform-origin: center;
}

section.carrusel > div.animado-escala {
  transform: scale(1);
  opacity: 1;
}

/* ==================== FINAL CTA: ZOOM ==================== */
/* Solo anima el h2 "53 años..." */

section.final-cta > h2 {
  transform: scale(0.3);
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transform-origin: center;
}

section.final-cta > h2.animado-zoom {
  transform: scale(1);
  opacity: 1;
}