/* =============================================================================
   Marquee — shared component
   =============================================================================
   Lives in its own file because it is now on more than one page (home and About), and a component
   whose CSS sits in one page's stylesheet is a component that silently breaks the moment it is
   reused. Enqueued by whichever page renders the element.

   Ground is a custom property so the same marquee works on white, on paper, or on ink: the edge
   fades have to be painted FROM the band's own background or they read as grey smears rather than
   as the strip continuing past the page.
   ============================================================================= */
.kf-marquee__track {
  display: flex; width: max-content;
  animation: kf-marquee var(--kf-marquee-speed, 40s) linear infinite;
}
.kf-marquee__run { display: flex; list-style: none; margin: 0; }
@keyframes kf-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* Not merely paused — an animation someone has asked not to see should not leave content
     unreachable, so the viewport becomes a normal horizontal scroller they drive themselves. */
  .kf-marquee__track { animation: none; }
  .kf-marquee__viewport { overflow-x: auto; }
}

/* ---- Marquee ---------------------------------------------------------------
   Figma node 600:8265. Band 1600x118 on white:
     26 eyebrow top + 14 + 22 + 28 items + 28 bottom = 118.

   TRUE full bleed. In the design the items run from x=-180 to x=1782 — they start and end OUTSIDE
   the 1600 frame, which is the whole point of a marquee: it should look like a strip that continues
   past the page rather than a list that happens to fit. The build had it inside the 1360 measure,
   so the track visibly began and ended, and the section ran 192 instead of 118.

   The 150px edge fades are what make the bleed read as motion rather than as clipping. They are
   painted from the band's own background so they work on white here and can be re-pointed with a
   single custom property when the same marquee sits on a different ground (the About page). */
.kf-marquee-band, .kf-sec.kf-marquee { --kf-marquee-ground: #fff; background-color: var(--kf-marquee-ground); }
.kf-marquee-band > .uk-container, .kf-sec.kf-marquee > .uk-container {
  max-width: none; width: 100%; padding: 26px 0 28px;
}
.kf-marquee__eyebrow {
  text-align: center; margin: 0 0 22px;
  font: 500 11px/14px "Roboto", sans-serif; letter-spacing: .13em; color: #212c34;
}
.kf-marquee__viewport { position: relative; overflow: hidden; }
/* the fades sit above the track and are inert to the pointer */
.kf-marquee__viewport::before,
.kf-marquee__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 150px; z-index: 1; pointer-events: none;
}
.kf-marquee__viewport::before {
  left: 0; background: linear-gradient(90deg, var(--kf-marquee-ground) 0%, transparent 100%);
}
.kf-marquee__viewport::after {
  right: 0; background: linear-gradient(270deg, var(--kf-marquee-ground) 0%, transparent 100%);
}
.kf-marquee__run { gap: 56px; padding: 0 28px; }
.kf-marquee__run li {
  font: 700 22px/28px "Roboto Condensed", sans-serif; color: #212c34; white-space: nowrap;
}

/* ---- the edge fades are sized for a 1600 band ------------------------------
   150px on each side is 300 of a 375px phone screen, so four fifths of the strip was under a
   gradient and only a ~75px window in the middle was at full contrast — the wordmarks appeared to
   dissolve mid-glyph at both bezels rather than to run past them. Scale the fade to the item gap
   instead: enough to sell the bleed, not enough to eat the content. */
@media (max-width: 767px) {
  .kf-marquee__viewport::before,
  .kf-marquee__viewport::after {
    width: 56px;
  }
}