/* =========================================================
   MOLIGHT — LUXURY MOVING ANNOUNCEMENT BAR
   ========================================================= */

#youcan-section--announcement-bar {
  width: 100%;
  padding: 0;

  overflow: hidden;

  background-color: rgb(var(--announcement-bar-background-color));

  border: none;

  order: var(--announcement_bar_order);
}


/* Main viewport */

#youcan-section--announcement-bar .molight-marquee {
  width: 100%;
  overflow: hidden;

  padding: 9px 0;

  color: rgb(var(--announcement-bar-foreground-color));
}


/* Moving container */

#youcan-section--announcement-bar .marquee-track {
  display: flex;

  width: max-content;

  will-change: transform;

  animation: molight-marquee 24s linear infinite;
}


/* Each identical half */

#youcan-section--announcement-bar .marquee-group {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}


/* Individual messages */

#youcan-section--announcement-bar .marquee-group span {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  padding: 0 48px;

  color: rgb(var(--announcement-bar-foreground-color));

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.18em;

  line-height: 1.4;

  white-space: nowrap;
}


/* Elegant separator between messages */

#youcan-section--announcement-bar .marquee-group span::after {
  content: "◆";

  margin-left: 96px;

  font-size: 5px;

  opacity: 0.65;
}


/* Continuous movement */

@keyframes molight-marquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* Slightly slower when hovering */

#youcan-section--announcement-bar .marquee-track:hover {
  animation-play-state: paused;
}


/* Mobile */

@media (max-width: 768px) {

  #youcan-section--announcement-bar .molight-marquee {
    padding: 8px 0;
  }


  #youcan-section--announcement-bar .marquee-track {
    animation-duration: 20s;
  }


  #youcan-section--announcement-bar .marquee-group span {
    padding: 0 32px;

    font-size: 10px;

    letter-spacing: 0.14em;
  }


  #youcan-section--announcement-bar .marquee-group span::after {
    margin-left: 64px;
  }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  #youcan-section--announcement-bar .marquee-track {
    animation: none;
  }

}
/* Highlight RÉDUCTION 25% */

#youcan-section--announcement-bar .marquee-group span.promo-message {
    color: #641c3c;
    font-weight: 800;
}