@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
	--main-bg-color: black;
	--main-color: white;
	--bg: #8f8f8f;
}

.montserrat {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: italic;
}

.extension-banner-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh; /* Full screen height */
	background-color: transparent;
	z-index: 9999; /* High z-index to ensure it blocks everything below */
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none; /* Allow clicks to pass through */
	background: linear-gradient(var(--main-color), var(--bg));
	opacity: 0;
	/* fade-in and fade-out for the screen take-over */
	animation: var(--duration) ease-in-out var(--duration) 1 normal forwards
			show,
		var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
}

@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.8;
	}
}

.banner {
	background: var(--main-bg-color);
	color: var(--main-color);
	position: relative;
	padding: 1rem;
	font-size: 5rem;
	line-height: 11rem;
	transform: rotate(-25deg); /* Rotates the banner */
	width: 200vw; /* Extra-wide to ensure the marquee scrolls smoothly across */
	height: auto;

	/* Apply gradients to the banner itself */
	/* Add a left-to-transparent gradient on the left */
	/* Add a right-to-transparent gradient on the right */
}

.banner::before,
.banner::after {
	position: absolute;
	top: 0;
	z-index: 9999;
	width: 15%;
	height: 100%;
	content: "";
}

.banner::before {
	left: 0;
	background: linear-gradient(to right, var(--main-bg-color), transparent);
}

.banner::after {
	right: 0;
	background: linear-gradient(to left, var(--main-bg-color), transparent);
}

.marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.marquee__inner {
	display: inline-block;
	white-space: nowrap;
	/* Adjust the speed using --ad which can be set dynamically in the HTML */
	animation: scroll var(--ad, 100s) linear infinite;
	transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

.marquee span {
	display: inline-block;
	padding-right: 2rem; /* Add some space between each repeat */
}

/* Keyframes to make the animation appear infinite without gaps */
@keyframes scroll {
	0% {
		transform: translate3d(
			-50%,
			0,
			0
		); /* Start in the middle of the loop */
	}
	100% {
		transform: translate3d(-100%, 0, 0); /* Move left but only 50% */
	}
}

/* Mobile screens */
@media (max-width: 30rem) {
	.extension-banner-container {
		width: 110vw;
		height: 110vh;
	}
	.banner {
		transform: rotate(-60deg);
		width: 250vw;
		margin-left: -15rem;
	}
}

/* Tablet screens */
@media (min-width: 48rem) {
	.banner {
		transform: rotate(-50deg);
		width: 225vw;
		margin-left: -5rem;
	}
}

/* iPad Mini */
@media (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape) {
	.banner {
		transform: rotate(-40deg);
		width: 225vw;
		margin-left: -5rem;
	}
}

/* Laptop screens */
@media (min-width: 64rem) {
	.extension-banner-container {
		width: 115vw;
		height: 115vh;
	}
	.banner {
		transform: rotate(-30deg);
		width: 210vw;
		margin-left: -5rem;
		margin-top: -5rem;
	}
}

/* Desktop screens */
@media (min-width: 80rem) {
	.extension-banner-container {
		width: 115vw;
		height: 115vh;
	}
	.banner {
		transform: rotate(-32deg);
		width: 200vw;
		margin-left: -15rem;
		margin-top: -15rem;
	}
}
