/* ============================================
   MAKA DEFENSA - Animations & Transitions
   ============================================ */

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid items */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 600ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 700ms; }

/* Fade variations */
.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--left.visible,
.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Hero Animations --- */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBadgeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSubtitleIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCtaIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__badge {
  animation: heroBadgeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero__title {
  animation: heroTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero__subtitle {
  animation: heroSubtitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.hero__ctas {
  animation: heroCtaIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* --- Counter Animation --- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* --- Glow Pulse --- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: var(--glow-azul);
  }
  50% {
    box-shadow: var(--glow-azul-fuerte);
  }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* --- Line Draw --- */
@keyframes lineDraw {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Fade In Up (general) --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Slide In --- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Rotate In (for icons) --- */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* --- Page Hero Animations --- */
.page-hero__title {
  animation: heroTitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.page-hero__subtitle {
  animation: heroSubtitleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.breadcrumb {
  animation: heroBadgeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* --- Mobile: reduce translateX to prevent horizontal overflow --- */
@media (max-width: 768px) {
  .reveal--left { transform: translateX(-20px); }
  .reveal--right { transform: translateX(20px); }
}