/* ============================================================
   RANKRIX — SITE LOADER ("Scanline", cinematic cut + Shaders cursor trail)
   Opens like a film: black screen, the curtain parts completely to reveal the
   dimmed galactic background with the Shaders WebGPU cursor-trail canvas
   screened on top (the exact "Cursor Trail Contact" tree — see
   rkx-loader.js; grain switched off). In the frame: title-card eyebrow,
   the full wordmark lit left to right by a neon scan line in exact step
   with the percentage, a graded progress track (ticks and the growth-funnel
   stage labels light up as the fill passes them) and the counter. A slate HUD
   sits at the top and bottom edges (no bars): studio address, London weather
   (daily), a clock in the visitor's IP time zone, decoding status, film
   timecode, and animated WhatsApp / email links. 1px corner brackets lock
   neon at 100 %, when the track discharges as a single anamorphic flare and
   a small magnetic Enter button appears. Enter: the scan line wipes the
   loader away, left to right.
   Tokens match the chrome: neon #4453FF, 1px radii, Ragick / Poppins /
   Inter / JetBrains Mono, --rkx-big ladder on big screens. No circles,
   no grain, no glow on the wordmark.
   The coming-soon page (inc/coming-soon.php) is this same scene held
   open — its extra rules are at the end of the file.
   ============================================================ */
html.rkx-loading { overflow: hidden !important; }
html.rkx-loading .rkx-vbar { opacity: 0 !important; }

.rkx-loader {
	--big: var(--rkx-big, 1);
	--lb: clamp(52px, 9vh, calc(112px * var(--big)));   /* HUD band height (layout only, no bars) */
	--inset: calc(28px * var(--big));                     /* HUD side inset */
	--fin: calc(20px * var(--big));                       /* frame inset from the bars */
	--arm: calc(18px * var(--big));                       /* corner bracket arm */
	--mx: 0px; --my: 0px;                                 /* magnetic button offset */
	--px: 0px; --py: 0px;                                 /* camera drift (core parallax) */
	--flare-y: 50%;
	position: fixed;
	inset: 0;
	z-index: 4000;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.rkx-loader { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }   /* a finger drag feeds the trail instead of panning / pull-to-refresh */

/* ---------- scene layers: galactic image → dim → shader canvas (screen) → vignette → flare ---------- */
.rkx-loader__bg {
	position: absolute; inset: -4%; z-index: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	filter: saturate(1.25);
	transform: scale(1.03);
	animation: rkxLdDrift 40s ease-in-out infinite alternate;
}
@keyframes rkxLdDrift { from { transform: scale(1.03) translate3d(-1%, 0.5%, 0); } to { transform: scale(1.06) translate3d(1%, -0.8%, 0); } }
.rkx-loader__dim { position: absolute; inset: 0; z-index: 1; background: rgba(4, 5, 10, 0.52); }
.rkx-loader__fx {
	position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block;
	mix-blend-mode: screen;                  /* the tree's near-black base gradient disappears; the white trail and ripples stay */
	opacity: 0; transition: opacity 600ms ease;
}
.rkx-loader.has-fx .rkx-loader__fx { opacity: 1; }
.rkx-loader__vignette {                    /* edge falloff built from straight gradients (no radial shapes) */
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 26%),
		linear-gradient(to top,    rgba(0,0,0,0.45), transparent 26%),
		linear-gradient(to right,  rgba(0,0,0,0.45), transparent 22%),
		linear-gradient(to left,   rgba(0,0,0,0.45), transparent 22%);
}
.rkx-loader__flare {                       /* anamorphic streak — fires once, along the track, at 100 % */
	position: absolute; z-index: 3; left: -10%; width: 120%; top: var(--flare-y); height: 2px; margin-top: -1px;
	border-radius: 1px; opacity: 0; pointer-events: none; transform: scaleX(0.15);
	background: linear-gradient(90deg, transparent 0%, rgba(68,83,255,0) 8%, rgba(120,132,255,0.9) 35%, #fff 50%, rgba(120,132,255,0.9) 65%, rgba(68,83,255,0) 92%, transparent 100%);
	box-shadow: 0 0 6px rgba(120,132,255,0.9), 0 0 24px rgba(68,83,255,0.8), 0 0 70px rgba(29,36,202,0.6);
}
.rkx-loader__flare::before {
	content: ''; position: absolute; left: 12%; right: 12%; top: -16px; height: 32px;
	background: linear-gradient(90deg, transparent, rgba(68,83,255,0.35) 30%, rgba(143,155,255,0.6) 50%, rgba(68,83,255,0.35) 70%, transparent);
	filter: blur(10px);
}
.rkx-loader.is-ready .rkx-loader__flare { animation: rkxLdFlare 1300ms cubic-bezier(0.22, 1, 0.36, 1) 1 both; }
@keyframes rkxLdFlare { 0% { opacity: 0; transform: scaleX(0.15); } 18% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.25); } }

