/* Profile / feed header banner backgrounds — Symposium, Commons, Oracle, profile */

.header-banner-bg.banner-default {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
}

.header-banner-bg.banner-gradient1 {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
}

.header-banner-bg.banner-gradient2 {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%);
}

.header-banner-bg.banner-gradient3 {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%);
}

.header-banner-bg.banner-geometric {
    background:
        linear-gradient(135deg, #1e293b 25%, transparent 25%),
        linear-gradient(225deg, #1e293b 25%, transparent 25%),
        linear-gradient(45deg, #1e293b 25%, transparent 25%),
        linear-gradient(315deg, #1e293b 25%, #0f172a 25%);
    background-size: 20px 20px;
    background-color: #334155;
}

.header-banner-bg.banner-waves {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.3) 0%, transparent 75%),
        radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(6, 182, 212, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.header-banner-bg.banner-matrix {
    background: linear-gradient(180deg, #000000 0%, #001a00 100%);
}

.header-banner-bg.banner-matrix::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent 0%, rgba(16, 185, 129, 0.03) 50%, transparent 100%);
    background-size: 1px 4px;
    animation: matrixScan 0.1s linear infinite;
}

.header-banner-bg.banner-aurora {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a2e 100%);
}

.header-banner-bg.banner-aurora::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(16, 185, 129, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 80%, rgba(6, 182, 212, 0.3) 0%, transparent 50%);
    animation: auroraShift 8s ease-in-out infinite;
    filter: blur(30px);
}

.header-banner-bg.banner-neongrid {
    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f2a 100%);
}

.header-banner-bg.banner-neongrid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridPulse 4s ease-in-out infinite;
}

.header-banner-bg.banner-pulse {
    background: radial-gradient(circle at center, #1a0a2e 0%, #0a0a15 100%);
}

.header-banner-bg.banner-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 50%);
    animation: pulseBanner 3s ease-in-out infinite;
}

.header-banner-bg.banner-starfield {
    background: linear-gradient(180deg, #000010 0%, #0a0a20 100%);
}

.header-banner-bg.banner-starfield::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.8) 0%, transparent 100%);
    animation: twinkle 3s ease-in-out infinite;
}

.header-banner-bg.banner-void {
    background: radial-gradient(ellipse at center, #0f0520 0%, #000005 70%);
}

.header-banner-bg.banner-void::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(139, 92, 246, 0.1) 30%, transparent 60%);
    animation: voidPulse 5s ease-in-out infinite;
}

.header-banner-bg.banner-inferno {
    background: linear-gradient(180deg, #1a0500 0%, #0a0200 100%);
}

.header-banner-bg.banner-inferno::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        radial-gradient(ellipse 100% 100% at 30% 100%, rgba(239, 68, 68, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 70% 100%, rgba(249, 115, 22, 0.3) 0%, transparent 50%);
    animation: infernoFlicker 2s ease-in-out infinite;
}

.header-banner-bg.banner-frozen {
    background: linear-gradient(180deg, #0a1520 0%, #051015 100%);
}

.header-banner-bg.banner-frozen::before {
    content: '';
    position: absolute;
    inset: -10%;
    /* Soft frost haze — breathes in place (no linear sweeps) */
    background-image:
        radial-gradient(ellipse 88% 72% at 40% 36%, rgba(207, 250, 254, 0.2) 0%, transparent 58%),
        radial-gradient(ellipse 78% 68% at 72% 58%, rgba(125, 211, 252, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse 95% 55% at 50% 88%, rgba(34, 211, 238, 0.11) 0%, transparent 50%);
    transform-origin: 50% 44%;
    animation: hdr-frozen-mist 12s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.header-banner-bg.banner-frozen::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.28) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
    animation: hdr-frozen-sparkle 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.header-banner-bg.banner-prism {
    background: linear-gradient(135deg, #1a0a2e 0%, #0a1a2e 50%, #0a2e1a 100%);
}

.header-banner-bg.banner-prism::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, rgba(239, 68, 68, 0.15) 0%, transparent 25%),
        linear-gradient(90deg, rgba(249, 115, 22, 0.1) 25%, transparent 50%),
        linear-gradient(135deg, rgba(234, 179, 8, 0.1) 50%, transparent 75%),
        linear-gradient(180deg, rgba(34, 197, 94, 0.1) 75%, transparent 100%);
    animation: prismRotate 10s linear infinite;
}

.header-banner-bg.banner-gilded {
    background: linear-gradient(135deg, #1a1505 0%, #0f0d02 100%);
}

.header-banner-bg.banner-gilded::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Wider than box so we can pan shine with background-position (no translateX — avoids sliding off mini-cards) */
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(234, 179, 8, 0.15) 25%,
        rgba(251, 191, 36, 0.22) 50%,
        rgba(234, 179, 8, 0.15) 75%,
        transparent 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: gilded-shine 3s ease-in-out infinite;
}

.header-banner-bg.banner-gilded::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(251, 191, 36, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 80%, rgba(251, 191, 36, 0.3) 0%, transparent 100%);
}

.header-banner-bg.banner-eclipse {
    background:
        radial-gradient(ellipse 130% 95% at 50% 108%, rgba(15, 23, 42, 0.45) 0%, transparent 52%),
        linear-gradient(185deg, #020617 0%, #0a0c1a 50%, #000008 100%);
    overflow: hidden;
    contain: paint;
}

.header-banner-bg.banner-eclipse::before {
    content: '';
    position: absolute;
    width: min(140%, 320px);
    aspect-ratio: 1;
    border-radius: 50%;
    left: 62%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg 16deg,
            rgba(255, 252, 245, 0.065) 16.8deg,
            transparent 17.5deg 34deg
        ),
        radial-gradient(circle at 50% 50%,
            rgba(255, 253, 250, 0.95) 0%,
            rgba(254, 243, 199, 0.68) 12%,
            rgba(251, 191, 36, 0.28) 30%,
            rgba(245, 158, 11, 0.09) 46%,
            transparent 62%
        );
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 76%);
    animation: hdr-eclipse-sun 40s linear infinite;
    pointer-events: none;
}

