/* Rotating Marquee :: Front-end */

.rm-section {
	--rm-s: 1;
	--rm-dv: 1;
	--rm-oh: 1;
	--rm-pull: 1;

	--rm-fs: calc( var( --rm-fs-set, 20px ) * var( --rm-s ) );
	--rm-band-h: calc( var( --rm-band-h-set, 65px ) * var( --rm-s ) );
	--rm-gap: calc( var( --rm-gap-set, 14px ) * var( --rm-s ) );
	--rm-div-h: calc( var( --rm-div-h-set, 37px ) * var( --rm-dv ) );
	--rm-overhang: calc( var( --rm-overhang-set, 8% ) * var( --rm-oh ) );
	--rm-mt: calc( var( --rm-mt-set, 0px ) * var( --rm-pull ) );
	--rm-mb: calc( var( --rm-mb-set, 0px ) * var( --rm-pull ) );

	position: relative;
	width: 100%;
	height: var( --rm-section-h, 239px );
	margin-top: var( --rm-mt, 0px );
	margin-bottom: var( --rm-mb, 0px );
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var( --rm-section-bg, transparent );
	z-index: 2;
	box-sizing: border-box;
}
.rm-section * { box-sizing: border-box; }

/* Full bleed */
.rm-section.rm-full {
	width: var( --rm-vw, 100vw );
	max-width: var( --rm-vw, 100vw );
	margin-left: calc( 50% - ( var( --rm-vw, 100vw ) / 2 ) );
	margin-right: calc( 50% - ( var( --rm-vw, 100vw ) / 2 ) );
}

/* The tilted band */
.rm-band {
	position: relative;
	flex: 0 0 auto;
	width: calc( 100% + ( var( --rm-overhang, 8% ) * 2 ) );
	margin-left: calc( var( --rm-overhang, 8% ) * -1 );
	height: var( --rm-band-h, 65px );
	display: flex;
	align-items: center;
	overflow: hidden;
	transform: rotate( var( --rm-angle, -6deg ) );
	background-image: linear-gradient( 90deg, var( --rm-grad-from, #2663EB ) 0%, var( --rm-grad-to, #773DED ) 100% );
}

/* The looping track */
.rm-track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: -moz-max-content;
	width: max-content;
	will-change: transform;
	animation: rm-scroll var( --rm-duration, 24s ) linear var( --rm-start-delay, 0s ) infinite;
}

.rm-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

@keyframes rm-scroll {
	from { transform: translate3d( 0, 0, 0 ); }
	to   { transform: translate3d( calc( var( --rm-shift, 50% ) * -1 ), 0, 0 ); }
}

.rm-section:hover .rm-track { animation-play-state: paused; }
.rm-track:focus-within { animation-play-state: paused; }

/* Items */
.rm-item {
	flex: 0 0 auto;
	padding: 0 var( --rm-gap, 14px );
	font-family: 'Google Sans', sans-serif;
	font-weight: var( --rm-fw, 600 );
	font-size: max( 12px, var( --rm-fs, 20px ) );
	line-height: 1.25;
	letter-spacing: var( --rm-tracking, 0em );
	text-transform: var( --rm-transform, uppercase );
	color: var( --rm-color, #FFFFFF );
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
}
a.rm-item:hover,
a.rm-item:focus {
	color: var( --rm-color, #FFFFFF );
	text-decoration: underline;
	text-underline-offset: 3px;
	box-shadow: none;
}

/* Dividers (vertical inside the band) */
.rm-sep {
	flex: 0 0 auto;
	width: var( --rm-div-w, 2px );
	height: var( --rm-div-h, 37px );
	background: var( --rm-div-color, #B4B4B4 );
	border-radius: 2px;
}

/* REVEAL - "ribbon unfurl" */

.rm-js .rm-band {
	clip-path: inset( 0 50% 0 50% );
	opacity: 0;
}
.rm-js .rm-section.rm-in .rm-band {
	animation: rm-unfurl .9s cubic-bezier( .3, .85, .25, 1 ) both;
}
@keyframes rm-unfurl {
	0% {
		opacity: 0;
		clip-path: inset( 0 50% 0 50% );
		filter: blur( 7px );
		box-shadow: 0 0 0 0 rgba( 38, 99, 235, 0 );
	}
	18% {
		opacity: 1;
		filter: blur( 5px );
	}
	60% {
		box-shadow: 0 12px 30px 0 rgba( 38, 99, 235, .34 );
	}
	100% {
		opacity: 1;
		clip-path: inset( 0 0 0 0 );
		filter: none;
		box-shadow: 0 0 0 0 rgba( 38, 99, 235, 0 );
	}
}

.rm-band::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0 ) 42%,
		rgba( 255, 255, 255, .75 ) 50%,
		rgba( 255, 255, 255, 0 ) 58%
	);
}
.rm-js .rm-section.rm-in .rm-band::after {
	animation: rm-seam .9s cubic-bezier( .3, .85, .25, 1 ) both;
}
@keyframes rm-seam {
	0%   { opacity: 0; }
	14%  { opacity: 1; }
	100% { opacity: 0; }
}

.rm-js .rm-section:not( .rm-in ) .rm-track {
	animation-play-state: paused;
}
.rm-section { --rm-start-delay: .62s; }

/* Motion preferences */
@media ( prefers-reduced-motion: reduce ) {
	.rm-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	.rm-group[aria-hidden="true"] { display: none; }

	.rm-js .rm-band,
	.rm-js .rm-section.rm-in .rm-band {
		clip-path: none;
		opacity: 1;
		filter: none;
		box-shadow: none;
		animation: none !important;
	}
	.rm-band::after,
	.rm-js .rm-section.rm-in .rm-band::after {
		opacity: 0;
		animation: none !important;
	}
}

/* Breakpoints */
@media ( max-width: 1024px ) {
	.rm-section {
		--rm-s: .86;
		--rm-dv: .81;
		--rm-oh: 1.25;
		--rm-pull: .4;
	}
}

@media ( max-width: 900px ) {
	.rm-section {
		--rm-oh: 1.3;
		--rm-pull: 0;
	}
}

@media ( max-width: 700px ) {
	.rm-section {
		--rm-s: .7;
		--rm-dv: .62;
		--rm-oh: 1.4;
	}
}

@media ( max-width: 420px ) {
	.rm-section {
		--rm-s: .6;
		--rm-dv: .5;
		--rm-oh: 1.5;
	}
}