/* =========================================================
   CYBER‑HOLOGRAPHIC PIXEL‑ART THEME
   Neon gradients, pixel grid, scanlines, chromatic aberration,
   HUD overlays, glitch effects. Dark/Light theme support.
   ========================================================= */

:root {
    /* Neon palette */
    --cyber-cyan: #00ffff;
    --cyber-magenta: #ff00ff;
    --cyber-lime: #00ff00;
    --cyber-amber: #ffb800;

    /* Shared tokens */
    --cyber-grid: 3px;
    --cyber-blur: 14px;
    --cyber-stroke: rgba(255, 255, 255, .12);
    --cyber-stroke2: rgba(0, 255, 255, .22);
    --cyber-shadow-strong: 0 22px 70px rgba(0, 0, 0, .42);

    /* Visual Upgrade: Image-based backgrounds (WebP for performance) */
    --hero-bkg-image: url('/assets/images/cosmic-hero-desktop.webp');
    --hero-bkg-opacity: 0.85;
    --grid-bkg-image: url('/assets/images/holo-grid.png');
    --grid-opacity: 0.12;
    --glass-texture: url('/assets/images/glass-texture.png');
    --glass-texture-opacity: 0.06;
    --glass-blur: 14px;

    /* Theme tokens - dark default */
    --cyber-panel: rgba(16, 20, 44, .54);
    --cyber-panel2: rgba(10, 12, 24, .44);
    --cyber-vignette: rgba(0, 0, 0, .62);
    --cyber-dust: rgba(255, 255, 255, .06);
    --cyber-glow: 1;
}

/* Responsive: Mobile hero image */
@media (max-width: 768px) {
    :root {
        --hero-bkg-image: url('/assets/images/cosmic-hero-mobile.webp');
    }
}

/* Light theme overrides */
:root[data-theme="light"] {
    --cyber-panel: rgba(255, 255, 255, .66);
    --cyber-panel2: rgba(240, 242, 255, .62);
    --cyber-vignette: rgba(255, 255, 255, .40);
    --cyber-dust: rgba(10, 12, 18, .06);
    --cyber-glow: .72;
    /* Light mode: reduce image opacity, increase blur */
    --hero-bkg-opacity: 0.4;
    --grid-opacity: 0.06;
    --glass-texture-opacity: 0.03;
}

/* ===== Stage Container ===== */
.cyber-stage {
    position: relative;
    isolation: isolate;
}

/* Cosmic neon blobs layer - now uses generated image */
.cyber-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: var(--hero-bkg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--hero-bkg-opacity);
    filter: saturate(1.15);
    z-index: -3;
    /* Fallback gradient for slow networks */
    background-color: #05060D;
}

/* Pixel grid + dust layer */
.cyber-stage::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        /* Vignette */
        radial-gradient(1200px 900px at 50% 40%, rgba(0, 0, 0, 0) 0%, var(--cyber-vignette) 74%),
        /* Dust dots */
        radial-gradient(circle at 12% 22%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 18%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 76%, var(--cyber-dust) 0 1px, transparent 2px),
        radial-gradient(circle at 85% 64%, var(--cyber-dust) 0 1px, transparent 2px),
        /* Pixel grid */
        linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size:
        auto,
        160px 160px,
        190px 190px,
        240px 240px,
        280px 280px,
        var(--cyber-grid) var(--cyber-grid),
        var(--cyber-grid) var(--cyber-grid);
    opacity: .55;
    mix-blend-mode: overlay;
    z-index: -2;
}

