/* Shared auth page animations — login, register, boss */
.auth-bg-ring {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 130vmax;
	height: 130vmax;
	transform: translate3d(-50%, -50%, 0);
	background: conic-gradient(from 0deg, transparent, rgba(56, 189, 248, 0.07), transparent, rgba(129, 140, 248, 0.06), transparent, rgba(14, 165, 233, 0.07), transparent);
	animation: authRingRotate 22s linear infinite;
	z-index: 0;
	pointer-events: none;
	opacity: 0.85;
}
.auth-bg-brand {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	pointer-events: none;
	overflow: hidden;
	font-size: clamp(4.5rem, 20vw, 13rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
	background: linear-gradient(90deg, #065f46 0%, #0f766e 16%, #0284c7 32%, #38bdf8 48%, #818cf8 64%, #0f766e 82%, #065f46 100%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	opacity: 0.11;
	animation:
		authBrandDriftMain 20s ease-in-out infinite,
		authBrandShimmer 5.5s ease-in-out infinite,
		authBrandPulse 11s ease-in-out infinite;
	user-select: none;
}
.auth-brand-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.auth-brand-move {
	position: absolute;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
	background: linear-gradient(90deg, #065f46 0%, #0f766e 16%, #0284c7 32%, #38bdf8 48%, #818cf8 64%, #0f766e 82%, #065f46 100%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: authBrandShimmer 5.5s ease-in-out infinite;
}
.auth-brand-m1 {
	font-size: clamp(1.75rem, 5.5vw, 3.5rem);
	top: 18%;
	left: 8%;
	opacity: 0.07;
	animation: authMove1 22s ease-in-out infinite, authBrandShimmer 6s ease-in-out infinite;
}
.auth-brand-m2 {
	font-size: clamp(2rem, 7vw, 4.5rem);
	bottom: 16%;
	left: 18%;
	opacity: 0.08;
	animation: authMove2 26s ease-in-out infinite, authBrandShimmer 7s ease-in-out infinite;
}
.auth-brand-m3 {
	font-size: clamp(1.5rem, 4.5vw, 3rem);
	top: 55%;
	right: 6%;
	opacity: 0.06;
	animation: authMove3 24s ease-in-out infinite, authBrandShimmer 5s ease-in-out infinite;
}
.auth-brand-m4 {
	font-size: clamp(1.25rem, 3.5vw, 2.5rem);
	top: 8%;
	right: 14%;
	opacity: 0.05;
	animation: authMove4 19s ease-in-out infinite, authBrandShimmer 8s ease-in-out infinite;
}
.auth-bg-brand::before,
.auth-bg-brand::after {
	background: linear-gradient(90deg, #065f46 0%, #0f766e 16%, #0284c7 32%, #38bdf8 48%, #818cf8 64%, #0f766e 82%, #065f46 100%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: authBrandShimmer 5.5s ease-in-out infinite;
}
.auth-bg-brand::before {
	content: 'pSevak';
	position: absolute;
	bottom: 12%;
	right: 6%;
	font-size: clamp(2.5rem, 10vw, 6rem);
	opacity: 0.55;
	animation: authBrandDriftA 18s ease-in-out infinite, authBrandShimmer 5.5s ease-in-out infinite;
}
.auth-bg-brand::after {
	content: 'pSevak';
	position: absolute;
	top: 14%;
	left: 4%;
	font-size: clamp(2rem, 8vw, 5rem);
	opacity: 0.4;
	animation: authBrandDriftB 21s ease-in-out infinite, authBrandShimmer 5.5s ease-in-out infinite;
}
.btn-auth {
	background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 45%, #818cf8 100%) !important;
	background-size: 220% 220% !important;
	animation: btnGradientShift 5s ease infinite;
}
#submit.btn-auth,
#verify.btn-auth {
	animation: btnGradientShift 5s ease infinite, btnGlowPulse 2.6s ease-in-out infinite;
}
.btn-auth::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
	transform: translateX(-130%);
	animation: btnShineSweep 3.5s ease-in-out infinite;
	z-index: 1;
}
.btn-auth::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 17px;
	border: 2px solid rgba(125, 211, 252, 0.45);
	opacity: 0;
	transform: scale(0.96);
	z-index: 0;
	pointer-events: none;
}
.btn-auth:hover::before {
	animation: btnShineSweep 1.2s ease-in-out infinite;
}
.btn-auth:hover::after {
	opacity: 1;
	animation: btnRingPulse 1.4s ease-out infinite;
}
.btn-auth:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 16px 40px rgba(34, 211, 238, 0.5), 0 0 24px rgba(56, 189, 248, 0.25) !important;
	filter: brightness(1.08);
}
.btn-auth:active {
	transform: translateY(-1px) scale(0.97);
	box-shadow: 0 6px 18px rgba(34, 211, 238, 0.35) !important;
}
.btn-auth i {
	display: inline-block;
	position: relative;
	z-index: 2;
	transition: transform 0.3s ease;
}
.btn-auth:hover i {
	animation: btnIconPop 0.55s ease infinite;
}
.btn-auth > * {
	position: relative;
	z-index: 2;
}
.btn-auth.btn-dark {
	background: rgba(255,255,255,.08) !important;
	background-size: auto !important;
	animation: none;
}
.btn-auth.btn-dark::before {
	animation: none;
	opacity: 0;
}
.btn-auth.btn-dark:hover {
	background: rgba(255,255,255,.14) !important;
	box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12) !important;
	animation: btnDarkPulse 2s ease-in-out infinite;
}
.link-pill {
	animation: linkPillGlow 3s ease-in-out infinite;
}
.link-pill:hover {
	background: rgba(59, 130, 246, 0.32);
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 10px 28px rgba(59, 130, 246, 0.28);
}
.boss-login-link,
.auth-alt-link {
	animation: bossLinkFloat 4s ease-in-out infinite;
}
.boss-login-link:hover,
.auth-alt-link:hover {
	transform: translateY(-2px) scale(1.03);
}
.boss-login-link i,
.auth-alt-link i {
	animation: iconBob 2.5s ease-in-out infinite;
}
.loading-brand {
	font-size: clamp(2rem, 8vw, 3.25rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	margin-bottom: 16px;
	background: linear-gradient(90deg, #34d399 0%, #38bdf8 40%, #818cf8 70%, #34d399 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: authBrandDriftMain 20s ease-in-out infinite, authBrandShimmer 3s ease-in-out infinite, authBrandPulse 11s ease-in-out infinite;
}
@keyframes authRingRotate {
	from { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
	to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
@keyframes authBrandShimmer {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}
@keyframes authBrandPulse {
	0%, 100% { opacity: 0.08; filter: blur(0); }
	50% { opacity: 0.15; filter: blur(0); }
}
@keyframes authBrandDriftMain {
	0%, 100% { transform: translate(-8vw, -5vh) scale(1) rotate(-2deg); }
	25% { transform: translate(5vw, 2vh) scale(1.03) rotate(1deg); }
	50% { transform: translate(10vw, 8vh) scale(1.05) rotate(-1deg); }
	75% { transform: translate(-3vw, 5vh) scale(1.02) rotate(2deg); }
}
@keyframes authBrandDriftA {
	0%, 100% { transform: rotate(-12deg) translate(0, 0); opacity: 0.35; }
	33% { transform: rotate(-8deg) translate(-55px, -40px); opacity: 0.5; }
	66% { transform: rotate(-16deg) translate(45px, 35px); opacity: 0.42; }
}
@keyframes authBrandDriftB {
	0%, 100% { transform: rotate(8deg) translate(0, 0); opacity: 0.28; }
	33% { transform: rotate(12deg) translate(50px, -30px); opacity: 0.45; }
	66% { transform: rotate(5deg) translate(-35px, 45px); opacity: 0.38; }
}
@keyframes authMove1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(60px, 30px) rotate(3deg); }
	50% { transform: translate(120px, -20px) rotate(-2deg); }
	75% { transform: translate(40px, 50px) rotate(2deg); }
}
@keyframes authMove2 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-50px, -35px) rotate(-3deg); }
	50% { transform: translate(-90px, 25px) rotate(2deg); }
	75% { transform: translate(-30px, -55px) rotate(-1deg); }
}
@keyframes authMove3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(-70px, 40px) rotate(4deg); }
	66% { transform: translate(-25px, -45px) rotate(-3deg); }
}
@keyframes authMove4 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(-40px, 60px) rotate(-4deg); }
}
@keyframes btnGradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes btnGlowPulse {
	0%, 100% { box-shadow: 0 8px 28px rgba(56, 189, 248, 0.35); }
	50% { box-shadow: 0 10px 36px rgba(56, 189, 248, 0.55), 0 0 20px rgba(34, 211, 238, 0.3); }
}
@keyframes btnShineSweep {
	0% { transform: translateX(-130%); }
	45%, 100% { transform: translateX(130%); }
}
@keyframes btnRingPulse {
	0% { transform: scale(0.96); opacity: 0.85; }
	70% { transform: scale(1.12); opacity: 0; }
	100% { transform: scale(1.12); opacity: 0; }
}
@keyframes btnIconPop {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}
@keyframes btnDarkPulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(255, 255, 255, 0.06); }
	50% { box-shadow: 0 8px 24px rgba(255, 255, 255, 0.14); }
}
@keyframes linkPillGlow {
	0%, 100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
	50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.2); }
}
@keyframes bossLinkFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
	.auth-bg-brand,
	.auth-bg-brand::before,
	.auth-bg-brand::after,
	.auth-bg-ring,
	.auth-brand-layer,
	.auth-brand-move,
	.btn-auth,
	.link-pill,
	.boss-login-link,
	.auth-alt-link,
	.loading-brand {
		animation: none !important;
	}
	.auth-bg-brand,
	.auth-brand-move {
		opacity: 0.06;
	}
}