/* src/components/basic/XWUIDisplayMarquee/XWUIDisplayMarquee.css */
/**
 * XWUIDisplayMarquee - horizontal infinite-scroll logo strip.
 * All colors / fades / spacing via XWUI tokens.
 */

.xwui-marquee-container { display: block; width: 100%; }

/* Multi-row stack: rows scroll independently, optionally in alternating
   directions (set per row by JS). Spacing between rows is configurable
   via --xwui-marquee-row-gap. */
.xwui-marquee-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xwui-marquee-row-gap, 32px);
  width: 100%;
}

.xwui-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* WHY: the seamless loop is translateX(0) → translateX(-50%) of a
     duplicated max-content track. Under dir=rtl a block wider than its
     parent pins to inline-end, so the same physical transform slides the
     visible copy out of the clip (homepage Arabic: whole rows at
     visibleOverlap 0). Isolate the clip to LTR so one animation is correct
     in both writing modes. Logos are non-mirroring assets (GUIDE_18 §11.5).
     Travel inverts via animation-direction XOR below, keyed off the HOST
     [dir] because this isolation makes :dir() on .xwui-marquee always ltr. */
  direction: ltr;
  unicode-bidi: isolate;
}

.xwui-marquee__track {
  display: flex;
  width: max-content;
  animation: xwui-marquee-scroll var(--xwui-marquee-duration, 30s) linear infinite;
  will-change: transform;
}

/* XOR writing direction (host [dir]) with the scroll knob (--rtl).
   An unconditional .xwui-marquee--rtl reverse is correct on LTR pages and
   empties the clip when both the page and the alternate row are RTL. */
.xwui-marquee-container[dir="rtl"] .xwui-marquee:not(.xwui-marquee--rtl) .xwui-marquee__track,
.xwui-marquee-container:not([dir="rtl"]) .xwui-marquee--rtl .xwui-marquee__track {
  animation-direction: reverse;
}

.xwui-marquee--pause-hover:hover .xwui-marquee__track {
  animation-play-state: paused;
}

.xwui-marquee__list {
  display: flex;
  align-items: center;
  gap: var(--xwui-marquee-gap, 32px);
  padding: 0 calc(var(--xwui-marquee-gap, 32px) / 2);
  flex: 0 0 auto;
}

/* Items are always bare - no chip chrome. Logo (if any) sits next to
 * label (if any). Hover lifts opacity and shifts label color via tokens. */
.xwui-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: color 140ms ease, opacity 140ms ease;
}
.xwui-marquee__item:hover {
  color: var(--text-primary);
  opacity: 1;
}

.xwui-marquee__logo {
  width: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  height: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

/* Inline-SVG slot · sized identically to .xwui-marquee__logo so an `svg`
   item lines up perfectly with a sibling `src` item. The inner <svg>
   inherits color via `currentColor` (theme-aware). */
.xwui-marquee__svg {
  width: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  height: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-primary);
}
.xwui-marquee__svg > svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.xwui-marquee__label {
  display: inline-block;
}

/* ── Theme-matched logos (config `monochrome`) ─────────────────────────────
 *
 * A logo wall is a set of marks each drawn to own its own page, put side by
 * side on someone else's. Two rest treatments are offered, and they are NOT
 * the same idea at different strengths:
 *
 *   --mono  desaturates and keeps LUMINANCE. Right when the surface is close
 *           to the paper the marks were drawn for, wrong on a dark one: the
 *           dark marks sink into the ground while the light ones stay bright,
 *           so the row reads as holes rather than as a texture.
 *   --ink   throws the colour away and keeps the ALPHA. `brightness(0)`
 *           collapses every opaque pixel to black and leaves transparency
 *           untouched; `invert()` then lifts the whole silhouette to the light
 *           end for a dark ground. Every mark lands at the same weight as the
 *           surface's own text, whatever polarity it was drawn in - which is
 *           why this is the one that is theme-correct on every ground.
 *
 * THE ONE THING --ink NEEDS FROM THE ARTWORK: the silhouette is the shape of
 * the opaque region, so a mark whose source art carries a baked-in white plate
 * silhouettes as a rectangle. Knock the background out to alpha first.
 *
 * THE ONE KNOB A THEME SETS: --xwui-marquee-logo-invert, 1 on a dark ground
 * and 0 on a light one. It defaults through --xwui-on-dark so a theme that
 * publishes that token gets the right answer without naming this component,
 * and falls back to 1 because xwui's own default ground is dark.
 */
.xwui-marquee--mono .xwui-marquee__logo,
.xwui-marquee--ink .xwui-marquee__logo,
.xwui-marquee--mono .xwui-marquee__svg,
.xwui-marquee--ink .xwui-marquee__svg {
  transition:
    filter 220ms ease,
    opacity 220ms ease;
}

.xwui-marquee--mono .xwui-marquee__logo {
  filter: grayscale(1) contrast(0.85);
  opacity: var(--xwui-marquee-logo-rest-opacity, 0.72);
}

.xwui-marquee--ink .xwui-marquee__logo {
  filter:
    grayscale(1)
    brightness(0)
    invert(var(--xwui-marquee-logo-invert, var(--xwui-on-dark, 1)));
  opacity: var(--xwui-marquee-logo-rest-opacity, 0.68);
}

/* An `svg` item already paints in currentColor, so it is theme-matched by
 * construction - it only needs the same resting weight as its `src` siblings,
 * never the filter, which would flatten a mark that is already one colour. */
