/* Wire Collective Animated Logo v1.1.0
   Negro sobre barra opaca, blanco sobre cabecera transparente oscura.
   La variante transparente oscura de Salient usa .dark-slide. */
#header-outer #logo.wire-logo-active {
  position: relative !important;
  --wire-logo-color: #111111;
}
/* Cabecera transparente sobre imagen oscura: letras blancas. */
#header-outer.transparent:not(.dark-slide) #logo.wire-logo-active {
  --wire-logo-color: #ffffff;
}
/* Cabeceras opacas y modo transparente de texto oscuro: negro. */
#header-outer:not(.transparent) #logo.wire-logo-active,
#header-outer.transparent.dark-slide #logo.wire-logo-active {
  --wire-logo-color: #111111;
}
/* En móvil, logotipo negro para la barra blanca habitual de Salient. */
@media (max-width: 999px) {
  #header-outer #logo.wire-logo-active,
  #header-outer.transparent #logo.wire-logo-active,
  #header-outer.transparent.dark-slide #logo.wire-logo-active {
    --wire-logo-color: #111111;
  }
}
#header-outer #logo.wire-logo-active img {
  opacity: 0 !important;
}
#header-outer #logo.wire-logo-active > .wire-logo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  line-height: 0;
  pointer-events: none;
  color: var(--wire-logo-color);
  z-index: 3;
}
#header-outer #logo.wire-logo-active > .wire-logo-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: currentColor;
}
#header-outer #logo.wire-logo-active .wire-glyph {
  fill: currentColor;
  transform: translateY(0px);
}
/* El logo empieza completo. Cada letra sale por abajo detrás de su máscara
   y regresa desde abajo a su posición original. */
#header-outer #logo.wire-logo-active.wire-logo-playing .wire-glyph {
  animation-name: wire-logo-drop-return;
  animation-duration: 900ms;
  animation-delay: calc(var(--i) * 65ms);
  animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}
@keyframes wire-logo-drop-return {
  0%   { transform: translateY(0px); }
  37%  { transform: translateY(48px); }
  48%  { transform: translateY(48px); }
  100% { transform: translateY(0px); }
}
@media (prefers-reduced-motion: reduce) {
  #header-outer #logo.wire-logo-active.wire-logo-playing .wire-glyph {
    animation: none !important;
  }
}