/* Sarah's ticket 7: the homepage's Black Friday look, loaded only while Promotions:BlackFridayHomepage is active.
   Two red rolling banners and the Black Friday card. The banner is positioned so its sr-only text stays inside it. */
.home-bf-banner {
  position: relative; display: flex; align-items: center; height: 44px; overflow: hidden; overflow: clip;
  background: #e0001b; color: #fff;
}
.home-bf-banner__track { display: flex; flex: none; width: max-content; animation: home-bf-banner-scroll 40s linear infinite; }
.home-bf-banner--advent .home-bf-banner__track { animation-duration: 60s; }
.home-bf-banner__run {
  flex: none; white-space: pre; font-family: var(--font-utility); font-size: 1rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.home-bf-banner__separator { font-family: system-ui, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", sans-serif; }
@keyframes home-bf-banner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.home-campaign-card--black-friday { border-color: #111; background: #111; color: #fff; }
.home-campaign-card--black-friday .home-campaign-copy > p { color: #ff3b47; }
.home-campaign-card--black-friday > strong { width: fit-content; padding: 12px 16px; border-radius: 999px; background: #e0001b; color: #fff; }
.home-bf-graphic {
  display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 0;
  container-type: inline-size; border-radius: 8px; background: #e0001b; color: #fff;
  font-family: var(--font-display); font-weight: 700; line-height: 1.05; text-transform: uppercase;
}
.home-bf-graphic > span:nth-child(1) { font-size: 11cqi; letter-spacing: .1em; }
.home-bf-graphic > span:nth-child(2) { font-size: 34cqi; }
.home-bf-graphic > span:nth-child(3) { font-size: 16.5cqi; letter-spacing: .06em; }
@media (max-width: 620px) {
  .home-bf-banner { height: 38px; }
  .home-bf-banner__run { font-size: .875rem; }
  .home-bf-graphic { border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-bf-banner__track { animation: none; }
}
