/* ==========================================================================
   venta-animaciones.css — Animaciones EXCLUSIVAS de venta.html
   ==========================================================================
   Hoja de estilos EXCLUSIVA de venta.html. No modifica ni depende de ningún
   selector de components.css, utilities.css ni de ningún otro CSS compartido
   del proyecto. Todos los selectores están anclados a los DOS IDs únicos que
   ya existen en el HTML de esta página (#product-lightbox, #lightbox-img),
   por lo que no puede colisionar con nada de otras páginas ni con la clase
   utilitaria genérica ".hidden" que también usa, por ejemplo, #mobile-menu
   (esa clase NO se toca aquí; solo se sobreescribe su efecto cuando aparece
   combinada con el id #product-lightbox, gracias a que un selector de ID
   tiene más especificidad que la clase utilitaria sola).

   Por qué existe este archivo (y no solo clases utilitarias en el HTML):
   el HTML de #product-lightbox se abre/cierra alternando la clase "hidden"
   (display:none). Un cambio de "display" no se puede animar con CSS por sí
   solo -- por eso aquí se reinterpreta "hidden" SOLO para este elemento como
   opacidad + visibilidad (que sí son animables), sin tocar carousel.js ni
   el comportamiento de "hidden" en el resto del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Overlay del lightbox — transición de apertura/cierre
   -------------------------------------------------------------------------- */
/* position/inset/z-index se redeclaran aquí EXPLÍCITAMENTE (no solo vía las
   clases "fixed inset-0 z-[80]" del HTML). Motivo del bug reportado: esas
   dos últimas son clases con sintaxis de corchetes -- si tu generador de
   utilities.css todavía no las había compilado, el navegador las ignora y
   #product-lightbox queda con z-index:auto, perdiendo el apilamiento contra
   el "z-10" del carrusel (que sí es una clase estándar ya compilada). Al
   escribirlas aquí con el selector de ID, quedan garantizadas sin importar
   el estado de utilities.css, y con margen de sobra sobre los demás z-index
   del sitio (.whatsapp-float:60, .modal-overlay:70 en components.css). */
#product-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

/* Estado cerrado: en vez de display:none (que no se puede animar), se vuelve
   invisible por opacidad + fuera de la capa de accesibilidad/interacción.
   El "!important" es necesario para ganarle a la regla ".hidden{display:none}"
   del utilities.css compartido -- pero SOLO aplica aquí, combinado con el id. */
#product-lightbox.hidden{
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s; /* visibility espera
                                                              a que termine el fade */
}

/* Estado abierto */
#product-lightbox:not(.hidden){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   2. Imagen ampliada — efecto de "agrandado" (pop) al abrir
   -------------------------------------------------------------------------- */
@keyframes ventaLightboxPop{
  from{ opacity: 0; transform: scale(.85); }
  to{   opacity: 1; transform: scale(1);   }
}
#product-lightbox:not(.hidden) #lightbox-img{
  animation: ventaLightboxPop .35s cubic-bezier(.34,1.56,.64,1) both;
}

/* --------------------------------------------------------------------------
   3. Accesibilidad — respeta prefers-reduced-motion (mismo criterio que
   cronologia.css / cronologiaISA.css, ya establecido en el proyecto)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #product-lightbox,
  #product-lightbox.hidden,
  #product-lightbox:not(.hidden){
    transition-duration: .01ms !important;
  }
  #product-lightbox:not(.hidden) #lightbox-img{
    animation: none !important;
  }
}