/* ===========================================================================
   Chipa Mix · Loader de marca "Botella" (loader 4)
   ---------------------------------------------------------------------------
   La "C" de Chipa Mix (shared/logo-square-verde.svg) se usa como máscara CSS
   y por dentro sube/baja un líquido verde con la superficie ondulada, como si
   la letra se llenara de líquido.

   Es 100% CSS a propósito: el loader se muestra MIENTRAS carga el JavaScript
   de la página, así que no puede depender de JS/canvas (quedaría en blanco
   justo cuando se necesita). Respeta prefers-reduced-motion.

   Uso:
     <span class="chipa-loader" role="status" aria-label="Cargando">
       <span class="chipa-loader__fill"></span>
     </span>
   =========================================================================== */

.chipa-loader {
  --chipa-loader-size: 64px;
  --chipa-liquid: #1d3125;              /* verde de marca (texto-secundario) */
  --chipa-glass: rgba(29, 49, 37, 0.16); /* "vaso" vacío (C tenue) */
  display: block;
  width: var(--chipa-loader-size);
  height: var(--chipa-loader-size);
  margin-inline: auto;                  /* centrado aunque falte .mx-auto */
  position: relative;
  overflow: hidden;
  pointer-events: none;
  /* "vaso" vacío: la C completa pero tenue, siempre visible detrás */
  background: var(--chipa-glass);
  /* la C de marca recorta todo lo que se pinte dentro */
  -webkit-mask: url(logo-square-verde.svg) no-repeat center / 88%;
          mask: url(logo-square-verde.svg) no-repeat center / 88%;
}

/* Cuerpo del líquido: sube desde abajo y vuelve a bajar (respira) */
.chipa-loader__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: var(--chipa-liquid);
  transform: translateY(88%);
  will-change: transform;
  animation: chipa-fill 4.2s cubic-bezier(.45, .05, .55, .95) infinite;
}

/* Superficie ondulada: dos olas que se desplazan de costado a distinta
   velocidad para dar sensación de líquido. Cada ola es una franja verde
   recortada con una onda (máscara en data-URI). */
.chipa-loader__fill::before,
.chipa-loader__fill::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  height: 10px;
  top: -8px;
  background: var(--chipa-liquid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='10'%3E%3Cpath%20d='M0%205%20C6%201%2014%201%2020%205%20S34%209%2040%205%20V10%20H0%20Z'%20fill='black'/%3E%3C/svg%3E") repeat-x bottom / 40px 10px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='10'%3E%3Cpath%20d='M0%205%20C6%201%2014%201%2020%205%20S34%209%2040%205%20V10%20H0%20Z'%20fill='black'/%3E%3C/svg%3E") repeat-x bottom / 40px 10px;
}
.chipa-loader__fill::before {     /* ola de fondo: más tenue y más lenta */
  opacity: .5;
  animation: chipa-wave 2.3s linear infinite reverse;
}
.chipa-loader__fill::after {      /* ola de frente */
  animation: chipa-wave 1.3s linear infinite;
}

@keyframes chipa-fill {
  0%   { transform: translateY(88%); }
  55%  { transform: translateY(6%); }
  78%  { transform: translateY(6%); }
  100% { transform: translateY(88%); }
}

@keyframes chipa-wave {
  to { transform: translateX(40px); }
}

/* Texto opcional debajo del loader (overlay de pantalla completa) */
.chipa-loader__caption {
  font-family: 'Grandstander', 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: #1d3125;
  opacity: .7;
}

/* Overlay opcional: pantalla completa centrada (lo usa el portal retail).
   No fija display: lo enciende/apaga el JS con display:flex / none. */
.chipa-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(222, 209, 177, 0.82);   /* beige de marca (fondo) */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Accesibilidad: sin animación si el sistema lo pide.
   Queda la C casi llena, estática. */
@media (prefers-reduced-motion: reduce) {
  .chipa-loader__fill {
    animation: none;
    transform: translateY(24%);
  }
  .chipa-loader__fill::before,
  .chipa-loader__fill::after {
    animation: none;
  }
}