/* =========================================================
	TALENTHUB LOGIN - LAYOUT
========================================================= */

.th-login-page{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr);
	align-items:center;
	width:min(1440px, 100%);
	min-height:100vh;
	padding:46px 80px 76px;
	margin:0 auto;
}

.th-login-visual{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	max-width:620px;
	transform:translateY(-86px);
	text-align:center;
}

.th-login-brand-lockup{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-bottom:28px;
}

.th-login-visual-logo{
	width:300px;
	height:auto;
	filter:
		drop-shadow(0 0 34px var(--th-glow-cyan))
		drop-shadow(0 0 60px var(--th-glow-indigo));
}

.th-login-brand-text{
	font-size:5.35rem;
	font-weight:950;
	line-height:.88;
	letter-spacing:-.075em;

	background:var(--th-gradient-brand);
	-webkit-background-clip:text;
	background-clip:text;

	color:var(--th-color-transparent);
	-webkit-text-fill-color:var(--th-color-transparent);

	text-shadow:0 18px 45px var(--th-glow-indigo);
}

.th-login-brand-text strong{
	font-weight:950;
}

.th-login-kicker{
	position:relative;
	overflow:hidden;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;

	width:max-content;

	padding:10px 20px;
	margin-bottom:30px;

	border:1px solid var(--th-badge-border);
	border-radius:999px;

	background:var(--th-badge-bg);
	color:var(--th-badge-text);

	box-shadow:0 10px 25px var(--th-badge-bg);

	font-size:.82rem;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.085em;

	animation:thLoginKickerPulse 4.2s ease-in-out infinite;
}

.th-login-kicker::before{
	content:"\F5C1";
	font-family:"bootstrap-icons";
	font-size:.82rem;
}

.th-login-kicker::after{
	content:"";
	position:absolute;
	top:0;
	left:-120%;
	width:70%;
	height:100%;
	background:
		linear-gradient(
			90deg,
			var(--th-color-transparent),
			var(--th-palette-rgb-255-255-255-a-7000),
			var(--th-color-transparent)
		);
	transform:skewX(-18deg);
	animation:thLoginKickerFlash 4.2s ease-in-out infinite;
}

.th-login-visual h1{
	margin:0 0 18px;

	font-size:clamp(2.75rem, 4vw, 4.15rem);
	font-weight:950;
	line-height:.95;
	letter-spacing:-.055em;

	background:var(--th-gradient-brand);
	-webkit-background-clip:text;
	background-clip:text;

	color:var(--th-color-transparent);
	-webkit-text-fill-color:var(--th-color-transparent);

	text-shadow:0 18px 45px var(--th-glow-indigo);
}

.th-login-visual h1 span,
.th-login-visual h1 strong{
	color:inherit;
}

.th-login-visual p{
	max-width:520px;
	margin:0;

	color:var(--th-color-text-muted);

	font-size:1.1rem;
	font-weight:600;
	line-height:1.75;
}

.th-login-divider{
	width:1px;
	height:68%;
	margin:auto;

	background:var(--th-gradient-line);

	box-shadow:0 0 22px var(--th-glow-cyan);
}

.th-login-panel{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	padding-left:58px;
	transform:translateY(-42px);
}

.th-login-panel .th-login-form{
	width:100%;
	max-width:520px;
}

.th-login-visual-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;

	margin-top:80px;

	color:var(--th-color-text-muted);
	font-size:.9rem;
}

.th-login-visual-footer strong{
	color:var(--th-color-text-main);
	font-weight:700;
}

.th-login-visual-footer small{
	color:var(--th-badge-text);
	font-weight:800;
}

/* =========================================================
	DARK MODE
========================================================= */

html[data-theme="dark"] .th-login-visual-logo{
	filter:
		drop-shadow(0 0 36px var(--th-palette-rgb-132-255-000-a-2600))
		drop-shadow(0 0 82px var(--th-palette-rgb-000-255-200-a-2000));
}

html[data-theme="dark"] .th-login-brand-text{
	color:var(--th-color-white);
	text-shadow:0 14px 34px var(--th-palette-rgb-000-000-000-a-2400);
}

html[data-theme="dark"] .th-login-brand-text strong{
	color:var(--th-palette-rgb-132-255-056);
}

html[data-theme="dark"] .th-login-kicker{
	border-color:var(--th-palette-rgb-132-255-000-a-3200);
	background:var(--th-palette-rgb-132-255-000-a-0800);
	color:var(--th-palette-rgb-132-255-056);
	box-shadow:0 0 0 var(--th-palette-rgb-132-255-056-a-0000);
}

html[data-theme="dark"] .th-login-kicker::after{
	background:
		linear-gradient(
			90deg,
			var(--th-color-transparent),
			var(--th-white-glow-strong),
			var(--th-color-transparent)
		);
}

html[data-theme="dark"] .th-login-visual h1{
	color:var(--th-color-white);
	text-shadow:0 16px 36px var(--th-palette-rgb-000-000-000-a-2600);
}

html[data-theme="dark"] .th-login-visual h1 span,
html[data-theme="dark"] .th-login-visual h1 strong{
	color:var(--th-palette-rgb-132-255-056);
}

html[data-theme="dark"] .th-login-visual p{
	color:var(--th-palette-rgb-255-255-255-a-7200);
}

html[data-theme="dark"] .th-login-divider{
	background:
		linear-gradient(
			to bottom,
			var(--th-color-transparent),
			var(--th-palette-rgb-132-255-000-a-3500),
			var(--th-color-transparent)
		);
	box-shadow:0 0 22px var(--th-palette-rgb-132-255-000-a-2200);
}

html[data-theme="dark"] .th-login-visual-footer{
	color:var(--th-white-glow-strong);
}

html[data-theme="dark"] .th-login-visual-footer strong{
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-login-visual-footer small{
	color:var(--th-palette-rgb-132-255-056);
}

@keyframes thLoginKickerPulse{

	0%,
	72%,
	100%{
		box-shadow:0 0 0 var(--th-palette-rgb-037-099-235-a-0000);
	}

	80%{
		box-shadow:
			0 0 0 4px var(--th-palette-rgb-037-099-235-a-0800),
			0 0 30px var(--th-palette-rgb-037-099-235-a-2200);
	}

}

html[data-theme="dark"] .th-login-kicker{
	animation:thLoginKickerPulseDark 4.2s ease-in-out infinite;
}

@keyframes thLoginKickerPulseDark{

	0%,
	72%,
	100%{
		box-shadow:0 0 0 var(--th-palette-rgb-132-255-056-a-0000);
	}

	80%{
		box-shadow:
			0 0 0 4px var(--th-palette-rgb-132-255-056-a-0800),
			0 0 30px var(--th-palette-rgb-132-255-056-a-3400);
	}

}

@keyframes thLoginKickerFlash{

	0%,
	68%{
		left:-120%;
	}

	82%,
	100%{
		left:140%;
	}

}