/* ===================================
    "Neon HUD" treatment for the My-Job images
    A layer on top of the original pictures (the image files are unchanged):
    purple/blue colour grade, faint holographic grid and scanlines, a glowing
    frame with sci-fi corner brackets. Used on my-job.html and on the My-Job
    slides of the homepage portfolio. Remove this file to switch it off.
====================================== */
:root {
    --kg-neon-line: #a1b7e8;
    --kg-neon-grade:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
        linear-gradient(rgba(161, 183, 232, .10) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(161, 183, 232, .10) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(135deg, rgba(75, 114, 209, .38), rgba(156, 66, 205, .34) 60%, rgba(43, 15, 61, .45));
    --kg-neon-brackets:
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) left top / 26px 2px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) left top / 2px 26px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) right top / 26px 2px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) right top / 2px 26px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) left bottom / 26px 2px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) left bottom / 2px 26px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) right bottom / 26px 2px no-repeat,
        linear-gradient(var(--kg-neon-line), var(--kg-neon-line)) right bottom / 2px 26px no-repeat;
}

/* ---------- Any wrapper holding a single <img> (My-Job page) ---------- */
.kg-fx-neon {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.kg-fx-neon > img { filter: saturate(1.15) contrast(1.08) brightness(.92); }
.kg-fx-neon::before,
.kg-fx-neon::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.kg-fx-neon::before {
    inset: 0;
    background: var(--kg-neon-grade);
    mix-blend-mode: screen;
}
.kg-fx-neon::after {
    inset: 8px;
    z-index: 2;
    border-radius: 10px;
    background: var(--kg-neon-brackets);
    box-shadow: inset 0 0 0 1px rgba(161, 183, 232, .45), inset 0 0 30px rgba(156, 66, 205, .45);
}

/* ---------- Homepage portfolio: the My-Job slides ---------- */
/* On desktop the slide image fills the screen: grade, grid and an inner glow over the
   whole slide (corner brackets would collide with the logo and side menu). On phones and
   tablets src/js/responsive-fixes.js measures where the image sits and sets
   --kg-fx-x/y/w/h, so the effect and its brackets hug the picture exactly. */
.kg-neon-slide .img-mask > img,
.kg-neon-slide .section-image { filter: saturate(1.15) contrast(1.08) brightness(.92); }
.kg-neon-slide .img-mask::before,
.kg-neon-slide .img-mask::after {
    content: "";
    position: absolute;
    left: var(--kg-fx-x, 0);
    top: var(--kg-fx-y, 0);
    width: var(--kg-fx-w, 100%);
    height: var(--kg-fx-h, 100%);
    pointer-events: none;
}
.kg-neon-slide .img-mask::before {
    z-index: 1;
    background: var(--kg-neon-grade);
    mix-blend-mode: screen;
}
.kg-neon-slide .img-mask::after {
    z-index: 2;
    box-shadow: inset 0 0 80px rgba(156, 66, 205, .45);
}
.kg-neon-slide[data-kg-fx] .img-mask::before { border-radius: 6px; }
.kg-neon-slide[data-kg-fx] .img-mask::after {
    border-radius: 6px;
    background: var(--kg-neon-brackets);
    box-shadow: inset 0 0 0 1px rgba(161, 183, 232, .5), inset 0 0 26px rgba(156, 66, 205, .5), 0 0 22px rgba(156, 66, 205, .35);
}