/* =============================================================
 * SUPERFLY — LOADING SCREEN (race start lights, every page)
 * -------------------------------------------------------------
 *   ( ● ) ( ● ) ( ● ) ( ● ) ( ● )
 *              SUPERFLY
 *
 * Covers the page while it loads. The lights come on one by one,
 * over and over, until the page has finished loading — then all
 * five light up, go out together ("lights out") and the cover
 * wipes away on a slant.
 *
 *   Layout:    added to every page by functions.php (wp_body_open)
 *   Movement:  assets/js/preloader.js
 *
 * CONTENTS
 *   1. Settings (edit me)
 *   2. Cover + lights
 *   3. Safety net (never stuck)
 *   4. Reduce motion
 * ============================================================= */


/* -------------------------------------------------------------
 * 1. SETTINGS (edit me)
 * ------------------------------------------------------------- */
.sf-lights {
	--sf-lights-bg:      #0a0a0a;                   /* cover colour */
	--sf-lights-accent:  #ec1e79;                   /* a light when it's on (Superfly pink) */
	--sf-lights-off:     #26262e;                   /* a light when it's off */
	--sf-lights-text:    rgba(245, 245, 245, 0.62); /* the SUPERFLY word */
	--sf-lights-line:    rgba(245, 245, 245, 0.18); /* thin border round the lights */
	--sf-lights-font:    "Archivo Black", "Arial Black", sans-serif;
}


/* -------------------------------------------------------------
 * 2. COVER + LIGHTS
 * ------------------------------------------------------------- */
.sf-lights {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--sf-lights-bg);
	font-family: var(--sf-lights-font);
}

.sf-lights__row {
	display: flex;
	gap: clamp(7px, 1vw, 12px);
	padding: 9px 12px;
	border-radius: 10px;
	background: #16161b;
	box-shadow: inset 0 0 0 1px var(--sf-lights-line);
}

.sf-lights__light {
	width: clamp(16px, 2vw, 24px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sf-lights-off);
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5);
	transition: background-color 0.08s linear, box-shadow 0.08s linear;
}

.sf-lights__light.is-on {
	background: var(--sf-lights-accent);
	box-shadow: 0 0 14px 3px rgba(236, 30, 121, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.sf-lights__brand {
	font-size: 11px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--sf-lights-text);
}


/* -------------------------------------------------------------
 * 3. SAFETY NET (never stuck)
 * If preloader.js can't run (blocked, failed to download), the
 * cover hides itself after 8 seconds anyway, so the page is never
 * left covered. Normally the script removes it long before that.
 * ------------------------------------------------------------- */
.sf-lights {
	animation: sf-lights-safety 0.3s ease 8s forwards;
}

@keyframes sf-lights-safety {
	to {
		opacity: 0;
		visibility: hidden;
	}
}


/* -------------------------------------------------------------
 * 4. REDUCE MOTION
 * People who ask their device for less motion don't get the
 * loading screen at all.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sf-lights {
		display: none;
	}
}