/* =========================================================
   CYBER COSMIC GLASS + GLITCH THEME
   Neon gradients, scanlines, glitch effects
   Supports both dark and light themes
   ========================================================= */

/* Neon color variables - extending existing theme */
:root {
    /* Neon palette */
    --n-cyan: 90 180 255;
    --n-blue: 105 130 255;
    --n-violet: 185 165 255;
    --n-mag: 255 70 210;
    --n-warm: 255 170 110;

    /* Animation speeds */
    --scan-speed: 2.4s;
    --glitch-speed: 1.8s;
    --float-speed: 18s;

    /* Cyber glass overrides for light theme */
    --cyber-glass: 255 255 255;
    --cyber-glass-a: .56;
    --cyber-glass-a2: .40;
    --cyber-brd: 10 12 22;
    --cyber-brd-a: .10;
    --cyber-brd-a2: .16;
    --cyber-shadow: 0 22px 70px rgba(0, 0, 0, .16);
    --cyber-vignette: rgba(0, 0, 0, .10);
    --cyber-scan: rgba(0, 0, 0, .07);
    --cyber-dust: rgba(0, 0, 0, .06);
}

:root[data-theme="dark"],
:root:not([data-theme]) {
    --cyber-glass: 18 26 54;
    --cyber-glass-a: .44;
    --cyber-glass-a2: .56;
    --cyber-brd: 255 255 255;
    --cyber-brd-a: .10;
    --cyber-brd-a2: .16;
    --cyber-shadow: 0 24px 86px rgba(0, 0, 0, .52);
    --cyber-vignette: rgba(0, 0, 0, .64);
    --cyber-scan: rgba(255, 255, 255, .06);
    --cyber-dust: rgba(255, 255, 255, .06);
}

/* =========================================================
   CYBER SECTION BACKGROUND
   ========================================================= */
.cyber-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 760px at 20% 35%, rgba(var(--n-warm)/.24) 0%, rgba(var(--n-warm)/0) 62%),
        radial-gradient(980px 680px at 78% 25%, rgba(var(--n-cyan)/.18) 0%, rgba(var(--n-cyan)/0) 64%),
        radial-gradient(880px 560px at 55% 85%, rgba(var(--n-violet)/.12) 0%, rgba(var(--n-violet)/0) 68%),
        linear-gradient(rgba(10, 12, 20, 0.75), rgba(10, 12, 20, 0.75)),
        url('/assets/images/bg-dark.webp');
    background-size: auto, auto, auto, auto, cover;
    background-position: center, center, center, center, center;
    background-attachment: scroll, scroll, scroll, scroll, fixed;
}

/* Scanlines + vignette overlay */
.cyber-section::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(1400px 980px at 50% 42%, rgba(0, 0, 0, 0) 0%, var(--cyber-vignette) 74%),
        repeating-linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            var(--cyber-scan) 3px,
            rgba(0, 0, 0, 0) 6px),
        radial-gradient(circle at 15% 30%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 65% 25%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 35% 80%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 85% 65%, var(--cyber-dust) 0 1px, transparent 2px);
    background-size:
        auto,
        100% 7px,
        180px 180px,
        240px 240px,
        300px 300px,
        360px 360px;
    opacity: .62;
    mix-blend-mode: overlay;
    filter: contrast(1.08) saturate(1.25);
}

/* Grid drift overlay */
.cyber-section::after {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(0deg, rgba(var(--n-blue)/.10) 0px, rgba(var(--n-blue)/0) 2px, rgba(var(--n-blue)/0) 44px),
        repeating-linear-gradient(90deg, rgba(var(--n-cyan)/.08) 0px, rgba(var(--n-cyan)/0) 2px, rgba(var(--n-cyan)/0) 46px),
        linear-gradient(100deg,
            rgba(var(--n-mag)/0) 0%,
            rgba(var(--n-mag)/.12) 18%,
            rgba(var(--n-warm)/.14) 40%,
            rgba(var(--n-cyan)/.12) 62%,
            rgba(var(--n-cyan)/0) 100%);
    opacity: .34;
    mix-blend-mode: screen;
    filter: blur(0.6px);
    transform: rotate(-8deg);
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-section::before {
        animation: scan-flicker var(--scan-speed) steps(2, end) infinite;
    }

    .cyber-section::after {
        animation: grid-drift 10s ease-in-out infinite alternate;
    }
}

