/* ==========================================================================
   Auxilium Pulse — Login page (v1.1 — visual uplift)

   Design direction: editorial enterprise with warmth.
   Brand panel: animated aurora + constellation pattern + serif headline.
   Form panel:   clean, generous whitespace, inline icons, arrow CTA.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
}

body.aux-login-body {
	background: var(--aux-bg);
	color: var(--aux-text);
	font-family: var(--aux-font-sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01";
}

/* Local spacing / shadow tokens (colors/fonts inherited from :root). */
body.aux-login-body {
	--aux-space-1: 4px;
	--aux-space-2: 8px;
	--aux-space-3: 12px;
	--aux-space-4: 16px;
	--aux-space-5: 24px;
	--aux-space-6: 32px;
	--aux-space-7: 48px;
	--aux-space-8: 64px;
	--aux-shadow-lg: 0 10px 24px rgba(11,16,32,0.10), 0 20px 48px rgba(11,16,32,0.12);
	--aux-ring: 0 0 0 3px rgba(59,107,245,0.18);
}

a { color: var(--aux-brand-accent); text-decoration: none; transition: color 120ms ease; }
a:hover, a:focus-visible { color: var(--aux-brand-accent-hover); }

:focus-visible { outline: 2px solid var(--aux-brand-accent); outline-offset: 2px; border-radius: 3px; }

button { font: inherit; cursor: pointer; }

/* ==========================================================================
   Layout: split-screen
   ========================================================================== */
.aux-login {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100vh;
}

@media (min-width: 1000px) {
	.aux-login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ==========================================================================
   Brand panel (left)
   ========================================================================== */
.aux-login__brand {
	position: relative;
	overflow: hidden;
	background: var(--aux-brand-ink);
	color: #E7ECF5;
	min-height: 200px;
	padding: var(--aux-space-6) var(--aux-space-5);
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

@media (min-width: 1000px) {
	.aux-login__brand {
		min-height: 100vh;
		padding: var(--aux-space-8) var(--aux-space-7);
	}
}

/* ---------- Aurora: three blurred blobs that drift slowly ---------- */
.aux-login__aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.aux-login__aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	will-change: transform;
}

.aux-login__aurora-blob--a {
	width: 46%;
	aspect-ratio: 1;
	top: -12%;
	left: -8%;
	background: radial-gradient(circle, var(--aux-brand-accent) 0%, transparent 70%);
	animation: aux-drift-a 22s ease-in-out infinite alternate;
}

.aux-login__aurora-blob--b {
	width: 42%;
	aspect-ratio: 1;
	bottom: -18%;
	right: -12%;
	background: radial-gradient(circle, var(--aux-brand-gold) 0%, transparent 70%);
	opacity: 0.35;
	animation: aux-drift-b 28s ease-in-out infinite alternate;
}

.aux-login__aurora-blob--c {
	width: 36%;
	aspect-ratio: 1;
	top: 35%;
	left: 25%;
	background: radial-gradient(circle, #6E88F7 0%, transparent 70%);
	opacity: 0.3;
	animation: aux-drift-c 34s ease-in-out infinite alternate;
}

@keyframes aux-drift-a {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(6%, 10%) scale(1.1); }
}
@keyframes aux-drift-b {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-8%, -6%) scale(1.15); }
}
@keyframes aux-drift-c {
	0%   { transform: translate(0, 0) scale(0.95); }
	100% { transform: translate(10%, -8%) scale(1.08); }
}

/* ---------- Constellation pattern (SVG, positioned) ---------- */
.aux-login__constellation {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	color: #E7ECF5;
	opacity: 0.7;
}

.aux-login__star {
	animation: aux-twinkle 4s ease-in-out infinite;
}
.aux-login__star--1 { animation-delay: 0.5s; }
.aux-login__star--2 { animation-delay: 2.2s; }

@keyframes aux-twinkle {
	0%, 100% { opacity: 0.35; transform: scale(0.9); transform-origin: center; transform-box: fill-box; }
	50%      { opacity: 1;    transform: scale(1.2); transform-origin: center; transform-box: fill-box; }
}

/* ---------- Inner content stack ---------- */
.aux-login__brand-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--aux-space-6);
	max-width: 560px;
	min-height: 100%;
	flex: 1;
	animation: aux-brand-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes aux-brand-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Top row ---------- */
.aux-login__brand-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aux-space-4);
}

/* Logo in login context — sets its own type scale */
.aux-logo--login {
	display: inline-flex;
	align-items: center;
	gap: var(--aux-space-2);
}
.aux-logo--login .aux-logo__mark {
	width: 36px;
	height: 36px;
	display: inline-grid;
	place-items: center;
	background: linear-gradient(135deg, var(--aux-brand-accent), var(--aux-brand-gold));
	color: var(--aux-brand-ink);
	border-radius: 10px;
	font-family: var(--aux-font-serif);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px -8px rgba(59, 107, 245, 0.5);
}
.aux-logo--login .aux-logo__name {
	display: inline;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	color: #fff;
}

