/* ═══════════════════════════════════════════════════════════════════════════
   CTFkings, Royal Hacker FX layer (royalfx.css)
   Shared visual effects: binary rain, CRT scanlines, live terminal, cursor.
   Loaded on every page AFTER the page's own styles so it can override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Binary rain canvas (0s and 1s flowing behind everything) ─────────── */
#binary-rain-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;              /* inserted as first <body> child: paints under #particles-canvas */
    pointer-events: none;
    opacity: 0.55;
}

/* ── 2. CRT scanline + vignette overlay ──────────────────────────────────── */
#crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;     /* above content, below nothing interactive */
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.14) 3px,
            transparent 4px
        );
    mix-blend-mode: multiply;
    opacity: 0.5;
}
#crt-overlay::after {
    /* soft royal vignette + faint phosphor top glow */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.42) 100%),
        linear-gradient(to bottom, rgba(0, 244, 142, 0.025), transparent 18%);
}
#crt-overlay .crt-flicker {
    position: absolute;
    inset: 0;
    background: rgba(0, 244, 142, 0.012);
    animation: royalfx-flicker 4.2s linear infinite;
}
@keyframes royalfx-flicker {
    0%, 100% { opacity: 0.4; }
    7%  { opacity: 1; }
    9%  { opacity: 0.2; }
    11% { opacity: 0.8; }
    38% { opacity: 0.5; }
    61% { opacity: 0.9; }
    63% { opacity: 0.3; }
    84% { opacity: 0.6; }
}

/* ── 3. Terminal-style blinking cursor on slogans ──────────────────────────
   Overrides the old ▌ half-block with a full phosphor block that flashes
   hard on/off like a real TTY cursor, with a soft glow while lit. */
.slogan::after,
.landing-slogan::after,
.brand-slogan::after {
    content: '\2588';
    font-family: var(--font-term, 'Share Tech Mono', monospace);
    font-style: normal;
    color: var(--green, #00F48E);
    margin-left: 7px;
    text-shadow:
        0 0 6px  rgba(0, 244, 142, 0.9),
        0 0 18px rgba(0, 244, 142, 0.55),
        0 0 36px rgba(0, 244, 142, 0.30);
    animation: royalfx-tty-blink 1.06s step-end infinite !important;
    display: inline-block;
}
@keyframes royalfx-tty-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ── 4. Live terminal window ─────────────────────────────────────────────── */
.royal-terminal {
    width: min(620px, 92vw);
    margin: 56px auto 0;
    border: 1px solid rgba(31, 61, 40, 0.55);
    border-radius: 12px;
    background: rgba(3, 8, 5, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 24px 70px -24px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 244, 142, 0.05),
        0 0 44px -12px rgba(0, 244, 142, 0.14);
    overflow: hidden;
    text-align: left;
    position: relative;
}
@keyframes royalfx-term-in {
    to { opacity: 1; transform: translateY(0); }
}

/* gold crown-line across the top edge */
.royal-terminal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, #D4A724 30%, #F1CF6A 50%, #D4A724 70%, transparent);
    opacity: 0.7;
    z-index: 2;
}

.rt-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: rgba(11, 26, 17, 0.75);
    border-bottom: 1px solid rgba(31, 61, 40, 0.45);
}
.rt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rt-dot--red   { background: #8C2C45; box-shadow: 0 0 8px rgba(140, 44, 69, 0.6); }
.rt-dot--gold  { background: #D4A724; box-shadow: 0 0 8px rgba(212, 167, 36, 0.6); }
.rt-dot--green { background: #00F48E; box-shadow: 0 0 8px rgba(0, 244, 142, 0.6); }
.rt-title {
    margin-left: 8px;
    font-family: var(--font-term, 'Share Tech Mono', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--ash, #7E8D81);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rt-title .rt-crown {
    color: #D4A724;
    font-size: 0.8rem;
    text-shadow: 0 0 10px rgba(212, 167, 36, 0.5);
}

.rt-body {
    padding: 16px 18px 18px;
    font-family: var(--font-term, 'Share Tech Mono', monospace);
    font-size: 0.82rem;
    line-height: 1.65;
    min-height: 178px;
    color: var(--parchment, #EDE6D6);
    white-space: pre-wrap;
    word-break: break-word;
}
.rt-line { display: block; }
.rt-cmd    { color: #00F48E; text-shadow: 0 0 10px rgba(0, 244, 142, 0.35); }
.rt-out    { color: #9aa89d; }
.rt-good   { color: #00F48E; text-shadow: 0 0 10px rgba(0, 244, 142, 0.4); }
.rt-gold   { color: #F1CF6A; text-shadow: 0 0 12px rgba(212, 167, 36, 0.45); }
.rt-bad    { color: #e07070; }

/* the live cursor at the typing point */
.rt-caret {
    display: inline-block;
    width: 0.58em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: #00F48E;
    box-shadow:
        0 0 6px  rgba(0, 244, 142, 0.9),
        0 0 18px rgba(0, 244, 142, 0.5);
    animation: royalfx-tty-blink 1.06s step-end infinite;
}

/* terminal fades out/in between scenarios (handled by JS class) */
.rt-body.rt-wipe {
    animation: royalfx-term-wipe 0.45s ease both;
}
@keyframes royalfx-term-wipe {
    0%   { opacity: 1; filter: none; }
    45%  { opacity: 0; filter: blur(2px); }
    55%  { opacity: 0; filter: blur(2px); }
    100% { opacity: 1; filter: none; }
}

/* ── 5. Royal HUD flourishes ─────────────────────────────────────────────── */

/* phosphor text selection */
::selection {
    background: rgba(0, 244, 142, 0.28);
    color: #EDE6D6;
    text-shadow: 0 0 8px rgba(0, 244, 142, 0.4);
}

/* scrollbars pick up the phosphor on hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #D4A724, #00F48E);
}

/* ── 6. Accessibility: honour reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Truly disorienting motion, keep disabled */
    #crt-overlay .crt-flicker { animation: none !important; }
    .wordmark                  { animation: none !important; }

    /* Signature effects */
    html body #binary-rain-canvas {
        display: block !important;
        opacity: 0.55 !important;
    }

    html body .slogan::after,
    html body .landing-slogan::after,
    html body .brand-slogan::after {
        animation-name:            royalfx-tty-blink !important;
        animation-duration:        1.06s !important;
        animation-timing-function: step-end !important;
        animation-iteration-count: infinite !important;
        animation-delay:           0s !important;
        animation-direction:       normal !important;
        animation-fill-mode:       none !important;
        animation-play-state:      running !important;
        display: inline-block !important;
        /* NO opacity: 1 !important; */
    }

    html body .rt-caret {
        animation-name:            royalfx-tty-blink !important;
        animation-duration:        1.06s !important;
        animation-timing-function: step-end !important;
        animation-iteration-count: infinite !important;
        animation-delay:           0s !important;
        animation-direction:       normal !important;
        animation-fill-mode:       none !important;
        animation-play-state:      running !important;
        /* NO opacity: 1 !important; */
    }

    .royal-terminal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* small screens: keep the terminal compact */
@media (max-width: 540px) {
    .rt-body { font-size: 0.72rem; min-height: 150px; padding: 12px 14px 14px; }
    .royal-terminal { margin-top: 40px; }
}