@keyframes scan-flicker {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: .58;
    }

    25% {
        transform: translate3d(-.8%, .5%, 0);
        opacity: .64;
    }

    50% {
        transform: translate3d(.7%, -.6%, 0);
        opacity: .56;
    }

    75% {
        transform: translate3d(-.5%, -.2%, 0);
        opacity: .63;
    }

    100% {
        transform: translate3d(.4%, .6%, 0);
        opacity: .58;
    }
}

@keyframes grid-drift {
    from {
        transform: rotate(-8deg) translateX(-1%) translateY(1%);
        opacity: .30;
    }

    to {
        transform: rotate(-8deg) translateX(1%) translateY(-1%);
        opacity: .38;
    }
}

/* =========================================================
   FLOATING BACKGROUND ICONS
   ========================================================= */
.cyber-icons-field {
    position: absolute;
    inset: -16%;
    pointer-events: none;
    z-index: 0;
    opacity: .22;
    mix-blend-mode: screen;
    filter: saturate(1.35) contrast(1.10);
}

.cyber-bg-icon {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: var(--s, 360px);
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    opacity: var(--o, .14);
    filter:
        drop-shadow(0 0 10px rgba(var(--n-warm)/.24)) drop-shadow(0 0 22px rgba(var(--n-cyan)/.20)) drop-shadow(0 0 34px rgba(var(--n-mag)/.14));
}

.cyber-bg-icon.is-glitchy {
    animation: icon-glitch var(--glitch-speed) steps(2, end) infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-bg-icon {
        animation: icon-float var(--float-speed) ease-in-out infinite alternate;
        animation-delay: var(--d, 0s);
    }

    .cyber-bg-icon.is-glitchy {
        animation:
            icon-float var(--float-speed) ease-in-out infinite alternate,
            icon-glitch var(--glitch-speed) steps(2, end) infinite;
    }
}

@keyframes icon-float {
    from {
        transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateX(-12px) translateY(10px) scale(1);
    }

    to {
        transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateX(14px) translateY(-12px) scale(1.04);
    }
}

@keyframes icon-glitch {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(var(--n-warm)/.24)) drop-shadow(0 0 22px rgba(var(--n-cyan)/.20));
    }

    20% {
        filter: drop-shadow(0 0 16px rgba(var(--n-mag)/.26)) drop-shadow(0 0 32px rgba(var(--n-cyan)/.20));
    }

    60% {
        filter: drop-shadow(0 0 12px rgba(var(--n-warm)/.28)) drop-shadow(0 0 28px rgba(var(--n-blue)/.22));
    }
}

/* =========================================================
   GLITCH TITLE EFFECT
   ========================================================= */
.cyber-title {
    position: relative;
    display: inline-block;
    text-shadow:
        0 0 18px rgba(var(--n-cyan)/.18),
        0 0 26px rgba(var(--n-warm)/.14);
}

.cyber-title::before,
.cyber-title::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: .88;
    pointer-events: none;
}

.cyber-title::before {
    transform: translateX(-1px);
    text-shadow: -2px 0 rgba(var(--n-mag)/.60);
    clip-path: inset(0 0 58% 0);
}

.cyber-title::after {
    transform: translateX(1px);
    text-shadow: 2px 0 rgba(var(--n-cyan)/.60);
    clip-path: inset(45% 0 0 0);
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-title::before {
        animation: glitch-a var(--glitch-speed) steps(2, end) infinite;
    }

    .cyber-title::after {
        animation: glitch-b calc(var(--glitch-speed) * 1.15) steps(2, end) infinite;
    }
}

@keyframes glitch-a {
    0% {
        clip-path: inset(0 0 62% 0);
        transform: translate(-1px, 0);
    }

    25% {
        clip-path: inset(10% 0 44% 0);
        transform: translate(-3px, -1px);
    }

    50% {
        clip-path: inset(4% 0 70% 0);
        transform: translate(-2px, 1px);
    }

    75% {
        clip-path: inset(18% 0 36% 0);
        transform: translate(-4px, 0);
    }

    100% {
        clip-path: inset(0 0 62% 0);
        transform: translate(-1px, 0);
    }
}

