.ravel-logo-marquee{
  --speed:18s;
  --gap:48px;

  --items-desktop:6;
  --items-tablet:4;
  --items-mobile:2;

  --h-desktop:44px;
  --h-tablet:40px;
  --h-mobile:34px;

  --op:.95;
  --opH:1;

  --shift:0px;

  width:100%;
}

.ravel-logo-marquee{ --items: var(--items-desktop); --h: var(--h-desktop); }
@media (max-width: 1024px){
  .ravel-logo-marquee{ --items: var(--items-tablet); --h: var(--h-tablet); }
}
@media (max-width: 767px){
  .ravel-logo-marquee{ --items: var(--items-mobile); --h: var(--h-mobile); }
}

.ravel-logo-marquee .rlm-viewport{
  overflow:hidden;
  width:100%;
}

/* Track contains 2 groups (original + clone) */
.ravel-logo-marquee .rlm-track{
  display:flex;
  width:max-content;
  will-change: transform;
}

/* Group sizes to content (IMPORTANT: no 100% forcing) */
.ravel-logo-marquee .rlm-group{
  display:flex;
  align-items:center;
  gap:var(--gap);
  width:max-content;
}

/* Horizontal per-view: each item width ensures only N fit in viewport */
.ravel-logo-marquee .rlm-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 calc((100vw - 1px) / 9999); /* fallback */
}

/* Use viewport width, not 100vw, using container-based calc */
.ravel-logo-marquee .rlm-viewport .rlm-item{
  flex: 0 0 calc((100% - (var(--gap) * (var(--items) - 1))) / var(--items));
  max-width: calc((100% - (var(--gap) * (var(--items) - 1))) / var(--items));
}

.ravel-logo-marquee img{
  height: var(--h);
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  display:block;
  opacity: var(--op);
  transition: opacity .2s ease, transform .2s ease;
}

.ravel-logo-marquee a.rlm-item:hover img,
.ravel-logo-marquee .rlm-item:hover img{
  opacity: var(--opH);
  transform: translateY(-2px);
}

/* Pause on hover */
.ravel-logo-marquee[data-pause="yes"]:hover .rlm-track{
  animation-play-state: paused;
}

/* ===== Horizontal directions (pixel-perfect seam) ===== */
/* ===== Horizontal: force true "logos per view" sizing ===== */
.ravel-logo-marquee[data-direction="left"] .rlm-item,
.ravel-logo-marquee[data-direction="right"] .rlm-item{
  flex: 0 0 var(--itemW, 160px);
  max-width: var(--itemW, 160px);
}

.ravel-logo-marquee[data-direction="left"] img,
.ravel-logo-marquee[data-direction="right"] img{
  width: 100%;
  height: var(--h);
  object-fit: contain;
}

@keyframes rlm-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--shift))); }
}
@keyframes rlm-right{
  from{ transform: translateX(calc(-1 * var(--shift))); }
  to  { transform: translateX(0); }
}

/* ===== Vertical mode ===== */
.ravel-logo-marquee[data-direction="up"] .rlm-track,
.ravel-logo-marquee[data-direction="down"] .rlm-track{
  flex-direction: column;
  width:100%;
}

.ravel-logo-marquee[data-direction="up"] .rlm-group,
.ravel-logo-marquee[data-direction="down"] .rlm-group{
  flex-direction: column;
  align-items: stretch;
  width:100%;
}

/* In vertical mode, items are full-width and stack */
.ravel-logo-marquee[data-direction="up"] .rlm-item,
.ravel-logo-marquee[data-direction="down"] .rlm-item{
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
}

/* Viewport height = N logos visible */
.ravel-logo-marquee[data-direction="up"] .rlm-viewport,
.ravel-logo-marquee[data-direction="down"] .rlm-viewport{
  height: calc((var(--h) * var(--items)) + (var(--gap) * (var(--items) - 1)));
}

.ravel-logo-marquee[data-direction="up"] .rlm-track{
  animation: rlm-up var(--speed) linear infinite;
}
.ravel-logo-marquee[data-direction="down"] .rlm-track{
  animation: rlm-down var(--speed) linear infinite;
}

@keyframes rlm-up{
  from{ transform: translateY(0); }
  to  { transform: translateY(calc(-1 * var(--shift))); }
}
@keyframes rlm-down{
  from{ transform: translateY(calc(-1 * var(--shift))); }
  to  { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .ravel-logo-marquee .rlm-track{ animation: none !important; }
}