/* ============================================================
   RETRO-FX — modern-retro effects layer
   Loads after styles.css and only ADDS on top of the pixel theme:
   CRT overlay, pixel starfield, scroll progress, typewriter hero,
   tile boot-up, hover shine, cursor sparks, mascot interactions,
   party mode. Everything respects prefers-reduced-motion.
   ============================================================ */

/* ---------- CRT overlay (scanlines + vignette) ---------- */
.fx-crt {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.22) 100%);
    opacity: 0.5;
    animation: fx-crt-flicker 7s steps(2) infinite;
}

[data-theme="light"] .fx-crt {
    background:
        repeating-linear-gradient(0deg, rgba(42, 30, 68, 0.06) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 64%, rgba(42, 30, 68, 0.10) 100%);
    opacity: 0.35;
    animation: none;
}

@keyframes fx-crt-flicker {
    0%, 96%, 100% { opacity: 0.5; }
    97%           { opacity: 0.42; }
    98%           { opacity: 0.55; }
}

/* ---------- Pixel starfield canvas ---------- */
.fx-stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    image-rendering: pixelated;
}

/* ---------- Header: slow-moving rainbow scan strip ---------- */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        var(--pixel-accent) 0 24px,
        var(--pixel-yellow) 24px 48px,
        var(--pixel-magenta) 48px 72px,
        var(--pixel-cyan) 72px 96px
    );
    background-size: 96px 100%;
    opacity: 0.65;
    animation: fx-scan-strip 6s steps(12) infinite;
}

.site-header {
    position: sticky; /* re-assert; ::after hangs below the border */
}

@keyframes fx-scan-strip {
    to { background-position: 96px 0; }
}

/* ---------- Hero: marching-ants pixel frame ---------- */
.home-hero {
    padding: 18px 20px 20px;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, var(--pixel-accent) 0 10px, transparent 10px 20px) top left / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--pixel-accent) 0 10px, transparent 10px 20px) bottom left / 100% 2px no-repeat,
        repeating-linear-gradient(0deg, var(--pixel-accent) 0 10px, transparent 10px 20px) top left / 2px 100% no-repeat,
        repeating-linear-gradient(0deg, var(--pixel-accent) 0 10px, transparent 10px 20px) top right / 2px 100% no-repeat;
    opacity: 0.55;
    animation: fx-ants 1.6s steps(10) infinite;
}

@keyframes fx-ants {
    to {
        background-position:
            20px 0,      /* top edge marches right */
            -20px 100%,  /* bottom edge marches left */
            0 -20px,     /* left edge marches up */
            100% 20px;   /* right edge marches down */
    }
}

/* ---------- Typewriter cursor ---------- */
.fx-type::after {
    content: "▮";
    margin-left: 2px;
    color: var(--pixel-accent-glow);
    animation: fx-cursor-blink 0.8s steps(2) infinite;
}

@keyframes fx-cursor-blink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---------- Reveal: stepped CRT wipe with stagger ----------
   JS adds .fx-pre right away, then .is-visible when scrolled into
   view — without JS nothing is ever hidden. */
.reveal.fx-pre {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s steps(5) var(--fx-delay, 0ms), transform 0.28s steps(5) var(--fx-delay, 0ms);
}

.reveal.fx-pre.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Home tiles: boot-up cascade ---------- */
.fx-boot {
    animation: fx-tile-boot 0.42s steps(6) both;
    animation-delay: var(--fx-delay, 0ms);
}

@keyframes fx-tile-boot {
    0%   { opacity: 0; transform: scale(0.92); filter: brightness(2.4) saturate(0); }
    55%  { opacity: 1; transform: scale(1.02); filter: brightness(1.5) saturate(0.4); }
    100% { opacity: 1; transform: none; filter: none; }
}

/* ---------- Home tiles: bracket blink on hover ---------- */
.home-tile:hover {
    outline: 2px dashed var(--pixel-accent-glow);
    outline-offset: 5px;
    animation: fx-bracket-blink 0.9s steps(2) infinite;
}