.header-banner-bg.banner-eclipse::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 44% 50%,
            transparent 19%,
            rgba(255, 250, 235, 0.4) 21.5%,
            rgba(251, 191, 36, 0.16) 25.5%,
            transparent 31%),
        radial-gradient(circle at 44% 50%,
            #020308 0%,
            #020308 24%,
            rgba(2, 3, 10, 0.72) 29%,
            transparent 44%);
    pointer-events: none;
}

@keyframes hdr-eclipse-sun {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.header-banner-bg.banner-nova {
    background: radial-gradient(ellipse at 28% 18%, #3b0764 0%, #0f0518 50%, #000 100%);
}

.header-banner-bg.banner-nova::before {
    content: '';
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle at 38% 32%, rgba(253, 244, 255, 0.75) 0%, rgba(240, 171, 252, 0.35) 14%, transparent 38%),
        radial-gradient(circle at 62% 58%, rgba(232, 121, 249, 0.3) 0%, transparent 42%);
    filter: blur(10px);
    animation: hdr-nova 3.5s ease-in-out infinite;
}

@keyframes hdr-nova {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.06); opacity: 1; }
}

.header-banner-bg.banner-rep_1k {
    background: linear-gradient(135deg, #0a1628 0%, #1a2744 50%, #0d1829 100%);
}

.header-banner-bg.banner-rep_1k::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 60% at 30% 20%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 100% 50% at 70% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
    animation: rep1kPulse 6s ease-in-out infinite;
}

.header-banner-bg.banner-rep_10k {
    background: linear-gradient(135deg, #1a0d2e 0%, #2d1850 50%, #1a0d2e 100%);
}

.header-banner-bg.banner-rep_10k::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 80% at 20% 30%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 80% 70%, rgba(168, 85, 247, 0.2) 0%, transparent 50%);
    background-size: 150% 150%;
    background-position: 0% 50%;
    animation: rep10kWave 8s ease-in-out infinite;
}

.header-banner-bg.banner-rep_100k {
    background: linear-gradient(135deg, #1a1505 0%, #2d2408 50%, #1a1505 100%);
}

.header-banner-bg.banner-rep_100k::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0%, rgba(234, 179, 8, 0.15) 50%, transparent 100%),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    animation: rep100kShine 4s ease-in-out infinite;
}

.header-banner-bg.banner-rep_1m {
    background:
        radial-gradient(ellipse 150% 100% at 50% 0%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a15 0%, #0d2818 50%, #0a1a15 100%);
}

.header-banner-bg.banner-rep_1m::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 30%, rgba(16, 185, 129, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 70% 70%, rgba(52, 211, 153, 0.15) 0%, transparent 50%);
    animation: rep1mAura 6s ease-in-out infinite;
}

.header-banner-bg.banner-rep_10m {
    background: linear-gradient(135deg, #064e3b 0%, #10b981 30%, #34d399 50%, #10b981 70%, #064e3b 100%);
}

@keyframes matrixScan {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

@keyframes auroraShift {
    0%, 100% { transform: translateX(-10%) translateY(-5%) rotate(0deg); }
    50% { transform: translateX(10%) translateY(5%) rotate(5deg); }
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes pulseBanner {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes voidPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.22); opacity: 0.8; }
}

@keyframes infernoFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes hdr-frozen-mist {
    0%, 100% {
        opacity: 0.76;
        transform: scale(1);
        filter: saturate(1) brightness(1);
    }
    42% {
        opacity: 0.97;
        transform: scale(1.045);
        filter: saturate(1.07) brightness(1.05);
    }
    68% {
        opacity: 0.86;
        transform: scale(1.02);
        filter: saturate(1.03) brightness(1.02);
    }
}

@keyframes hdr-frozen-sparkle {
    0%, 100% { opacity: 0.32; }
    50% { opacity: 0.85; }
}

@keyframes prismRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes gilded-shine {
    0%, 100% { opacity: 0.5; background-position: 0% 50%; }
    50% { opacity: 1; background-position: 100% 50%; }
}

@keyframes rep1kPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes rep10kWave {
    0%, 100% { opacity: 0.6; background-position: 0% 50%; }
    50% { opacity: 1; background-position: 100% 50%; }
}

@keyframes rep100kShine {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes rep1mAura {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}