/* --- 1. ГЛОБАЛЬНІ ЗМІННІ --- */


/* Робимо всі анімаційні об'єкти ігноруючими кліки та стійкими до пауз */
.z-running-goose,
.z-egg,
.z-goose-track {
    pointer-events: none !important; /* Кліки проходять крізь них */
    user-select: none !important; /* Заборона виділення */
    animation-play-state: running !important; /* Примусовий запуск */
    will-change: transform; /* Оптимізація для GPU */
}

/* Прибираємо глобальну паузу при фокусі, якщо вона лишилася в кеші */
:root * {
    animation-play-state: running !important;
}
/* --- ТОТАЛЬНЕ ПЕРЕКРИТТЯ ФОНУ --- */
html {
    background-color: #ffffff !important;
}

/* --- 2. ТОТАЛЬНИЙ ЗУМЕРСЬКИЙ ФОН --- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Примусово прибираємо будь-який сірий колір */
    background-color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    color: var(--z-black);
    position: relative;
    background-attachment: fixed;
}

    /* Шар з неоновими плямами (Понад білим фоном) */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background: radial-gradient(circle at 15% 25%, rgba(0, 242, 254, 0.15) 0%, transparent 40%), radial-gradient(circle at 85% 75%, rgba(255, 0, 255, 0.12) 0%, transparent 40%), #ffffff !important;
        pointer-events: none;
    }

    /* Шар піксельної сітки (Поверх плям) */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px) !important;
        background-size: 50px 50px;
        pointer-events: none;
    }
/* Вимикаємо фон у всіх системних контейнерів Blazor */
.page, .z-gang-theme, main, article {
    background: transparent !important;
    background-color: transparent !important;
}
.z-gang-theme::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 50; /* Поверх усього контенту */
}
    .z-gang-theme::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('https://grainy-gradients.vercel.app/noise.svg');
        opacity: 0.05;
        pointer-events: none;
        z-index: 50; /* Поверх усього контенту */
    }
.page, .z-gang-theme {
    background: transparent !important;
    position: relative;
}

    /* Ефект зернистості */
    .z-gang-theme::before {
        content: "";
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: url('https://grainy-gradients.vercel.app/noise.svg');
        opacity: 0.05;
        pointer-events: none;
        z-index: 50;
    }

/* --- 3. ХЕДЕР ТА АНІМАЦІЇ --- */
header {
    background: #fff !important;
    border-bottom: 8px solid #000 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: hidden;
    height: 85px;
    background-image: linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

@keyframes pixelRainFall {
    0% {
        background-position: 0 0, 10px 10px, 20px 5px, 15px 20px;
    }

    100% {
        background-position: 0 640px, 10px 960px, 20px 480px, 15px 800px;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* --- 4. КНОПКИ ТА ІНПУТИ --- */
.shadow-pixel {
    box-shadow: 4px 4px 0px #000 !important;
    border: 3px solid #000 !important;
}

.shadow-hard {
    box-shadow: 12px 12px 0px #000 !important;
    border: 6px solid #000 !important;
}

.z-input-pixel {
    width: 100%;
    background: #fff;
    border: 4px solid #000;
    padding: 12px 20px;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    outline: none;
    text-transform: uppercase;
    box-shadow: 4px 4px 0px #000;
    transition: 0.1s steps(2);
}

    .z-input-pixel:focus {
        background: var(--z-cyan);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--z-pink), 10px 10px 0px #000 !important;
    }

/* --- 5. ФУТЕР --- */

/* --- 6. АДАПТИВНІСТЬ --- */


/* --- ПЕРЕМОГА НАД БУТСТРАПОМ --- */
.container,
.container-fluid,
.row,
.col,
main {
    background-color: transparent !important;
}

/* Прибираємо дефолтний фон, який Bootstrap міг дати для body */
body {
    background-color: transparent !important;
}

/* Залишаємо фон тільки там, де він потрібен (картки, банери) */
.z-item-card,
.z-hero-card,
.z-sidebar {
    background-color: #fff !important;
}

/* Основний контейнер */
.z-footer-brutal {
    background: #000 !important;
    border-top: 10px solid #000;
    box-shadow: 0 -10px 0px #ff00ea; /* Рожева лінія зверху */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Рядок, що біжить */
.z-footer-marquee {
    background: #fff700;
    color: #000;
    padding: 10px 0;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 4px solid #000;
}

    .z-footer-marquee span {
        display: inline-block;
        animation: marquee 15s linear infinite;
        font-size: 1.2rem;
    }

/* Логотип */
.z-footer-logo-main {
    font-size: 4rem;
    line-height: 0.8;
    font-weight: 950;
    text-shadow: 4px 4px 0px #ff00ea;
}

.text-neon-cyan {
    color: #00f2ff;
    text-shadow: 0 0 15px #00f2ff;
}

/* Соцмережі */
.z-soc-neon {
    width: 60px;
    height: 60px;
    background: #111;
    border: 3px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    text-decoration: none;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .z-soc-neon:hover {
        transform: rotate(-10deg) scale(1.15);
        color: #000;
    }

    .z-soc-neon.link-cyan:hover {
        background: #00f2ff;
        box-shadow: 0 0 20px #00f2ff;
        border-color: #fff;
    }

    .z-soc-neon.link-pink:hover {
        background: #ff00ea;
        box-shadow: 0 0 20px #ff00ea;
        border-color: #fff;
    }

    .z-soc-neon.link-green:hover {
        background: #39ff14;
        box-shadow: 0 0 20px #39ff14;
        border-color: #fff;
    }

/* Картка підписки */
.z-footer-card {
    background: #0a0a0a;
    border: 3px solid #333;
    box-shadow: 10px 10px 0px #111;
}

.z-input-dark {
    width: 100%;
    background: #000;
    border: 3px solid #333;
    padding: 12px;
    color: #fff;
    font-weight: 700;
    outline: none;
}

    .z-input-dark:focus {
        border-color: #fff700;
        box-shadow: 0 0 10px #fff700;
    }

.z-btn-neon-send {
    width: 100%;
    background: #ff00ea;
    color: #fff;
    border: 3px solid #000;
    padding: 12px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 5px 5px 0px #00f2ff;
    transition: 0.1s;
}

    .z-btn-neon-send:hover {
        transform: translate(-3px, -3px);
        box-shadow: 8px 8px 0px #fff;
    }

/* Копірайт та посилання */
.z-copy-brutal {
    font-family: monospace;
    font-size: 0.8rem;
    color: #444;
}

.z-footer-link-sub {
    color: #666;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.8rem;
}

    .z-footer-link-sub:hover {
        color: #fff700;
        text-decoration: underline;
    }

/* Глітч анімація для лого */
.z-glitch-wrapper:hover .z-footer-logo-main {
    animation: glitch-text 0.3s infinite;
}

@keyframes glitch-text {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
        color: #ff00ea;
    }

    40% {
        transform: translate(-3px, -3px);
        color: #00f2ff;
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0);
    }
}

/* ПРИМУСОВИЙ ФІКС КЛІКІВ */
.z-backdrop-layer {
    pointer-events: none !important; /* Кліки проходять крізь фон */
    z-index: -100 !important;
}

/* Оверлей має бути повністю інертним, якщо не активний */
.z-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
}

/* Кнопки мають бути завжди зверху та клікабельні */
.z-btn, .z-action-btn, .z-btn-menu {
    position: relative;
    z-index: 2000 !important;
    pointer-events: auto !important;
}