/* =================================================================
   ANIMATIONS.CSS — Alpaca Rantiykuy
   Sistema completo: scroll-reveals · stagger · hovers · micro-fx
================================================================= */

/* ──────────────────────────────────────────────────────────────
   1. PAGE ENTRANCE — fade-in suave al cargar
────────────────────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: page-enter 0.42s ease-out both;
}


/* ──────────────────────────────────────────────────────────────
   2. SCROLL REVEAL — elementos con [data-reveal]
────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  0.72s cubic-bezier(.16, 1, .3, 1),
    transform 0.72s cubic-bezier(.16, 1, .3, 1);
}

/* Variantes direccionales */
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(-64px); }
[data-reveal="right"] { transform: translateX(64px); }
[data-reveal="scale"] { transform: scale(0.84) translateY(24px); }
[data-reveal="fade"]  { transform: none; }

/* Estado visible — añadido por IntersectionObserver */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* ──────────────────────────────────────────────────────────────
   3. STAGGER — hijos de [data-stagger] aparecen en secuencia
   Los delays se definen aquí via nth-child — sin inline styles
────────────────────────────────────────────────────────────── */
[data-stagger] > * {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  0.65s cubic-bezier(.16, 1, .3, 1),
    transform 0.65s cubic-bezier(.16, 1, .3, 1);
}

/* Delays escalonados — hasta 12 hijos */
[data-stagger] > *:nth-child(1)  { transition-delay:   0ms; }
[data-stagger] > *:nth-child(2)  { transition-delay:  80ms; }
[data-stagger] > *:nth-child(3)  { transition-delay: 160ms; }
[data-stagger] > *:nth-child(4)  { transition-delay: 240ms; }
[data-stagger] > *:nth-child(5)  { transition-delay: 320ms; }
[data-stagger] > *:nth-child(6)  { transition-delay: 400ms; }
[data-stagger] > *:nth-child(7)  { transition-delay: 480ms; }
[data-stagger] > *:nth-child(8)  { transition-delay: 560ms; }
[data-stagger] > *:nth-child(9)  { transition-delay: 640ms; }
[data-stagger] > *:nth-child(10) { transition-delay: 720ms; }
[data-stagger] > *:nth-child(11) { transition-delay: 800ms; }
[data-stagger] > *:nth-child(12) { transition-delay: 880ms; }

/* Direcciones de stagger */
[data-stagger]:not([data-stagger-dir]) > *,
[data-stagger][data-stagger-dir="up"] > * {
  transform: translateY(38px);
}
[data-stagger][data-stagger-dir="scale"] > * {
  transform: scale(0.88) translateY(20px);
}
[data-stagger][data-stagger-dir="fade"] > * {
  transform: none;
}
[data-stagger][data-stagger-dir="left"] > * {
  transform: translateX(-40px);
}

[data-stagger] > *.is-visible {
  opacity: 1;
  transform: none;
}


/* ──────────────────────────────────────────────────────────────
   4. HEADER — shrink elegante al hacer scroll
────────────────────────────────────────────────────────────── */
.main-header {
  transition: box-shadow 380ms ease;
}

.header-main {
  transition: box-shadow 380ms ease;
}

.header-main-inner {
  transition: padding 360ms cubic-bezier(.16, 1, .3, 1);
}

.brand-logo {
  transition: font-size 360ms cubic-bezier(.16, 1, .3, 1), color 200ms ease;
}



/* ──────────────────────────────────────────────────────────────
   5. BUTTON SHIMMER — sweep de luz al hacer hover
────────────────────────────────────────────────────────────── */
.btn-primary,
.register-submit,
.newsletter-submit,
.ai-chatbot-submit {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.register-submit::after,
.newsletter-submit::after,
.ai-chatbot-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  left: -110%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .28) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 0.58s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.btn-primary:hover::after,
.register-submit:hover::after,
.newsletter-submit:hover::after,
.ai-chatbot-submit:hover::after {
  left: 160%;
}


