/* ============================================================
   RANKRIX — SITE CSS
   Styles for the new custom pages go here. The header, footer,
   background and blur layer are already styled by rkx-header.css,
   rkx-footer.css and rkx-chrome.css (loaded before this file).
   ============================================================ */

/* Page content (block editor or Elementor) ends above the fixed footer pill;
   the header offset is already handled by rkx-chrome.css. */
.rkx-main { padding-bottom: clamp(110px, 14vh, 170px); }

/* Cinematic entrance after the loader (rkx-site.js): screen-blended exposure flash, and no
   horizontal scrollbar while the page scales into place. */
.rkx-flash { position: fixed; inset: 0; z-index: 3999; pointer-events: none; background: #F3EFE6; mix-blend-mode: screen; opacity: 0; }
html.rkx-entering, html.rkx-entering body { overflow-x: hidden; }

/* ---------- back to top (Settings, General: Behaviour; printed by functions.php) ----------
   The mirror of the music control: square with 1px corners, in the margin on the right, above the footer pill,
   so it never sits over the page or the pill. When the music control is on the right too, this stacks above it.
   Its script shows it after 800px of scrolling. */
.rkx-back-top {
	position: fixed; z-index: 56;
	right: max(10px, calc((100% - var(--rkx-w-def, 95%)) / 4 - 24px));
	bottom: calc(var(--rkxf-bot, 10px) + var(--rkxf-h, 50px) + 12px);
	width: 48px; height: 46px; padding: 0; border-radius: 1px;
	display: grid; place-items: center; cursor: pointer;
	background: rgba(10, 11, 16, 0.72); color: #AEB8FF;
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid rgba(243, 239, 230, 0.16);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	font: 600 18px/1 Inter, system-ui, sans-serif;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.rkx-back-top.is-shown { opacity: 1; pointer-events: auto; }
.rkx-back-top:hover { background: rgba(31, 57, 194, 0.5); color: #F3EFE6; }
.rkx-back-top:focus-visible { outline: 2px solid #7B8BFF; outline-offset: 3px; }
.rkx-music--right ~ .rkx-back-top { bottom: calc(var(--rkxf-bot, 10px) + var(--rkxf-h, 50px) + 12px + 46px + 10px); }
@media (prefers-reduced-motion: reduce) { .rkx-back-top { transition: none; } }
@media print { .rkx-back-top { display: none; } }

/* ---------- cursor trail on the site's pages (assets/rkx-trail.js, off by default since 2.6.3): the loader's Shaders scene, above the veil, under the content ---------- */
.rkx-bg__fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; mix-blend-mode: screen; opacity: 0; transition: opacity 700ms ease; pointer-events: none; }
.rkx-bg.rkx-has-fx .rkx-bg__fx { opacity: 1; }

/* ---------- footer glass = header glass ----------
   All four chrome surfaces share one glass recipe (blur 28, saturate 1.7), and glass shows whatever is behind it.
   Two things kept the footer from looking like the header:

   1. The footer never blurred anything. The locked rkx-chrome.css gives .rkx-footer-wrap `will-change: opacity`,
      and that makes the wrap a "backdrop root": the pill's and the panel's backdrop-filter can then only see what
      is inside the wrap, never the page. So the open footer panel showed the page through it pin-sharp while the
      header menu frosted it. Dropping the hint restores the blur. (The fade-in still works; GSAP animates the
      opacity either way.)

   2. Opacity below 1 is a backdrop root too, and the locked footer script shows and hides the footer by
      fading the whole wrap. So on every fade the glass showed the page sharp, then snapped to frosted at the
      end. The wrap is held at 1 here and the pill fades instead, with the script's own timings (0.55 s
      ease-out in, 0.4 s ease-in out), so the glass fades in and out already frosted. Hidden stays
      !important so the page entrance, which fades the pill in by an inline style, cannot show a footer
      that should still be hidden. Pointer events are untouched: the script still switches them on the wrap.

   3. The header and the footer sit over different parts of the background: the header over the bright top of
      the galaxy, the footer over the near-black foot of the veil, and the header menu also dims what is under it
      with its 55% overlay. rkx-site.js puts a live copy of the band behind the header pill (the same image and
      veil, drifting in step) under the footer pill, and, while the footer panel is open, a copy of the band behind
      the header panel under the footer panel, both flipped top to bottom, inside the background layer so they are
      beneath the page content. While the footer panel is open a shade with the overlay's darkness sits above the
      page, cut to the footer pill and panel only. The footer glass then frosts the page over the same galaxy, dimmed
      the same way, as the header does, at every screen size and with any background image. The pill's copy fades
      with the pill; the panel's copy and the shades take the panel's own opacity frame by frame. */
html .rkx-footer-wrap { will-change: auto !important; opacity: 1 !important; }
.rkx-footer-wrap .rkx-foot-pill {
	transition: opacity 550ms cubic-bezier(0.215, 0.61, 0.355, 1),
	            border-top-left-radius var(--rkxf-fast, 280ms) var(--rkxf-ease, ease),
	            border-top-right-radius var(--rkxf-fast, 280ms) var(--rkxf-ease, ease),
	            border-top-color var(--rkxf-fast, 280ms) var(--rkxf-ease, ease);
}
.rkx-footer-wrap:not(.is-visible) .rkx-foot-pill {
	opacity: 0 !important;
	transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53), var(--rkxf-ease, ease), var(--rkxf-ease, ease), var(--rkxf-ease, ease);
	transition-duration: 400ms, var(--rkxf-fast, 280ms), var(--rkxf-fast, 280ms), var(--rkxf-fast, 280ms);
}
.rkx-bg__mirror {
	position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden;
	/* Above the page, so the footer glass frosts this copy and not the dark page underneath: that is
	   what makes the footer pill the same colour as the header pill. Under the shades (899), the
	   footer (998) and the header (1000). It is cut to the glass it feeds, so it is never seen. */
	z-index: 898;
	pointer-events: none; opacity: 0; visibility: hidden;
	transition: opacity 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53), visibility 0s linear 400ms;
}
.rkx-bg__mirror.is-on {
	opacity: 1; visibility: visible;
	transition: opacity 550ms cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s;
}
.rkx-bg__mirror-scene {
	position: absolute; left: 0; top: 0;
	transform-origin: 0 0;               /* rkx-site.js flips and fits it from the top-left corner */
	transition: opacity 550ms cubic-bezier(0.215, 0.61, 0.355, 1);   /* = the pill's fade in; off while it follows the entrance */
}
.rkx-bg__mirror--panel { transition: none; }   /* follows the footer panel's own fade, frame by frame */
.rkx-foot-shade {
	position: fixed; left: 0; top: 0; width: 0; height: 0;
	z-index: 899;                        /* above the page; under the header's overlay (900), the footer (998) and the header (1000) */
	background: rgba(0, 0, 0, 0.55);     /* the header overlay's darkness; rkx-site.js sets the same value inline */
	pointer-events: none; opacity: 0; visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.rkx-footer-wrap .rkx-foot-pill, .rkx-footer-wrap:not(.is-visible) .rkx-foot-pill, .rkx-bg__mirror, .rkx-bg__mirror.is-on, .rkx-bg__mirror-scene { transition: none !important; }
}