/* Rouvoet Motoren — site-wide motion (scroll reveal + page transitions +
   looping brand marquee). Added 2026-08-18, marquee added 2026-08-18,
   marquee spacing/fade reworked 2026-08-18. GSAP drives scroll reveal and
   page transitions; this file sets up their base/paint state. The marquee
   is pure CSS (no GSAP dependency). Follows the design system's Motion
   tokens (cubic-bezier(.2,.6,.25,1) standard easing, no bounce / parallax /
   scroll-jacking, prefers-reduced-motion -> off). */

#pt-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #0d0d0e;
	opacity: 0;
	pointer-events: none;
}

/* Only ever opaque when JS is confirmed available (see the has-js flag
   printed inline in <head>) — otherwise a no-JS visitor would be stuck
   looking at a solid black page with nothing to clear it. */
.has-js #pt-overlay {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.has-js #pt-overlay {
		display: none;
	}
}

/* --- Looping brand marquee -------------------------------------------- */

.rv-marquee-row {
	/* Belt-and-suspenders alongside the row's own instance CSS
	   (& { overflow: hidden; }) — the looping track is intentionally
	   wider than its container, this must never create a horizontal
	   scrollbar on the page. */
	overflow: hidden;
}

.rv-marquee-text {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	/* Explicit, rather than relying on the module's default block behaviour,
	   so the JS's containerWidth measurement (see initMarquees) always
	   reflects the full available width of the content-width row — this is
	   what makes the single visible copy + its gap reach edge to edge of
	   the container. Requested 2026-08-18 (follow-up round #2). */
	display: block;
	width: 100%;
}

/* Fallback styling for before JS runs, or if it never does — the plain
   Beaver Builder <p> still reads as an intentional, centered strip.
   Larger / more transparent / more spaced-out per 2026-08-18 follow-up
   round #2 — kept identical to .rv-marquee-item below so the no-JS state
   looks the same as the JS-driven one. */
.rv-marquee-text p {
	margin: 0;
	text-align: center;
	font-family: var(--ds-font-display, "Saira Condensed", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	word-spacing: 0.6em;
	font-size: clamp(28px, 5vw, 56px);
	/* Bold, matching the hero's heading weight (--ds-weight-bold, 700) —
	   requested 2026-08-18 (follow-up round #3). */
	font-weight: var(--ds-weight-bold, 700);
	/* Semi-transparent white ("transparent text", per the client) — overrides
	   the rich-text module's own compiled color:#ffffff rule, which has
	   higher selector specificity, hence !important. Opacity lowered further
	   (0.45 -> 0.3) in follow-up round #3. */
	color: rgba(255, 255, 255, 0.3) !important;
}

.rv-marquee-track {
	display: inline-flex;
	width: max-content;
	will-change: transform;
	animation: rv-marquee-scroll var(--rv-marquee-duration, 20s) linear infinite;
}

.rv-marquee-item {
	display: inline-block;
	flex: 0 0 auto;
	/* Computed at runtime (see initMarquees in rouvoet-animations.js) so
	   one item's total width always covers at least the visible container
	   — i.e. only one copy of the text is ever on screen at once, with a
	   deliberate gap before the next pass. 6rem is just the pre-JS/no-JS
	   fallback (irrelevant in practice, since this class only exists once
	   JS has already set the variable). */
	padding-inline-end: var(--rv-marquee-gap, 6rem);
	font-family: var(--ds-font-display, "Saira Condensed", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	word-spacing: 0.6em;
	font-size: clamp(28px, 5vw, 56px);
	font-weight: var(--ds-weight-bold, 700);
	color: rgba(255, 255, 255, 0.3) !important;
}

/* The middot separator, wrapped at runtime (see initMarquees) so it can be
   sized independently of the marque names around it. Requested 2026-08-18
   (follow-up round #3, "make the dots bigger"; refined round #4). Not
   present in the no-JS fallback (.rv-marquee-text p) since that's plain,
   unwrapped BB text.

   Scaled with transform rather than font-size: a transform doesn't change
   the element's own layout box or baseline position, so the dot stays
   exactly where a normal, unscaled middot would sit in the line — i.e. on
   the text's own mid-line, same as before round #3 enlarged it — and only
   the paint is scaled up around that fixed point. font-size + vertical-align
   (the round #3 approach) moved the glyph's vertical anchor instead, which
   is why it drifted off the mid-line.

   Color is set explicitly (not inherited) because the rich-text module's
   own compiled CSS includes a `... .fl-rich-text *` rule that directly
   matches this span (it's a descendant, reached via the universal selector)
   and sets color:#ffffff on it directly — a direct match always wins over
   an inherited value, even an !important one on the parent, so without this
   the dot rendered solid white instead of inheriting the text's 0.3 opacity. */
.rv-marquee-dot {
	display: inline-block;
	transform: scale(1.8);
	color: rgba(255, 255, 255, 0.3) !important;
}

@keyframes rv-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--rv-marquee-distance, 50%)));
	}
}

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

/* Edge fade (vignette): the text seems to dissolve into the row's own
   background at the left/right borders of the constrained content area,
   rather than being hard-clipped. Matched to the marquee row's bg_color
   (ink-950, #0d0d0e) — update this if that row's background ever changes. */
.rv-marquee-text::before,
.rv-marquee-text::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(56px, 12vw, 160px); /* widened 2026-08-18 follow-up round #3 ("increase the shadow effect") */
	z-index: 2;
	pointer-events: none;
}

.rv-marquee-text::before {
	left: 0;
	background: linear-gradient(to right, #171717 0%, #171717 25%, rgba(23, 23, 23, 0) 100%);
}

.rv-marquee-text::after {
	right: 0;
	background: linear-gradient(to left, #171717 0%, #171717 25%, rgba(23, 23, 23, 0) 100%);
}