/* Animierte Profilbanner – strikt auf Profilkopf und Vorschau begrenzt. */

/* Gemeinsame Variablen */
.profile-hero.profile-neon-banner,
.shop-preview-banner {
    --banner-color-a: #ff263d;
    --banner-color-b: #ff7a18;
    --banner-glow: rgba(255, 38, 61, .42);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    contain: paint;
}

/* Nur der Profilkopf bekommt einen transparenten Grundhintergrund */
.profile-hero.profile-neon-banner {
    background: transparent;
}

/* Animierter Neon-Verlauf */
.profile-hero.profile-neon-banner::before,
.shop-preview-banner::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        110deg,
        transparent 0 22%,
        var(--banner-color-a) 38%,
        var(--banner-color-b) 50%,
        var(--banner-color-a) 62%,
        transparent 78% 100%
    );

    background-size: 230% 100%;
    opacity: .72;
    animation: profileBannerSweep 5.8s linear infinite;
}

/* Dunkle Innenfläche mit Neon-Glow */
.profile-hero.profile-neon-banner::after,
.shop-preview-banner::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 2px;
    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 0%,
            var(--banner-glow),
            transparent 38%
        ),
        radial-gradient(
            circle at 82% 100%,
            var(--banner-glow),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(17, 17, 21, .95),
            rgba(4, 4, 7, .96)
        );

    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, .35),
        0 0 22px var(--banner-glow);
}

/* Zusätzliche Scanline nur im Profilkopf */
.profile-hero.profile-neon-banner .profile-banner-effects {
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .48;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            transparent 0 46%,
            rgba(255, 255, 255, .14) 50%,
            transparent 54% 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 6px,
            rgba(255, 255, 255, .018) 7px 8px
        );

    background-size: 220% 100%, auto;
    animation: profileBannerScan 7s linear infinite;
}

/* Inhalte liegen sicher über den Effekten */
.profile-hero.profile-neon-banner > :not(.profile-banner-effects),
.shop-preview-banner > * {
    position: relative;
    z-index: 3;
}

/* Farbvarianten */
.profile-hero.profile-neon-banner.banner-neon-red,
.shop-preview-banner.banner-neon-red {
    --banner-color-a: #ff1738;
    --banner-color-b: #ff6a00;
    --banner-glow: rgba(255, 23, 56, .46);
}

.profile-hero.profile-neon-banner.banner-neon-cyan,
.shop-preview-banner.banner-neon-cyan {
    --banner-color-a: #00eaff;
    --banner-color-b: #2070ff;
    --banner-glow: rgba(0, 234, 255, .44);
}

.profile-hero.profile-neon-banner.banner-neon-purple,
.shop-preview-banner.banner-neon-purple {
    --banner-color-a: #c837ff;
    --banner-color-b: #ff2d95;
    --banner-glow: rgba(200, 55, 255, .44);
}

.profile-hero.profile-neon-banner.banner-neon-rainbow,
.shop-preview-banner.banner-neon-rainbow {
    --banner-color-a: #00eaff;
    --banner-color-b: #ff2d95;
    --banner-glow: rgba(155, 78, 255, .46);
}

.profile-hero.profile-neon-banner.banner-neon-rainbow::before,
.shop-preview-banner.banner-neon-rainbow::before {
    background: linear-gradient(
        110deg,
        #ff2448,
        #ff9d00,
        #ffe600,
        #29e36f,
        #00eaff,
        #3977ff,
        #bc43ff,
        #ff2d95,
        #ff2448
    );

    background-size: 260% 100%;
}

.profile-hero.profile-neon-banner.banner-neon-demerzli,
.shop-preview-banner.banner-neon-demerzli {
    --banner-color-a: #ff101f;
    --banner-color-b: #8d0007;
    --banner-glow: rgba(255, 16, 31, .52);
}

/* Vorschau im XP-Shop und in Profil anpassen */
.shop-preview-banner {
    width: 100%;
    max-width: 100%;
    min-height: 104px;
    margin: 16px 0;
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .28),
        0 0 24px var(--banner-glow);
}

.shop-preview-banner-kicker {
    color: rgba(255, 255, 255, .6) !important;
    font-size: .68rem !important;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.shop-preview-banner strong {
    margin-top: 6px;
    color: #fff;
    font-size: 1.05rem;
    text-shadow: 0 0 14px var(--banner-color-a);
}

@keyframes profileBannerSweep {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

@keyframes profileBannerScan {
    from {
        background-position: 120% 0, 0 0;
    }

    to {
        background-position: -120% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-hero.profile-neon-banner::before,
    .shop-preview-banner::before,
    .profile-hero.profile-neon-banner .profile-banner-effects {
        animation: none;
    }
}