/**
 * MC Season Loading — estilo AC Visa Center (Chipsa)
 * Ref: https://www.awwwards.com/inspiration/preloader-submission-693b8daf54761954650065
 */

:root {
	--mcsl-bg: #050505;
	--mcsl-text: #f5f5f5;
	--mcsl-muted: rgba(245, 245, 245, 0.62);
	--mcsl-frame-size: clamp(220px, 42vw, 420px);
	--mcsl-radius: clamp(22px, 4.5vw, 34px);
	--mcsl-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--mcsl-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

.mcsl-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: var(--mcsl-bg);
	color: var(--mcsl-text);
	overflow: hidden;
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	isolation: isolate;
	transition: opacity 0.65s var(--mcsl-ease-out);
}

.mcsl-loader__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--mcsl-bg);
}

.mcsl-loader__bg-mesh {
	position: absolute;
	inset: -45%;
	background:
		radial-gradient(circle at 18% 12%, rgba(88, 62, 170, 0.38), transparent 46%),
		radial-gradient(circle at 82% 88%, rgba(190, 58, 78, 0.3), transparent 44%),
		radial-gradient(circle at 52% 48%, rgba(38, 92, 150, 0.24), transparent 52%),
		linear-gradient(180deg, #030303 0%, #141414 52%, #060606 100%);
	animation: mcsl-mesh-drift 11s var(--mcsl-ease) infinite alternate;
	will-change: transform;
}

.mcsl-loader__bg-layer {
	position: absolute;
	inset: -18%;
	background-size: cover;
	background-position: center;
	filter: blur(88px) saturate(1.35) brightness(0.42);
	opacity: 0;
	transform: scale(1.1);
	transition:
		opacity 0.85s var(--mcsl-ease-out),
		transform 1.1s var(--mcsl-ease-out);
	will-change: opacity, transform;
	z-index: 1;
}

.mcsl-loader.is-snapping .mcsl-loader__bg-layer {
	transition:
		opacity 0.1s linear,
		transform 0.1s linear;
}

.mcsl-loader__bg-layer.is-active {
	opacity: 1;
	transform: scale(1.04);
}

.mcsl-loader__bg-blur {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-backdrop-filter: blur(48px);
	backdrop-filter: blur(48px);
}

.mcsl-loader__bg-vignette {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 28%, transparent 72%, rgba(0, 0, 0, 0.55) 100%),
		radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.35) 100%);
}

@keyframes mcsl-mesh-drift {
	0% {
		transform: translate3d(-2%, -1.5%, 0) scale(1.02) rotate(0deg);
	}

	50% {
		transform: translate3d(1.5%, 2%, 0) scale(1.06) rotate(1.5deg);
	}

	100% {
		transform: translate3d(2.5%, -1%, 0) scale(1.03) rotate(-1deg);
	}
}

.mcsl-loader__stage {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3.5vh, 2rem);
	padding: clamp(1rem, 4vw, 2rem);
}

.mcsl-loader__frame-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.45rem, 1.2vh, 0.65rem);
	flex: 0 0 auto;
}

.mcsl-loader__brand {
	flex: 0 0 auto;
}

.mcsl-loader__logo {
	display: block;
	width: auto;
	height: clamp(30px, 6.5vh, 52px);
	max-width: min(240px, 58vw);
	object-fit: contain;
	object-position: center;
}

.mcsl-loader__frame {
	flex: 0 0 auto;
}

.mcsl-loader__window {
	position: relative;
	width: var(--mcsl-frame-size);
	height: var(--mcsl-frame-size);
	overflow: hidden;
	border-radius: var(--mcsl-radius);
	background: #1a1a1a;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.12) inset;
	transform: scale(0.96);
	opacity: 0;
	transition:
		transform 0.7s var(--mcsl-ease-out) 0.18s,
		opacity 0.5s var(--mcsl-ease-out) 0.18s;
}

.mcsl-loader.is-ready .mcsl-loader__window {
	transform: scale(1);
	opacity: 1;
}

.mcsl-loader.is-stopped .mcsl-loader__window {
	transform: scale(1);
}

.mcsl-loader__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition:
		opacity 0.38s var(--mcsl-ease-out),
		transform 0.55s var(--mcsl-ease-out);
	will-change: opacity, transform;
	z-index: 1;
}

.mcsl-loader.is-snapping .mcsl-loader__img {
	transition:
		opacity 0.08s linear,
		transform 0.08s linear;
}

.mcsl-loader__img.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.mcsl-loader:not(.is-ready) .mcsl-loader__img {
	visibility: hidden;
}

.mcsl-loader__shade {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.22);
	transition: background 0.4s var(--mcsl-ease-out);
}

.mcsl-loader.is-stopped .mcsl-loader__shade {
	background: rgba(0, 0, 0, 0.28);
}

.mcsl-loader__counter {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.75rem, 10vw, 5.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	user-select: none;
}

.mcsl-loader__counter-suffix {
	margin-left: 0.02em;
	font-size: 0.72em;
	font-weight: 400;
	opacity: 0.92;
}

.mcsl-loader__subtitle {
	margin: 0;
	max-width: min(92vw, 520px);
	font-size: clamp(0.85rem, 2vw, 1.05rem);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.55s var(--mcsl-ease-out) 0.32s,
		transform 0.55s var(--mcsl-ease-out) 0.32s;
}

.mcsl-loader.is-ready .mcsl-loader__subtitle {
	opacity: 1;
	transform: translateY(0);
}

.mcsl-loader.is-exiting {
	opacity: 0;
	pointer-events: none;
}

.mcsl-loader.is-hidden {
	display: none;
}

/* —— Entrada da página (estilo Chipsa / AC Visa Center) —— */

html.mcsl-page-pending body > *:not(#mcsl-loader):not(.mcsl-page-reveal) {
	opacity: 0;
	transform: translateY(44px);
}

.mcsl-page-reveal {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: #050505;
	transform: scaleY(0);
	transform-origin: bottom center;
	pointer-events: none;
	will-change: transform;
}

.mcsl-page-reveal.is-covering {
	transform: scaleY(1);
}

.mcsl-page-reveal.is-leaving {
	transform: scaleY(0);
	transition: transform 0.52s var(--mcsl-ease);
}

html.mcsl-page-revealing body > *:not(#mcsl-loader):not(.mcsl-page-reveal) {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.75s var(--mcsl-ease-out),
		transform 0.85s var(--mcsl-ease-out);
	transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
	.mcsl-loader__bg-mesh {
		animation: none;
	}

	.mcsl-loader__window,
	.mcsl-loader__subtitle,
	.mcsl-loader__img,
	.mcsl-loader__bg-layer,
	.mcsl-loader {
		transition: none !important;
	}

	.mcsl-loader__bg-layer {
		filter: blur(40px) saturate(1.1) brightness(0.5);
	}

	.mcsl-page-reveal.is-leaving,
	html.mcsl-page-revealing body > *:not(#mcsl-loader):not(.mcsl-page-reveal) {
		transition: none !important;
	}

	html.mcsl-page-pending body > *:not(#mcsl-loader):not(.mcsl-page-reveal) {
		opacity: 1;
		transform: none;
	}
}