/* Logo ticker: the calm strip of logos, icons or cards that drifts sideways forever under a soft edge fade.
   One part, four measured presets (all knobs on the root; part.js does the moving); data-axis="y" turns any of
   them into a vertical column (one column of logo-columns, say):
     Sadewa logo strip   25 px/s, 50px gap, 12.5% edge fade                       (the defaults below)
     DUNA logo marquee   one set per 40 s (data-duration="40"), gap clamp(56px,6vw,96px), 8% fade, Pause button
     ClipCut results     40 px/s, 10px gap, stops on hover (data-hover="0"), draggable (data-drag)
     ClipCut tools       40 px/s, 84px gap, 80% speed on hover, ~32% edge fade, glow behind the middle
   Without JS, or under reduced motion, the items sit still, wrapped and centred (as DUNA does), so nothing is
   ever cut off. */
.logo-ticker {
  --lt-gap: 50px;                /* space between items (and between the last item and the next copy) */
  --lt-fade: 12.5%;              /* width of each edge fade, as a share of the strip */
  --lt-glow: transparent;        /* colour of a soft glow behind the middle (ClipCut tools: warm orange) */
  --lt-glow-size: 340px;         /* glow diameter */
  --lt-pad: 0px;                 /* block padding: room for the glow or for card shadows */
  --lt-wrap-gap: 24px;           /* row gap when the items fall back to a wrapped, still layout */
  position: relative;
  overflow: hidden;
  padding-block: var(--lt-pad);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--lt-fade), #000 calc(100% - var(--lt-fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--lt-fade), #000 calc(100% - var(--lt-fade)), transparent);
}
.logo-ticker::before {           /* the glow: a radial wash centred under the strip, above its background */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--lt-glow-size); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lt-glow), transparent);
  pointer-events: none;
}
.logo-ticker__track {
  position: relative;            /* sits above the glow */
  display: flex;
  align-items: center;
  width: max-content;
}
.logo-ticker__track > * { flex: none; margin-right: var(--lt-gap); }   /* margin, not gap: every copy is the same width */
.logo-ticker__track img, .logo-ticker__track svg { -webkit-user-drag: none; user-select: none; }
.logo-ticker.is-running .logo-ticker__track { will-change: transform; }
.logo-ticker[data-drag="true"].is-running { cursor: grab; touch-action: pan-y; user-select: none; }
.logo-ticker[data-drag="true"].is-dragging { cursor: grabbing; }

/* still fallback (no JS yet, reduced motion, or narrower than data-off-below): wrap and centre, no fade */
.logo-ticker:not(.is-running) { -webkit-mask-image: none; mask-image: none; }
.logo-ticker:not(.is-running) .logo-ticker__track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--lt-wrap-gap);
  margin-right: calc(-1 * var(--lt-gap));   /* cancels the last item's trailing gap so rows centre true */
}
.logo-ticker:not(.is-running) [data-lt-copy] { display: none; }

/* vertical axis (data-axis="y"): a column that drifts up (or down) under a top/bottom fade. Give the strip a
   height (e.g. height: 520px); items stack with the gap below each, and the still fallback is a plain column. */
.logo-ticker[data-axis="y"] {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--lt-fade), #000 calc(100% - var(--lt-fade)), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 var(--lt-fade), #000 calc(100% - var(--lt-fade)), transparent);
}
.logo-ticker[data-axis="y"] .logo-ticker__track { flex-direction: column; width: auto; height: max-content; }
.logo-ticker[data-axis="y"] .logo-ticker__track > * { margin-right: 0; margin-bottom: var(--lt-gap); }
.logo-ticker[data-axis="y"][data-drag="true"].is-running { touch-action: pan-x; }
.logo-ticker[data-axis="y"]:not(.is-running) { overflow: auto; -webkit-mask-image: none; mask-image: none; }
.logo-ticker[data-axis="y"]:not(.is-running) .logo-ticker__track { flex-wrap: nowrap; row-gap: 0; margin-right: 0; height: auto; }

