/**
 * Hero Section - Front Page Custom Styles
 *
 * @package DGAI
 * @since 1.0.0
 */

.front-page-hero {
  font-family: "Tipo UBB", ui-sans-serif, system-ui, sans-serif;
  min-height: 80vh;
  min-height: 80svh;
}

/* Animaciones de Entrada */
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(100px);
  }
}

@keyframes hero-caricatura-entry {
  from {
    opacity: 0;
    transform: scale(0.8) translateZ(50px);
  }
  to {
    opacity: 0.2; /* Mantiene la opacidad deseada del diseño */
    transform: scale(1) translateZ(50px);
  }
}

/* Clases de animación */
.hero-reveal {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal--fade {
  animation-name: hero-fade-in;
  animation-duration: 1.2s;
}

.hero-reveal--slide-up {
  animation-name: hero-slide-up;
  animation-duration: 1s;
}

.hero-reveal--caricatura {
  animation-name: hero-caricatura-entry;
  animation-duration: 1.5s;
}

/* Delays */
.hero-delay-1 { animation-delay: 0.2s; }
.hero-delay-2 { animation-delay: 0.4s; }
.hero-delay-3 { animation-delay: 0.6s; }
.hero-delay-4 { animation-delay: 0.8s; }

/* Mantener el efecto hover del botón si es necesario, 
   pero el botón en index.php ya tiene clases de Tailwind */

@media (max-width: 768px) {
  .front-page-hero {
    min-height: 66vh;
    min-height: 66svh;
  }
}