.aux-login__brand-mono {
	font-family: var(--aux-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: rgba(231, 236, 245, 0.55);
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

/* ---------- Middle: the lockup + tagline + pills ---------- */
.aux-login__brand-mid {
	display: flex;
	flex-direction: column;
	gap: var(--aux-space-5);
	flex: 1;
	justify-content: center;
}

.aux-login__brand-lockup {
	display: flex;
	flex-direction: column;
	gap: var(--aux-space-2);
}

.aux-login__brand-line-1 {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(231, 236, 245, 0.6);
	font-weight: 600;
}

.aux-login__brand-line-2 {
	font-family: var(--aux-font-serif);
	font-size: clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #fff;
	max-width: 12ch;
	margin: 0;
}

.aux-login__brand-accent {
	color: var(--aux-brand-gold);
	font-style: italic;
	font-weight: 500;
}

.aux-login__brand-tagline {
	font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
	line-height: 1.55;
	color: rgba(231, 236, 245, 0.74);
	max-width: 44ch;
	margin: 0;
}

/* ---------- Feature pills ---------- */
.aux-login__pills {
	list-style: none;
	padding: 0;
	margin: var(--aux-space-3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aux-space-2);
}
.aux-login__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: rgba(231, 236, 245, 0.9);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 200ms ease, transform 200ms ease;
}
.aux-login__pill:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}
.aux-login__pill-icon {
	width: 14px;
	height: 14px;
	color: var(--aux-brand-gold);
	flex-shrink: 0;
}

/* ---------- Bottom: signature ---------- */
.aux-login__brand-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.aux-login__brand-signature {
	font-size: 0.75rem;
	color: rgba(231, 236, 245, 0.5);
	letter-spacing: 0.01em;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 999px) {
	.aux-login__brand {
		min-height: auto;
		padding: var(--aux-space-6) var(--aux-space-5);
	}
	.aux-login__brand-inner { gap: var(--aux-space-4); }
	.aux-login__brand-line-2 { max-width: 100%; }
	.aux-login__brand-bottom { display: none; }
	.aux-login__pills { padding-bottom: var(--aux-space-2); }
}

/* ==========================================================================
   Form panel (right)
   ========================================================================== */
.aux-login__form-panel {
	background: var(--aux-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--aux-space-6) var(--aux-space-5);
	position: relative;
}
@media (min-width: 1000px) {
	.aux-login__form-panel { padding: var(--aux-space-8) var(--aux-space-7); }
}

.aux-login__form-inner {
	width: 100%;
	max-width: 420px;
	animation: aux-form-in 600ms 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes aux-form-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aux-login__head {
	margin-bottom: var(--aux-space-6);
}

.aux-login__eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--aux-brand-accent);
	margin-bottom: var(--aux-space-3);
	padding: 4px 10px;
	background: color-mix(in srgb, var(--aux-brand-accent) 8%, transparent);
	border-radius: 999px;
}

.aux-login__heading {
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 var(--aux-space-3);
	color: var(--aux-text);
}

.aux-login__sub {
	margin: 0;
	color: var(--aux-text-muted);
	line-height: 1.55;
}

/* ==========================================================================
   Flash banners
   ========================================================================== */
.aux-flash {
	padding: var(--aux-space-3) var(--aux-space-4);
	border-radius: var(--aux-radius);
	font-size: 0.875rem;
	margin-bottom: var(--aux-space-4);
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	gap: 10px;
}
.aux-flash::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.aux-flash--error {
	background: color-mix(in srgb, var(--aux-danger) 7%, var(--aux-surface));
	border-color: color-mix(in srgb, var(--aux-danger) 30%, var(--aux-border));
	color: var(--aux-danger);
}
.aux-flash--success {
	background: color-mix(in srgb, var(--aux-success) 7%, var(--aux-surface));
	border-color: color-mix(in srgb, var(--aux-success) 30%, var(--aux-border));
	color: var(--aux-success);
}

/* ==========================================================================
   Form
   ========================================================================== */
.aux-login__form {
	display: flex;
	flex-direction: column;
	gap: var(--aux-space-4);
}

.aux-field { display: flex; flex-direction: column; gap: 6px; }

.aux-field__label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.aux-field__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--aux-text);
	letter-spacing: 0.005em;
}

.aux-field__aside {
	font-size: 0.75rem;
	color: var(--aux-brand-accent);
	font-weight: 500;
}
.aux-field__aside:hover { color: var(--aux-brand-accent-hover); }

.aux-field__wrap {
	position: relative;
}

.aux-field__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--aux-text-subtle);
	pointer-events: none;
	display: inline-grid;
	place-items: center;
	transition: color 150ms ease;
}
.aux-field__icon svg { width: 100%; height: 100%; }

.aux-field__input {
	width: 100%;
	padding: 12px 14px;
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--aux-text);
	background: var(--aux-surface);
	border: 1px solid var(--aux-border-strong);
	border-radius: var(--aux-radius);
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
	min-height: 46px;
}
.aux-field__input::placeholder { color: var(--aux-text-subtle); }

.aux-field__input--with-icon { padding-left: 44px; }
.aux-field__input--with-reveal { padding-right: 44px; }

