/* ============================================================
   EO integration logo scroller — v2.0
   Self-contained. Every rule is scoped under .eo-logo-flow, so
   this cannot collide with existing site styles.
   Pairs with logo-scroller.partial.html + assets/logos/
   ============================================================ */

.eo-logo-flow {
  /* --- tune the component from here --- */
  --eo-logo-tile-width: clamp(164px, 14vw, 214px);
  --eo-logo-tile-height: clamp(90px, 7vw, 108px);
  --eo-logo-gap: 18px;
  --eo-logo-radius: 16px;
  --eo-logo-duration: 180s;        /* full loop time, both rows */
  --eo-logo-fade: 7%;              /* soft edge width */
  --eo-logo-row2-offset: 0.42;     /* bottom row start offset, in tile widths */
  --eo-logo-tile-surface: #f7f9fc;
  --eo-logo-tile-border: #dfe5ee;
  --eo-logo-tile-shadow: 0 1px 2px rgba(21, 36, 58, .05);
  /* Set this to the page background if the browser lacks mask support
     (the no-mask fallback fades to it). Defaults to white. */
  --eo-logo-fade-color: #ffffff;

  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.eo-logo-flow__viewport {
  position: relative;
  display: grid;
  gap: var(--eo-logo-gap);
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 var(--eo-logo-fade), #000 calc(100% - var(--eo-logo-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 var(--eo-logo-fade), #000 calc(100% - var(--eo-logo-fade)), transparent 100%);
}

.eo-logo-flow__row {
  display: flex;
  width: max-content;
  animation: eo-logo-flow-scroll var(--eo-logo-duration) linear infinite;
  will-change: transform;
}

.eo-logo-flow__row--reverse {
  margin-left: calc(var(--eo-logo-tile-width) * var(--eo-logo-row2-offset) * -1);
  animation-direction: reverse;
}

/* Keyboard focus pauses the scroll so a tabbing user can read it.
   The root carries tabindex="0", so the pause hangs off the root.
   Hover deliberately does NOT pause. */
.eo-logo-flow:focus-within .eo-logo-flow__row {
  animation-play-state: paused;
}

.eo-logo-flow:focus-visible {
  outline: 2px solid rgba(31, 111, 235, 0.7);
  outline-offset: 6px;
  border-radius: 18px;
}

.eo-logo-flow__track {
  display: flex;
  flex: none;
  gap: var(--eo-logo-gap);
  margin: 0;
  padding: 0 calc(var(--eo-logo-gap) / 2);
  list-style: none;
}

.eo-logo-flow__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--eo-logo-tile-width);
  height: var(--eo-logo-tile-height);
  padding: clamp(15px, 1.6vw, 22px) clamp(17px, 1.8vw, 24px);
  overflow: hidden;
  border: 1px solid var(--eo-logo-tile-border);
  border-radius: var(--eo-logo-radius);
  background: var(--eo-logo-tile-surface);
  box-shadow: var(--eo-logo-tile-shadow);
}

.eo-logo-flow__image {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Each row holds the set twice, so -50% lands on an identical frame. */
@keyframes eo-logo-flow-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* No mask support: soft edge veils instead. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .eo-logo-flow__viewport::before,
  .eo-logo-flow__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: max(var(--eo-logo-fade), 40px);
    pointer-events: none;
  }
  .eo-logo-flow__viewport::before { left: 0; background: linear-gradient(90deg, var(--eo-logo-fade-color, #fff), transparent); }
  .eo-logo-flow__viewport::after { right: 0; background: linear-gradient(270deg, var(--eo-logo-fade-color, #fff), transparent); }
}

@media (max-width: 1024px) {
  .eo-logo-flow {
    --eo-logo-tile-width: clamp(152px, 17vw, 190px);
    --eo-logo-tile-height: clamp(84px, 9vw, 98px);
    --eo-logo-gap: 15px;
    --eo-logo-radius: 15px;
  }
}

@media (max-width: 700px) {
  .eo-logo-flow {
    --eo-logo-tile-width: 148px;
    --eo-logo-tile-height: 82px;
    --eo-logo-gap: 12px;
    --eo-logo-radius: 14px;
    --eo-logo-fade: 9%;
  }
}

/* Reduced motion: no animation, manual swipe/scroll instead. */
@media (prefers-reduced-motion: reduce) {
  .eo-logo-flow__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .eo-logo-flow__row {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    animation: none;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .eo-logo-flow__track[aria-hidden="true"] { display: none; }
}