/* ==========================================================================
   marquee-warp.css
   Structural styles only. Colours, fonts and sizes stay in your own CSS.
   ========================================================================== */

/* The host element. You style it (height, background, colour, font);
   the library only needs it to be a positioned, single-column box. */
[data-marquee-warp] {
  position: relative;
  display: grid;
  /* minmax(0, 1fr), never `auto`: an auto track sizes itself to the ribbon's
     max-content and drags the whole page sideways. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

/* Once the WebGL mirror has proven it matches, the DOM ribbon steps aside
   and the canvas is the only thing on screen. */
[data-marquee-warp][data-mw-mirrored="true"] {
  overflow: visible;
}
[data-marquee-warp][data-mw-mirrored="true"] [data-mw-viewport] {
  visibility: hidden;
}

/* Tear mode only: the canvas paints the background itself, so the host must
   get out of the way or you see both. */
[data-marquee-warp][data-mw-tear="on"][data-mw-mirrored="true"] {
  background-color: transparent !important;
}

[data-mw-canvas] {
  position: absolute;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

[data-mw-viewport] {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

[data-mw-track] {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
  animation-name: mw-slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Two identical halves, so -50% lands exactly on a seam. */
@keyframes mw-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

[data-mw-half] {
  display: flex;
  flex: 0 0 auto;
}

/* One repeat of your content. Override --mw-gap to change the rhythm. */
[data-mw-unit] {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--mw-gap, 3rem);
  padding-right: var(--mw-gap, 3rem);
  white-space: nowrap;
}

[data-mw-item] {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-mw-track] { animation: none; }
}