/* ==========================================================================
   IX · LOGOS — how the customer strip presents its six marks.

     body[data-rbs-logos="row"]      the shipped static distributed row
     body[data-rbs-logos="marquee"]  infinite linear drift, dissolving edges
     body[data-rbs-logos="shuffle"]  six fixed slots, marks trade with a flip

   js/areas/logos.js owns the imperative half: clone lists for the marquee,
   timers and mark swaps for the shuffle. The marquee only leaves the shipped
   grid when BOTH are true:
     · the motion level is authored (ambient motion allowed), and
     · JS has armed the strip (data-rbs-logos-armed) after building the
       aria-hidden clone lists — so a JS failure can never strand a
       half-built marquee.
   At every other level — and with all JS absent — it rests as the row, at the
   exact same strip height, so switching variants never moves layout.
   ========================================================================== */

/* Clone lists exist only for the drift; anywhere else they must not render. */
.rb-logostrip__list[data-rbs-logos-clone] { display: none; }

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */

body[data-rbs-motion-level="authored"][data-rbs-logos="marquee"]
  .rb-logostrip__strip[data-rbs-logos-armed] {
  overflow: hidden;
  /* Edge dissolve, width from the Studio knob. The gradient feeds only the
     mask's alpha channel — `black` here is coverage, not palette. */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black var(--rbs-logos-fade, 96px),
      black calc(100% - var(--rbs-logos-fade, 96px)),
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0,
      black var(--rbs-logos-fade, 96px),
      black calc(100% - var(--rbs-logos-fade, 96px)),
      transparent 100%);
}

/* Each list (the original and its clones) is one content-sized copy of the
   set; every copy runs the same keyframe, so as copy N clears the left edge
   copy N+1 is already in its place. Constant motion: linear, never eased,
   never tempo-scaled. */
body[data-rbs-motion-level="authored"][data-rbs-logos="marquee"]
  .rb-logostrip__strip[data-rbs-logos-armed] .rb-logostrip__list {
  display: flex;
  align-items: center;
  flex: none;
  width: max-content;
  animation: rbs-logos-drift var(--rbs-logos-speed, 36s) linear infinite;
  will-change: transform;
}

/* Slots stop being equal columns; the item's own space tokens set the gap,
   symmetric on both sides so the seam between copies is invisible. */
body[data-rbs-motion-level="authored"][data-rbs-logos="marquee"]
  .rb-logostrip__strip[data-rbs-logos-armed] .rb-logostrip__item {
  flex: none;
}

/* Slot rules would drift with the marks and read as clutter — drop them. */
body[data-rbs-motion-level="authored"][data-rbs-logos="marquee"]
  .rb-logostrip__strip[data-rbs-logos-armed] .rb-logostrip__item::before {
  content: none;
}

/* Pause on hover (Studio toggle sets data-rbs-logos-pause). Play-state only —
   the animation resumes from exactly where it stopped. Fine pointers only, so
   a touch scroll can never leave the drift stuck. */
@media (hover: hover) and (pointer: fine) {
  body[data-rbs-motion-level="authored"][data-rbs-logos="marquee"]
    .rb-logostrip__strip[data-rbs-logos-armed][data-rbs-logos-pause]:hover .rb-logostrip__list {
    animation-play-state: paused;
  }
}

@keyframes rbs-logos-drift {
  to { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   SHUFFLE
   Slots never move; only the mark inside turns. JS adds .is-rbs-flip-out,
   swaps the mark at the edge, plants it at +90° with .is-rbs-flip-set
   (transition: none), then releases it to settle home. Transitions retarget
   mid-flight, so an interrupted flip folds back instead of snapping.
   -------------------------------------------------------------------------- */

body[data-rbs-logos="shuffle"] .rb-logostrip__item {
  perspective: 600px;  /* close enough to feel physical, far enough to stay quiet */
}

/* In-half: 60% of the flip, decelerating home. ≥500ms class → tempo-scaled. */
body[data-rbs-logos="shuffle"] .rb-logostrip__mark {
  backface-visibility: hidden;
  transition: transform
    calc(var(--rbs-logos-flip, 500ms) * 0.6 * var(--rbs-motion-scale, 1))
    var(--rb-sys-ease-morph);
}

/* Out-half: 40% of the flip — exits faster than enters. */
body[data-rbs-logos="shuffle"] .rb-logostrip__item.is-rbs-flip-out .rb-logostrip__mark {
  transition-duration: calc(var(--rbs-logos-flip, 500ms) * 0.4 * var(--rbs-motion-scale, 1));
  transform: rotateY(-90deg);
}

/* The swapped-in mark starts on the far side of the same turn — no transition,
   planted between frames, so the flip reads as one continuous rotation. */
body[data-rbs-logos="shuffle"] .rb-logostrip__item.is-rbs-flip-set .rb-logostrip__mark {
  transition: none;
  transform: rotateY(90deg);
}