.aux-field__input:hover { border-color: var(--aux-text-subtle); }

.aux-field__input:focus,
.aux-field__input:focus-visible {
	outline: none;
	border-color: var(--aux-brand-accent);
	box-shadow: var(--aux-ring);
	background: var(--aux-surface);
}
.aux-field__input:focus ~ .aux-field__icon,
.aux-field__wrap:focus-within .aux-field__icon {
	color: var(--aux-brand-accent);
}

.aux-field__input[aria-invalid="true"] {
	border-color: var(--aux-danger);
}

/* Password reveal button */
.aux-field__reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: var(--aux-radius-sm);
	background: transparent;
	border: none;
	color: var(--aux-text-muted);
	display: inline-grid;
	place-items: center;
	transition: background 150ms ease, color 150ms ease;
}
.aux-field__reveal svg { width: 16px; height: 16px; }
.aux-field__reveal:hover { background: var(--aux-bg); color: var(--aux-text); }

/* ---------- Custom checkbox ---------- */
.aux-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	font-size: 0.875rem;
	color: var(--aux-text-muted);
	padding: 4px 0;
}
.aux-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.aux-check__box {
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--aux-border-strong);
	border-radius: 5px;
	background: var(--aux-surface);
	display: inline-grid;
	place-items: center;
	transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
	flex-shrink: 0;
}
.aux-check:hover .aux-check__box { border-color: var(--aux-text-subtle); }
.aux-check input[type="checkbox"]:focus-visible ~ .aux-check__box {
	border-color: var(--aux-brand-accent);
	box-shadow: var(--aux-ring);
}
.aux-check input[type="checkbox"]:checked ~ .aux-check__box {
	background: var(--aux-brand-accent);
	border-color: var(--aux-brand-accent);
	transform: scale(1.05);
}
.aux-check input[type="checkbox"]:checked ~ .aux-check__box::after {
	content: "";
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}

/* ==========================================================================
   Button (primary CTA with spinner + arrow)
   ========================================================================== */
.aux-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	border-radius: var(--aux-radius);
	border: 1px solid transparent;
	min-height: 48px;
	cursor: pointer;
	text-decoration: none;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 80ms ease;
	overflow: hidden;
	isolation: isolate;
}
.aux-btn:active { transform: translateY(1px); }

.aux-btn--primary {
	background: var(--aux-brand-accent);
	color: #fff;
	border-color: var(--aux-brand-accent);
	box-shadow: 0 1px 0 rgba(11, 16, 32, 0.08), 0 8px 20px -8px color-mix(in srgb, var(--aux-brand-accent) 70%, transparent);
}

/* Subtle shimmer that sweeps across on hover */
.aux-btn--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
	transform: translateX(-110%);
	transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}
.aux-btn--primary:hover::before { transform: translateX(110%); }

.aux-btn--primary:hover,
.aux-btn--primary:focus-visible {
	background: var(--aux-brand-accent-hover);
	border-color: var(--aux-brand-accent-hover);
	box-shadow: var(--aux-ring), 0 10px 26px -8px color-mix(in srgb, var(--aux-brand-accent) 60%, transparent);
}

.aux-btn__label { position: relative; z-index: 2; }
.aux-btn__arrow {
	position: relative;
	z-index: 2;
	width: 16px;
	height: 16px;
	transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aux-btn:hover .aux-btn__arrow { transform: translateX(2px); }

.aux-btn__spinner {
	position: relative;
	z-index: 2;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: aux-spin 700ms linear infinite;
}
@keyframes aux-spin { to { transform: rotate(360deg); } }

/* Loading state — JS adds .is-loading */
.aux-btn.is-loading { pointer-events: none; cursor: progress; }
.aux-btn.is-loading .aux-btn__spinner { display: inline-block; }
.aux-btn.is-loading .aux-btn__arrow,
.aux-btn.is-loading .aux-btn__label { opacity: 0.6; }

.aux-btn--block { width: 100%; }

/* ==========================================================================
   Footer (below form): "Need an account?" block
   ========================================================================== */
.aux-login__foot {
	margin-top: var(--aux-space-6);
	padding-top: var(--aux-space-5);
	border-top: 1px solid var(--aux-border);
}

.aux-login__support-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--aux-space-4);
	background: var(--aux-bg);
	border-radius: var(--aux-radius);
	border: 1px solid var(--aux-border);
}

.aux-login__support-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--aux-text);
}

.aux-login__support-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--aux-text-muted);
	line-height: 1.5;
}

.aux-login__support-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--aux-brand-accent);
	align-self: flex-start;
	transition: gap 150ms ease;
}
.aux-login__support-link:hover { gap: 10px; color: var(--aux-brand-accent-hover); }
.aux-login__support-link svg { transition: transform 200ms ease; }
.aux-login__support-link:hover svg { transform: translateX(2px); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.aux-login__aurora-blob,
	.aux-login__star,
	.aux-login__brand-inner,
	.aux-login__form-inner,
	.aux-btn--primary::before,
	.aux-btn__arrow {
		animation: none !important;
		transition: none !important;
	}
}