/**
 * Estilos del logo animado del cliente (ramo de globos, glossy) —
 * BPC_Logo::svg() en includes/class-bpc-logo.php.
 *
 * v1.16.0: extraído de cabecera-flotante.css para poder reusar el mismo
 * logo (con su misma animación) en la cabecera pública, el login del panel
 * y la barra lateral ya adentro del panel, sin duplicar estas reglas en
 * tres archivos. Tal cual lo entregó Irvin — no se tocó nada del dibujo ni
 * de la animación, solo se movió a un archivo propio.
 *
 * El tamaño final en cada lugar se define aparte, con un selector
 * descendiente más específico (ej. ".bpc-pub-cabecera__logo-link
 * .sdo-logo-glossy", ".bpc-login__logo .sdo-logo-glossy") que gana sobre
 * el max-width:450px de aquí abajo — ver cabecera-flotante.css y
 * panel.css.
 */
.sdo-logo-glossy {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  line-height: 0;
}
.sdo-logo-glossy svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.sdo-logo-glossy .cls-2 { fill: #727272; }
.sdo-logo-glossy .cls-1 { fill: url(#sdo-grad-1); }
.sdo-logo-glossy .cls-3 { fill: url(#sdo-grad-3); }
.sdo-logo-glossy .cls-4 { fill: url(#sdo-grad-4); }
.sdo-logo-glossy .cls-5 { fill: url(#sdo-grad-5); }
.sdo-logo-glossy .cls-6 { fill: url(#sdo-grad-6); }
.sdo-logo-glossy .cls-7 { fill: url(#sdo-grad-7); }
.sdo-logo-glossy .cls-8 { fill: url(#sdo-grad-8); }
.sdo-logo-glossy .balloon {
  transform-box: fill-box;
  transform-origin: center;
  animation: sdoInflate 4.5s cubic-bezier(.34,1.56,.64,1) infinite;
  animation-fill-mode: both;
  filter: url(#sdo-glossy);
}
@keyframes sdoInflate {
  0%   { transform: scale(0);    opacity: 0; }
  8%   { transform: scale(1.18); opacity: 1; }
  13%  { transform: scale(0.92); opacity: 1; }
  18%  { transform: scale(1.05); opacity: 1; }
  23%  { transform: scale(1);    opacity: 1; }
  72%  { transform: scale(1);    opacity: 1; }
  88%  { transform: scale(0);    opacity: 0; }
  100% { transform: scale(0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sdo-logo-glossy .balloon { animation: none; transform: scale(1); opacity: 1; }
}
