/* ==========================================================================
   ANIMACIONES GLOBALES DE BIURY
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animación de Vibrar (Rotación) para Iconos del Header
   -------------------------------------------------------------------------- */
@keyframes biury-vibrate {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-15deg);
  }

  40% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  80% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Aplicar la vibración SOLO al icono interno (SVG) al hacer hover en el contenedor */
.header-right-items .em-button-icon:hover .ecomus-svg-icon,
.header-right-items .header-brands__icon:hover .ecomus-svg-icon,
.header-right-items .header-brands__icon:hover svg,
.site-header .em-button-icon:hover .ecomus-svg-icon,
.site-header .header-brands__icon:hover .ecomus-svg-icon,
.site-header .header-brands__icon:hover svg,
.site-header__mobile .em-button-icon:hover .ecomus-svg-icon,
.site-header__mobile .header-brands__icon:hover .ecomus-svg-icon,
.site-header__mobile .header-brands__icon:hover svg {
  animation: biury-vibrate 0.4s ease-in-out;
  display: inline-block;
  /* Necesario para que las transformaciones (rotación) funcionen */
}

/* ==========================================================================
   ANIMACIONES DE MARQUESINA (TEXTO E ICONOS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Texto de la Marquesina - Shimmer Effect Monocromático
   -------------------------------------------------------------------------- */
.carrusel-text-animator .ecomus-marquee__text {
  /* Gradiente monocromático fluido con los nuevos tonos */
  background-image: linear-gradient(to right,
      #24f878 10%,
      /* Rosa Primario */
      #f6f802 30%,
      /* Magenta más profundo */
      #faf4ee 50%,
      /* Rosa pastel claro (el nuevo destello central) */
      #5ec8d8 70%,
      /* Rosa medio */
      #24f878 90%
      /* Rosa Primario */
    ) !important;
  background-size: 200% auto !important;

  /* Recorte de texto */
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  /* Animación suave */
  animation: biury-shimmer 2.5s linear infinite !important;

  font-weight: normal !important;
  -webkit-text-stroke: 0px !important;

  /* Nitidez mantenida */
  filter: drop-shadow(0px 0px 2px rgba(244, 64, 168, 0.2));
  transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón: Simplemente pausar el movimiento del gradiente */
.carrusel-text-animator .ecomus-marquee__text:hover {
  animation-play-state: paused !important;
  filter: drop-shadow(0px 0px 4px rgba(244, 64, 168, 0.4));
}

/* Motor del rayo de luz */
@keyframes biury-shimmer {
  to {
    background-position: 200% center;
  }
}

/* --------------------------------------------------------------------------
   Iconos de la Marquesina - Heartbeat Effect
   -------------------------------------------------------------------------- */
.carrusel-text-animator .ecomus-marquee__icon,
.carrusel-text-animator .ecomus-marquee__icon svg {
  /* Aseguramos que el ícono tome el Rosa Primario */
  color: #F440A8 !important;
  fill: #F440A8 !important;

  /* Animación constante de latido */
  animation: icono-latido 1s ease-in-out infinite alternate !important;

  /* Para que la transformación (escalar) funcione sin deformarse */
  display: inline-block;
  transform-origin: center center;
}

/* El motor del latido para el ícono */
@keyframes icono-latido {
  0% {
    transform: scale(0.85);
    /* Se encoge un poquito */
    filter: drop-shadow(0px 0px 2px rgba(244, 64, 168, 0.2));
    /* Brillo muy bajito */
  }

  100% {
    transform: scale(1.1);
    /* Crece un 10% */
    filter: drop-shadow(0px 0px 10px rgba(244, 64, 168, 0.9));
    /* Destello intenso */
  }
}