/* ============================================================
   RANKRIX — SITE LOADER
   Full-viewport intro. Galactic photo bg + blur veil.
   Press-and-hold to enter.
   ============================================================ */

.rkxl {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #03040a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: rgba(255, 255, 255, 0.86);
    will-change: opacity, transform;
}
body.rkxl-locked { overflow: hidden; }

/* === Background image (Galactic) === */
.rkxl::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/Galactic.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #03040a;
    z-index: 0;
    animation: rkxl-bg-in 1400ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes rkxl-bg-in {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}

/* === Blur + tint veil (the "transparent blur layer" requested) === */
.rkxl__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(3, 4, 10, 0.42);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    pointer-events: none;
    animation: rkxl-veil-in 1000ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards;
}
@keyframes rkxl-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* === Tiny stars sparkle (preserved) === */
.rkxl__stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,0.78), transparent),
        radial-gradient(1px 1px at 76% 14%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.4px 1.4px at 42% 58%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 8% 78%, rgba(255,255,255,0.65), transparent);
    opacity: 0.38;
    pointer-events: none;
    animation: rkxl-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes rkxl-twinkle { from { opacity: 0.28; } to { opacity: 0.5; } }

/* === Film grain === */
.rkxl__grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none;
}

/* === HUD corner brackets + minimal bottom copyright === */
.rkxl__hud {
    position: absolute;
    inset: clamp(12px, 2.4vw, 28px);
    z-index: 4;
    pointer-events: none;
}
.rkxl__corner {
    position: absolute;
    width: clamp(18px, 2vw, 32px);
    height: clamp(18px, 2vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: border-color 600ms ease;
}
.rkxl__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.rkxl__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.rkxl__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.rkxl__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

.rkxl__hud-bot {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
    font-size: clamp(9px, 0.8vw, 11px);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    animation: rkxl-hud-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 600ms backwards;
}
@keyframes rkxl-hud-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* === Main content stack === */
.rkxl__stack {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 32px);
    padding: clamp(16px, 4vw, 32px);
    max-width: 92vw;
    width: 100%;
}

/* === Eyebrow (white text, green dot) === */
.rkxl__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
    font-size: clamp(10px, 0.95vw, 12px);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0;
    animation: rkxl-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 350ms forwards;
}
@keyframes rkxl-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rkxl__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80, 0 0 4px rgba(74, 222, 128, 0.7);
    animation: rkxl-eyebrow-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    flex-shrink: 0;
}
@keyframes rkxl-eyebrow-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

/* === Logo === */
.rkxl__logo-wrap {
    position: relative;
    display: inline-block;
    width: clamp(180px, 38vw, 520px);
    aspect-ratio: 4 / 1;
}
.rkxl__logo {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.rkxl__logo path {
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rkxl-draw 1700ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
}
@keyframes rkxl-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
.rkxl__logo g[data-i="0"] path { animation-delay:  900ms; }
.rkxl__logo g[data-i="1"] path { animation-delay: 1000ms; }
.rkxl__logo g[data-i="2"] path { animation-delay: 1100ms; }
.rkxl__logo g[data-i="3"] path { animation-delay: 1200ms; }
.rkxl__logo g[data-i="4"] path { animation-delay: 1300ms; }
.rkxl__logo g[data-i="5"] path { animation-delay: 1400ms; }
.rkxl__logo g[data-i="6"] path { animation-delay: 1500ms; }

.rkxl__logo.is-filled path {
    fill: #ffffff;
    transition: fill 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rkxl__logo-sheen {
    position: absolute;
    top: 0; bottom: 0;
    left: -25%; width: 40%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transform: skewX(-12deg);
}
.rkxl__logo-wrap.is-sheen .rkxl__logo-sheen {
    animation: rkxl-sheen 950ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes rkxl-sheen {
    0%   { opacity: 0; transform: translateX(0) skewX(-12deg); }
    20%  { opacity: 0.9; }
    100% { opacity: 0; transform: translateX(280%) skewX(-12deg); }
}

/* === Progress / status row === */
.rkxl__status {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 16px);
    width: 100%;
    max-width: clamp(260px, 36vw, 420px);
    opacity: 0;
    animation: rkxl-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}
.rkxl__status-label {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.48);
    text-transform: uppercase;
    white-space: nowrap;
}
.rkxl__bar {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    position: relative;
    border-radius: 1px;
}
.rkxl__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0057ff 0%, #4dabff 100%);
    box-shadow: 0 0 10px rgba(0, 87, 255, 0.55);
    will-change: width;
}
.rkxl__pct {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.82);
    font-variant-numeric: tabular-nums;
    min-width: 3.5ch;
    text-align: right;
}

