@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Rajdhani:wght@500;700&display=swap');

:root {
    /* fonts */
    --font-body: 'Rajdhani', 'Fira Code', monospace;
    --font-header: 'Fira Code', monospace;
    --font-ui: 'VT323', monospace;
    --font-mono: 'Fira Code', 'Courier New', monospace;

    /* shared radius */
    --radius: 2px;
    --radius-lg: 2px;

    /* base surface */
    --bg: #050510;
    --bg-image:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    --bg-size: 100% 2px, 3px 100%;
    --text: #e0e0e0;
    --text-muted: #b8b8b8;
    --link-color: #fff;

    /* semantic accents */
    --c-danger: #ff0055;
    --c-warning: #ffcc00;
    --c-success: #00ff41;

    /* global h1 */
    --h1-color: #00f3ff;
    --h1-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    --h1-transform: uppercase;
    --h1-spacing: 2px;

    /* hero title */
    --title-size: 4rem;
    --title-color: #fff;
    /* chromatic-aberration split (cyan / magenta) + purple drop + neon glow */
    --title-shadow: 2px 0 0 rgba(255, 0, 110, 0.55), -2px 0 0 rgba(0, 243, 255, 0.55), 3px 3px 0 #b26aff, 0 0 18px rgba(255, 255, 255, 0.35), 0 0 40px rgba(0, 243, 255, 0.2);
    --subtitle-size: 1.5rem;
    --subtitle-color: #00f3ff;

    /* top bar */
    --topbar-bg: rgba(10, 5, 20, 0.95);
    --topbar-shadow: 0 0 15px rgba(178, 106, 255, 0.4);
    --topbar-border: 1px solid #b26aff;
    --topbar-title-color: #b26aff;
    --topbar-title-shadow: 0 0 5px #b26aff;

    --topbtn-bg: rgba(0, 243, 255, 0.1);
    --topbtn-color: #00f3ff;
    --topbtn-border: 1px solid #00f3ff;
    --topbtn-size: 16px;
    --topbtn-transform: uppercase;
    --topbtn-hover-bg: #00f3ff;
    --topbtn-hover-color: #000;
    --topbtn-hover-shadow: 0 0 10px #00f3ff;

    --select-bg: rgba(178, 106, 255, 0.1);
    --select-color: #b26aff;
    --select-border: 1px solid #b26aff;
    --select-hover-bg: #b26aff;
    --select-hover-color: #fff;

    /* windows */
    --window-bg: rgba(13, 2, 33, 0.85);
    --window-border: 1px solid #b26aff;
    --window-shadow: 0 0 10px rgba(178, 106, 255, 0.2);
    --window-blur: blur(5px);
    --window-content-color: #e0e0e0;

    --winheader-bg: linear-gradient(90deg, #2a0a4d, #4a1285);
    --winheader-color: #fff;
    --winheader-border: 1px solid #b26aff;
    --winheader-shadow: 0 0 5px #d49eff;

    /* window buttons */
    --winbtn-size: 16px;
    --winbtn-font: 10px;
    --winbtn-radius: 0;
    --winbtn-border: #fff;
    --winbtn-bg: transparent;
    --winbtn-glyph: rgba(0,0,0,0.65);
    --winbtn-hover-glyph: #000;
    --winbtn-close-bg: rgba(255, 0, 85, 0.2);
    --winbtn-minimize-bg: rgba(255, 204, 0, 0.2);
    --winbtn-maximize-bg: rgba(0, 255, 65, 0.2);

    /* terminal */
    --term-bg: #050505;
    --term-color: #fffb00;
    --term-border: 1px solid #333;
    --prompt-color: #b26aff;
    --term-command-color: #fffb00;
    --term-output-color: #cccccc;
    --term-info-color: #fceeb5;
    --term-file-color: #fff;
    --term-file-radius: 0;
    --term-file-hover-bg: #fffb00;
    --term-file-hover-color: #000;
    --cursor-color: #fffb00;
    --cursor-shadow: 0 0 5px #fffb00;
    --scrollbar-track: #111;
    --scrollbar-thumb: #444;
    --scrollbar-thumb-border: 1px solid #fffb00;
    --scrollbar-radius: 0;
    --scrollbar-thumb-hover: #fffb00;

    /* readme */
    --readme-title-color: #00f3ff;
    --readme-summary-size: 1.2rem;
    --readme-summary-color: #b26aff;
    --readme-link-color: #fffb00;
    --contact-btn-color: #b26aff;
    --contact-btn-hover-color: #fffb00;

    /* app grid */
    --app-label-color: #00f3ff;
    --app-img-bg: rgba(255, 255, 255, 0.05);
    --app-img-border: 1px solid rgba(255, 255, 255, 0.2);
    --app-hover-shadow: 0 0 8px #00f3ff;

    /* media list */
    --media-border: 1px solid rgba(255, 255, 255, 0.05);
    --media-hover-bg: rgba(255, 255, 255, 0.05);
    --caret-color: #00f3ff;
    --media-details-bg: rgba(0, 0, 0, 0.3);
    --media-row-color: #ddd;

    /* projects */
    --project-divider: #333;
    --project-icon-filter: drop-shadow(0 0 2px #fff);
    --project-title-size: 2rem;
    --project-title-color: #fff;
    --project-title-shadow: 0 0 5px #b26aff;
    --project-date-color: #fff;
    --project-date-shadow: 0 0 4px #fff;
    --banner-height: 180px;
    --banner-border: 1px solid #00f3ff;
    --banner-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    --banner-filter: brightness(0.9) contrast(1.1);
    --banner-hover-filter: brightness(1.1) contrast(1.1);
    --banner-hover-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
    --project-desc-color: #ccc;
    --project-context-accent: #b26aff;
    --softskills-bg: rgba(178, 106, 255, 0.07);
    --softskill-color: #00f3ff;

    /* project button */
    --btn-bg: transparent;
    --btn-border: 1px solid #ffcc00;
    --btn-color: #ffcc00;
    --btn-radius: 0;
    --btn-transform: uppercase;
    --btn-spacing: 1px;
    --btn-hover-bg: #ffcc00;
    --btn-hover-color: #000;
    --btn-hover-shadow: 0 0 10px #ffcc00;

    /* badges */
    --tech-color: #b26aff;
    --tech-bg: transparent;
    --tech-border: 1px solid #b26aff;
    --tech-project-color: #00ff41;
    --tech-project-bg: transparent;
    --tech-project-border: 1px solid #00ff41;
    --status-school-color: #ffcc00;
    --status-school-bg: transparent;
    --status-school-border: 1px solid #ffcc00;
    --status-perso-color: #00f3ff;
    --status-perso-bg: transparent;
    --status-perso-border: 1px solid #00f3ff;
    --status-spacing: 1px;
    --tag-bg: #333;
    --tag-color: #ccc;

    /* timeline */
    --timeline-line: #b26aff;
    --timeline-line-shadow: 0 0 10px #b26aff;
    --timeline-line-width: 2px;
    --edu-color: #00f3ff;
    --work-color: #ff00ff;
    --dot-bg: #000;
    --dot-border-width: 2px;
    /* --dot-shadow-color omitted → base falls back to --item-color (neon glow) */
    --card-bg: rgba(13, 2, 33, 0.9);
    --card-edge-color: #333;
    --card-border-width: 1px;
    --card-left-width: 4px;
    --card-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    --card-hover-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
    --card-glow-size: 16px;
    --card-blur: blur(5px);
    --date-color: #ffcc00;
    --date-size: 1.2rem;
    --date-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
    --timeline-title-color: #fff;
    --timeline-title-size: 2rem;
    --timeline-title-transform: uppercase;
    --timeline-loc-color: #b8b8b8;
    --timeline-loc-filter: invert(1);
    --timeline-desc-color: #ddd;

    /* discover */
    --ad-title-color: #00f3ff;

    /* popup */
    --popup-overlay-bg: rgba(10, 5, 20, 0.95);
    --popup-bg: rgba(18, 0, 50, 0.95);
    --popup-border: 2px solid #fffb00;
    --popup-shadow: 0 0 20px #fffb00, 0 0 40px #b26aff;
    --popup-radius: 0;
    --popup-title-color: #fffb00;
    --popup-title-shadow: 0 0 5px #fffb00;
    --popup-header-border: 1px solid #fffb00;
    --popup-close-color: #ff0055;
    --popup-close-hover-color: #000;
    --popup-close-hover-shadow: 0 0 10px #ff0055;
    --popup-img-bg: rgba(0, 0, 0, 0.4);
    --popup-img-border: 1px solid #fffb00;
    --popup-img-shadow: 0 0 12px rgba(255, 251, 0, 0.6);
    --popup-content-color: #ccc;
    --popup-like-title-color: #00f3ff;
    --popup-like-title-shadow: 0 0 6px #00f3ff;
    --popup-like-border: 3px solid #00f3ff;
    --popup-like-pad: 8px;
    --popup-like-color: #b8f6ff;
    --popup-like-style: italic;
}

/* ================= THEME-ONLY EFFECTS ================= */

/* Atmospheric depth: neon glows + a faint fixed HUD grid behind everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 12% -5%, rgba(0, 243, 255, 0.10), transparent 70%),
        radial-gradient(55% 45% at 105% 108%, rgba(178, 106, 255, 0.14), transparent 70%),
        linear-gradient(rgba(178, 106, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}

/* LED scanline title (overlay + flicker on top of the hero h1) */
.led-scanline {
    position: relative;
    z-index: 1;
    font-family: 'Fira Code', monospace;
    animation: ledFlicker 8s infinite;
}

.led-scanline::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px,
        rgba(0, 0, 0, 0.18) 4px
    );
    animation: scanlineMove 0.9s linear infinite;
}

@keyframes ledFlicker {
    /* mostly stable — three brief flicker bursts across 8 s */
    0%,  100% { opacity: 1;    }
    4%         { opacity: 0.82; }
    4.3%       { opacity: 1;    }
    /* double-tap at ~28 % */
    28%        { opacity: 1;    }
    28.2%      { opacity: 0.45; }
    28.5%      { opacity: 1;    }
    28.7%      { opacity: 0.7;  }
    29%        { opacity: 1;    }
    /* single blip at ~68 % */
    68%        { opacity: 1;    }
    68.2%      { opacity: 0.6;  }
    68.5%      { opacity: 1;    }
}

@keyframes scanlineMove {
    0%   { background-position-y: 0; }
    100% { background-position-y: 4px; }
}

@keyframes highlightAnim {
    0%   { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); border-color: #b26aff; }
    50%  { box-shadow: 0 0 20px 5px rgba(0, 243, 255, 0.6); border-color: #00f3ff; }
    100% { box-shadow: 0 0 10px rgba(178, 106, 255, 0.3); border-color: #b26aff; }
}