/**
 * Fugamma — client login: the splash "Client log in" affordance and the
 * login-modal tweaks layered on top of the shared .fg-modal / .fg-form system
 * (see splash-modal.css). The modal itself inherits the glass dialog, floating
 * labels, accent ring, and palette-locking from there; this file only adds the
 * trigger button, a narrower single-column dialog, and the remember/forgot row.
 */

/* ---- "Client log in" trigger (top-center of the splash) ------------------ */
.splash__login {
	position: absolute;
	top: clamp(16px, 3vh, 30px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.05rem;
	font-family: 'Roboto', sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none; /* the affordance is an <a> when logged in */
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	cursor: pointer;
	/* Fade in after the intro cascade has mostly resolved (cards land ~3.15s),
	   so the chrome doesn't pop during the black hold or the curtain wipe.
	   NOTE: independent of the intro keyframes — no cascade coupling. */
	opacity: 0;
	animation: fgLoginFade 0.8s ease 3.3s forwards;
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.splash__login:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.75);
	transform: translateX(-50%) translateY(-1px);
}
.splash__login:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.splash__login-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	/* Tinted to whatever palette is live (set by the stripe engine); falls back
	   to cyan before the engine publishes. */
	background: var(--fg-live-accent, #48cae4);
	box-shadow: 0 0 8px var(--fg-live-accent, #48cae4);
	transition: background 0.6s ease, box-shadow 0.6s ease;
}

@keyframes fgLoginFade {
	to { opacity: 1; }
}

/* ---- Login dialog: narrower + single column ------------------------------ */
.fg-modal__dialog--login { max-width: 430px; }
.fg-form--login { grid-template-columns: 1fr; gap: 14px; }

/* Remember-me + forgot-password on one line. */
.fg-login__row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.1rem 0 0.2rem;
}
/* The remember checkbox is inline here, not the full-width block .fg-check is
   by default in the inquiry form. */
.fg-check--inline {
	grid-column: auto;
	margin-top: 0;
	font-size: 0.88rem;
	align-items: center;
}
.fg-check--inline .fg-check__box { width: 19px; height: 19px; margin-top: 0; }

.fg-login__forgot {
	font-size: 0.85rem;
	color: var(--fg-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.fg-login__forgot:hover { text-decoration: underline; }
.fg-login__forgot:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; border-radius: 3px; }

/* ---- Departure: fade the splash chrome to the bare stripe field --------- *
 * On login success the chrome (content, overlays, the pill) fades out, leaving
 * just #fg-stripes full-screen — which matches the portal's server-painted
 * curtain, so the navigation is seamless. The modal itself animates out in JS.   */
.splash.is-departing .splash__content,
.splash.is-departing .splash__sheen,
.splash.is-departing .splash__grain,
.splash.is-departing .splash__scrim,
.splash.is-departing .splash__login {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.42s ease;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.splash__login {
		animation: none;
		opacity: 1;
		transition-duration: 0.001ms;
	}
	.splash__login-dot { transition: none; }
}