/* 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%;
  }
}

.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 poner una opacidad en el header */

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

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

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

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

  100% {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url(../../images/cabecera.jpg) 50% 50% / cover;

    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
}

@media only screen and (max-width: 768px) {
  .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: translate(-50%, -20%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.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 aparezca el formulario después del título del header */
@keyframes form__fade {
  from {
    opacity: 0;
    transform: translate(100px, -50%);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

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

.circleInfinite {
  opacity: 0;
  animation-name: pulse;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media only screen and (max-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%;
  }
}