/* ---------- curtain: the screen starts black and parts completely to reveal the scene ----------
   two half-screen panels slide off the top and bottom edges (transform-only);
   nothing black remains — the HUD bands (--lb) are just layout, not bars */
.rkx-loader__box { position: absolute; left: 0; right: 0; z-index: 4; height: 50%; background: #000; will-change: transform; pointer-events: none; }
.rkx-loader__box--t { top: 0;    transform: translateY(-100%); animation: rkxLdBoxInT 1200ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.rkx-loader__box--b { bottom: 0; transform: translateY(100%);  animation: rkxLdBoxInB 1200ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
@keyframes rkxLdBoxInT { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes rkxLdBoxInB { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ---------- frame corners (1px brackets) ---------- */
.rkx-loader__frame {
	position: absolute; z-index: 5; pointer-events: none;
	left: var(--inset); right: var(--inset);
	top: calc(var(--lb) + var(--fin)); bottom: calc(var(--lb) + var(--fin));
	transform: translate(calc(var(--px) * -0.35), calc(var(--py) * -0.35));   /* counter-drift: depth against the core */
}
.rkx-loader__corner { position: absolute; width: var(--arm); height: var(--arm); animation: rkxLdCornerIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 650ms both; }
.rkx-loader__corner::before,
.rkx-loader__corner::after { content: ''; position: absolute; background: rgba(255,255,255,0.42); transition: background 500ms ease, box-shadow 500ms ease; }
.rkx-loader__corner::before { width: 100%; height: 1px; }
.rkx-loader__corner::after  { width: 1px; height: 100%; }
.rkx-loader__corner--tl { top: 0; left: 0; transform-origin: top left; }
.rkx-loader__corner--tr { top: 0; right: 0; transform-origin: top right; }
.rkx-loader__corner--bl { bottom: 0; left: 0; transform-origin: bottom left; }
.rkx-loader__corner--br { bottom: 0; right: 0; transform-origin: bottom right; }
.rkx-loader__corner--tl::before, .rkx-loader__corner--tl::after { top: 0; left: 0; }
.rkx-loader__corner--tr::before, .rkx-loader__corner--tr::after { top: 0; right: 0; }
.rkx-loader__corner--bl::before, .rkx-loader__corner--bl::after { bottom: 0; left: 0; }
.rkx-loader__corner--br::before, .rkx-loader__corner--br::after { bottom: 0; right: 0; }
@keyframes rkxLdCornerIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.rkx-loader.is-ready .rkx-loader__corner::before,
.rkx-loader.is-ready .rkx-loader__corner::after { background: #4453FF; box-shadow: 0 0 5px rgba(68,83,255,0.95), 0 0 14px rgba(29,36,202,0.7); }

/* ---------- slate HUD (top + bottom bands, over the scene) ----------
   top: studio address · London weather (daily) · clock in the visitor's IP time zone
   bottom: status line + film timecode in the centre (the corners hold the contact links) */
.rkx-loader__hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.rkx-loader__hud > span {
	position: absolute; height: var(--lb);
	display: inline-flex; align-items: center; gap: calc(10px * var(--big));
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: calc(10.5px * var(--big)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
	color: rgba(255,255,255,0.62); white-space: nowrap;
	animation: rkxLdHudIn 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rkx-loader__hud > span b  { font-weight: 600; color: rgba(255,255,255,0.88); font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.rkx-loader__hud > span i  { font-style: normal; color: rgba(255,255,255,0.42); letter-spacing: 0.12em; }
.rkx-loader__hud > span em { font-style: normal; font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); letter-spacing: 0.08em; color: rgba(255,255,255,0.38); font-variant-numeric: tabular-nums; margin-left: calc(6px * var(--big)); }
.rkx-loader__hud-tl { top: 0; left: var(--inset); color: rgba(255,255,255,0.8); letter-spacing: 0.2em; animation-delay: 900ms; }                 /* address, one line */
.rkx-loader__hud-tc { top: 0; left: 0; right: 0; justify-content: center; animation-delay: 960ms; }                                             /* London weather */
.rkx-loader__hud-tc i:first-child { color: rgba(255,255,255,0.66); }
.rkx-loader__hud-tc b:empty, .rkx-loader__hud-tc i:empty { display: none; }
.rkx-loader__hud-tr { top: 0; right: var(--inset); flex-direction: column; align-items: flex-end; justify-content: center; gap: calc(4px * var(--big)); animation-delay: 1020ms; }   /* London clock, 12-hour AM/PM */
.rkx-loader__hud-tr i { font-size: 0.9em; }
.rkx-loader__hud-bc { bottom: 0; left: 0; right: 0; justify-content: center; color: rgba(255,255,255,0.78); animation-delay: 1080ms; }          /* status + timecode */
.rkx-loader__hud-bc #rkxLoaderStatus { font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); letter-spacing: 0.1em; color: rgba(255,255,255,0.85); }
@keyframes rkxLdHudIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- contact links (bottom corners): WhatsApp chat + email, animated on hover ---------- */
.rkx-loader__links { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.rkx-loader__cta {
	position: absolute; bottom: 0; height: var(--lb); pointer-events: auto;
	display: inline-flex; align-items: center; gap: calc(9px * var(--big));
	color: rgba(255,255,255,0.74); text-decoration: none; -webkit-tap-highlight-color: transparent;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: calc(10.5px * var(--big)); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
	transition: color 260ms ease;
	animation: rkxLdHudIn 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rkx-loader__cta--wa   { left: var(--inset); animation-delay: 1080ms; }
.rkx-loader__cta--mail { right: var(--inset); animation-delay: 1140ms; }
.rkx-loader__cta--mail span { text-transform: none; letter-spacing: 0.06em; font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); font-weight: 500; }
.rkx-loader__cta svg {
	width: calc(24px * var(--big)); height: calc(24px * var(--big)); flex: none; overflow: visible;   /* WhatsApp / email icons: prominent on every screen */
	color: rgba(255,255,255,0.92);                                                                  /* the icon reads brighter than its label */
	fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
	transition: color 260ms ease, filter 260ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rkx-loader__cta svg * { transform-box: fill-box; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease; }
.rkx-loader__cta:hover, .rkx-loader__cta:focus-visible { color: #fff; outline: none; }
.rkx-loader__cta:hover svg, .rkx-loader__cta:focus-visible svg { color: #7D89FF; transform: translateY(-1px); filter: drop-shadow(0 0 5px rgba(68,83,255,0.95)) drop-shadow(0 0 12px rgba(29,36,202,0.7)); }
.rkx-loader__cta:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
/* WhatsApp: the handset rings inside a square-cornered bubble (no round marks) */
.rkx-loader__cta--wa .hs { transform-origin: 50% 50%; }
.rkx-loader__cta--wa:hover .hs, .rkx-loader__cta--wa:focus-visible .hs { animation: rkxLdRing 700ms ease-in-out; }
@keyframes rkxLdRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
/* email: the flap folds open and the letter rises out */
.rkx-loader__cta--mail .flap   { transform-origin: 50% 0; }
.rkx-loader__cta--mail .letter { opacity: 0; transform: translateY(2px); }
.rkx-loader__cta--mail:hover .flap,   .rkx-loader__cta--mail:focus-visible .flap   { transform: scaleY(-1); }
.rkx-loader__cta--mail:hover .letter, .rkx-loader__cta--mail:focus-visible .letter { opacity: 1; transform: translateY(-6px); }
.rkx-loader__dot {                         /* a 1px-radius square, not a dot */
	width: 6px; height: 6px; border-radius: 1px;
	background: #4453FF; box-shadow: 0 0 8px rgba(68,83,255,0.9);
	animation: rkxLdBlink 1.4s ease-in-out infinite;
}
.rkx-loader.is-ready .rkx-loader__dot { background: #3BD682; box-shadow: 0 0 10px #3BD682; animation: none; }
@keyframes rkxLdBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- core: eyebrow + wordmark + track + counter, one progress value ----------
   pointer-events off so the cursor trail paints straight through it;
   only the Enter button takes the pointer (once it is ready) */
.rkx-loader__core {
	position: absolute; left: 50%; top: 50%; z-index: 7;
	width: calc(min(58vw, 440px) * var(--big));
	transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
	display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vmin, calc(24px * var(--big)));
	pointer-events: none;
}
.rkx-loader__eyebrow {
	margin: 0 0 calc(2px * var(--big)); text-align: center;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: calc(10px * var(--big)); font-weight: 600; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; line-height: 1.5;
	color: rgba(255,255,255,0.62);
	animation: rkxLdEyebrow 1200ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}
@keyframes rkxLdEyebrow { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; letter-spacing: 0.28em; } }
.rkx-loader__logo,
.rkx-loader__track,
.rkx-loader__num { animation: rkxLdCoreIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both; }
@keyframes rkxLdCoreIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.rkx-loader__logo { position: relative; width: 100%; aspect-ratio: 2983 / 494; }
.rkx-loader__logo-ghost,
.rkx-loader__logo-lit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rkx-loader__logo-ghost { opacity: 0.10; }
.rkx-loader__logo-lit {
	clip-path: inset(0 100% 0 0);            /* JS: inset(0 (1-progress) 0 0) — same value that drives the number, bar and ticks */
	filter: none;                            /* plain wordmark — no glow / highlight */
}
.rkx-loader__scan {
	position: absolute; top: -22%; bottom: -22%; left: 0; width: 2px; border-radius: 1px;
	background: #4453FF;
	box-shadow: 0 0 6px rgba(68, 83, 255, 1), 0 0 18px rgba(29, 36, 202, 0.9), 0 0 40px rgba(29, 36, 202, 0.55);
	transform: translateX(var(--scan, 0px));
}
.rkx-loader.is-ready .rkx-loader__scan { opacity: 0; transition: opacity 500ms ease; }

/* graded track: bar + tick ruler (lit copy clipped by progress) + scale */
.rkx-loader__track { width: 100%; display: flex; flex-direction: column; gap: calc(5px * var(--big)); }
.rkx-loader__bar {
	width: 100%; height: 2px; border-radius: 1px; overflow: hidden;
	background: rgba(68, 83, 255, 0.14);
	box-shadow: inset 0 0 0 1px rgba(68, 83, 255, 0.2);
}
.rkx-loader__bar-fill {
	display: block; height: 100%; width: 0%; border-radius: 1px;
	background: #4453FF;
	box-shadow: 0 0 4px rgba(68, 83, 255, 0.9), 0 0 12px rgba(29, 36, 202, 0.75), 0 0 24px rgba(29, 36, 202, 0.45);
}
.rkx-loader__ticks {
	position: relative; height: calc(8px * var(--big));
	background-image: linear-gradient(90deg, rgba(255,255,255,0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
	background-size: calc(100% / var(--segs, 4)) 100%, 5% 50%;
	background-repeat: repeat-x; background-position: 0 0, 0 0;
}
.rkx-loader__ticks::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.45); }   /* the 100 % tick */
.rkx-loader__ticks-lit {
	position: absolute; inset: 0;
	background-image: linear-gradient(90deg, #6D7BFF 1px, transparent 1px), linear-gradient(90deg, rgba(109,123,255,0.75) 1px, transparent 1px);
	background-size: calc(100% / var(--segs, 4)) 100%, 5% 50%;
	background-repeat: repeat-x; background-position: 0 0, 0 0;
	clip-path: inset(0 100% 0 0);            /* JS: same inset as the wordmark */
	filter: drop-shadow(0 0 3px rgba(68,83,255,0.85));
}
.rkx-loader__ticks-lit::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #6D7BFF; }
.rkx-loader__scale {
	display: flex; justify-content: space-between;
	font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
	font-size: calc(8.5px * var(--big)); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,0.36);
}
.rkx-loader__scale span { flex: 0 0 0; width: 0; min-width: 0; display: flex; justify-content: center; white-space: nowrap; overflow: visible; transition: color 320ms ease, text-shadow 320ms ease; }
.rkx-loader__scale span.is-on { color: #fff; text-shadow: 0 0 8px rgba(68,83,255,0.85); }   /* stages light up as the load passes them */
.rkx-loader__scale span:first-child { justify-content: flex-start; }
.rkx-loader__scale span:last-child  { justify-content: flex-end; }

.rkx-loader__num {
	display: flex; align-items: baseline; gap: 5px;
	font-family: 'Ragick', 'Poppins', sans-serif;
	font-size: calc(clamp(26px, 4.6vmin, 46px) * var(--big)); font-weight: 400; line-height: 0.9; letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: #fff; text-shadow: 0 0 18px rgba(68, 83, 255, 0.5);
}
.rkx-loader__num small { font-size: 0.34em; color: rgba(255,255,255,0.55); font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.1em; }

/* ---------- Enter (small, neon, magnetic) ---------- */
.rkx-loader__enter {
	display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--big));
	height: calc(34px * var(--big)); min-width: calc(128px * var(--big)); padding: 0 calc(16px * var(--big));
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: calc(10.5px * var(--big)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
	background: rgba(29, 36, 202, 0.34);
	border: 1px solid #4453FF; border-radius: 1px;
	box-shadow: 0 0 4px rgba(68, 83, 255, 0.75), 0 0 14px rgba(29, 36, 202, 0.65), 0 0 32px rgba(29, 36, 202, 0.40), inset 0 0 10px rgba(68, 83, 255, 0.22);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
	cursor: pointer;
	opacity: 0; pointer-events: none;
	transform: translate(var(--mx), calc(10px + var(--my))) scale(0.9);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms, box-shadow 240ms;
	position: relative; overflow: hidden;
}
.rkx-loader__enter-txt { margin-right: -0.18em; }   /* balance the tracking */
.rkx-loader__enter::before {
	content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%, transparent 100%);
	transform: translate3d(-100%, 0, 0); transition: transform 820ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none;
}
.rkx-loader__enter:hover::before { transform: translate3d(100%, 0, 0); }
.rkx-loader__enter:hover,
.rkx-loader__enter:focus-visible { background: rgba(29, 36, 202, 0.52); border-color: #5B6BFF; box-shadow: 0 0 6px rgba(91,107,255,0.95), 0 0 20px rgba(29,36,202,0.85), 0 0 48px rgba(29,36,202,0.55), inset 0 0 14px rgba(68,83,255,0.35); outline: none; }
.rkx-loader__enter > * { position: relative; z-index: 1; }
.rkx-loader__enter svg { width: calc(12px * var(--big)); height: calc(12px * var(--big)); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.rkx-loader__enter:hover svg { transform: translateX(4px); }
.rkx-loader.is-ready .rkx-loader__enter {
	opacity: 1; pointer-events: auto;
	transform: translate(var(--mx), var(--my)) scale(1);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 500ms, transform 120ms linear, background 240ms, box-shadow 240ms;   /* arrives after the flare */
}
.rkx-loader.is-ready .rkx-loader__enter:active { transform: translate(var(--mx), var(--my)) scale(0.97); }

/* ---------- opening: curtain out + scan-line wipe, left to right ---------- */
.rkx-loader__wipe {
	position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 9; border-radius: 1px;
	background: #4453FF;
	box-shadow: 0 0 8px rgba(68, 83, 255, 1), 0 0 24px rgba(29, 36, 202, 0.9), 0 0 60px rgba(29, 36, 202, 0.6);
	opacity: 0; pointer-events: none;
}
.rkx-loader.is-opening { animation: rkxLdWipe 820ms cubic-bezier(0.76, 0, 0.24, 1) forwards; pointer-events: none; }
.rkx-loader.is-opening .rkx-loader__wipe   { opacity: 1; animation: rkxLdWipeLine 820ms cubic-bezier(0.76, 0, 0.24, 1) forwards; }
.rkx-loader.is-opening .rkx-loader__core   { animation: rkxLdCoreOut 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.rkx-loader.is-opening .rkx-loader__hud,
.rkx-loader.is-opening .rkx-loader__links,
.rkx-loader.is-opening .rkx-loader__frame  { animation: rkxLdHudOut 400ms ease forwards; pointer-events: none; }
.rkx-loader.is-opening .rkx-loader__hud > span,
.rkx-loader.is-opening .rkx-loader__cta,
.rkx-loader.is-opening .rkx-loader__corner { animation: none; }
@keyframes rkxLdWipe     { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes rkxLdWipeLine { from { left: 0; } to { left: 100%; } }
@keyframes rkxLdCoreOut  { to { opacity: 0; transform: translate(-50%, -50%) translateX(24px); } }
@keyframes rkxLdHudOut   { to { opacity: 0; } }

/* ---------- breakpoints ---------- */
@media (max-width: 860px) {                 /* tablets + large phones landscape: the top band stacks (address + clock, weather under the address) so nothing overlaps; the timecode goes */
	.rkx-loader { --inset: 20px; }
	.rkx-loader__hud > span { font-size: 9.5px; letter-spacing: 0.14em; gap: 8px; }
	.rkx-loader__hud > span em { display: none; }
	.rkx-loader__hud > .rkx-loader__hud-tl { height: auto; top: 16px; letter-spacing: 0.16em; }
	.rkx-loader__hud > .rkx-loader__hud-tc { height: auto; top: 34px; left: var(--inset); right: auto; justify-content: flex-start; }
	.rkx-loader__hud > .rkx-loader__hud-tr { height: auto; top: 16px; gap: 3px; }
	.rkx-loader__cta { font-size: 9.5px; letter-spacing: 0.12em; gap: 8px; }
	/* bottom band: the status line lives between the two corner links and can never reach them (long messages get an ellipsis) */
	.rkx-loader__hud > .rkx-loader__hud-bc { left: calc(var(--inset) + 168px); right: calc(var(--inset) + 168px); overflow: hidden; }
	.rkx-loader__hud > .rkx-loader__hud-bc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) {
	.rkx-loader { --lb: clamp(46px, 8vh, 64px); --inset: 16px; --fin: 14px; --arm: 14px; }
	.rkx-loader__hud > span { font-size: 9px; letter-spacing: 0.12em; gap: 7px; }
	.rkx-loader__hud > span em { display: none; }                                   /* timecode goes; status stays */
	/* top band stacks: address + clock on row 1, weather under the address */
	.rkx-loader__hud > .rkx-loader__hud-tl { height: auto; top: 14px; letter-spacing: 0.14em; }
	.rkx-loader__hud > .rkx-loader__hud-tc { height: auto; top: 30px; left: var(--inset); right: auto; justify-content: flex-start; }
	.rkx-loader__hud > .rkx-loader__hud-tr { height: auto; top: 14px; gap: 3px; }
	.rkx-loader__cta { font-size: 9px; letter-spacing: 0.12em; gap: 7px; }
	.rkx-loader__core { width: 66vw; gap: clamp(12px, 2vmin, 18px); }
	.rkx-loader__eyebrow { font-size: 9px; letter-spacing: 0.22em; text-indent: 0.22em; }
	@keyframes rkxLdEyebrow { from { opacity: 0; letter-spacing: 0.5em; } to { opacity: 1; letter-spacing: 0.22em; } }
}
@media (max-width: 480px) {
	.rkx-loader__cta span { display: none; }                                         /* icons only in the bottom corners */
	.rkx-loader__cta svg { width: 26px; height: 26px; }
	.rkx-loader__hud-tc i:last-child { display: none; }                              /* "London 18°C" without the condition text */
}
@media (max-height: 480px) {               /* landscape phones: tighter frame */
	.rkx-loader { --lb: 38px; --fin: 10px; }
	.rkx-loader__core { gap: 10px; width: min(50vw, 360px); }
	.rkx-loader__eyebrow { display: none; }
	.rkx-loader__num { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.rkx-loader__bg, .rkx-loader__dot, .rkx-loader__box, .rkx-loader__corner, .rkx-loader__hud > span, .rkx-loader__cta, .rkx-loader__cta--wa .hs,
	.rkx-loader__eyebrow, .rkx-loader__logo, .rkx-loader__track, .rkx-loader__num, .rkx-loader__flare { animation: none !important; }
	.rkx-loader.is-opening { animation: rkxLdFade 300ms ease forwards; }
	.rkx-loader.is-opening .rkx-loader__wipe, .rkx-loader.is-opening .rkx-loader__core, .rkx-loader.is-opening .rkx-loader__hud,
	.rkx-loader.is-opening .rkx-loader__links, .rkx-loader.is-opening .rkx-loader__frame { animation: none !important; }
	@keyframes rkxLdFade { to { opacity: 0; } }
}

/* ============================================================
   COMING SOON PAGE — the loader's scene, held open
   (inc/coming-soon.php + inc/coming-soon-template.php, JS mode
   "coming"). Same curtain, HUD, brackets and wordmark reveal; the
   graded track becomes the launch timeline; instead of the counter
   and Enter: a headline, the launch countdown and a notify-me form
   whose button is the Enter style. Same tokens, no circles, no
   glow on the wordmark.
   ============================================================ */
.rkx-loader--coming .rkx-loader__core { width: calc(min(62vw, 520px) * var(--big)); gap: clamp(12px, 2.2vmin, calc(22px * var(--big))); }
.rkx-loader--coming .rkx-loader__logo { width: calc(min(58vw, 440px) * var(--big)); max-width: 100%; }   /* the wordmark keeps the loader's size */
.rkx-loader--coming .rkx-loader__track { width: calc(min(58vw, 440px) * var(--big)); max-width: 100%; }
.rkx-loader--coming .rkx-loader__scale span { flex: 0 1 auto; width: auto; }                              /* two end labels: announced · launch */

/* headline block: fades in item by item once the wordmark is lit (after the flare) */
.rkx-loader__cs { display: flex; flex-direction: column; align-items: center; width: 100%; gap: clamp(12px, 2.2vmin, calc(20px * var(--big))); text-align: center; }
.rkx-loader__cs > * {
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 600ms;
}
.rkx-loader.is-ready .rkx-loader__cs > * { opacity: 1; visibility: visible; transform: translateY(0); }
.rkx-loader.is-ready .rkx-loader__cs > :nth-child(1) { transition-delay: 450ms; }
.rkx-loader.is-ready .rkx-loader__cs > :nth-child(2) { transition-delay: 560ms; }
.rkx-loader.is-ready .rkx-loader__cs > :nth-child(3) { transition-delay: 670ms; }
.rkx-loader.is-ready .rkx-loader__cs > :nth-child(4) { transition-delay: 780ms; }

.rkx-loader__cs-title {
	margin: 0;
	font-family: var(--rkx-cs-display, Sora, Poppins, sans-serif);            /* Settings → Coming soon → Headline font */
	font-size: calc(clamp(30px, 5.2vmin, 54px) * var(--big)); font-weight: 600; line-height: 1.02; letter-spacing: -0.015em;
	color: #fff; text-shadow: 0 0 18px rgba(68, 83, 255, 0.5);                 /* same halo as the loader's counter */
}
.rkx-loader__cs-text {
	margin: 0; max-width: 46ch;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: calc(13px * var(--big)); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,0.66);
}

/* countdown: digits in the headline face, Poppins labels, 1px rules between the cells */
.rkx-loader__count { display: flex; align-items: stretch; }
.rkx-loader__count > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(7px * var(--big)); padding: 0 calc(18px * var(--big)); }
.rkx-loader__count > span + span::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,0.16); }
.rkx-loader__count b {
	font-family: var(--rkx-cs-display, Sora, Poppins, sans-serif);
	font-size: calc(clamp(26px, 4.6vmin, 44px) * var(--big)); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; min-width: 2ch; text-align: center;
	color: #fff; text-shadow: 0 0 18px rgba(68, 83, 255, 0.5);
}
.rkx-loader__count b.is-tick { animation: rkxLdTick 420ms ease-out; }
@keyframes rkxLdTick { 0% { color: #9AA4FF; text-shadow: 0 0 10px rgba(120,132,255,1), 0 0 26px rgba(68,83,255,0.9); } 100% { color: #fff; text-shadow: 0 0 18px rgba(68,83,255,0.5); } }
.rkx-loader__count i { font-style: normal; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: calc(9px * var(--big)); font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.rkx-loader.is-launched .rkx-loader__count b { color: #3BD682; text-shadow: 0 0 14px rgba(59,214,130,0.6); }

/* notify-me form: mono email field + the Enter-style button */
.rkx-loader__notify { position: relative; display: flex; align-items: stretch; gap: calc(8px * var(--big)); width: 100%; max-width: calc(420px * var(--big)); pointer-events: auto; }
.rkx-loader__notify input[type="email"] {
	flex: 1 1 auto; min-width: 0; height: calc(34px * var(--big)); padding: 0 calc(12px * var(--big)); margin: 0;
	background: rgba(4, 5, 10, 0.45); border: 1px solid rgba(255,255,255,0.18); border-radius: 1px; color: #fff;
	font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); font-size: calc(12px * var(--big)); font-weight: 500; letter-spacing: 0.04em; line-height: 1;
	outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.rkx-loader__notify input[type="email"]::placeholder { color: rgba(255,255,255,0.34); }
.rkx-loader__notify input[type="email"]:focus-visible,
.rkx-loader__notify input[type="email"]:focus { border-color: #4453FF; background: rgba(4, 5, 10, 0.6); box-shadow: 0 0 0 1px rgba(68,83,255,0.4), 0 0 12px rgba(29,36,202,0.5); }
.rkx-loader__notify .rkx-loader__enter { flex: none; min-width: calc(112px * var(--big)); }
.rkx-loader__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }                /* honeypot */
.rkx-loader--coming .rkx-loader__enter,
.rkx-loader--coming.is-ready .rkx-loader__enter {                                                          /* the button arrives with its form, not on its own */
	opacity: 1; pointer-events: auto; transform: translate(var(--mx), var(--my)) scale(1);
	transition: transform 120ms linear, background 240ms, box-shadow 240ms;
}
.rkx-loader--coming .rkx-loader__enter:active { transform: translate(var(--mx), var(--my)) scale(0.97); }
.rkx-loader__notify.is-busy .rkx-loader__enter { opacity: 0.55; pointer-events: none; }
.rkx-loader__notify.is-error { animation: rkxLdShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.rkx-loader__notify.is-error input[type="email"] { border-color: rgba(255, 96, 96, 0.9); box-shadow: 0 0 0 1px rgba(255,96,96,0.35), 0 0 12px rgba(255,64,64,0.35); }
@keyframes rkxLdShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.rkx-loader__cs-ok {                                                                                      /* confirmation replaces the field + button */
	display: none; margin: 0; align-items: center; gap: calc(9px * var(--big));
	min-height: calc(34px * var(--big)); padding: calc(6px * var(--big)) calc(14px * var(--big));
	border: 1px solid rgba(59,214,130,0.55); border-radius: 1px; background: rgba(59,214,130,0.08); box-shadow: 0 0 12px rgba(59,214,130,0.25);
	font-family: var(--rkx-font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace); font-size: calc(12px * var(--big)); font-weight: 500; letter-spacing: 0.04em; line-height: 1.4;
	color: #fff; text-align: left;
}
.rkx-loader__cs-ok::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 1px; background: #3BD682; box-shadow: 0 0 8px #3BD682; }
.rkx-loader__notify.is-done { justify-content: center; }
.rkx-loader__notify.is-done > :not(.rkx-loader__cs-ok) { display: none; }
.rkx-loader__notify.is-done .rkx-loader__cs-ok { display: inline-flex; }

/* status dot: keeps blinking neon while we count down (green means launched) */
.rkx-loader--coming.is-ready .rkx-loader__dot { background: #4453FF; box-shadow: 0 0 8px rgba(68,83,255,0.9); animation: rkxLdBlink 1.4s ease-in-out infinite; }
.rkx-loader--coming.is-launched .rkx-loader__dot { background: #3BD682; box-shadow: 0 0 10px #3BD682; animation: none; }

@media (max-width: 640px) {
	.rkx-loader--coming .rkx-loader__core { width: 82vw; gap: clamp(10px, 1.8vmin, 16px); }
	.rkx-loader--coming .rkx-loader__logo, .rkx-loader--coming .rkx-loader__track { width: 66vw; }
	.rkx-loader__cs { gap: 12px; }
	.rkx-loader__cs-title { font-size: clamp(26px, 8vw, 34px); }
	.rkx-loader__cs-text { font-size: 12.5px; }
	.rkx-loader__count > span { padding: 0 12px; gap: 5px; }
	.rkx-loader__count b { font-size: clamp(22px, 7vw, 30px); }
	.rkx-loader__count i { font-size: 8px; letter-spacing: 0.16em; text-indent: 0.16em; }
	.rkx-loader__notify input[type="email"] { font-size: 16px; }                                          /* no iOS zoom on focus */
}
@media (max-width: 480px) {
	.rkx-loader__notify { flex-direction: column; }
	.rkx-loader__notify .rkx-loader__enter { width: 100%; }
}
@media (max-height: 640px) {
	.rkx-loader--coming .rkx-loader__core { gap: 10px; }
	.rkx-loader__cs { gap: 10px; }
	.rkx-loader--coming .rkx-loader__eyebrow, .rkx-loader__cs-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rkx-loader__cs > * { transition: none !important; }
	.rkx-loader__count b.is-tick, .rkx-loader__notify.is-error { animation: none !important; }
}