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

/* 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)),
      var(--header);
  }

  25% {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      var(--header);
  }

  50% {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      var(--header);
  }

  75% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
      var(--header);
  }

  100% {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      var(--header);
  }
}

@media (min-width: 768px) {
  .header__opacity {
    animation: header__opacity 0.4s ease-in-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 2.6s ease;
  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 2.2s ease;
  animation-delay: 1.8s;
  animation-fill-mode: forwards; /* Mantiene los estilos del último frame después de la animación */
}

@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%;
  }
}