@keyframes glitch-b {
    0% {
        clip-path: inset(48% 0 0 0);
        transform: translate(1px, 0);
    }

    30% {
        clip-path: inset(60% 0 0 0);
        transform: translate(4px, 1px);
    }

    60% {
        clip-path: inset(42% 0 10% 0);
        transform: translate(2px, 0);
    }

    85% {
        clip-path: inset(55% 0 0 0);
        transform: translate(5px, -1px);
    }

    100% {
        clip-path: inset(48% 0 0 0);
        transform: translate(1px, 0);
    }
}

/* =========================================================
   CYBER GLASS CARD
   ========================================================= */
.cyber-card {
    position: relative;
    border-radius: 26px;
    padding: 18px 18px 16px;
    background: linear-gradient(180deg,
            rgba(var(--cyber-glass)/var(--cyber-glass-a)),
            rgba(var(--cyber-glass)/var(--cyber-glass-a2)));
    border: 1px solid rgba(var(--cyber-brd)/var(--cyber-brd-a));
    border-top-color: rgba(var(--cyber-brd)/var(--cyber-brd-a2));
    box-shadow: var(--cyber-shadow);
    overflow: hidden;
    transition: all 0.3s ease;
}

@supports (backdrop-filter: blur(14px)) {
    .cyber-card {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

/* Inner glow effect */
.cyber-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        radial-gradient(420px 240px at 20% 18%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 72%),
        linear-gradient(90deg,
            rgba(var(--n-mag)/.16) 0%,
            rgba(var(--n-warm)/.10) 32%,
            rgba(var(--n-cyan)/.12) 62%,
            rgba(var(--n-blue)/.10) 100%);
    opacity: .52;
    filter: blur(10px);
    mix-blend-mode: screen;
}

.cyber-card:hover {
    border-color: rgba(var(--n-cyan)/.26);
    box-shadow: 0 28px 92px rgba(0, 0, 0, .36);
    transform: translateY(-2px);
}

/* =========================================================
   CYBER ICON BOX
   ========================================================= */
.cyber-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg,
            rgba(var(--cyber-glass)/.60),
            rgba(var(--cyber-glass)/.34));
    border: 1px solid rgba(var(--cyber-brd)/.12);
    position: relative;
    overflow: hidden;
}

.cyber-icon-box::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(90deg,
            rgba(var(--n-mag)/0) 0%,
            rgba(var(--n-mag)/.18) 22%,
            rgba(var(--n-warm)/.14) 44%,
            rgba(var(--n-cyan)/.14) 66%,
            rgba(var(--n-cyan)/0) 100%);
    transform: translateX(-60%);
    filter: blur(12px);
    opacity: .52;
    transition: transform .6s ease;
}

.cyber-card:hover .cyber-icon-box::after {
    transform: translateX(20%);
}

/* =========================================================
   CYBER PILL / BADGE
   ========================================================= */
.cyber-pill {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(var(--cyber-brd)/.12);
    background: rgba(var(--cyber-glass)/.35);
    border-radius: 999px;
    padding: 8px 16px;
    color: rgba(var(--text)/.78);
    font-size: 0.875rem;
}

.cyber-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(var(--n-cyan)/.85);
    box-shadow:
        0 0 10px rgba(var(--n-cyan)/.40),
        0 0 16px rgba(var(--n-mag)/.18);
}

/* =========================================================
   LIGHT THEME ADJUSTMENTS
   ========================================================= */
:root[data-theme="light"] .cyber-section {
    background:
        radial-gradient(1100px 760px at 20% 35%, rgba(var(--n-warm)/.12) 0%, rgba(var(--n-warm)/0) 62%),
        radial-gradient(980px 680px at 78% 25%, rgba(var(--n-cyan)/.10) 0%, rgba(var(--n-cyan)/0) 64%),
        radial-gradient(880px 560px at 55% 85%, rgba(var(--n-violet)/.08) 0%, rgba(var(--n-violet)/0) 68%),
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url('/assets/images/bg-light.webp');
    background-size: auto, auto, auto, auto, cover;
    background-position: center;
    background-attachment: scroll, scroll, scroll, scroll, fixed;
}

:root[data-theme="light"] .cyber-icons-field {
    opacity: .12;
    mix-blend-mode: multiply;
}

:root[data-theme="light"] .cyber-title {
    text-shadow:
        0 0 18px rgba(var(--n-cyan)/.10),
        0 0 26px rgba(var(--n-warm)/.08);
}