/* default login css — Sanctum landing–style animated background (scl-page__*) */

body:has(#login_wrap.back_login) {
	background:
		radial-gradient(ellipse 120% 80% at 50% -20%, rgba(124, 58, 237, 0.45), transparent 55%),
		radial-gradient(ellipse 90% 60% at 100% 10%, rgba(219, 39, 119, 0.18), transparent 50%),
		radial-gradient(ellipse 70% 50% at 0% 50%, rgba(91, 33, 182, 0.28), transparent 52%),
		radial-gradient(ellipse 100% 70% at 50% 110%, rgba(124, 58, 237, 0.28), transparent 58%),
		linear-gradient(185deg, #12081c 0%, #0a0612 35%, #06040a 100%);
}

#login_wrap.back_login {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow-x: clip;
}

#login_wrap.back_login .scl-page__bg {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 0;
}

#login_wrap.back_login .scl-page__grid {
	position: absolute;
	inset: -1px;
	background-image:
		linear-gradient(rgba(196, 181, 253, 0.28) 1px, transparent 1px),
		linear-gradient(90deg, rgba(167, 139, 250, 0.22) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 88% 78% at 50% 8%, black 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 8%, black 0%, transparent 70%);
	opacity: 1;
	animation: scl-grid-drift 20s linear infinite;
	will-change: background-position;
}

#login_wrap.back_login .scl-page__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 85% 55% at 50% -5%, rgba(196, 181, 253, 0.12), transparent 55%),
		radial-gradient(ellipse 60% 45% at 100% 35%, rgba(219, 39, 119, 0.08), transparent 50%),
		radial-gradient(ellipse 55% 40% at 0% 65%, rgba(124, 58, 237, 0.1), transparent 50%);
}

#login_wrap.back_login .scl-page__aurora {
	position: absolute;
	inset: -50%;
	background: conic-gradient(
		from 210deg at 50% 50%,
		transparent 0deg,
		rgba(124, 58, 237, 0.32) 52deg,
		rgba(244, 114, 182, 0.16) 92deg,
		transparent 128deg,
		rgba(219, 39, 119, 0.26) 198deg,
		transparent 238deg,
		rgba(167, 139, 250, 0.3) 292deg,
		rgba(34, 211, 238, 0.1) 328deg,
		transparent 360deg
	);
	animation: scl-aurora 18s linear infinite;
	opacity: 0.94;
	will-change: transform;
}

@keyframes scl-aurora {
	0% {
		transform: rotate(0deg) scale(1);
	}
	35% {
		transform: rotate(126deg) scale(1.08);
	}
	68% {
		transform: rotate(245deg) scale(1.04);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}

@keyframes scl-grid-drift {
	0% {
		background-position: 0 0, 0 0;
	}
	100% {
		background-position: 48px 48px, 48px 48px;
	}
}

#login_wrap.back_login .scl-page__beams {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			-28deg,
			transparent,
			transparent 72px,
			rgba(124, 58, 237, 0.075) 72px,
			rgba(124, 58, 237, 0.075) 73px
		),
		repeating-linear-gradient(
			18deg,
			transparent,
			transparent 132px,
			rgba(219, 39, 119, 0.055) 132px,
			rgba(219, 39, 119, 0.055) 133px
		);
	mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, black, transparent);
	-webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, black, transparent);
	opacity: 0.9;
	animation: scl-beams-shift 14s ease-in-out infinite alternate;
	will-change: transform, opacity;
}

@keyframes scl-beams-shift {
	from {
		opacity: 0.78;
		transform: translateX(-1.5%) scale(1.01);
	}
	to {
		opacity: 0.98;
		transform: translateX(1.5%) scale(1.035);
	}
}

@media (prefers-reduced-motion: reduce) {
	#login_wrap.back_login .scl-page__grid,
	#login_wrap.back_login .scl-page__aurora,
	#login_wrap.back_login .scl-page__beams {
		animation: none !important;
	}
}

/*intro css */
#login_logo { height:70px; }
#intro_top {
	width:100%;
	height:100%;
	z-index:1;
	position:relative;
	background: transparent;
}
#login_wrap { width:100%; height:100%; }
#login_all {
	width:800px;
	max-width:94%;
	border-radius:20px;
	display:block;
	margin:0 auto;
	color:#fff;
	position: relative;
	z-index: 1;
	border: 1px solid rgba(196, 181, 253, 0.22);
	background: linear-gradient(
		160deg,
		rgba(42, 28, 72, 0.55) 0%,
		rgba(18, 12, 32, 0.88) 38%,
		rgba(12, 8, 22, 0.92) 100%
	);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.55) inset,
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 24px 70px rgba(0, 0, 0, 0.55),
		0 0 60px rgba(124, 58, 237, 0.15);
	backdrop-filter: blur(20px) saturate(1.15);
	-webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.login_not_member { text-align:center; padding-top:5px; }
#intro_lang { position:absolute; top:10px; right:20px; width:40px; height:40px; z-index: 2; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; position: relative; z-index: 1; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}