/* ==========================================================================
   gen-hero.css — единый вид hero-шапок генераторов в стиле dashboard:
   тёмный градиент + звёздное поле (::after) + светящееся пятно (::before).
   Подключается ПОСЛЕ страничного CSS, поэтому перекрывает фон героя,
   сохраняя его типографику и контент.
   ========================================================================== */

.sd-hero, .ov-hero, .ka-hero, .sm-hero, .seo-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 0%, rgba(139,92,246,.24), transparent 34%),
        radial-gradient(circle at 78% 8%,  rgba(217,70,239,.22), transparent 36%),
        radial-gradient(circle at 92% 18%, rgba(34,211,238,.10), transparent 30%),
        linear-gradient(180deg, rgba(18,14,42,.92), rgba(8,7,22,.86));
    border: 1px solid rgba(139,92,246,.32);
    box-shadow:
        0 26px 90px rgba(0,0,0,.44),
        0 0 42px rgba(139,92,246,.10),
        inset 0 1px 0 rgba(255,255,255,.07);
}

/* Светящееся пятно на переднем плане (справа сверху) */
.sd-hero::before, .ov-hero::before, .ka-hero::before, .sm-hero::before, .seo-hero::before {
    content: "";
    position: absolute;
    right: -110px; top: -130px;
    width: 520px; height: 360px;
    background:
        radial-gradient(circle at 30% 40%, rgba(217,70,239,.28), transparent 56%),
        radial-gradient(circle at 70% 60%, rgba(34,211,238,.12), transparent 58%);
    filter: blur(4px);
    opacity: .95;
    pointer-events: none;
}

/* Звёздное поле */
.sd-hero::after, .ov-hero::after, .ka-hero::after, .sm-hero::after, .seo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.4px 1.4px at 8% 18%,  rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px   at 14% 62%,   rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1.6px 1.6px at 22% 30%, rgba(192,132,252,.75), transparent 60%),
        radial-gradient(1px 1px   at 28% 80%,   rgba(255,255,255,.45), transparent 60%),
        radial-gradient(2px 2px   at 36% 14%,   rgba(255,255,255,.95), transparent 60%),
        radial-gradient(1.2px 1.2px at 41% 55%, rgba(34,211,238,.55),  transparent 60%),
        radial-gradient(1px 1px   at 48% 88%,   rgba(192,132,252,.55), transparent 60%),
        radial-gradient(1.4px 1.4px at 56% 26%, rgba(255,255,255,.65), transparent 60%),
        radial-gradient(1px 1px   at 62% 70%,   rgba(255,255,255,.45), transparent 60%),
        radial-gradient(1.8px 1.8px at 70% 12%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px   at 78% 48%,   rgba(217,70,239,.55),  transparent 60%),
        radial-gradient(1.2px 1.2px at 85% 78%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1px 1px   at 92% 32%,   rgba(34,211,238,.45),  transparent 60%),
        radial-gradient(1.4px 1.4px at 96% 64%, rgba(255,255,255,.65), transparent 60%);
    opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
    pointer-events: none;
}

/* Контент всегда поверх псевдоэлементов.
   Исключаем *-hero-deco: он абсолютно позиционирован страничным CSS,
   перебивать position нельзя (иначе иконка встаёт в поток и ломает шапку). */
.sd-hero > :not([class*="hero-deco"]),
.ov-hero > :not([class*="hero-deco"]),
.ka-hero > :not([class*="hero-deco"]),
.sm-hero > :not([class*="hero-deco"]),
.seo-hero > :not([class*="hero-deco"]) {
    position: relative;
    z-index: 1;
}

/* Анимации как на dashboard */
.sd-hero::before, .ov-hero::before, .ka-hero::before, .sm-hero::before, .seo-hero::before {
    animation: heroGlowDrift 12s ease-in-out infinite alternate;
}
.sd-hero::after, .ov-hero::after, .ka-hero::after, .sm-hero::after, .seo-hero::after {
    animation: starsDrift 22s linear infinite;
    will-change: background-position;
}

@keyframes heroGlowDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1);           opacity: .85; }
    100% { transform: translate3d(-28px, 18px, 0) scale(1.08); opacity: 1;   }
}

@keyframes starsDrift {
    0%   { background-position:
             8% 18%, 14% 62%, 22% 30%, 28% 80%, 36% 14%, 41% 55%, 48% 88%,
             56% 26%, 62% 70%, 70% 12%, 78% 48%, 85% 78%, 92% 32%, 96% 64%; }
    100% { background-position:
             14% 18%, 20% 62%, 28% 30%, 34% 80%, 42% 14%, 47% 55%, 54% 88%,
             62% 26%, 68% 70%, 76% 12%, 84% 48%, 91% 78%, 98% 32%, 102% 64%; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-hero::before, .ov-hero::before, .ka-hero::before, .sm-hero::before, .seo-hero::before,
    .sd-hero::after, .ov-hero::after, .ka-hero::after, .sm-hero::after, .seo-hero::after {
        animation: none;
    }
}