/* Mila scrolling banner — 4 image tiles behind an animated "Black Friday" marquee.
   Ported from Figma node 11:402. */
.mila-scrolling-banner {
  position: relative;
  overflow: hidden;
  height: var(--mila-sb-h, 360px);
  background: var(--mila-ink);
}

.mila-scrolling-banner__tiles {
  position: absolute;
  inset: 0;
  display: flex;
}
.mila-scrolling-banner__tile {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
}
.mila-scrolling-banner__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mila-scrolling-banner__tile.is-dim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.mila-scrolling-banner__marquee {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mila-scrolling-banner__track {
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  will-change: transform;
  animation: mila-sb-scroll 40s linear infinite;
}
.mila-scrolling-banner__word {
  font-family: var(--mila-font-heading);
  font-weight: 500;
  font-size: clamp(48px, 9.7vw, 97px);
  line-height: 1;
  color: var(--mila-white);
}
.mila-scrolling-banner__word--ghost {
  color: transparent;
  -webkit-text-stroke: 1px var(--mila-white);
  text-stroke: 1px var(--mila-white);
}

@keyframes mila-sb-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

@media (prefers-reduced-motion: reduce) {
  .mila-scrolling-banner__track { animation: none; }
}

@media (max-width: 767px) {
  .mila-scrolling-banner { height: auto; min-height: 220px; }
  /* keep all tiles visible — no display:none; they simply narrow */
  .mila-scrolling-banner__tiles { min-height: 220px; }
}