/* ==========================================================================
   RS2 COMPONENTS · sitewide reusable bands
   01  Client ticker (extracted from rs2-hero.css, Aug 2026)
       v1.1: light-surface variant via .rs2-band--ticker-light modifier.
       Text/dot color now themed through CSS custom properties; the
       Divi text modules must carry NO explicit text color (color is
       a variant concern owned here; typography stays in Divi).

   The ticker CORE lives here and is location-agnostic (in-flow, full
   width). The homepage hero positions its instance as an overlay via a
   scoped rule in rs2-hero.css (.rs2-hero .rs2-logos). Standalone
   placements use the .rs2-band--ticker Section wrapper below.

   Enqueued sitewide at priority 24: after tokens (22) and the shell
   (23), before rs2-hero.css (25), so the hero override wins by both
   specificity and cascade order.
   ========================================================================== */


/* ---------- Band wrapper ----------
   Goes on the standalone SECTION via Advanced > Attributes
   (class="rs2-band--ticker"). Paints the dark surface and adds
   breathing room around the ticker. The ticker's own 22px vertical
   padding is inside .rs2-logos; this padding-block is the dial for
   extra space between the band and neighboring sections. */
.rs2-band--ticker {
  background: #0B0E13;
  padding-block: clamp(10px, 2vw, 20px);
}

/* In the standalone band the section already paints solid #0B0E13,
   so the core's translucent fill + blur would be pure wasted paint
   (blur over a solid color resolves to that color). Neutralized here;
   the hero instance keeps its glass treatment from the core rules. */
.rs2-band--ticker .rs2-logos {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ---------- Light variant ----------
   Apply BOTH classes on the Section: class="rs2-band--ticker
   rs2-band--ticker-light". Base class carries the shared band
   behavior (blur/fill neutralization, phone rules); the modifier
   flips surface and ink. Hairlines define the band's edges against
   white neighboring sections; swap background to #F6F6F6 (bone) and
   drop the borders if the band sits between white sections and needs
   its own surface instead. */
.rs2-band--ticker-light {
  background: #FFFFFF;
  border-block: 1px solid #e8e8e8;
}

.rs2-band--ticker-light .rs2-logos {
  --ticker-ink: #575756;
  --ticker-dot: rgb(34 34 34 / 0.28);
}


/* ---------- Ticker core (location-agnostic) ---------- */

.rs2-logos {
  /* Theme dials: dark-surface defaults (hero + dark band).
     The light band modifier overrides both. */
  --ticker-ink: rgb(255 255 255 / 0.92);
  --ticker-dot: rgb(255 255 255 / 0.35);

  position: relative;           /* in-flow by default; the hero overrides
                                   this to absolute in rs2-hero.css */
  width: 100%;
  padding: 22px 0;
  background: rgb(8 10 14 / 0.35);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;

  /* Edge fades: one static mask the logos slide through */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%, black 10%, black 90%, transparent 100%);
}

.rs2-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rs2-marquee 45s linear infinite;
  will-change: transform;
}

/* Track holds TWO identical runs (Groups). Each run carries the item
   gap internally AND a trailing pad equal to that gap, so the track
   is exactly 2x one run wide and translateX(-50%) loops with zero
   seam. Flat modules with gap on the track would come up one gap
   short per cycle (2N items, 2N-1 gaps) and snap 28px every loop. */
.rs2-logos__run {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}

/* Geometry reset: Divi's default text margins would distort item
   widths run-to-run and break the -50% math. The module is flexed so
   the name and its ::after dot share one centered axis; without this
   the dot drops to a new line below the name (block flow). Content
   styling itself stays in the Divi modules per doctrine. */
.rs2-logos__run .et_pb_text {
  display: flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
  color: var(--ticker-ink);
}

.rs2-logos__run .et_pb_text p {
  margin: 0;
  padding: 0;
  color: var(--ticker-ink);   /* beats Divi's default paragraph color;
                                 requires the modules to carry NO explicit
                                 color of their own (cleared Aug 2026) */
}

/* Separator dots from the mock, as pseudo-elements so module content
   stays a clean single-line name (easy SVG swap later). Every item
   gets one, so the run boundary reads identically to every other
   boundary: name -56- dot -56- name, everywhere. Dot color/size are
   CSS dials here, not Divi settings. */
.rs2-logos__run .et_pb_text::after {
  content: "\2022";
  margin-left: 56px;
  color: var(--ticker-dot);
  line-height: 1;
}

@keyframes rs2-marquee {
  to { transform: translateX(-50%); }
}

.rs2-logos:hover .rs2-logos__track {
  animation-play-state: paused;
}


/* ---------- Motion kill switch ---------- */

@media (prefers-reduced-motion: reduce) {
  .rs2-logos__track {
    animation: none !important;
  }
}


/* ---------- Phone: no expensive blur ---------- */

@media (max-width: 767px) {
  .rs2-logos {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(8 10 14 / 0.85);   /* solid stand-in for blur */
  }

  /* The band's solid surface makes even the stand-in fill redundant */
  .rs2-band--ticker .rs2-logos {
    background: transparent;
  }
}

/* Light band beats Divi's per-module inline-ish color without
   touching the 50 modules. !important clears Divi's specificity. */
.rs2-band--ticker-light .rs2-logos__run .et_pb_text,
.rs2-band--ticker-light .rs2-logos__run .et_pb_text p {
  color: var(--ticker-ink) !important;
}