/* Light theme adjustments - soft blurred gradients like the example */
:root[data-theme="light"] .cyber-stage::before {
    background:
        radial-gradient(1200px 800px at 5% 10%, rgba(160, 120, 200, .35) 0%, rgba(160, 120, 200, 0) 50%),
        radial-gradient(1400px 900px at 95% 20%, rgba(80, 180, 200, .30) 0%, rgba(80, 180, 200, 0) 50%),
        radial-gradient(1000px 700px at 50% 95%, rgba(200, 170, 120, .25) 0%, rgba(200, 170, 120, 0) 50%),
        radial-gradient(800px 500px at 70% 60%, rgba(100, 200, 150, .18) 0%, rgba(100, 200, 150, 0) 50%),
        linear-gradient(180deg, rgba(245, 246, 252, 1), rgba(238, 240, 248, 1));
    filter: saturate(1.05) blur(0);
}

/* ===== Scanlines ===== */
.cyber-scanlines {
    position: fixed;
    inset: -1px;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, .045) 0px,
            rgba(255, 255, 255, .045) 1px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0) 6px);
    opacity: .28;
    mix-blend-mode: overlay;
    z-index: 9998;
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-scanlines {
        animation: cyber-scan 9s linear infinite;
    }

    @keyframes cyber-scan {
        from {
            transform: translateY(-6px);
        }

        to {
            transform: translateY(6px);
        }
    }
}

/* ===== Glitch Haze (chromatic aberration) - DISABLED ===== */
.cyber-glitch-haze {
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background: none;
    mix-blend-mode: screen;
    opacity: 0;
    filter: blur(1px);
    z-index: 9997;
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-glitch-haze {
        animation: cyber-haze 3.4s steps(2, end) infinite;
    }

    @keyframes cyber-haze {
        0% {
            transform: translate(0, 0);
            filter: hue-rotate(0deg) blur(1px);
        }

        25% {
            transform: translate(-6px, 2px);
            filter: hue-rotate(12deg) blur(1px);
        }

        50% {
            transform: translate(4px, -3px);
            filter: hue-rotate(-10deg) blur(1px);
        }

        75% {
            transform: translate(-2px, -1px);
            filter: hue-rotate(7deg) blur(1px);
        }

        100% {
            transform: translate(0, 0);
            filter: hue-rotate(0deg) blur(1px);
        }
    }
}

/* ===== Glowing Text ===== */
.cyber-glow-text {
    position: relative;
    text-shadow:
        0 0 calc(10px * var(--cyber-glow)) rgba(0, 255, 255, .22),
        0 0 calc(22px * var(--cyber-glow)) rgba(255, 0, 255, .18),
        0 0 calc(36px * var(--cyber-glow)) rgba(255, 184, 0, .12);
}

/* ===== Glitch Title Effect ===== */
.cyber-glitch {
    position: relative;
    display: inline-block;
    font-weight: 800;
}

.cyber-glitch::before,
.cyber-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .6;
    mix-blend-mode: screen;
}

.cyber-glitch::before {
    transform: translate(1px, 0);
    color: var(--cyber-cyan);
    filter: blur(.2px);
}

.cyber-glitch::after {
    transform: translate(-1px, 0);
    color: var(--cyber-magenta);
    filter: blur(.25px);
}

@media (prefers-reduced-motion: no-preference) {
    .cyber-glitch::before {
        animation: cyber-g1 2.2s steps(2, end) infinite;
    }

    .cyber-glitch::after {
        animation: cyber-g2 1.7s steps(2, end) infinite;
    }

    @keyframes cyber-g1 {
        0% {
            clip-path: inset(0 0 85% 0);
        }

        20% {
            clip-path: inset(32% 0 40% 0);
        }

        40% {
            clip-path: inset(12% 0 68% 0);
        }

        60% {
            clip-path: inset(56% 0 16% 0);
        }

        80% {
            clip-path: inset(0 0 78% 0);
        }

        100% {
            clip-path: inset(0 0 85% 0);
        }
    }

    @keyframes cyber-g2 {
        0% {
            clip-path: inset(78% 0 0 0);
        }

        25% {
            clip-path: inset(20% 0 52% 0);
        }

        50% {
            clip-path: inset(64% 0 10% 0);
        }

        75% {
            clip-path: inset(8% 0 70% 0);
        }

        100% {
            clip-path: inset(78% 0 0 0);
        }
    }
}