/* ──────────────────────────────────────────────────────────────
   6. CATEGORY CARDS — hover elevado + animación de contenido
────────────────────────────────────────────────────────────── */
.category-card-premium {
  transition:
    transform 0.4s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.4s ease;
}

.category-card-premium:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 72px rgba(7, 25, 41, .24);
}

.category-card-content {
  transition: transform 0.42s cubic-bezier(.16, 1, .3, 1);
}

.category-card-premium:hover .category-card-content {
  transform: translateY(-10px);
}

/* Tagline: aparece desde abajo al hover */
.category-card-tagline {
  display: block;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease 0.08s,
    transform 0.3s cubic-bezier(.16, 1, .3, 1) 0.08s;
}

.category-card-premium:hover .category-card-tagline {
  opacity: 1;
  transform: translateY(0);
}


/* ──────────────────────────────────────────────────────────────
   7. PRODUCT CARD — quick-view label que emerge al hover
────────────────────────────────────────────────────────────── */
.product-card-quick-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 11px 14px;
  background: rgba(12, 44, 82, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  z-index: 3;
}

.product-card:hover .product-card-quick-label {
  transform: translateY(0);
}


/* ──────────────────────────────────────────────────────────────
   8. MATERIAL CARDS — lift + scale al hover
────────────────────────────────────────────────────────────── */
.material-card {
  transition:
    transform 0.36s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.36s ease,
    border-color 0.3s ease;
}

.material-card:hover {
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 22px 52px rgba(7, 25, 41, .15);
}


/* ──────────────────────────────────────────────────────────────
   9. TRUST STRIP — lift sutil al hover
────────────────────────────────────────────────────────────── */
.trust-item {
  transition:
    background 0.24s ease,
    transform 0.28s cubic-bezier(.16, 1, .3, 1);
}

.trust-item:hover {
  transform: translateY(-4px);
}


/* ──────────────────────────────────────────────────────────────
   10. TESTIMONIAL CARDS — lift mejorado
────────────────────────────────────────────────────────────── */
.testimonial-card {
  transition:
    transform 0.36s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.36s ease;
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 64px rgba(7, 25, 41, .18);
}


/* ──────────────────────────────────────────────────────────────
   11. SOCIAL CARDS — lift con escala
────────────────────────────────────────────────────────────── */
.social-card {
  transition:
    transform 0.32s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.32s ease;
}

.social-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 44px rgba(7, 25, 41, .2);
}


/* ──────────────────────────────────────────────────────────────
   12. FOOTER — micro-interacciones
────────────────────────────────────────────────────────────── */
.footer-social-icon {
  transition:
    transform 0.26s cubic-bezier(.16, 1, .3, 1),
    opacity 0.22s ease;
}

.footer-social-icon:hover {
  transform: translateY(-5px) scale(1.14);
  opacity: .85;
}

.footer-logo {
  transition: opacity 0.2s ease;
}

.footer-logo:hover {
  opacity: .78;
}


/* ──────────────────────────────────────────────────────────────
   13. FLOATING BUTTONS — pulsación de glow continua
────────────────────────────────────────────────────────────── */
@keyframes pulse-whatsapp {
  0%, 100% {
    box-shadow:
      0 4px 18px rgba(37, 211, 102, .42),
      0 2px 8px  rgba(7, 25, 41, .16);
  }
  50% {
    box-shadow:
      0 8px 38px rgba(37, 211, 102, .70),
      0 2px 8px  rgba(7, 25, 41, .16);
  }
}

@keyframes pulse-chatbot {
  0%, 100% {
    box-shadow:
      0 4px 18px rgba(31, 99, 164, .40),
      0 2px 8px  rgba(7, 25, 41, .16);
  }
  50% {
    box-shadow:
      0 8px 38px rgba(31, 99, 164, .66),
      0 2px 8px  rgba(7, 25, 41, .16);
  }
}

.floating-whatsapp-btn {
  animation: pulse-whatsapp 2.8s ease-in-out infinite;
}

