/* =========== © 2025 Centroarts.com for https://magenta.su =========== */

.page-auth__logo { color: var(--color-primary); }
.page-auth__logo svg { display: block; width: 28px; height: 28px; }

@media (max-width: 599px) {
	.page-auth__logo {
		padding: 12px 20px; height: 64px;
		display: flex; justify-content: center; align-items: center;
		box-shadow: inset 0 -1px 0 0 rgba(var(--color-primary-rgb), 0.1);
	}
	.page-auth-in { padding: 40px 20px; }
}
@media (min-width: 600px) {
	.page-auth__logo { position: absolute; left: 48px; top: 48px; }
	.page-auth {
		display: grid; grid-template-columns: 1fr min-content;
		min-height: 100vh;
	}
	.page-auth-content {
		display: flex; justify-content: center; align-items: center;
		padding: 48px; width: 100%;
	}
}
@media (min-width: 1200px) {
	.page-auth-in { width: 100%; max-width: 408px; }
	.page-auth-bg {
		display: block !important;
		position: relative; z-index: 1;
		height: 100%;
	}
	.page-auth-bg-img { position: relative; width: 400px; height: 100%; overflow: hidden; }
	.page-auth-bg-img img { position: absolute; left: 50%; top: 50%; width: auto; height: 120%; transform: translate(-35%, -40%); position: absolute; }

	.gradient { position: absolute; inset: 0; z-index: -1; background-color: rgba(var(--color-primary-rgb), 0.1); pointer-events: none; overflow: hidden; }
	.gradient > i {
		--g-rd: 600px;
		position: absolute; left: calc(50% - var(--g-rd)); top: calc(50% - var(--g-rd));
	}
	.gradient > i::after { content: ""; display: block; width: calc(var(--g-rd)*2); aspect-ratio: 1/1; }

	html:not(.load) .gradient-magenta { animation: g-magenta 5s ease infinite 1s; }
	html:not(.load) .gradient-yellow { animation: g-yellow 5.5s ease infinite 1s; }

	.gradient-magenta { transform: translate(10%, -12%); will-change: transform; }
	.gradient-yellow { transform: translate(-14%, 12%); will-change: transform; }

	.gradient-magenta:after { background-image: radial-gradient(closest-side, rgba(var(--color-primary-rgb), 0.3) 0%, rgba(var(--color-primary-rgb), 0) 100%); }
	.gradient-yellow:after { background-image: radial-gradient(closest-side, rgba(var(--color-second-rgb), 0.3) 0%, rgba(var(--color-second-rgb), 0) 100%); }
}