/* ===== Cyber Panel/Card ===== */
.cyber-panel {
    position: relative;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--cyber-panel), var(--cyber-panel2));
    border: 1px solid rgba(255, 255, 255, .10);
    border-top-color: rgba(255, 255, 255, .14);
    box-shadow: var(--cyber-shadow-strong);
    backdrop-filter: blur(var(--cyber-blur));
    -webkit-backdrop-filter: blur(var(--cyber-blur));
    overflow: hidden;
}

.cyber-panel:hover {
    border-color: rgba(0, 255, 255, .24);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .44);
}

/* Inner glow corners */
.cyber-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        radial-gradient(240px 160px at 20% 20%, rgba(255, 184, 0, .18), rgba(255, 184, 0, 0) 60%),
        radial-gradient(260px 190px at 80% 10%, rgba(0, 255, 255, .14), rgba(0, 255, 255, 0) 60%),
        radial-gradient(260px 190px at 80% 90%, rgba(255, 0, 255, .12), rgba(255, 0, 255, 0) 60%);
    opacity: .9;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* HUD micro-lines */
.cyber-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 20%),
        linear-gradient(0deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 16%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 6px);
    opacity: .12;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ===== Neon divider line ===== */
.cyber-hr {
    height: 1px;
    background: linear-gradient(90deg,
            rgba(255, 184, 0, .00),
            rgba(255, 184, 0, .22),
            rgba(0, 255, 255, .20),
            rgba(255, 0, 255, .00));
    opacity: .9;
    margin: 14px 0;
    border: none;
}

/* ===== Cyber Icon Box ===== */
.cyber-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    position: relative;
}

.cyber-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 184, 0, .18), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 255, .16), transparent 60%);
    filter: blur(12px);
    opacity: .7;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cyber-icon svg {
    width: 24px;
    height: 24px;
    filter:
        drop-shadow(0 0 10px rgba(0, 255, 255, .22)) drop-shadow(0 0 14px rgba(255, 0, 255, .18));
}

.cyber-icon svg path,
.cyber-icon svg circle,
.cyber-icon svg rect,
.cyber-icon svg line {
    stroke: rgba(230, 245, 255, .92);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Cyber Pill/Tag ===== */
.cyber-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cyber-tag.accent {
    border-color: rgba(0, 255, 255, .26);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, .08);
}

/* ===== Code/Formula block ===== */
.cyber-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--fg2);
    background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 12px;
    overflow: hidden;
    position: relative;
}

.cyber-code::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120px 90px at 20% 30%, rgba(0, 255, 255, .14), rgba(0, 255, 255, 0) 70%),
        radial-gradient(140px 100px at 80% 50%, rgba(255, 0, 255, .12), rgba(255, 0, 255, 0) 70%);
    mix-blend-mode: screen;
    opacity: .9;
    pointer-events: none;
}

/* Code highlighting */
.cyber-code .n {
    color: rgba(0, 255, 0, .90);
}

.cyber-code .m {
    color: rgba(255, 0, 255, .92);
}

.cyber-code .c {
    color: rgba(0, 255, 255, .92);
}

.cyber-code .a {
    color: rgba(255, 184, 0, .96);
}

/* ===== Cyber Tile ===== */
.cyber-tile {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .035);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cyber-tile:hover {
    border-color: rgba(255, 0, 255, .24);
    transform: translateY(-2px);
}

