/* Marquee — seamless ticker. The clip + track are applied only once the runtime marks the
 * element `.sc-mq-live`, so under reduced motion (runtime bails) the content shows normally,
 * unclipped. */
.sc-marquee.sc-mq-live { overflow: hidden; display: block; }

.sc-mq-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}
.sc-mq-track.is-vertical {
	flex-direction: column;
	width: auto;
	height: max-content;
}

.sc-mq-unit,
.sc-mq-sep {
	flex: 0 0 auto;
	white-space: nowrap;
}
.sc-mq-sep {
	display: flex;
	align-items: center;
	opacity: .55;
}
/* Editor content inside a unit shouldn't add its own vertical rhythm that breaks the row. */
.sc-mq-unit > :first-child { margin-top: 0; }
.sc-mq-unit > :last-child { margin-bottom: 0; }

.sc-marquee.sc-mq-pausable:hover .sc-mq-track { animation-play-state: paused; }

/* Warp / distortion wrapper — carries skew / tilt / bend so it doesn't collide with the
 * track's scroll transform. */
.sc-mq-warp { transform-origin: center center; will-change: transform; }

/* Curved (arc) text mode. */
.sc-mq-svg { display: block; max-width: 100%; overflow: visible; }

/* Draggable. */
.sc-marquee.sc-mq-grab { cursor: grab; }
.sc-marquee.sc-mq-grabbing { cursor: grabbing; user-select: none; }

.sc-marquee.sc-mq--outline .sc-mq-unit {
	-webkit-text-fill-color: transparent; /* inherits to descendant text */
	-webkit-text-stroke: 1px currentColor;
}

/* Vertical text (Up / Down only). Scoped to the UNIT so the track's column flow + translateY
 * scroll stay horizontal-based; only the text inside each unit turns on its side. */
.sc-marquee.sc-mq--orient-sideways .sc-mq-unit,
.sc-marquee.sc-mq--orient-upright  .sc-mq-unit {
	writing-mode: vertical-rl;
	line-height: 1.15;
}
.sc-marquee.sc-mq--orient-sideways .sc-mq-unit { text-orientation: mixed; }   /* letters rotated 90° */
.sc-marquee.sc-mq--orient-upright  .sc-mq-unit { text-orientation: upright; } /* glyphs stacked upright */
/* The separator should follow the same axis so it stacks in line with the text. */
.sc-marquee.sc-mq--orient-sideways .sc-mq-sep,
.sc-marquee.sc-mq--orient-upright  .sc-mq-sep { writing-mode: vertical-rl; }

@keyframes sc-mq-h { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sc-mq-v { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes sc-mq-bob {
	0%, 100% { transform: translateY(calc(-1 * var(--mq-amp, 0px))); }
	50%      { transform: translateY(var(--mq-amp, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.sc-mq-track, .sc-mq-unit { animation: none !important; transform: none !important; }
}