.xwui-marquee--mono .xwui-marquee__svg,
.xwui-marquee--ink .xwui-marquee__svg {
  opacity: var(--xwui-marquee-logo-rest-opacity, 0.68);
}

/* THE PLATE, and the problem it exists for.
 *
 * "Restores its own colours on hover" is not achievable for every mark, because
 * a great many logos ARE black: ARRI, Sony, NTV, STARZPLAY, Shahid are black
 * wordmarks on transparent. At rest the ink treatment lifts them to the
 * surface's ink and they read; the moment hover hands them back their own
 * colour on a dark ground, they vanish. Reverse art has the mirror problem -
 * beIN's letters are HOLES in a purple box, so on hover the page shows through
 * the letterforms instead of the white they were drawn in.
 *
 * Both are one problem: hover has no ground of its own. So give it one. A light
 * plate behind the hovered item is the surface the mark was drawn for, and it
 * fixes the black wordmark and the knockout at the same time and in the same
 * rule - the holes fill with plate instead of with page.
 *
 * Off by default (`transparent`), because a consumer whose marks are all light
 * on dark wants no plate at all. `--xwui-marquee-hover-plate` is the whole API.
 * The item carries the transition and a transparent background AT REST so the
 * plate fades rather than snapping, and so nothing about the box changes on
 * hover - a padding or border that appears on hover would shift the track and
 * make the marquee stutter under the cursor.
 */
.xwui-marquee--color-hover .xwui-marquee__item {
  background-color: transparent;
  border-radius: var(--xwui-marquee-hover-radius, 2px);
  transition:
    background-color 200ms ease,
    color 140ms ease,
    opacity 140ms ease;
}
.xwui-marquee--color-hover .xwui-marquee__item:hover,
.xwui-marquee--color-hover .xwui-marquee__item:focus-visible {
  background-color: var(--xwui-marquee-hover-plate, transparent);
}

/* Restore the real artwork for the mark the visitor is actually looking at.
 * Keyed off the ITEM, not the row: hovering one logo must not repaint the
 * other twenty. :focus-visible carries the same affordance to the keyboard,
 * which matters here because these items are usually links. */
.xwui-marquee--color-hover .xwui-marquee__item:hover .xwui-marquee__logo,
.xwui-marquee--color-hover .xwui-marquee__item:focus-visible .xwui-marquee__logo,
.xwui-marquee--color-hover .xwui-marquee__item:hover .xwui-marquee__svg,
.xwui-marquee--color-hover .xwui-marquee__item:focus-visible .xwui-marquee__svg {
  filter: none;
  opacity: 1;
}

/* A filter transition on a paused row is a repaint per frame of a track that is
 * already compositing. Honour the same preference the scroll does. */
@media (prefers-reduced-motion: reduce) {
  .xwui-marquee--mono .xwui-marquee__logo,
  .xwui-marquee--ink .xwui-marquee__logo,
  .xwui-marquee--mono .xwui-marquee__svg,
  .xwui-marquee--ink .xwui-marquee__svg {
    transition: none;
  }
}


/* Edge fade: mask the strip so logos drift in / out softly. The mask
   uses currentcolor-agnostic alpha gradients - works in any theme. */
.xwui-marquee--fade {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%
  );
}

@keyframes xwui-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  .xwui-marquee__track { animation: none; }
}

/* ── Chips (item `hue`) ─────────────────────────────────────────────────
   A label wall of tinted pills: one hue gives the fill, border and ink. A
   theme may override any hue with --xwui-hue-<name>. */
.xwui-marquee__item--chip {
  --xwui-marquee-chip: var(--xwui-hue-lime, #c8ff3d);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: var(--tag-font-weight, 700);
  font-size: 0.9rem;
  white-space: nowrap;
  color: color-mix(in srgb, var(--xwui-marquee-chip) 70%, #ffffff);
  background: color-mix(in srgb, var(--xwui-marquee-chip) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--xwui-marquee-chip) 33%, transparent);
}
.xwui-marquee__item--chip[data-hue="lime"] { --xwui-marquee-chip: var(--xwui-hue-lime, #c8ff3d); color: var(--xwui-marquee-chip); }
.xwui-marquee__item--chip[data-hue="cyan"] { --xwui-marquee-chip: var(--xwui-hue-cyan, #2ee6ff); color: var(--xwui-marquee-chip); }
.xwui-marquee__item--chip[data-hue="violet"] { --xwui-marquee-chip: var(--xwui-hue-violet, #9b6bff); }
.xwui-marquee__item--chip[data-hue="pink"] { --xwui-marquee-chip: var(--xwui-hue-pink, #ff4fa3); }
.xwui-marquee__item--chip[data-hue="orange"] { --xwui-marquee-chip: var(--xwui-hue-orange, #ff8a3d); }
.xwui-marquee__item--chip[data-hue="red"] { --xwui-marquee-chip: var(--xwui-hue-red, #ff5c6c); }
.xwui-marquee__item--chip[data-hue="amber"] { --xwui-marquee-chip: var(--xwui-hue-amber, #ffc53d); }
.xwui-marquee__item--chip[data-hue="green"] { --xwui-marquee-chip: var(--xwui-hue-green, #3dffa2); color: var(--xwui-marquee-chip); }
.xwui-marquee__item--chip[data-hue="blue"] { --xwui-marquee-chip: var(--xwui-hue-blue, #4d8bff); }