/* === System log === */
.rkxl__log {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(10px, 0.9vw, 12px);
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    animation: rkxl-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 1.2em;
}
.rkxl__log::before { content: '› '; color: #4dabff; margin-right: 2px; }
.rkxl__log .rkxl__caret {
    display: inline-block;
    width: 6px;
    height: 1em;
    background: rgba(0, 87, 255, 0.85);
    margin-left: 1px;
    animation: rkxl-blink 1s steps(2) infinite;
}
@keyframes rkxl-blink { 50% { opacity: 0; } }

/* === Hold-to-Enter button (compact) === */
.rkxl__enter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(0, 87, 255, 0.10);
    border: 1px solid rgba(0, 87, 255, 0.45);
    color: #ffffff;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(11px, 0.9vw, 12px);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    transition:
        background 280ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.rkxl__enter.is-ready {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: rkxl-enter-in 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rkxl-enter-in {
    0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
    60%  { transform: translateY(-2px) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rkxl__enter:hover {
    background: rgba(0, 87, 255, 0.20);
    border-color: rgba(0, 87, 255, 0.7);
    box-shadow: 0 0 24px rgba(0, 87, 255, 0.35);
}
.rkxl__enter:active { transform: scale(0.97); }
.rkxl__enter:focus-visible {
    outline: 2px solid rgba(0, 87, 255, 0.8);
    outline-offset: 3px;
}
.rkxl__enter-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 87, 255, 0.4) 0%, rgba(0, 87, 255, 0.6) 100%);
    pointer-events: none;
    z-index: 0;
    transition: width 100ms linear;
}
.rkxl__enter-fill::after {
    content: '';
    position: absolute;
    top: 0; right: -2px;
    width: 2px; height: 100%;
    background: #4dabff;
    box-shadow: 0 0 10px #4dabff;
    opacity: 0;
    transition: opacity 80ms;
}
.rkxl__enter.is-holding .rkxl__enter-fill::after { opacity: 1; }
.rkxl__enter > * { position: relative; z-index: 1; }
.rkxl__enter-label { white-space: nowrap; }
.rkxl__enter-icon {
    width: 11px;
    height: 11px;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.rkxl__enter:hover .rkxl__enter-icon { transform: translateX(3px); }

/* === Hint === */
.rkxl__hint {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: clamp(9px, 0.78vw, 11px);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.38);
    opacity: 0;
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
    text-align: center;
}
.rkxl__hint.is-ready { opacity: 1; }
.rkxl__hint kbd {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1px 5px;
    border-radius: 2px;
    margin: 0 2px;
}

/* === Exit transition === */
.rkxl.is-exiting {
    pointer-events: none;
    animation: rkxl-exit-out 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rkxl-exit-out {
    0%   { opacity: 1; }
    60%  { opacity: 0.6; }
    100% { opacity: 0; transform: scale(1.03); }
}
.rkxl.is-exiting .rkxl__stack {
    animation: rkxl-stack-out 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rkxl-stack-out {
    0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-18px); filter: blur(6px); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .rkxl,
    .rkxl *,
    .rkxl *::before,
    .rkxl *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .rkxl__logo path { stroke-dashoffset: 0 !important; fill: #fff !important; }
    .rkxl__eyebrow-dot { animation: none !important; }
}

/* === Responsive — small mobile → 4K === */
@media (max-width: 359px) {
    .rkxl__stack { gap: 14px; padding: 14px; }
    .rkxl__logo-wrap { width: 82vw; }
    .rkxl__status { max-width: 80vw; }
    .rkxl__corner { width: 14px; height: 14px; }
    .rkxl__hud-bot { font-size: 9px; letter-spacing: 0.14em; }
}
@media (min-width: 360px) and (max-width: 639px) {
    .rkxl__stack { gap: 18px; }
    .rkxl__logo-wrap { width: 72vw; }
    .rkxl__status { max-width: 78vw; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .rkxl__logo-wrap { width: 52vw; max-width: 480px; }
    .rkxl__status { max-width: 56vw; }
}
@media (min-width: 1024px) and (max-width: 1535px) {
    .rkxl__logo-wrap { width: 38vw; max-width: 520px; }
}
@media (min-width: 1536px) and (max-width: 1919px) {
    .rkxl__logo-wrap { width: 36vw; max-width: 560px; }
}
@media (min-width: 1920px) and (max-width: 2559px) {
    .rkxl__logo-wrap { width: 32vw; max-width: 620px; }
    .rkxl__eyebrow { font-size: 13px; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 13px; }
    .rkxl__enter { padding: 8px 16px; font-size: 13px; }
    .rkxl__hud-bot { font-size: 11px; }
}
@media (min-width: 2560px) and (max-width: 3839px) {
    .rkxl__logo-wrap { width: 30vw; max-width: 720px; }
    .rkxl__status { max-width: 480px; }
    .rkxl__eyebrow { font-size: 14px; letter-spacing: 0.2em; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 14px; }
    .rkxl__enter { padding: 10px 20px; font-size: 14px; gap: 10px; }
    .rkxl__enter-icon { width: 13px; height: 13px; }
    .rkxl__hud-bot { font-size: 13px; }
    .rkxl__corner { width: 32px; height: 32px; }
}
@media (min-width: 3840px) {
    .rkxl__logo-wrap { width: 24vw; max-width: 900px; }
    .rkxl__status { max-width: 600px; }
    .rkxl__eyebrow { font-size: 16px; letter-spacing: 0.22em; }
    .rkxl__pct, .rkxl__log, .rkxl__status-label { font-size: 16px; }
    .rkxl__enter { padding: 12px 24px; font-size: 16px; gap: 12px; }
    .rkxl__enter-icon { width: 14px; height: 14px; }
    .rkxl__hud-bot { font-size: 15px; }
    .rkxl__corner { width: 42px; height: 42px; }
}

/* Short viewports — keep everything within fold */
@media (max-height: 600px) {
    .rkxl__stack { gap: 12px; padding: 8px; }
    .rkxl__logo-wrap { width: clamp(140px, 24vw, 320px); }
}
@media (max-height: 420px) {
    .rkxl__stack { gap: 10px; }
    .rkxl__logo-wrap { width: clamp(120px, 20vw, 260px); }
    .rkxl__hint { display: none; }
}