/* ==========================================================================
   NK PLACAS E.I.R.L. — Animaciones (animations.css)
   Metodología: BEM (Block Element Modifier)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANIMACIÓN DE ENTRADA DEL HEADER (DE DERECHA A IZQUIERDA)
   -------------------------------------------------------------------------- */
@keyframes navSlideInRight {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Aplicación en carga inicial */
.header {
  animation: logoFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.header__nav {
  animation: navSlideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

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

.top-bar {
  animation: navSlideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   2. ANIMACIÓN DE ENTRADA DEL HERO CON RETARDO (1 SEGUNDO DE DELAY)
   -------------------------------------------------------------------------- */
@keyframes heroContentFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slider__content {
  animation: heroContentFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

.hero-slider__arrow {
  animation: heroContentFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}


/* --------------------------------------------------------------------------
   3. REVELACIÓN POR SCROLL (BEM: .reveal, .reveal--up, .reveal--left, .reveal--right)
   -------------------------------------------------------------------------- */
.reveal,
.reveal--up,
.reveal--left,
.reveal--right,
.reveal--fade {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal--up {
  transform: translateY(40px);
}

.reveal--left {
  transform: translateX(-50px);
}

.reveal--right {
  transform: translateX(50px);
}

.reveal--fade {
  transform: translateY(0);
}

/* Estado visible al hacer scroll */
.reveal--is-visible,
.reveal--up.reveal--is-visible,
.reveal--left.reveal--is-visible,
.reveal--right.reveal--is-visible,
.reveal--fade.reveal--is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Retardos escalonados (BEM) */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }
/* Prevención de desbordamiento horizontal en tablets y celulares */
@media (max-width: 992px) {
  .header__nav,
  .header__actions,
  .top-bar {
    animation: none !important;
  }

  .reveal--left,
  .reveal--right {
    transform: translateY(30px);
  }
}

/* Preferencia de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .header,
  .header__nav,
  .header__actions,
  .top-bar,
  .hero-slider__content,
  .hero-slider__arrow,
  .reveal,
  .reveal--up,
  .reveal--left,
  .reveal--right,
  .reveal--fade {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}