/*
 * Startup splash painted by the HTML templates before the client bundle loads, so the window
 * shows the brand instead of a blank page. The application shell fades it out and removes it
 * once its first screen is rendered (see lib/components/app-shell/startup-splash.ts).
 *
 * Colors come from the theme tokens of routes/layout.css, which the production document links
 * in its head and therefore applies from the first paint; theme-init.js sets the `dark` class
 * before that paint. The fallbacks repeat the current token values for documents where that
 * stylesheet is not applied yet, such as the Vite dev server, which injects it from JavaScript.
 */
#startup-splash {
	--splash-background: var(--background, oklch(1 0 0));
	--splash-track: var(--border, oklch(0.925 0.005 214.3));
	--splash-accent: var(--sidebar-primary, oklch(0.648 0.2 131.684));
	--splash-glow: color-mix(in oklab, var(--primary, oklch(0.841 0.238 128.85)) 32%, transparent);

	position: fixed;
	inset: 0;
	/* Stay above the application while it renders underneath and during the fade-out. */
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 36px;
	background: var(--splash-background);
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
}

.dark #startup-splash {
	--splash-background: var(--background, oklch(0.148 0.004 228.8));
	--splash-track: var(--muted, oklch(0.275 0.011 216.9));
	--splash-accent: var(--sidebar-primary, oklch(0.768 0.233 130.85));
	--splash-glow: color-mix(in oklab, var(--primary, oklch(0.768 0.233 130.85)) 22%, transparent);
}

#startup-splash[data-leaving] {
	pointer-events: none;
}

.startup-splash__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	animation: startup-splash-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.startup-splash__mark::before {
	content: '';
	position: absolute;
	inset: -44px;
	background: radial-gradient(closest-side, var(--splash-glow), transparent);
	animation: startup-splash-glow 2.4s ease-in-out 500ms infinite alternate both;
}

.startup-splash__mark img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: startup-splash-float 2.4s ease-in-out 500ms infinite alternate;
}

.startup-splash__progress {
	position: relative;
	width: 136px;
	height: 2px;
	overflow: hidden;
	background: var(--splash-track);
	/* Revealed after the desktop minimum (startup-splash.ts), so quick launches show only the
	   mark and slower ones gain an activity cue. */
	animation: startup-splash-reveal 320ms ease-out 1s both;
}

.startup-splash__progress::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 40%;
	background: var(--splash-accent);
	animation: startup-splash-progress 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes startup-splash-enter {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.92);
	}
}

@keyframes startup-splash-glow {
	from {
		opacity: 0.45;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1.05);
	}
}

@keyframes startup-splash-float {
	to {
		transform: translateY(-3px);
	}
}

@keyframes startup-splash-reveal {
	from {
		opacity: 0;
	}
}

@keyframes startup-splash-progress {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(250%);
	}
}

@keyframes startup-splash-pulse {
	to {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.startup-splash__mark,
	.startup-splash__mark::before,
	.startup-splash__mark img {
		animation: none;
	}

	/*
	 * Keep a non-moving activity cue: the full bar pulses instead of sliding. layout.css shortens
	 * every animation to a single 0.01ms run under this preference with !important, so the pulse
	 * restores its own timing explicitly; otherwise it would read as a completed progress bar.
	 */
	.startup-splash__progress::after {
		width: 100%;
		animation: startup-splash-pulse 1.2s ease-in-out infinite alternate;
		animation-duration: 1.2s !important;
		animation-iteration-count: infinite !important;
	}
}