/* The loader (scripts/loader.js, UV 29 Oct): a screen over the whole page,
   the nav included, until the page (or a tab opened later) has loaded, its
   data included. See-through with a strong blur (UV, 29 Oct, replacing
   opaque): the page is there underneath, out of focus, and comes sharp as
   the screen fades. Above the nav and its menu (100, 99), under the dots
   (1000) and their error line (1001). Sizes and times are --loader-* in
   variables.css, set from the main sandbox's Dots group. */
.tdc-loader {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: transparent;
	backdrop-filter: blur(var(--loader-blur));
	-webkit-backdrop-filter: blur(var(--loader-blur));
	opacity: 1;
	transition: opacity var(--loader-fade) ease;
	/* If loader.js never runs (a broken or missing script), the screen goes
	   by itself after 30 s rather than lock the page. loader.js stops this
	   the moment it starts (data-state). */
	animation: tdc-loader-giveup var(--loader-fade) ease 30s forwards;
}
.tdc-loader[data-state] { animation: none; }
.tdc-loader[data-state="leaving"] {
	opacity: 0;
	pointer-events: none;
}
@keyframes tdc-loader-giveup {
	to { opacity: 0; visibility: hidden; }
}

/* The site icon exactly where the nav's sits (nav.css .nav-logo), so the
   fade leaves the real one in the same spot. */
.tdc-loader-icon {
	position: absolute;
	left: 50%;
	top: calc(var(--nav-top) + var(--nav-height) / 2);
	transform: translate(-50%, -50%);
	height: var(--nav-logo-height);
	width: auto;
}

/* The ring the dots serve, in the middle of the screen. Never seen itself:
   its border is transparent, and only its width counts (the dots' size on
   it); the dots take their colour from its text colour: the site's green
   (UV, 29 Oct). */
.tdc-loader-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--loader-size);
	height: var(--loader-size);
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border: var(--loader-stroke) solid transparent;
	border-radius: var(--radius-round);
	color: var(--color-primary);
}
/* It comes back over the screen's own fade, so the dots, which fade only
   once it is back, are gone as the screen is. */
.tdc-loader .tdc-loader-ring[data-dots="revealing"] {
	transition: opacity var(--loader-fade) ease;
}
/* Reduced motion: no dots, so the ring itself is drawn and breathes (the
   dots' calm pulse on the ring, dots.css). */
.tdc-loader-ring::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--loader-stroke));
	border: var(--loader-stroke) solid currentColor;
	border-radius: inherit;
	opacity: 0;
}
.tdc-loader-ring[data-dots-calm]::before,
.tdc-loader-ring[data-dots="revealing"]::before { opacity: 1; }