@keyframes fx-bracket-blink {
    0%, 100% { outline-color: var(--pixel-accent-glow); }
    50%      { outline-color: transparent; }
}

/* ---------- Periodic hero glitch (JS toggles .fx-glitch) ---------- */
.fx-glitch {
    animation: glitch-shake 0.32s steps(4) 1;
    text-shadow:
        2px 0 var(--pixel-magenta),
        -2px 0 var(--pixel-cyan);
}

/* ---------- Buttons: chunky press-down ---------- */
.button:active,
.home-tile__download:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}

[data-theme="light"] .button:active,
[data-theme="light"] .home-tile__download:active {
    box-shadow: 1px 1px 0 #2a1e44;
}

/* ---------- Cursor sparks / click bursts ---------- */
.fx-spark {
    position: fixed;
    width: 5px;
    height: 5px;
    background: var(--spark-color, var(--pixel-accent-glow));
    z-index: 9992;
    pointer-events: none;
    image-rendering: pixelated;
    animation: fx-spark-pop 0.55s steps(6) forwards;
}

@keyframes fx-spark-pop {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -18px)) scale(0.4); }
}

/* ---------- Mascot: jump + heart burst ---------- */
.mascot-float {
    cursor: pointer;
}

.fx-jump {
    animation: fx-mascot-jump 0.6s steps(8) 1 !important;
}

@keyframes fx-mascot-jump {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-26px) rotate(-4deg); }
    60%  { transform: translateY(0); }
    75%  { transform: translateY(-10px) rotate(3deg); }
    100% { transform: translateY(0); }
}

.fx-heart {
    position: fixed;
    z-index: 9992;
    pointer-events: none;
    font-size: 16px;
    line-height: 1;
    animation: fx-heart-rise 1.1s steps(10) forwards;
}

@keyframes fx-heart-rise {
    0%   { opacity: 1; transform: translate(0, 0) scale(0.7); }
    30%  { transform: translate(var(--dx, 0px), -22px) scale(1.1); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), -64px) scale(0.8); }
}

/* ---------- Party mode (Konami code) ---------- */
html.fx-party .site-shell {
    animation: fx-hue 5s linear infinite;
}

@keyframes fx-hue {
    to { filter: hue-rotate(360deg); }
}

/* ---------- Pixel toast (party mode announce) ---------- */
.fx-toast {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    z-index: 9993;
    pointer-events: none;
    font-family: var(--pixel-font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--pixel-ink);
    background: var(--pixel-panel);
    border: 2px solid var(--pixel-accent);
    box-shadow: var(--pixel-shadow);
    padding: 12px 18px;
    animation: fx-toast-in 2.4s steps(8) forwards;
}

@keyframes fx-toast-in {
    0%        { opacity: 0; transform: translate(-50%, 16px); }
    12%, 78%  { opacity: 1; transform: translate(-50%, 0); }
    100%      { opacity: 0; transform: translate(-50%, -10px); }
}

/* ---------- Footer: blinking "insert coin" vibe on hover ---------- */
.site-footer__links a {
    position: relative;
    transition: color 0.12s steps(2);
}

.site-footer__links a:hover {
    color: var(--pixel-accent-glow);
    animation: fx-coin-blink 0.7s steps(2) infinite;
}

@keyframes fx-coin-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-crt,
    .site-header::after,
    .home-hero::before,
    .fx-type::after,
    .reveal.fx-pre,
    .fx-boot,
    .home-tile:hover,
    .fx-glitch,
    .fx-spark,
    .fx-heart,
    .fx-jump,
    html.fx-party .site-shell,
    .site-footer__links a:hover {
        animation: none !important;
        transition: none !important;
    }

    .reveal.fx-pre {
        opacity: 1;
        transform: none;
    }

    .fx-boot {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .fx-spark,
    .fx-heart {
        display: none;
    }
}

/* Tiny screens: drop the heaviest chrome */
@media (max-width: 640px) {
    .fx-crt { display: none; }
    .home-hero::before { animation: none; }
}