/* ===== Wallpaper (subtle background icons) ===== */
.cyber-wallpaper {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    mix-blend-mode: screen;
    filter: blur(.2px) saturate(1.1);
    z-index: -2;
    mask-image: radial-gradient(900px 600px at 50% 30%, #000 35%, transparent 70%);
}

.cyber-wallpaper svg {
    width: 100%;
    height: 100%;
}

.cyber-wallpaper .w {
    stroke: rgba(255, 255, 255, .32);
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cyber-wallpaper .g1 {
    filter: drop-shadow(0 0 16px rgba(0, 255, 255, .25));
}

.cyber-wallpaper .g2 {
    filter: drop-shadow(0 0 16px rgba(255, 0, 255, .22));
}

.cyber-wallpaper .g3 {
    filter: drop-shadow(0 0 16px rgba(255, 184, 0, .18));
}

/* Theme-aware selection */
::selection {
    background: rgba(0, 255, 255, .22);
    color: var(--fg);
}

/* ===== Light theme panel adjustments ===== */
:root[data-theme="light"] .cyber-panel {
    border-color: rgba(0, 0, 0, .08);
    border-top-color: rgba(0, 0, 0, .10);
}

:root[data-theme="light"] .cyber-panel::before {
    opacity: .5;
}

:root[data-theme="light"] .cyber-tile {
    border-color: rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .5);
}

:root[data-theme="light"] .cyber-tag {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .5);
}

:root[data-theme="light"] .cyber-code {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .10);
}

:root[data-theme="light"] .cyber-scanlines {
    opacity: .12;
}

:root[data-theme="light"] .cyber-glitch-haze {
    opacity: .10;
}

:root[data-theme="light"] .cyber-glow-text {
    text-shadow: none;
}

/* Light theme: disable glitch effect, use solid dark text */
:root[data-theme="light"] .cyber-glitch::before,
:root[data-theme="light"] .cyber-glitch::after {
    display: none;
}

:root[data-theme="light"] .cyber-glitch {
    color: #1a1a2e;
    background: linear-gradient(135deg, #1a1a2e, #2d2d5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================================
   CONTENT MODE — Спокойный фон для текстовых страниц
   Используй: <body class="cyber-stage" data-bg="content">
   ========================================================= */

/* Ослабляем фоновое изображение */
body[data-bg="content"] .cyber-stage::before,
[data-bg="content"].cyber-stage::before {
    opacity: 0.35;
    filter: saturate(0.9) brightness(0.8);
}

/* Ослабляем сетку и vignette */
body[data-bg="content"] .cyber-stage::after,
[data-bg="content"].cyber-stage::after {
    opacity: 0.20;
    mix-blend-mode: soft-light;
}

/* Почти невидимые scanlines */
body[data-bg="content"] .cyber-scanlines,
[data-bg="content"] .cyber-scanlines {
    opacity: 0.06;
}

/* Полностью отключаем glitch haze на контенте */
body[data-bg="content"] .cyber-glitch-haze,
[data-bg="content"] .cyber-glitch-haze {
    display: none !important;
}

/* Менее агрессивные панели на контентных страницах */
body[data-bg="content"] .cyber-panel,
[data-bg="content"] .cyber-panel {
    background: linear-gradient(180deg,
            rgba(16, 20, 44, 0.75),
            rgba(10, 12, 24, 0.65));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */

/* Fix background-attachment: fixed on mobile (causes jank) */
@media (max-width: 768px) {

    body,
    .cyber-stage::before {
        background-attachment: scroll !important;
    }

    /* Reduce blur on mobile for performance */
    .cyber-panel,
    .glass-card,
    .blog-card,
    .install-modal {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ===== BACKDROP-FILTER FALLBACK ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .cyber-panel,
    .glass-card,
    .blog-card {
        background: rgba(10, 12, 24, 0.92);
    }

    .site-header {
        background: rgba(2, 6, 23, 0.95);
    }

    :root[data-theme="light"] .cyber-panel,
    :root[data-theme="light"] .glass-card {
        background: rgba(255, 255, 255, 0.95);
    }

    :root[data-theme="light"] .site-header {
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    .cyber-scanlines,
    .cyber-glitch-haze,
    .cyber-glitch::before,
    .cyber-glitch::after {
        animation: none !important;
    }

    .cyber-stage::after {
        animation: none !important;
    }
}