/*
 * The loader (loader.js): the Centros mark, loading. Size it with width;
 * colour it with color. Every page shows it the same way; where it sits
 * sets only its size and its colour.
 */
.logo-loader { display: block; flex: none; width: 160px; aspect-ratio: 1; color: #FFFFFF; }
.logo-loader > .logo-loader-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-loader path { fill: currentColor; }

/* Reduced motion: the icon still, breathing gently — only while it is on the screen. */
@keyframes logo-loader-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
	.logo-loader > .logo-loader-mark:not(.idle) { animation: logo-loader-pulse 1.6s ease-in-out infinite; }
}

/* One that is usually not needed — a wait that is most often too short to see — comes in only
   after a moment, so a quick answer shows nothing rather than a flash of the mark. */
@keyframes logo-loader-late { from { opacity: 0; } }
.logo-loader.late { animation: logo-loader-late .25s ease .5s backwards; }

/* A cover with the loader and a line under it: what it waits for, in words.
   <div class="logo-loader-cover"><div class="logo-loader" aria-hidden="true"></div><span class="what">…</span></div>
   It fills the element it is put in (positioned); its background and colours are the page's. */
.logo-loader-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; box-sizing: border-box; text-align: center; }
.logo-loader-cover > .logo-loader { width: 96px; }