/* Auth scene — fundo imersivo (equivalente AuraPlus: partículas, waves de áudio, parallax, ícones) */

html:has(body.auth-scene-body) {
	height: auto;
	min-height: 100%;
	overflow-y: auto;
}

.auth-scene-body {
	height: auto !important;
	min-height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	--auth-bg-x: 0px;
	--auth-bg-y: 0px;
	--auth-bg-rot: 0deg;
	background:
		radial-gradient(1200px 700px at calc(18% + var(--auth-bg-x)) calc(85% + var(--auth-bg-y)), rgba(31, 41, 167, 0.55), transparent 62%),
		radial-gradient(900px 520px at calc(82% - var(--auth-bg-x)) calc(12% + var(--auth-bg-y)), rgba(0, 137, 244, 0.32), transparent 58%),
		radial-gradient(700px 480px at calc(50% + var(--auth-bg-x)) calc(50% - var(--auth-bg-y)), rgba(0, 137, 244, 0.14), transparent 70%),
		linear-gradient(calc(145deg + var(--auth-bg-rot)), #040818 0%, #0c1442 38%, #081028 72%, #050510 100%);
}

.auth-scene {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100vw;
	min-height: 100dvh;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.auth-scene-canvas {
	position: absolute;
	top: -12%;
	left: -12%;
	right: auto;
	bottom: auto;
	width: 124%;
	height: 124%;
	max-width: none;
	display: block;
	opacity: 0.95;
	will-change: transform;
}

.auth-scene-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	will-change: transform;
	pointer-events: none;
}

.auth-scene-orb--violet {
	width: min(62vmin, 680px);
	height: min(62vmin, 680px);
	left: -8%;
	top: 8%;
	background: radial-gradient(circle, rgba(31, 41, 167, 0.7) 0%, rgba(31, 41, 167, 0.22) 45%, transparent 72%);
}

.auth-scene-orb--amber {
	width: min(48vmin, 520px);
	height: min(48vmin, 520px);
	right: -6%;
	bottom: 10%;
	background: radial-gradient(circle, rgba(0, 137, 244, 0.5) 0%, rgba(0, 137, 244, 0.14) 48%, transparent 72%);
}

.auth-scene-orb--blue {
	width: min(38vmin, 420px);
	height: min(38vmin, 420px);
	left: 38%;
	top: 52%;
	background: radial-gradient(circle, rgba(0, 137, 244, 0.32) 0%, rgba(31, 41, 167, 0.12) 50%, transparent 72%);
}

.auth-scene-glow {
	position: absolute;
	inset: -28%;
	background:
		radial-gradient(circle at 28% 38%, rgba(31, 41, 167, 0.42), transparent 44%),
		radial-gradient(circle at 72% 62%, rgba(0, 137, 244, 0.28), transparent 40%),
		radial-gradient(circle at 50% 50%, rgba(0, 137, 244, 0.12), transparent 55%);
	will-change: transform;
}

.auth-scene-grid {
	position: absolute;
	inset: -12%;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, #000 10%, transparent 75%);
	opacity: 0.72;
	will-change: transform;
	transform-origin: center center;
}

.auth-scene-icons {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.auth-scene-icon {
	position: absolute;
	pointer-events: none;
	line-height: 1;
	font-size: var(--icon-size, 1.75rem);
	color: var(--icon-color, rgba(255, 255, 255, 0.55));
	opacity: 0;
	animation: auth-scene-icon-fade var(--auth-icon-dur, 8s) ease-in-out forwards;
	will-change: transform, opacity;
}

.auth-scene-icon--xl { font-size: 5.25rem; }
.auth-scene-icon--lg { font-size: 3.75rem; }
.auth-scene-icon--md { font-size: 2.1rem; }
.auth-scene-icon--sm { font-size: 1.45rem; }
.auth-scene-icon--xs { font-size: 0.75rem; }

.auth-scene-icon i {
	display: block;
	line-height: 1;
	font-size: inherit;
	width: 1em;
	height: 1em;
}

.auth-scene-icon--note {
	color: var(--icon-color, rgba(0, 137, 244, 0.48));
	filter: drop-shadow(0 0 12px rgba(0, 137, 244, 0.28));
}

.auth-scene-icon--hot {
	color: var(--icon-color, rgba(31, 41, 167, 0.55));
	filter: drop-shadow(0 0 10px rgba(31, 41, 167, 0.35));
}

.auth-scene-icon--soft {
	color: var(--icon-color, rgba(255, 255, 255, 0.14));
	filter: blur(0.3px);
	opacity: 0.85;
}

@keyframes auth-scene-icon-fade {
	0% { opacity: 0; }
	8% { opacity: var(--icon-alpha, 0.22); }
	78% { opacity: calc(var(--icon-alpha, 0.22) * 0.72); }
	100% { opacity: 0; }
}

.auth-scene-body .auth-main {
	position: relative;
	z-index: 1;
}

.auth-scene-body .auth-main .auth-wrapper.v1 .auth-form {
	background: none;
	background-image: none;
}

.auth-scene-body .auth-main .auth-wrapper .auth-form .card {
	box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-scene-body .loader-bg {
	background: #040818;
}

@media (max-width: 991.98px) {
	.auth-scene-icons {
		opacity: 0.65;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-scene-icon {
		animation: none;
		opacity: 0.18;
	}
	.auth-scene-glow,
	.auth-scene-grid,
	.auth-scene-icons,
	.auth-scene-orb,
	.auth-scene-canvas,
	.auth-scene-icon {
		transform: none !important;
		transition: none !important;
	}
	.auth-scene-body {
		--auth-bg-x: 0px;
		--auth-bg-y: 0px;
		--auth-bg-rot: 0deg;
	}
}