/* ==========================================================================
   BANNERS.CSS — живые обложки профиля
   --------------------------------------------------------------------------
   Работают в шапке профиля (.author-header-card .author-header-bg)
   и в примерочной / карточках рынка (.sk-preview-banner-bg).
   Матрица, город под дождём, туманность, сияние и ЭЛТ рисуются js/banner-fx.js (canvas),
   synthwave и глитч — чистый CSS. У canvas-обложек есть CSS-запаска без JS.
   ========================================================================== */

.author-header-card.has-custom-banner .author-header-bg,
.sk-preview-banner-bg {
    background-size: cover;
    background-position: center;
}

/* Общий слой для всех живых обложек */
.author-header-card[class*="sk-banner-"] .author-header-bg,
.sk-preview-banner-bg[class*="sk-banner-"] {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    filter: none !important;
    overflow: hidden;
    isolation: isolate;
}
/* Затемнение в профиле мягче, чтобы обложку было видно, а текст читался */
.author-header-card[class*="sk-banner-"] .author-header-overlay {
    background: linear-gradient(180deg, rgba(13, 17, 23, .1) 0%, rgba(13, 17, 23, .55) 55%, rgba(13, 17, 23, .9) 100%) !important;
}
.sk-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ==========================================================================
   1. ЦИФРОВАЯ МАТРИЦА (.sk-banner-matrix)
   ========================================================================== */
.author-header-card.sk-banner-matrix {
    border-color: #00ff66 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(0, 255, 102, .25) !important;
}
.author-header-card.sk-banner-matrix .author-header-bg,
.sk-preview-banner-bg.sk-banner-matrix {
    opacity: .95 !important;
    background-color: #010703 !important;
    /* Запасной вид без JS: несколько слоёв струй разной ширины и скорости */
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(1, 7, 3, .9) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='230'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2300ff66' stop-opacity='0'/%3E%3Cstop offset='.85' stop-color='%2300ff66' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23e6ffe9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' font-family='monospace' font-size='14' font-weight='700'%3E%3Ctext x='4' y='0' writing-mode='tb'%3E7ｱ0ﾈ1ｻZ9ﾀ%3C/text%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='170'%3E%3Cg fill='%2300c853' fill-opacity='.45' font-family='monospace' font-size='10'%3E%3Ctext x='3' y='0' writing-mode='tb'%3Eﾊ3ｦ8ﾐ:ﾂ5ﾘ%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 100% 100%, 46px 230px, 29px 170px !important;
    background-repeat: no-repeat, repeat, repeat !important;
    animation: skMatrixFallback 6s linear infinite !important;
}
@keyframes skMatrixFallback {
    to { background-position: 0 0, 0 230px, 0 340px; }
}
/* Когда работает canvas — CSS-запаска отключается */
.author-header-card.sk-banner-matrix .author-header-bg.has-fx,
.sk-preview-banner-bg.sk-banner-matrix.has-fx {
    background-image: none !important;
    animation: none !important;
}
.author-header-card.sk-banner-matrix .author-header-bg::after,
.sk-preview-banner-bg.sk-banner-matrix::after {
    /* лёгкая виньетка и зелёное свечение экрана */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%), linear-gradient(180deg, rgba(0, 255, 102, .05), transparent 40%);
}

/* ==========================================================================
   2. SYNTHWAVE (.sk-banner-synthwave) — закатное солнце и сетка в перспективе
   ========================================================================== */
