/*
 * The "something is happening" mark (companion Chrome\Loading; Kevin, 2 Oct
 * 2026: "Build the light version and let me see it").
 *
 * A small card with a spinner, in the middle of the window, over a light scrim.
 * Shown by assets/js/loading.js on the page being LEFT, between a tap that
 * starts a full page load and the new page arriving. Never over a page that has
 * arrived: that was Reign's curtain, and it made fast pages slower to see.
 *
 * Every colour is a `--ds-*` token, so it follows Light, Dark and Night with no
 * block of its own (docs/Dark mode playbook.md §0). The ring is drawn here, so
 * the default needs no file; a picture, when one is configured, replaces it.
 *
 * Above everything, Better Messages' full-screen layer (100000) and its toasts
 * (100002) included: a tap inside the messenger can start a page load too.
 */

.ek-loading {
	position: fixed;
	inset: 0;
	z-index: 100020;
	display: grid;
	place-items: center;
	/* Light on purpose: the page under it stays readable, and a short wait is not a blank screen. */
	background: color-mix(in srgb, var(--ds-bg) 42%, transparent);
	animation: ek-loading-in .18s ease-out both;
	/* It takes the taps while it is up: a second tap on the same link is the usual cause of a double load. */
	touch-action: none;
}

.ek-loading[hidden] {
	display: none;
}

.ek-loading__card {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--ds-line);
	border-radius: 20px;
	background: var(--ds-surface);
	box-shadow: var(--ds-shadow-pop);
}

/* The default graphic: a ring, a quarter of it in the accent. */
.ek-loading__ring {
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border: 3px solid var(--ds-line);
	border-top-color: var(--ds-accent);
	border-radius: 50%;
	animation: ek-loading-spin .8s linear infinite;
}

/* A configured picture. Animated ones animate by themselves; a still one breathes. */
.ek-loading__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 44px;
	max-height: 44px;
	animation: ek-loading-breathe 1.4s ease-in-out infinite;
}
.ek-loading__img[src$=".gif"],
.ek-loading__img[src$=".svg"],
.ek-loading__img[src$=".webp"] {
	animation: none;
}

@keyframes ek-loading-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ek-loading-spin {
	to { transform: rotate(360deg); }
}
@keyframes ek-loading-breathe {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* Asked for less motion: no spin and no fade-in. The ring stands still and breathes instead. */
@media (prefers-reduced-motion: reduce) {
	.ek-loading { animation: none; }
	.ek-loading__ring { animation: ek-loading-breathe 1.6s ease-in-out infinite; }
}