/* Animación para poner una opacidad en el header */

@keyframes header__opacity {
  0% {
    background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)),
      url(../../images/cabecera.jpg) 50% 50% / cover;
  }

  25% {
    background: linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 5%)),
      url(../../images/cabecera.jpg) 50% 50% / cover;
  }

  50% {
    background: linear-gradient(rgb(0 0 0 /20%), rgb(0 0 0 / 10%)),
      url(../../images/cabecera.jpg) 50% 50% / cover;
  }

  75% {
    background: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 15%)),
      url(../../images/cabecera.jpg) 50% 50% / cover;
  }

  100% {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 20%)),
      url(../../images/cabecera.jpg) 50% 50% / cover;
  }
}

.header__opacity {
  animation: header__opacity 500ms ease-out;
  animation-fill-mode: forwards; /* Mantiene los estilos del último frame después de la animación */
}

/* Animación para que aparezca el título en el header */

@keyframes title__fade {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title__fade {
  opacity: 0;
  animation: title__fade 500ms ease-out;
  animation-delay: 0.6s;
  animation-fill-mode: forwards; /* Mantiene los estilos del último frame después de la animación */
}

/* Animación para que las imágenes aparezcan progresivamente en móvil */

@keyframes animated__picture {
  from {
    opacity: 0;
    scale: 25%;
  }

  to {
    opacity: 1;
    scale: 100%;
  }
}

@media (width <= 768px) {
  .animated__picture img {
    animation-fill-mode: both;
    animation-name: animated__picture;
    animation-range: entry 10% cover 30%;
    animation-timeline: --image;
    height: auto;
    view-timeline-axis: block;
    view-timeline-name: --image;
    width: 100%;
  }
}