/**
 * Woo Infinite Scroll — Estilos CSS
 *
 * Cubre: barra de progreso, spinner de carga, sentinel,
 * animaciones fade y slide de productos entrantes.
 *
 * Diseñado para ser no invasivo: solo agrega estilos a clases
 * propias del plugin (prefijo wis-).
 *
 * @package WooInfiniteScroll
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════
   BARRA DE PROGRESO (parte superior de la página)
═══════════════════════════════════════════════════════════════ */

.wis-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #1a3a5c, #2d6a9f);
  border-radius: 0 2px 2px 0;
  transition: width 0.4s ease, opacity 0.6s ease 0.8s;
  pointer-events: none;
  will-change: width;
}

/* Brillo animado sobre la barra */
.wis-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: wis-shimmer 1.2s infinite;
}

@keyframes wis-shimmer {
  0%   { transform: translateX(-80px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(80px);  opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   SENTINEL (div invisible que dispara la carga)
═══════════════════════════════════════════════════════════════ */

.wis-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  visibility: hidden;    /* Invisible pero ocupa espacio → el observer lo detecta */
}


/* ═══════════════════════════════════════════════════════════════
   LOADER / SPINNER
═══════════════════════════════════════════════════════════════ */

.wis-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 32px 16px;
  box-sizing: border-box;
}

/* SVG spinner container */
.wis-spinner {
  width: 48px;
  height: 48px;
  animation: wis-rotate 1.4s linear infinite;
  flex-shrink: 0;
}

@keyframes wis-rotate {
  100% { transform: rotate(360deg); }
}

/* Pista del spinner (fondo gris) */
.wis-spinner-track {
  stroke: #e0e0e0;
}

/* Cabeza del spinner (color activo) */
.wis-spinner-head {
  stroke: #1a3a5c;
  animation: wis-dash 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wis-dash {
  0% {
    stroke-dasharray: 1, 125.664;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100.531, 125.664;
    stroke-dashoffset: -31.416;
  }
  100% {
    stroke-dasharray: 100.531, 125.664;
    stroke-dashoffset: -125.664;
  }
}

/* Texto debajo del spinner */
.wis-loader-text {
  display: block;
  font-size: 0.875rem;
  color: #888;
  letter-spacing: 0.02em;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA DE PRODUCTOS
   Los productos nuevos reciben la clase wis-animate-* al insertarse.
   La clase wis-animate-in se añade en el siguiente frame para
   disparar la transición CSS.
═══════════════════════════════════════════════════════════════ */

/* ── Fade ───────────────────────────────────────────────────── */
li.product.wis-animate-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

li.product.wis-animate-fade.wis-animate-in {
  opacity: 1;
}


/* ── Slide (sube desde abajo) ───────────────────────────────── */
li.product.wis-animate-slide {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

li.product.wis-animate-slide.wis-animate-in {
  opacity: 1;
  transform: translateY(0);
}


/* ── Escalonar la animación en los primeros 6 items ─────────── */
li.product.wis-animate-fade:nth-child(6n+1),
li.product.wis-animate-slide:nth-child(6n+1) { transition-delay: 0ms;   }
li.product.wis-animate-fade:nth-child(6n+2),
li.product.wis-animate-slide:nth-child(6n+2) { transition-delay: 60ms;  }
li.product.wis-animate-fade:nth-child(6n+3),
li.product.wis-animate-slide:nth-child(6n+3) { transition-delay: 120ms; }
li.product.wis-animate-fade:nth-child(6n+4),
li.product.wis-animate-slide:nth-child(6n+4) { transition-delay: 180ms; }
li.product.wis-animate-fade:nth-child(6n+5),
li.product.wis-animate-slide:nth-child(6n+5) { transition-delay: 240ms; }
li.product.wis-animate-fade:nth-child(6n+6),
li.product.wis-animate-slide:nth-child(6n+6) { transition-delay: 300ms; }


/* ═══════════════════════════════════════════════════════════════
   OCULTAR PAGINACIÓN NATIVA — solo en modos infinite y button
   En modo "pagination" la clase del body será wis-mode-pagination
   y se mostrará la paginación normal de WooCommerce.
═══════════════════════════════════════════════════════════════ */

.woo-infinite-scroll-active.wis-mode-infinite .woocommerce-pagination,
.woo-infinite-scroll-active.wis-mode-infinite nav.woocommerce-pagination,
.woo-infinite-scroll-active.wis-mode-button   .woocommerce-pagination,
.woo-infinite-scroll-active.wis-mode-button   nav.woocommerce-pagination {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   ACCESIBILIDAD: Respetar preferencia de movimiento reducido
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  li.product.wis-animate-fade,
  li.product.wis-animate-slide {
    transition: none !important;
    animation:  none !important;
    opacity:    1 !important;
    transform:  none !important;
  }

  .wis-spinner {
    animation: none;
  }

  .wis-spinner-head {
    animation: none;
    stroke-dasharray: 60, 125.664;
    stroke-dashoffset: -31;
  }

  .wis-progress-bar::after {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: Ajustes menores en móvil
═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .wis-loader {
    padding: 24px 12px;
    gap: 8px;
  }

  .wis-spinner {
    width: 36px;
    height: 36px;
  }

  .wis-loader-text {
    font-size: 0.8125rem;
  }
}