/*
 * style.css — COMMON design system for NFS Neuchâtel.
 *
 * FOUNDATIONS layer (tokens) extracted from the Claude Design exports
 * (docs/design-models/, retro / GTA / synthwave style). Full spec: docs/design.md.
 *
 * Reusable COMPONENTS are added here over time, when implementing the design
 * exports (see CLAUDE.md §7). Bootstrap strategy: hybrid per space
 * (see docs/design.md §1).
 */

:root {
	/* --- Brand colors (neons) --- */
	--nfs-cyan: #34dbef;
	--nfs-cyan-bright: #46e3f2;
	--nfs-magenta: #ff3ba0;
	--nfs-magenta-light: #ff5a9e;
	--nfs-violet: #7a5bff;

	/* --- Backgrounds (dark) --- */
	--nfs-bg: #07050f;
	--nfs-bg-deep: #0d0820;
	--nfs-bg-stripe: #120c26;
	--nfs-bg-elevated: #1d1140;

	/* --- Text --- */
	--nfs-text: #ece9f7;
	--nfs-text-muted: #cfc9e6;
	--nfs-text-dim: #9b93bd;
	--nfs-text-faint: #6f6790;

	/* --- Fonts (loaded via Google Fonts in the pages) --- */
	--nfs-font-display: 'Anton', sans-serif;            /* large titles */
	--nfs-font-heading: 'Oswald', sans-serif;           /* subtitles */
	--nfs-font-body: 'Rajdhani', system-ui, sans-serif; /* body text */
	--nfs-font-mono: 'Space Mono', monospace;           /* kickers / accents */

	/* --- Fluid type scale --- */
	--nfs-fs-hero: clamp(54px, 9vw, 90px);
	--nfs-fs-h1: clamp(40px, 7vw, 72px);
	--nfs-fs-h2: clamp(34px, 6vw, 62px);
	--nfs-fs-h3: clamp(26px, 4.5vw, 44px);
	--nfs-fs-lead: clamp(17px, 2.4vw, 23px);

	/* --- Neon glows (signature shadows) --- */
	--nfs-glow-cyan: 0 0 22px rgba(52, 219, 239, .5);
	--nfs-glow-cyan-strong: 0 0 44px rgba(52, 219, 239, .7);
	--nfs-glow-magenta: 0 0 26px rgba(255, 59, 160, .5);
	--nfs-glow-magenta-strong: 0 0 40px rgba(255, 59, 160, .8);
	--nfs-shadow-soft: 0 1px 4px rgba(0, 0, 0, .12);

	/* --- Gradients --- */
	--nfs-grad-rainbow: linear-gradient(180deg, #46e3f2 0%, #7a5bff 42%, #ff3ba0 78%, #ff5a9e 100%);
	--nfs-grad-cyan-violet: linear-gradient(90deg, #34dbef, #7a5bff);
	--nfs-grad-magenta-violet: linear-gradient(90deg, #ff3ba0, #7a5bff);
	--nfs-grad-page: linear-gradient(180deg, #07050f, #0d0820, #07050f);
	--nfs-stripes-gta: linear-gradient(135deg, #120c26 0 14px, #0d0820 14px 28px);

	/* --- Radii --- */
	--nfs-radius-pill: 999px;
	--nfs-radius-card: 18px;
	--nfs-radius-sm: 8px;
	--nfs-radius-sharp: 2px;
}

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

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--nfs-font-body);
	color: var(--nfs-text);
	background-color: var(--nfs-bg);
}

/* ===== Synthwave sun + logo — reusable component (landing hero + auth pages) ===== */

.nfs-sun {
	position: relative;
	width: min(500px, 80vw);
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	animation: nfsSunFloat 7s ease-in-out infinite;
}

/* Gentle vertical float of the sun + logo. */
@keyframes nfsSunFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.nfs-sun-disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	opacity: .92;
	filter: drop-shadow(0 0 70px rgba(255, 59, 160, .4));
}

.nfs-sun-fill {
	position: absolute;
	inset: 0;
	background: var(--nfs-grad-rainbow);
}

.nfs-sun-stripes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 54%;
	background: repeating-linear-gradient(#07050f 0, #07050f 2px, transparent 2px, transparent 9px);
}

.nfs-sun-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: linear-gradient(transparent, #07050f);
}

/* Logo overlaid on the sun: 1.2x its width, centre sitting slightly below the
   sun centre so the wordmark hangs over the horizon. */
.nfs-sun-logo {
	position: absolute;
	top: 62%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	margin: 0;
	line-height: 0;
	border-radius: 8px;
}

.nfs-sun-logo:focus-visible {
	outline: 2px solid var(--nfs-cyan);
	outline-offset: 6px;
}

.nfs-sun-logo img {
	display: block;
	width: 100%;
	height: auto;
	animation: glowPulse 4.2s ease-in-out infinite;
}

@keyframes glowPulse {
	0%, 100% { filter: drop-shadow(0 0 16px rgba(52, 219, 239, .4)) drop-shadow(0 0 26px rgba(255, 59, 160, .3)); }
	50% { filter: drop-shadow(0 0 26px rgba(52, 219, 239, .65)) drop-shadow(0 0 44px rgba(255, 59, 160, .5)); }
}

@media (prefers-reduced-motion: reduce) {
	.nfs-sun-logo img, .nfs-sun { animation: none !important; }
}

/* ===== Screen-reader-only utility (visually hidden, still read/indexed) ===== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===== Confirmation toast (e.g. after account deletion) ===== */

.hp-toast {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	max-width: min(92vw, 560px);
	margin: 0;
	padding: 14px 22px;
	border: 1px solid rgba(52, 219, 239, .5);
	border-radius: 999px;
	background: rgba(13, 8, 32, .92);
	box-shadow: 0 0 30px -6px rgba(52, 219, 239, .5);
	color: var(--nfs-cyan);
	font-family: var(--nfs-font-heading, "Rajdhani", sans-serif);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	animation: hpToastIn .3s ease;
}

@keyframes hpToastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===== Page-transition loader (running wolf) ===== */

.nfs-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: #07050f;
}

.nfs-loader.is-active {
	display: flex;
	animation: nfsLoaderIn .2s ease;
}

.nfs-loader-stage {
	position: relative;
	width: min(440px, 86vw);
	aspect-ratio: 5 / 3;
}

.nfs-loader-leg {
	transform-box: fill-box;
	filter: blur(.6px);
}

@keyframes nfsLoaderIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wolfGrid { 0% { background-position: 0 0; } 100% { background-position: -44px 0; } }
@keyframes wolfBody { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes wolfTail { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } }
@keyframes wolfHead { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg); } }
@keyframes wolfFrontLeg { 0% { transform: translate(13px, -3px); } 25% { transform: translate(6px, 0); } 50% { transform: translate(-13px, 0); } 75% { transform: translate(-6px, -6px); } 100% { transform: translate(13px, -3px); } }
@keyframes wolfBackLeg { 0% { transform: translate(-13px, 0); } 25% { transform: translate(-6px, -6px); } 50% { transform: translate(13px, -3px); } 75% { transform: translate(6px, 0); } 100% { transform: translate(-13px, 0); } }
@keyframes wolfSpeed { 0% { transform: translateX(120%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(-320%); opacity: 0; } }
@keyframes wolfDust { 0% { transform: translateX(0) scale(.5); opacity: 0; } 30% { opacity: .7; } 100% { transform: translateX(46px) scale(1.3); opacity: 0; } }
@keyframes wolfGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(52, 219, 239, .55)) drop-shadow(0 0 14px rgba(255, 59, 160, .45)); } 50% { filter: drop-shadow(0 0 12px rgba(52, 219, 239, .8)) drop-shadow(0 0 26px rgba(255, 59, 160, .7)); } }
@keyframes wolfSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }