/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade up animation - para elementos del hero */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade down animation - para el header */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation - para el eyebrow dot */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* ============================================
   ANIMATION APLICADA A COMPONENTES
   ============================================ */

/* Header entrance */
header {
  animation: fadeDown 0.5s var(--ease-out-expo) both;
}

/* Hero elements - entrada escalonada */
.hero-eyebrow {
  animation: fadeUp 0.8s var(--ease-out-expo) 0.1s both;
}

.hero-headline {
  animation: fadeUp 0.8s var(--ease-out-expo) 0.25s both;
}

.hero-sub {
  animation: fadeUp 0.8s var(--ease-out-expo) 0.4s both;
}

.hero-actions {
  animation: fadeUp 0.8s var(--ease-out-expo) 0.55s both;
}

/* Eyebrow dot pulse */
.eyebrow-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   REDUCED MOTION
   Respeta preferencias de accesibilidad
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Deshabilitar animaciones específicas */
  .eyebrow-dot {
    animation: none;
  }

  header,
  .hero-eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}