/* the optional Pause / Play button (DUNA): any button with data-lt-toggle + aria-controls="<ticker id>" */
[data-lt-toggle] { display: none; }
[data-lt-toggle].is-ready { display: inline-flex; }
[data-lt-toggle][data-playing="true"] .lt-icon-play,
[data-lt-toggle]:not([data-playing="true"]) .lt-icon-pause { display: none; }

/* bobbing-quote-marquee (data-bob, off by default; Cabalar's testimonial marquee): every card floats up 20px and back
   over 5 s on an ease-in-out, each starting after its own random delay (random x its index in the set, s), so the row
   undulates instead of moving as one. Sideways strips only (ignored with data-axis="y"). Give the strip room with --lt-pad (Cabalar: 48px). Bobs on the `translate`
   property, so it stacks with the track's transform and any card transform. Still while paused or not running.
     --lt-bob       how far up each card floats (20px; data-bob="<px>" sets it too)
     --lt-bob-dur   one up-and-down (5s) */
.logo-ticker[data-bob] { --lt-bob: 20px; --lt-bob-dur: 5s; }
.logo-ticker[data-bob]:not([data-axis="y"]).is-running .logo-ticker__track > * { animation: lt-bob var(--lt-bob-dur) infinite; animation-delay: var(--lt-bob-delay, 0s); }
.logo-ticker[data-bob]:not([data-axis="y"]).is-running.is-paused .logo-ticker__track > * { animation-play-state: paused; }
@keyframes lt-bob {     /* y 0 > -20 > 0, Framer's easeInOut on each leg (keyframe eases can't come from var()) */
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  50% { translate: 0 calc(-1 * var(--lt-bob)); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  100% { translate: 0 0; }
}

/* ruled cells (data-cells, off by default; heyjay.studio client strip, folded 10-04): every item sits in its own
   cell between 1px vertical rules (neighbours share one rule: each cell pulls 1px left over the last), cells fill a
   fixed-height band, no gap and no edge fade. Pair it with data-duration="30" for the source's pace (one set per
   30 s, ~85 px/s on a 2560px set). data-cells="boxed" also rules the band's top and bottom edge.
     --lt-cell-h     band height (96px; 64px at <=479px)
     --lt-cell-pad   cell padding around the logo (12px 40px; 12px 16px at <=479px)
     --lt-rule       rule colour (currentColor)
     --lt-rule-w     rule width (1px)
   The new knobs sit in :where() so any rule of yours overrides them, phone values included. */
:where(.logo-ticker[data-cells]) { --lt-cell-h: 96px; --lt-cell-pad: 12px 40px; --lt-rule: currentColor; --lt-rule-w: 1px; }
@media (max-width: 479px) { :where(.logo-ticker[data-cells]) { --lt-cell-h: 64px; --lt-cell-pad: 12px 16px; } }
.logo-ticker[data-cells] { --lt-gap: 0px; --lt-fade: 0%; height: var(--lt-cell-h); -webkit-mask-image: none; mask-image: none; }
.logo-ticker[data-cells="boxed"] { border-block: var(--lt-rule-w) solid var(--lt-rule); box-sizing: content-box; }
.logo-ticker[data-cells] .logo-ticker__track { height: 100%; align-items: stretch; }
.logo-ticker[data-cells] .logo-ticker__track > * {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  margin-right: 0; margin-left: calc(-1 * var(--lt-rule-w));
  padding: var(--lt-cell-pad);
  border-inline: var(--lt-rule-w) solid var(--lt-rule);
}
/* still fallback: rows of cells, each the band's height, rules kept */
.logo-ticker[data-cells]:not(.is-running) { height: auto; }
.logo-ticker[data-cells]:not(.is-running) .logo-ticker__track { row-gap: 0; margin-right: 0; padding-left: var(--lt-rule-w); }
.logo-ticker[data-cells]:not(.is-running) .logo-ticker__track > * { height: var(--lt-cell-h); box-shadow: 0 calc(-1 * var(--lt-rule-w)) 0 var(--lt-rule); }   /* a rule above every row (the first one is clipped) */