/* ==========================================================================
   Loader global de cyshops: una bolsa de compras recibiendo un producto,
   sin texto, para cualquier llamada a la API (login, registro, importar
   productos, comprar, crear/editar/eliminar cualquier cosa). Se muestra
   con mostrarLoader() / ocultarLoader() (js/loader.js) -nunca se instancia
   el markup a mano, el propio loader.js arma el overlay una sola vez y lo
   reusa siempre-. Pensado para vivir en TODOS los <head> de cyshops
   (header.tpl, header-offlog.tpl, header-offlog-sense.tpl, header-admin.tpl,
   header-login.tpl), así está disponible sin importar qué footer/bundle de
   JS use cada página.
   ========================================================================== */

.cyp-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.cyp-loader-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.cyp-loader {
  width: 64px;
  height: 64px;
}
.cyp-loader svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cyp-loader-bag {
  fill: none;
  stroke: var(--cp-accent, #303198);
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(29, 27, 46, .14));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cypLoaderSquish 1.6s ease-in-out infinite;
}
.cyp-loader-shine {
  fill: color-mix(in srgb, var(--cp-accent, #303198) 30%, white 70%);
  opacity: .6;
  animation: cypLoaderSweep 2.8s ease-in-out infinite;
}
.cyp-loader-item {
  fill: var(--cp-accent, #303198);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: cypLoaderDrop 1.6s cubic-bezier(.55, 0, .85, .35) infinite;
}
.cyp-loader-spark {
  fill: var(--cp-accent, #303198);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: cypLoaderSpark 1.6s ease-out infinite;
}

@keyframes cypLoaderDrop {
  0%   { transform: translateY(-15px) scale(.3); opacity: 0; }
  10%  { transform: translateY(-15px) scale(1);  opacity: 1; }
  56%  { transform: translateY(0)     scale(1);  opacity: 1; }
  64%  { transform: translateY(1px)   scale(.3); opacity: 0; }
  100% { transform: translateY(1px)   scale(.3); opacity: 0; }
}
@keyframes cypLoaderSquish {
  0%, 54%   { transform: scaleY(1); }
  61%       { transform: scaleY(.93); }
  72%       { transform: scaleY(1.02); }
  84%, 100% { transform: scaleY(1); }
}
@keyframes cypLoaderSweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(46px); }
}
@keyframes cypLoaderSpark {
  0%, 58%  { opacity: 0; transform: scale(.3) rotate(0deg); }
  67%      { opacity: 1; transform: scale(1.15) rotate(14deg); }
  85%      { opacity: 0; transform: scale(.6) rotate(26deg); }
  100%     { opacity: 0; transform: scale(.6) rotate(26deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cyp-loader-bag, .cyp-loader-shine, .cyp-loader-item, .cyp-loader-spark {
    animation-duration: 3.4s;
  }
}