.ai-chatbot-toggle {
  animation: pulse-chatbot 3.4s ease-in-out infinite;
}


/* ──────────────────────────────────────────────────────────────
   14. GRID DINÁMICO — productos cargados por API
   Usa data-card-index para los delays — sin inline styles
────────────────────────────────────────────────────────────── */
@keyframes card-stagger-enter {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.card-stagger-enter {
  animation: card-stagger-enter 0.52s cubic-bezier(.16, 1, .3, 1) both;
}

.card-stagger-enter[data-card-index="0"]  { animation-delay:   0ms; }
.card-stagger-enter[data-card-index="1"]  { animation-delay:  60ms; }
.card-stagger-enter[data-card-index="2"]  { animation-delay: 120ms; }
.card-stagger-enter[data-card-index="3"]  { animation-delay: 180ms; }
.card-stagger-enter[data-card-index="4"]  { animation-delay: 240ms; }
.card-stagger-enter[data-card-index="5"]  { animation-delay: 300ms; }
.card-stagger-enter[data-card-index="6"]  { animation-delay: 360ms; }
.card-stagger-enter[data-card-index="7"]  { animation-delay: 420ms; }
.card-stagger-enter[data-card-index="8"]  { animation-delay: 480ms; }
.card-stagger-enter[data-card-index="9"]  { animation-delay: 540ms; }
.card-stagger-enter[data-card-index="10"] { animation-delay: 600ms; }
.card-stagger-enter[data-card-index="11"] { animation-delay: 660ms; }


/* ──────────────────────────────────────────────────────────────
   15. REVIEWS — clase para nota vacía (reemplaza inline style)
────────────────────────────────────────────────────────────── */
.reviews-empty-note {
  color: #8a7a6a;
  font-size: .9rem;
}


/* ──────────────────────────────────────────────────────────────
   16. COUNT-UP STATS — pop de entrada para los números
────────────────────────────────────────────────────────────── */
@keyframes stat-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.78); }
  65%  { transform: translateY(-5px) scale(1.1); }
  100% { opacity: 1; transform: none; }
}

.stat-counted {
  animation: stat-pop 0.72s cubic-bezier(.16, 1, .3, 1) forwards;
}


/* ──────────────────────────────────────────────────────────────
   15. SECTION TAG — hover leve
────────────────────────────────────────────────────────────── */
.section-tag {
  transition: letter-spacing 0.28s ease;
}

/* ──────────────────────────────────────────────────────────────
   16. NAV LINKS — underline animado
────────────────────────────────────────────────────────────── */
.main-nav a {
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.28s cubic-bezier(.16, 1, .3, 1);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  width: 100%;
}


/* ──────────────────────────────────────────────────────────────
   17. HERO IMAGE — parallax visual (manejado desde JS)
────────────────────────────────────────────────────────────── */
.hero-overlay {
  will-change: transform;
}


/* ──────────────────────────────────────────────────────────────
   18. MOBILE — simplificar para no penalizar rendimiento
────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .product-card-quick-label { display: none; }

  .category-card-tagline {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .floating-whatsapp-btn,
  .ai-chatbot-toggle {
    animation-duration: 4.5s;
  }

  /* Reveal más rápido en mobile */
  [data-reveal],
  [data-stagger] > * {
    transition-duration: 0.5s;
  }
}


/* ──────────────────────────────────────────────────────────────
   19. REDUCED MOTION — accesibilidad total
────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }

  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .btn-primary::after,
  .register-submit::after,
  .newsletter-submit::after,
  .ai-chatbot-submit::after,
  .category-card-premium,
  .category-card-content,
  .category-card-tagline,
  .product-card-quick-label,
  .material-card,
  .trust-item,
  .social-card,
  .testimonial-card,
  .footer-social-icon,
  .main-nav a::after {
    transition: none !important;
    animation: none !important;
  }

  .floating-whatsapp-btn,
  .ai-chatbot-toggle {
    animation: none !important;
  }

  .category-card-tagline {
    opacity: 1;
    transform: none;
  }
}