.author-header-card.sk-banner-synthwave {
    border-color: #f43f5e !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(244, 63, 94, .28) !important;
}
.author-header-card.sk-banner-synthwave .author-header-bg,
.sk-preview-banner-bg.sk-banner-synthwave {
    --horizon: 58%;
    opacity: 1 !important;
    background-color: #0b0218 !important;
    background-image:
        /* звёзды */
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .8), transparent 60%),
        radial-gradient(1px 1px at 28% 32%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(1px 1px at 63% 26%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(1px 1px at 86% 14%, rgba(255, 255, 255, .75), transparent 60%),
        radial-gradient(1px 1px at 92% 40%, rgba(255, 255, 255, .45), transparent 60%),
        /* свечение горизонта */
        radial-gradient(ellipse 70% 22% at 68% var(--horizon), rgba(255, 41, 117, .55), transparent 70%),
        /* небо */
        linear-gradient(180deg, #0b0218 0%, #2a0845 34%, #6b0f5a 52%, #ff2975 var(--horizon), #12021f var(--horizon), #0b0218 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    animation: none !important;
}
/* солнце с прорезями */
.author-header-card.sk-banner-synthwave .author-header-bg::before,
.sk-preview-banner-bg.sk-banner-synthwave::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 68%; bottom: calc(100% - var(--horizon));
    width: min(24%, 180px); aspect-ratio: 1; transform: translate(-50%, 0);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff27a 0%, #ffb340 30%, #ff3c83 62%, #b31aff 100%);
    box-shadow: 0 0 60px rgba(255, 60, 131, .55), 0 0 120px rgba(255, 179, 64, .25);
    -webkit-mask-image: linear-gradient(180deg, #000 0 48%, transparent 48% 100%), linear-gradient(180deg, transparent 0 48%, #000 48% 56%, transparent 56% 60%, #000 60% 67%, transparent 67% 72%, #000 72% 78%, transparent 78% 84%, #000 84% 89%, transparent 89% 95%, #000 95%);
    mask-image: linear-gradient(180deg, #000 0 48%, transparent 48% 100%), linear-gradient(180deg, transparent 0 48%, #000 48% 56%, transparent 56% 60%, #000 60% 67%, transparent 67% 72%, #000 72% 78%, transparent 78% 84%, #000 84% 89%, transparent 89% 95%, #000 95%);
    animation: skSunPulse 5s ease-in-out infinite;
}
/* пол-сетка, уезжающая к горизонту */
.author-header-card.sk-banner-synthwave .author-header-bg::after,
.sk-preview-banner-bg.sk-banner-synthwave::after {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: var(--horizon); left: -60%; right: -60%; height: 120%;
    background-color: #12021f;
    background-image:
        linear-gradient(90deg, #ff2975 0 2px, transparent 2px),
        linear-gradient(0deg, #00e5ff 0 2px, transparent 2px);
    background-size: 46px 46px;
    transform-origin: 50% 0;
    transform: perspective(160px) rotateX(62deg);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 22%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 22%);
    animation: skGridRun 1.1s linear infinite;
}
@keyframes skGridRun { to { background-position: 0 46px, 0 46px; } }
@keyframes skSunPulse { 50% { box-shadow: 0 0 80px rgba(255, 60, 131, .7), 0 0 150px rgba(255, 179, 64, .35); } }

/* ==========================================================================
   3. КИБЕР-ГЛИТЧ (.sk-banner-glitch) — сдвиг каналов, рваные полосы, сканлайны
   ========================================================================== */
.author-header-card.sk-banner-glitch {
    border-color: #00f0ff !important;
    box-shadow: -2px 0 15px rgba(0, 240, 255, .4), 2px 0 15px rgba(255, 0, 85, .4) !important;
}
.author-header-card.sk-banner-glitch .author-header-bg,
.sk-preview-banner-bg.sk-banner-glitch {
    opacity: 1 !important;
    background-color: #06060c !important;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0, 240, 255, .05) 0 1px, transparent 1px 64px),
        radial-gradient(ellipse at 78% 22%, rgba(255, 0, 85, .45) 0%, transparent 55%),
        radial-gradient(ellipse at 22% 80%, rgba(0, 240, 255, .4) 0%, transparent 55%),
        linear-gradient(135deg, #0a0614, #05080f) !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    animation: skGlitchFlicker 4.5s steps(1) infinite !important;
}
/* рваные полосы: сдвигаются рывками */
.author-header-card.sk-banner-glitch .author-header-bg::before,
.sk-preview-banner-bg.sk-banner-glitch::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(180deg,
            transparent 0 14%, rgba(0, 240, 255, .55) 14% 15.2%, transparent 15.2% 31%,
            rgba(255, 255, 255, .25) 31% 31.6%, transparent 31.6% 46%,
            rgba(255, 0, 85, .6) 46% 49%, transparent 49% 67%,
            rgba(0, 240, 255, .35) 67% 67.8%, transparent 67.8% 82%,
            rgba(255, 0, 85, .4) 82% 83%, transparent 83%);
    mix-blend-mode: screen;
    animation: skGlitchTear 3.2s steps(1) infinite;
}
/* «битый» сигнал: RGB-сдвиг крупного слова */
.author-header-card.sk-banner-glitch .author-header-bg::after,
.sk-preview-banner-bg.sk-banner-glitch::after {
    content: "SIGNAL//LOST"; position: absolute; right: 4%; top: 18%; z-index: 0; pointer-events: none;
    font: 900 clamp(18px, 4.6vw, 54px)/1 ui-monospace, "Courier New", monospace; letter-spacing: .04em;
    color: rgba(255, 255, 255, .04);
    text-shadow: -3px 0 rgba(255, 0, 85, .2), 3px 0 rgba(0, 240, 255, .2);
    white-space: nowrap;
    animation: skGlitchWord 2.6s steps(1) infinite;
}
.sk-preview-banner-bg.sk-banner-glitch::after { font-size: 13px; top: 22%; right: 8%; }

@keyframes skGlitchFlicker {
    0%, 100% { filter: none; transform: none; }
    41%      { filter: hue-rotate(40deg) saturate(1.6); transform: translateX(-3px); }
    42%      { filter: none; transform: translateX(2px) skewX(-2deg); }
    43%      { transform: none; }
    77%      { filter: brightness(1.5) contrast(1.3); }
    78%      { filter: none; }
}
@keyframes skGlitchTear {
    0%   { transform: translateX(0);     clip-path: inset(0 0 0 0); opacity: .9; }
    12%  { transform: translateX(-14px); clip-path: inset(10% 0 52% 0); }
    16%  { transform: translateX(9px);   clip-path: inset(44% 0 30% 0); }
    20%  { transform: translateX(0);     clip-path: inset(0 0 0 0); opacity: .5; }
    55%  { transform: translateX(22px);  clip-path: inset(62% 0 12% 0); opacity: 1; }
    58%  { transform: translateX(-6px);  clip-path: inset(78% 0 4% 0); }
    61%  { transform: translateX(0);     clip-path: inset(0 0 0 0); opacity: .7; }
}
@keyframes skGlitchWord {
    0%, 100% { transform: none; clip-path: inset(0 0 0 0); text-shadow: -3px 0 rgba(255, 0, 85, .2), 3px 0 rgba(0, 240, 255, .2); }
    30%      { transform: translate(-6px, 1px); clip-path: inset(0 0 55% 0); text-shadow: -7px 0 rgba(255, 0, 85, .45), 6px 0 rgba(0, 240, 255, .45); }
    33%      { transform: translate(5px, -1px); clip-path: inset(48% 0 0 0); }
    36%      { transform: none; clip-path: inset(0 0 0 0); }
    71%      { transform: skewX(-12deg) translateX(8px); clip-path: inset(30% 0 35% 0); }
    73%      { transform: none; clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   4. НЕОНОВЫЙ ГОРОД ПОД ДОЖДЁМ (.sk-banner-rain) — canvas: силуэты, вывески, капли, круги в лужах
   ========================================================================== */
.author-header-card.sk-banner-rain {
    border-color: #ff2bd6 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(255, 43, 214, .25), 0 0 40px rgba(0, 229, 255, .12) !important;
}
.author-header-card.sk-banner-rain .author-header-bg,
.sk-preview-banner-bg.sk-banner-rain {
    opacity: 1 !important;
    background-color: #07031a !important;
    /* запаска без JS: небо, силуэты кварталов, косой дождь */
    background-image:
        repeating-linear-gradient(105deg, transparent 0 14px, rgba(190, 210, 255, .12) 14px 15px, transparent 15px 31px),
        linear-gradient(0deg, #05020c 0 20%, transparent 20%),
        linear-gradient(90deg, #0a0616 0 8%, transparent 8% 10%, #0a0616 10% 19%, transparent 19% 22%, #0a0616 22% 34%, transparent 34% 37%, #0a0616 37% 45%, transparent 45% 49%, #0a0616 49% 62%, transparent 62% 64%, #0a0616 64% 78%, transparent 78% 81%, #0a0616 81% 92%, transparent 92% 94%, #0a0616 94%),
        linear-gradient(180deg, #05020f 0%, #1a0836 45%, #3b0f4f 80%) !important;
    background-size: 100% 100%, 100% 100%, 100% 55%, 100% 100% !important;
    background-position: 0 0, 0 0, 0 72%, 0 0 !important;
    background-repeat: no-repeat !important;
    animation: skRainFallback .6s linear infinite !important;
}
@keyframes skRainFallback { to { background-position: 8px 31px, 0 0, 0 72%, 0 0; } }
.author-header-card.sk-banner-rain .author-header-bg::after,
.sk-preview-banner-bg.sk-banner-rain::after {
    /* туман и капли на «стекле» */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(ellipse 90% 40% at 50% 78%, rgba(255, 43, 214, .12), transparent 70%),
        radial-gradient(ellipse at 50% 30%, transparent 45%, rgba(0, 0, 0, .45) 100%);
}

/* ==========================================================================
   5. ТУМАННОСТЬ (.sk-banner-nebula) — canvas: облака газа, звёзды с параллаксом, метеоры
   ========================================================================== */
.author-header-card.sk-banner-nebula {
    border-color: #b026ff !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(176, 38, 255, .3), 0 0 50px rgba(0, 200, 255, .1) !important;
}
.author-header-card.sk-banner-nebula .author-header-bg,
.sk-preview-banner-bg.sk-banner-nebula {
    opacity: 1 !important;
    background-color: #03010a !important;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff, transparent 60%),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, .7), transparent 60%),
        radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent 60%),
        radial-gradient(1px 1px at 72% 55%, rgba(255, 255, 255, .6), transparent 60%),
        radial-gradient(1px 1px at 90% 30%, #fff, transparent 60%),
        radial-gradient(ellipse 45% 70% at 30% 70%, rgba(176, 38, 255, .45), transparent 70%),
        radial-gradient(ellipse 40% 60% at 65% 35%, rgba(255, 43, 140, .35), transparent 70%),
        radial-gradient(ellipse 35% 55% at 85% 60%, rgba(0, 200, 255, .3), transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    animation: skNebulaDrift 18s ease-in-out infinite alternate !important;
}
.author-header-card.sk-banner-nebula .author-header-bg.has-fx,
.sk-preview-banner-bg.sk-banner-nebula.has-fx { animation: none !important; }
@keyframes skNebulaDrift { to { filter: hue-rotate(25deg) brightness(1.15); } }

/* ==========================================================================
   6. СЕВЕРНОЕ СИЯНИЕ (.sk-banner-aurora) — canvas: ленты-занавесы, звёзды, горы и лес
   ========================================================================== */
.author-header-card.sk-banner-aurora {
    border-color: #3dffb0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(61, 255, 176, .22), 0 0 45px rgba(120, 80, 255, .12) !important;
}
.author-header-card.sk-banner-aurora .author-header-bg,
.sk-preview-banner-bg.sk-banner-aurora {
    opacity: 1 !important;
    background-color: #01030c !important;
    background-image:
        linear-gradient(170deg, transparent 30%, rgba(60, 255, 170, .35) 42%, transparent 52%),
        linear-gradient(185deg, transparent 25%, rgba(140, 90, 255, .3) 36%, transparent 48%),
        linear-gradient(0deg, #020a10 0 16%, transparent 16%),
        linear-gradient(180deg, #01030c 0%, #041528 60%, #06283a 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 200% 100%, 200% 100%, 100% 100%, 100% 100% !important;
    animation: skAuroraFallback 12s ease-in-out infinite alternate !important;
}
@keyframes skAuroraFallback { to { background-position: 100% 0, -100% 0, 0 0, 0 0; } }
.author-header-card.sk-banner-aurora .author-header-bg.has-fx,
.sk-preview-banner-bg.sk-banner-aurora.has-fx { animation: none !important; background-image: none !important; }

/* ==========================================================================
   7. ЭЛТ-ТЕРМИНАЛ (.sk-banner-crt) — canvas печатает лог, CSS: сканлайны, маска, бегущая полоса, виньетка
   ========================================================================== */
.author-header-card.sk-banner-crt {
    border-color: #ffb000 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .8), 0 0 25px rgba(255, 176, 0, .25) !important;
}
.author-header-card.sk-banner-crt .author-header-bg,
.sk-preview-banner-bg.sk-banner-crt {
    opacity: 1 !important;
    background-color: #0c0700 !important;
    background-image: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 0, .16), transparent 70%) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    animation: skCrtFlicker 5s steps(1) infinite !important;
}
/* без JS — надпись-заглушка */
.author-header-card.sk-banner-crt .author-header-bg:not(.has-fx)::after,
.sk-preview-banner-bg.sk-banner-crt:not(.has-fx)::after {
    content: "> SIDEKICK OS READY_"; position: absolute; left: 5%; top: 14%; z-index: 0;
    font: 700 clamp(10px, 2.2vw, 18px)/1.3 "Courier New", ui-monospace, monospace;
    color: #ffb000; text-shadow: 0 0 8px rgba(255, 170, 40, .8);
}
/* сканлайны + RGB-маска + бегущая полоса развёртки + выпуклое стекло */
.author-header-card.sk-banner-crt .author-header-bg::before,
.sk-preview-banner-bg.sk-banner-crt::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 200, 120, .07) 48%, rgba(255, 200, 120, .12) 50%, transparent 54%) 0 0 / 100% 300% no-repeat,
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 0, 0, .05) 0 1px, rgba(0, 255, 0, .04) 1px 2px, rgba(0, 80, 255, .05) 2px 3px),
        radial-gradient(ellipse 120% 140% at 50% 50%, transparent 55%, rgba(0, 0, 0, .75) 100%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .8), inset 0 0 6px rgba(255, 176, 0, .25);
    animation: skCrtRoll 6s linear infinite;
}
.author-header-card.sk-banner-crt .author-header-bg.has-fx .sk-fx-canvas,
.sk-preview-banner-bg.sk-banner-crt.has-fx .sk-fx-canvas {
    filter: blur(.3px) contrast(1.15);
    animation: skCrtJitter 7s steps(1) infinite;
}
@keyframes skCrtRoll { from { background-position: 0 -100%, 0 0, 0 0, 0 0; } to { background-position: 0 200%, 0 0, 0 0, 0 0; } }
@keyframes skCrtFlicker { 0%, 100% { filter: none; } 33% { filter: brightness(1.08); } 34% { filter: none; } 71% { filter: brightness(.9); } 72% { filter: none; } }
@keyframes skCrtJitter { 0%, 100% { transform: none; } 48% { transform: translateX(1px) skewX(-.6deg); } 49% { transform: none; } 86% { transform: translateY(-1px); } 87% { transform: none; } }

/* Уважение к «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    .author-header-card[class*="sk-banner-"] .author-header-bg,
    .author-header-card[class*="sk-banner-"] .author-header-bg::before,
    .author-header-card[class*="sk-banner-"] .author-header-bg::after,
    .sk-preview-banner-bg[class*="sk-banner-"],
    .sk-preview-banner-bg[class*="sk-banner-"]::before,
    .sk-preview-banner-bg[class*="sk-banner-"]::after,
    .sk-fx-canvas { animation: none !important; }
}