/* Premium Profile Styles - Avatar Borders & Banners */

/*
   Smooth-loop override
   Many of the premium styles animate background-position or transforms.
   Some browsers show a visible 'jump' when the animation resets to 0%.
   Force linear timing and alternate direction for banner and border
   pseudo-element animations to create a smooth back-and-forth loop.
*/
.premium-smooth-loop-banner,
[class*="banner-"],
[class*="card-border-"]::before,
[class*="card-border-"]::after,
[class*="avatar-border-"]::before,
[class*="avatar-border-"]::after {
    /* Use linear timing and alternate direction for smooth loops */
    animation-timing-function: linear !important;
    animation-direction: alternate !important;
}

/* ===================================
   STYLE 1: Starflare (Rainbow Pulse)
   =================================== */
.avatar-border-starflare {
    position: relative;
}

.avatar-border-starflare::before,
.avatar-border-starflare::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, 
        #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: starflare-pulse 20s linear infinite;
}

.avatar-border-starflare::after {
    filter: blur(20px);
}

@keyframes starflare-pulse {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.banner-starflare {
    background: linear-gradient(45deg, #e91e63, #2196f3, #4caf50, #ff9800, #f44336);
    background-size: 400% 400%;
    animation: starflare-banner 15s linear infinite;
    animation-direction: alternate;
}

@keyframes starflare-banner {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card-border-starflare {
    position: relative;
}

.card-border-starflare::before,
.card-border-starflare::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, 
        #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: starflare-pulse 20s linear infinite;
}

.card-border-starflare::after {
    filter: blur(15px);
}

/* ===================================
   STYLE 2: Cosmic Wave (Purple-Blue)
   =================================== */
.avatar-border-cosmic-wave {
    position: relative;
}

.avatar-border-cosmic-wave::before,
.avatar-border-cosmic-wave::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #8a9df9, #a67ed4, #f093fb, #6fc5ff, #8a9df9);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: cosmic-wave-rotate 12s linear infinite;
}

.avatar-border-cosmic-wave::after {
    filter: blur(15px);
}

@keyframes cosmic-wave-rotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.banner-cosmic-wave {
    background: linear-gradient(135deg, #7986cb 0%, #9c27b0 50%, #e91e63 100%);
    background-size: 200% 200%;
    animation: cosmic-wave-banner 10s linear infinite;
    animation-direction: alternate;
}

@keyframes cosmic-wave-banner {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.card-border-cosmic-wave {
    position: relative;
}

.card-border-cosmic-wave::before,
.card-border-cosmic-wave::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #8a9df9, #a67ed4, #f093fb, #6fc5ff, #8a9df9);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: cosmic-wave-rotate 12s linear infinite;
}

.card-border-cosmic-wave::after {
    filter: blur(12px);
}

/* ===================================
   STYLE 3: Neon Nights (Cyan-Magenta)
   =================================== */
.avatar-border-neon-nights {
    position: relative;
}

.avatar-border-neon-nights::before,
.avatar-border-neon-nights::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #00f5ff, #ff00ff, #00f5ff, #ff00ff);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: neon-nights-glow 8s linear infinite;
}

.avatar-border-neon-nights::after {
    filter: blur(25px);
    opacity: 0.8;
}

@keyframes neon-nights-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.banner-neon-nights {
    background: linear-gradient(90deg, #2a2e47, #3a3458, #2a2e47);
    position: relative;
}

.banner-neon-nights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, #00f5ff 50%, transparent 70%);
    background-size: 200%;
    animation: neon-nights-banner 6s linear infinite;
    opacity: 0.3;
}

@keyframes neon-nights-banner {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.card-border-neon-nights {
    position: relative;
}

.card-border-neon-nights::before,
.card-border-neon-nights::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #00f5ff, #ff00ff, #00f5ff, #ff00ff);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: neon-nights-glow 8s linear infinite;
}

.card-border-neon-nights::after {
    filter: blur(18px);
    opacity: 0.8;
}

/* ===================================
   STYLE 4: Golden Aura (Majestic Gold)
   =================================== */
.avatar-border-golden-aura {
    position: relative;
}

.avatar-border-golden-aura::before,
.avatar-border-golden-aura::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffff99, #ffa500, #ffd700, #ffb347, #ffe55c, #ffd700);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: golden-majestic-flow 12s linear infinite;
}

.avatar-border-golden-aura::after {
    filter: blur(22px);
    opacity: 0.9;
}

@keyframes golden-majestic-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.banner-golden-aura {
    background: linear-gradient(135deg, #ff8f00, #ffc107, #ffeb3b, #ffc107, #ff8f00);
    position: relative;
}

.banner-golden-aura::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 193, 7, 0.4) 20%, 
        rgba(255, 235, 59, 0.6) 50%, 
        rgba(255, 143, 0, 0.5) 80%, 
        transparent 100%);
    background-size: 300%;
    animation: golden-banner-sweep 8s linear infinite;
    animation-direction: alternate;
    opacity: 0.6;
}

@keyframes golden-banner-sweep {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.card-border-golden-aura {
    position: relative;
}

.card-border-golden-aura::before,
.card-border-golden-aura::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffff99, #ffa500, #ffd700, #ffb347, #ffe55c, #ffd700);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: golden-majestic-flow 12s linear infinite;
}

.card-border-golden-aura::after {
    filter: blur(18px);
    opacity: 0.8;
}

/* ===================================
   STYLE 5: Dragon Fire (Red-Orange)
   =================================== */
.avatar-border-dragon-fire {
    position: relative;
}

.avatar-border-dragon-fire::before,
.avatar-border-dragon-fire::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #ff4444, #ff6500, #ffa500, #ff4444);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: dragon-fire-burn 6s linear infinite;
}

.avatar-border-dragon-fire::after {
    filter: blur(22px);
}

@keyframes dragon-fire-burn {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.banner-dragon-fire {
    background: linear-gradient(180deg, #d32f2f, #f44336, #d32f2f);
    position: relative;
}

.banner-dragon-fire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 20%, #d32f2f 30%, #ff5722 40%, #ff9800 50%, 
        #ff5722 60%, #d32f2f 70%, transparent 80%);
    background-size: 300%;
    animation: dragon-fire-banner 10s linear infinite;
    opacity: 0.4;
}

@keyframes dragon-fire-banner {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.card-border-dragon-fire {
    position: relative;
}

.card-border-dragon-fire::before,
.card-border-dragon-fire::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #ff4444, #ff6500, #ffa500, #ff4444);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: dragon-fire-burn 6s linear infinite;
}

.card-border-dragon-fire::after {
    filter: blur(16px);
}

/* ===================================
   STYLE 6: Ocean Depths (Blue-Teal)
   =================================== */
.avatar-border-ocean-depths {
    position: relative;
}

.avatar-border-ocean-depths::before,
.avatar-border-ocean-depths::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #0077be, #00bfff, #40e0d0, #0077be);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: ocean-flow 14s ease infinite;
}

.avatar-border-ocean-depths::after {
    filter: blur(16px);
}

@keyframes ocean-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.banner-ocean-depths {
    background: linear-gradient(135deg, #0d47a1, #1976d2, #2196f3, #03a9f4, #00bcd4, #1976d2);
    background-size: 400% 400%;
    animation: ocean-depths-flow 15s ease-in-out infinite;
    position: relative;
}

.banner-ocean-depths::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, #1565c0, #00acc1, #0097a7, transparent);
    background-size: 300%;
    animation: ocean-wave-primary 8s ease-in-out infinite;
    opacity: 0.4;
}

.banner-ocean-depths::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 150% 100% at 50% 100%, #4fc3f7 0%, transparent 50%);
    animation: ocean-bubble 10s ease-in-out infinite;
    opacity: 0.2;
}

@keyframes ocean-depths-flow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 50%; }
}

@keyframes ocean-wave-primary {
    0% { background-position: -100% 0; transform: translateY(0px); }
    50% { background-position: 50% 0; transform: translateY(-5px); }
    100% { background-position: 200% 0; transform: translateY(0px); }
}

@keyframes ocean-bubble {
    0%, 100% { opacity: 0.2; transform: scale(1) translateY(0px); }
    50% { opacity: 0.4; transform: scale(1.1) translateY(-10px); }
}

.card-border-ocean-depths {
    position: relative;
}

.card-border-ocean-depths::before,
.card-border-ocean-depths::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #0077be, #00bfff, #40e0d0, #0077be);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: ocean-flow 14s ease infinite;
}

.card-border-ocean-depths::after {
    filter: blur(12px);
}

/* ===================================
   STYLE 7: Emerald Dream (Green)
   =================================== */
.avatar-border-emerald-dream {
    position: relative;
}

.avatar-border-emerald-dream::before,
.avatar-border-emerald-dream::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #00ff87, #60efff, #00ff87, #60efff);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: emerald-shine 10s linear infinite;
}

.avatar-border-emerald-dream::after {
    filter: blur(20px);
}

@keyframes emerald-shine {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

.banner-emerald-dream {
    background: linear-gradient(45deg, #1b5e20, #2e7d32, #388e3c, #4caf50, #66bb6a, #81c784, #4caf50, #2e7d32);
    background-size: 500% 500%;
    animation: emerald-dream-flow 18s ease-in-out infinite;
    position: relative;
}

.banner-emerald-dream::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(120deg, transparent 0%, #00e676 25%, #69f0ae 50%, #00c853 75%, transparent 100%);
    background-size: 300%;
    animation: emerald-shimmer 7s ease-in-out infinite;
    opacity: 0.4;
}

.banner-emerald-dream::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, #a5d6a7 0%, transparent 40%), 
                radial-gradient(circle at 70% 30%, #c8e6c9 0%, transparent 40%);
    animation: emerald-sparkle 12s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes emerald-dream-flow {
    0% { background-position: 0% 50%; }
    20% { background-position: 100% 30%; }
    40% { background-position: 80% 80%; }
    60% { background-position: 20% 90%; }
    80% { background-position: 90% 20%; }
    100% { background-position: 0% 50%; }
}

@keyframes emerald-shimmer {
    0% { background-position: -150% 0; opacity: 0.3; }
    50% { background-position: 50% 0; opacity: 0.5; }
    100% { background-position: 250% 0; opacity: 0.3; }
}

@keyframes emerald-sparkle {
    0%, 100% { opacity: 0.2; transform: rotate(0deg) scale(1); }
    33% { opacity: 0.4; transform: rotate(120deg) scale(1.1); }
    66% { opacity: 0.3; transform: rotate(240deg) scale(0.9); }
}

.card-border-emerald-dream {
    position: relative;
}

.card-border-emerald-dream::before,
.card-border-emerald-dream::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #00ff87, #60efff, #00ff87, #60efff);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: emerald-shine 10s linear infinite;
}

.card-border-emerald-dream::after {
    filter: blur(15px);
}

/* =============================================
   STYLE 8: Shadow Realm (Dark Purple) - ULTIMATE
   ============================================= */
.avatar-border-shadow-realm {
    position: relative;
}

.avatar-border-shadow-realm::before,
.avatar-border-shadow-realm::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #4a148c, #7b1fa2, #9c27b0, #ba68c8, #4a148c);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: shadow-realm-glow 15s ease infinite;
}

.avatar-border-shadow-realm::after {
    filter: blur(25px);
    opacity: 0.7;
}

@keyframes shadow-realm-glow {
    0%, 100% { background-position: 0% 50%; filter: brightness(0.9); }
    50% { background-position: 100% 50%; filter: brightness(1.2); }
}

.banner-shadow-realm {
    background: linear-gradient(135deg, #4a148c, #7b1fa2, #9c27b0, #7b1fa2, #4a148c);
    position: relative;
}

.banner-shadow-realm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(123, 31, 162, 0.4) 20%, 
        rgba(186, 104, 200, 0.6) 50%, 
        rgba(156, 39, 176, 0.5) 80%, 
        transparent 100%);
    background-size: 300%;
    animation: shadow-realm-sweep 10s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes shadow-realm-sweep {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.card-border-shadow-realm {
    position: relative;
}

.card-border-shadow-realm::before,
.card-border-shadow-realm::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #4a148c, #7b1fa2, #9c27b0, #ba68c8, #4a148c, #7b1fa2, #9c27b0, #4a148c);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: shadow-realm-flow 14s linear infinite;
}

.card-border-shadow-realm::after {
    filter: blur(18px);
    opacity: 0.8;
}

@keyframes shadow-realm-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ===================================
   STYLE 9: Inferno (Lava Flow) - ULTIMATE
   =================================== */
.avatar-border-inferno {
    position: relative;
}

.avatar-border-inferno::before,
.avatar-border-inferno::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #8B0000, #DC143C, #FF4500, #FFD700, #FF4500, #DC143C, #8B0000);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: inferno-blaze 10s linear infinite;
}

.avatar-border-inferno::after {
    filter: blur(25px);
}

@keyframes inferno-blaze {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.banner-inferno {
    background: linear-gradient(180deg, #CC4125, #FF6347, #D2691E, #CC4125);
    position: relative;
    overflow: hidden;
}

.banner-inferno::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Match the inferno border colors exactly: dark red → crimson → orange → gold */
    background: radial-gradient(ellipse at center bottom, 
        rgba(255,215,0,0.9) 0%, rgba(255,69,0,0.8) 25%, rgba(220,20,60,0.7) 50%, rgba(139,0,0,0.5) 75%, transparent 90%),
        linear-gradient(0deg, 
        rgba(255,69,0,0.8) 0%, rgba(255,215,0,0.7) 30%, rgba(220,20,60,0.5) 60%, rgba(139,0,0,0.3) 85%, transparent 100%);
    background-size: 130% 250%, 110% 180%;
    /* Softer wavy edges with more gradual transitions */
    clip-path: polygon(
        0% 12%, 8% 6%, 16% 10%, 24% 4%, 32% 8%, 40% 3%, 48% 7%, 56% 2%, 64% 9%, 72% 5%, 80% 8%, 88% 3%, 96% 6%, 100% 12%,
        100% 88%, 92% 94%, 84% 90%, 76% 96%, 68% 92%, 60% 97%, 52% 93%, 44% 98%, 36% 91%, 28% 95%, 20% 92%, 12% 97%, 4% 94%, 0% 88%
    );
    /* Gentler flickering with smoother transitions */
    animation: inferno-flames 4s ease-in-out infinite alternate,
               inferno-heat-wave 6s ease-in-out infinite,
               inferno-wave-edges 8s ease-in-out infinite;
    opacity: 0.7;
    filter: blur(6px);
    will-change: transform, opacity, clip-path;
    mix-blend-mode: screen;
}

.banner-inferno::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Additional soft layer with matching inferno border colors */
    background: radial-gradient(ellipse at center bottom, 
        rgba(255,215,0,0.4) 0%, rgba(255,69,0,0.3) 40%, transparent 70%);
    /* Very soft edge fade */
    mask: linear-gradient(to bottom, 
        transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.8) 30%, 
        rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.3) 85%, transparent 100%);
    opacity: 0.5;
    filter: blur(8px);
    mix-blend-mode: screen;
}

@keyframes inferno-flames {
    /* Gentler flame movement with smoother scaling */
    0% { 
        background-position: 0% 0%, 0% 100%;
        transform: scaleY(1) scaleX(0.99);
        opacity: 0.55;
    }
    20% { 
        background-position: 6% -10%, 3% 85%;
        transform: scaleY(1.06) scaleX(1.01);
        opacity: 0.65;
    }
    40% { 
        background-position: -3% 5%, -2% 92%;
        transform: scaleY(0.98) scaleX(0.99);
        opacity: 0.6;
    }
    60% { 
        background-position: 5% -8%, 4% 88%;
        transform: scaleY(1.04) scaleX(1.02);
        opacity: 0.7;
    }
    80% { 
        background-position: -4% 3%, -2% 95%;
        transform: scaleY(0.96) scaleX(0.98);
        opacity: 0.58;
    }
    100% { 
        background-position: 0% 0%, 0% 100%;
        transform: scaleY(1) scaleX(1);
        opacity: 0.55;
    }
}

@keyframes inferno-wave-edges {
    /* Flowing wave motion with softer, more gradual edges */
    0% { 
        clip-path: polygon(
            0% 12%, 8% 6%, 16% 10%, 24% 4%, 32% 8%, 40% 3%, 48% 7%, 56% 2%, 64% 9%, 72% 5%, 80% 8%, 88% 3%, 96% 6%, 100% 12%,
            100% 88%, 92% 94%, 84% 90%, 76% 96%, 68% 92%, 60% 97%, 52% 93%, 44% 98%, 36% 91%, 28% 95%, 20% 92%, 12% 97%, 4% 94%, 0% 88%
        );
    }
    25% { 
        clip-path: polygon(
            0% 10%, 8% 8%, 16% 5%, 24% 9%, 32% 4%, 40% 7%, 48% 3%, 56% 8%, 64% 5%, 72% 10%, 80% 4%, 88% 7%, 96% 2%, 100% 9%,
            100% 90%, 92% 92%, 84% 95%, 76% 91%, 68% 96%, 60% 93%, 52% 97%, 44% 92%, 36% 95%, 28% 90%, 20% 96%, 12% 93%, 4% 98%, 0% 91%
        );
    }
    50% { 
        clip-path: polygon(
            0% 8%, 8% 4%, 16% 12%, 24% 6%, 32% 10%, 40% 2%, 48% 9%, 56% 5%, 64% 11%, 72% 3%, 80% 7%, 88% 10%, 96% 4%, 100% 8%,
            100% 92%, 92% 96%, 84% 88%, 76% 94%, 68% 90%, 60% 98%, 52% 91%, 44% 95%, 36% 89%, 28% 97%, 20% 93%, 12% 90%, 4% 96%, 0% 92%
        );
    }
    75% { 
        clip-path: polygon(
            0% 14%, 8% 3%, 16% 8%, 24% 11%, 32% 5%, 40% 9%, 48% 2%, 56% 10%, 64% 6%, 72% 12%, 80% 3%, 88% 8%, 96% 11%, 100% 5%,
            100% 86%, 92% 97%, 84% 92%, 76% 89%, 68% 95%, 60% 91%, 52% 98%, 44% 90%, 36% 94%, 28% 88%, 20% 97%, 12% 92%, 4% 89%, 0% 95%
        );
    }
    100% { 
        clip-path: polygon(
            0% 12%, 8% 6%, 16% 10%, 24% 4%, 32% 8%, 40% 3%, 48% 7%, 56% 2%, 64% 9%, 72% 5%, 80% 8%, 88% 3%, 96% 6%, 100% 12%,
            100% 88%, 92% 94%, 84% 90%, 76% 96%, 68% 92%, 60% 97%, 52% 93%, 44% 98%, 36% 91%, 28% 95%, 20% 92%, 12% 97%, 4% 94%, 0% 88%
        );
    }
}

@keyframes inferno-heat-wave {
    /* Smoother heat distortion with gentler blur changes */
    0% { filter: blur(4px) hue-rotate(0deg); }
    25% { filter: blur(5px) hue-rotate(3deg); }
    50% { filter: blur(4.5px) hue-rotate(-2deg); }
    75% { filter: blur(5.5px) hue-rotate(4deg); }
    100% { filter: blur(4px) hue-rotate(0deg); }
}

.card-border-inferno {
    position: relative;
}

.card-border-inferno::before,
.card-border-inferno::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #8B0000, #DC143C, #FF4500, #FFD700, #FF4500, #DC143C, #8B0000);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: inferno-blaze 10s linear infinite;
}

.card-border-inferno::after {
    filter: blur(18px);
}

/* ===================================
   STYLE 10: Arctic Frost (Ice Blue) - ULTIMATE
   =================================== */
.avatar-border-arctic-frost {
    position: relative;
}

.avatar-border-arctic-frost::before,
.avatar-border-arctic-frost::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #00d4ff, #b8f2ff, #ffffff, #b8f2ff, #00d4ff);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: arctic-crystallize 18s ease infinite;
}

.avatar-border-arctic-frost::after {
    filter: blur(20px);
}

@keyframes arctic-crystallize {
    0%, 100% { background-position: 0% 50%; opacity: 0.9; }
    50% { background-position: 100% 50%; opacity: 1; }
}

.banner-arctic-frost {
    background: linear-gradient(135deg, #87ceeb, #b0e0e6, #87ceeb);
    position: relative;
}

.banner-arctic-frost::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, #00d4ff, #ffffff, #00d4ff, transparent);
    background-size: 200%;
    animation: arctic-banner-shimmer 12s linear infinite;
    opacity: 0.25;
}

@keyframes arctic-banner-shimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.card-border-arctic-frost {
    position: relative;
}

.card-border-arctic-frost::before,
.card-border-arctic-frost::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #00d4ff, #b8f2ff, #ffffff, #b8f2ff, #00d4ff);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: arctic-crystallize 18s ease infinite;
}

.card-border-arctic-frost::after {
    filter: blur(15px);
}

/* ===================================
   STYLE 11: Sunset Horizon (Orange-Pink)
   =================================== */
.avatar-border-sunset-horizon {
    position: relative;
}

.avatar-border-sunset-horizon::before,
.avatar-border-sunset-horizon::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #ff6b6b);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: sunset-glow 14s ease infinite;
}

.avatar-border-sunset-horizon::after {
    filter: blur(18px);
}

@keyframes sunset-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.banner-sunset-horizon {
    background: linear-gradient(180deg, #ffb3ba, #ffdfba, #ffb3ba);
    position: relative;
}

.banner-sunset-horizon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff6b6b, #feca57, #ff9ff3);
    background-size: 200%;
    animation: sunset-banner 10s linear infinite;
    animation-direction: alternate;
    opacity: 0.35;
}

@keyframes sunset-banner {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

.card-border-sunset-horizon {
    position: relative;
}

.card-border-sunset-horizon::before,
.card-border-sunset-horizon::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #ff6b6b);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: sunset-glow 14s ease infinite;
}

.card-border-sunset-horizon::after {
    filter: blur(14px);
}

/* ===================================
   STYLE 12: Electric Storm (Lightning)
   =================================== */
.avatar-border-electric-storm {
    position: relative;
}

.avatar-border-electric-storm::before,
.avatar-border-electric-storm::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #4169e1, #1e90ff, #00ffff, #4169e1);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: electric-pulse 5s linear infinite;
}

.avatar-border-electric-storm::after {
    filter: blur(20px);
}

@keyframes electric-pulse {
    0%, 100% { background-position: 0% 50%; opacity: 0.9; }
    50% { background-position: 100% 50%; opacity: 1; }
}

.banner-electric-storm {
    background: linear-gradient(180deg, #3f51b5, #5c6bc0, #3f51b5);
    position: relative;
}

.banner-electric-storm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, #303f9f 25%, #2196f3 50%, #00bcd4 75%, transparent 100%);
    background-size: 200%;
    animation: electric-storm-banner 7s linear infinite;
    opacity: 0.3;
}

@keyframes electric-storm-banner {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.card-border-electric-storm {
    position: relative;
}

.card-border-electric-storm::before,
.card-border-electric-storm::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #4169e1, #1e90ff, #00ffff, #4169e1);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: electric-pulse 5s linear infinite;
}

.card-border-electric-storm::after {
    filter: blur(15px);
}

/* ===================================
   STYLE 13: Mystic Aurora (Multi-color)
   =================================== */
.avatar-border-mystic-aurora {
    position: relative;
}

.avatar-border-mystic-aurora::before,
.avatar-border-mystic-aurora::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #00ffab, #2ec5ce, #9b59b6, #e74c3c, #00ffab);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: aurora-dance 20s ease infinite;
}

.avatar-border-mystic-aurora::after {
    filter: blur(25px);
    opacity: 0.8;
}

@keyframes aurora-dance {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 75%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 25%; }
}

.banner-mystic-aurora {
    background: linear-gradient(180deg, #a0ffcd, #b5ff8a, #a0ffcd);
    position: relative;
}

.banner-mystic-aurora::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #00ffab, #2ec5ce, #9b59b6, #e74c3c);
    background-size: 300%;
    animation: aurora-banner-flow 15s linear infinite;
    animation-direction: alternate;
    opacity: 0.3;
}

@keyframes aurora-banner-flow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

.card-border-mystic-aurora {
    position: relative;
}

.card-border-mystic-aurora::before,
.card-border-mystic-aurora::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #00ffab, #2ec5ce, #9b59b6, #e74c3c, #00ffab);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: aurora-dance 20s ease infinite;
}

.card-border-mystic-aurora::after {
    filter: blur(18px);
    opacity: 0.8;
}

/* ===================================
   STYLE 14: Toxic Venom (Lime-Green)
   =================================== */
.avatar-border-toxic-venom {
    position: relative;
}

.avatar-border-toxic-venom::before,
.avatar-border-toxic-venom::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #39ff14, #7fff00, #adff2f, #39ff14);
    background-size: 300%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: toxic-ooze 8s linear infinite;
}

.avatar-border-toxic-venom::after {
    filter: blur(22px);
}

@keyframes toxic-ooze {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.banner-toxic-venom {
    background: linear-gradient(135deg, #33691e, #558b2f, #689f38, #7cb342, #8bc34a, #9ccc65, #689f38, #558b2f);
    background-size: 600% 600%;
    animation: toxic-venom-flow 16s ease-in-out infinite;
    position: relative;
}

.banner-toxic-venom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, #76ff03 20%, #64dd17 40%, #aeea00 60%, #c6ff00 80%, transparent 100%);
    background-size: 300%;
    animation: toxic-drip 8s ease-in-out infinite;
    opacity: 0.5;
}

.banner-toxic-venom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, #76ff03 0%, transparent 30%),
                radial-gradient(circle at 80% 20%, #c6ff00 0%, transparent 30%),
                radial-gradient(circle at 40% 40%, #64dd17 0%, transparent 25%);
    animation: toxic-bubble 12s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes toxic-venom-flow {
    0% { background-position: 0% 50%; }
    16% { background-position: 100% 20%; }
    33% { background-position: 80% 90%; }
    50% { background-position: 20% 80%; }
    66% { background-position: 90% 30%; }
    83% { background-position: 30% 70%; }
    100% { background-position: 0% 50%; }
}

@keyframes toxic-drip {
    0% { background-position: 0% 0; opacity: 0.4; transform: translateY(0px); }
    25% { background-position: 50% 0; opacity: 0.6; transform: translateY(-3px); }
    50% { background-position: 100% 0; opacity: 0.5; transform: translateY(5px); }
    75% { background-position: 150% 0; opacity: 0.7; transform: translateY(-2px); }
    100% { background-position: 200% 0; opacity: 0.4; transform: translateY(0px); }
}

@keyframes toxic-bubble {
    0%, 100% { opacity: 0.2; transform: scale(1) rotate(0deg); }
    33% { opacity: 0.4; transform: scale(1.2) rotate(120deg); }
    66% { opacity: 0.3; transform: scale(0.8) rotate(240deg); }
}

.card-border-toxic-venom {
    position: relative;
}

.card-border-toxic-venom::before,
.card-border-toxic-venom::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #39ff14, #7fff00, #adff2f, #39ff14);
    background-size: 300%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: toxic-ooze 8s linear infinite;
}

.card-border-toxic-venom::after {
    filter: blur(16px);
}

/* ===================================
   STYLE 15: Galaxy Swirl (Space) - ULTIMATE
   =================================== */
.avatar-border-galaxy-swirl {
    position: relative;
}

.avatar-border-galaxy-swirl::before,
.avatar-border-galaxy-swirl::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, #1a1a2e, #533483, #e94560, #0f3460, #16213e, #1a1a2e);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: galaxy-swirl-flow 18s linear infinite;
}

.avatar-border-galaxy-swirl::after {
    filter: blur(15px);
}

@keyframes galaxy-swirl-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.banner-galaxy-swirl {
    background: linear-gradient(135deg, #1a1a2e 0%, #533483 25%, #e94560 50%, #0f3460 75%, #16213e 100%);
    background-size: 300% 300%;
    animation: galaxy-swirl-banner 16s ease infinite;
}

@keyframes galaxy-swirl-banner {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.card-border-galaxy-swirl {
    position: relative;
}

.card-border-galaxy-swirl::before,
.card-border-galaxy-swirl::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, #1a1a2e, #533483, #e94560, #0f3460, #16213e, #1a1a2e);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: galaxy-swirl-flow 18s linear infinite;
}

.card-border-galaxy-swirl::after {
    filter: blur(12px);
}

/* ===================================
   STYLE 16: Platinum Shine (Chrome Reflection) - ULTIMATE
   =================================== */
.avatar-border-platinum-shine {
    position: relative;
}

.avatar-border-platinum-shine::before,
.avatar-border-platinum-shine::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    background: linear-gradient(45deg, 
        #e8e8e8, #ffffff, #f0f0f0, #f5f5f5, 
        #d3d3d3, #ffffff, #e0e0e0, #e8e8e8);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    animation: platinum-chrome-flow 14s ease-in-out infinite;
}

.avatar-border-platinum-shine::after {
    filter: blur(20px);
    opacity: 0.9;
}

@keyframes platinum-chrome-flow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 50% 75%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 25%; }
}

.banner-platinum-shine {
    background: linear-gradient(45deg, #9e9e9e, #bdbdbd, #e0e0e0, #f5f5f5, #ffffff, #f5f5f5, #e0e0e0, #bdbdbd);
    background-size: 400% 400%;
    animation: platinum-flow 14s ease-in-out infinite;
    position: relative;
}

.banner-platinum-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 15%,
        rgba(255, 255, 255, 0.7) 35%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.7) 65%,
        rgba(255, 255, 255, 0.2) 85%,
        transparent 100%);
    background-size: 200%;
    animation: platinum-sweep 6s linear infinite;
    opacity: 0.8;
}

.banner-platinum-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 75% 75%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
    animation: platinum-sparkle 8s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes platinum-flow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 50%; }
}

@keyframes platinum-sweep {
    0% { background-position: -100% 0; transform: skewX(-15deg); }
    50% { background-position: 0% 0; transform: skewX(0deg); }
    100% { background-position: 200% 0; transform: skewX(15deg); }
}

@keyframes platinum-sparkle {
    0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.6; transform: scale(1.2) rotate(180deg); }
}

.card-border-platinum-shine {
    position: relative;
}

.card-border-platinum-shine::before,
.card-border-platinum-shine::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    background: linear-gradient(45deg, 
        #e8e8e8, #ffffff, #f0f0f0, #f5f5f5, 
        #d3d3d3, #ffffff, #e0e0e0, #e8e8e8);
    background-size: 400%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    animation: platinum-chrome-flow 14s ease-in-out infinite;
}

.card-border-platinum-shine::after {
    filter: blur(16px);
    opacity: 0.8;
}

/* ===================================
   STYLE 17: Geometric Matrix (Hexagonal) - ULTIMATE
   =================================== */
.avatar-border-geometric-matrix {
    position: relative;
}

.avatar-border-geometric-matrix::before,
.avatar-border-geometric-matrix::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    --s: 20px;
    --c1: #AB3E5B;
    --c2: #FFBE40;
    --_g: 
        #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,
        var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%, #0000 575%;
    --_s: calc(25%/3) calc(25%/4) at 50%;
    background:
        radial-gradient(var(--_s) 100%, var(--_g)),
        radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
        radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s)/2) 0,
        radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3*var(--s)/4),
        repeating-linear-gradient(90deg, #ACCEC0 calc(25%/-6) calc(25%/6), #61A6AB 0 calc(25%/2));
    background-size: var(--s) calc(3*var(--s)/2);
    animation: geometric-matrix-flow 2.5s infinite linear;
}

.avatar-border-geometric-matrix::after {
    filter: blur(18px);
    opacity: 0.7;
}

@keyframes geometric-matrix-flow {
    to {
        background-position:
            var(--s) 0,
            calc(var(--s)/-2) calc(3*var(--s)/4),
            calc(3*var(--s)/2) 0,
            calc(-1*var(--s)) calc(3*var(--s)/4),
            0 0;
    }
}

.banner-geometric-matrix {
    position: relative;
    overflow: hidden;
    --s: 80px;
    --c1: #AB3E5B;
    --c2: #FFBE40;
    --_g: 
        #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,
        var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%, #0000 575%;
    --_s: calc(25%/3) calc(25%/4) at 50%;
    background:
        radial-gradient(var(--_s) 100%, var(--_g)),
        radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
        radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s)/2) 0,
        radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3*var(--s)/4),
        repeating-linear-gradient(90deg, #ACCEC0 calc(25%/-6) calc(25%/6), #61A6AB 0 calc(25%/2));
    background-size: var(--s) calc(3*var(--s)/2);
    animation: geometric-matrix-banner 3s infinite linear;
}

@keyframes geometric-matrix-banner {
    to {
        background-position:
            var(--s) 0,
            calc(var(--s)/-2) calc(3*var(--s)/4),
            calc(3*var(--s)/2) 0,
            calc(-1*var(--s)) calc(3*var(--s)/4),
            0 0;
    }
}

.card-border-geometric-matrix {
    position: relative;
}

.card-border-geometric-matrix::before,
.card-border-geometric-matrix::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    --s: 16px;
    --c1: #AB3E5B;
    --c2: #FFBE40;
    --_g: 
        #0000 25%, #0008 47%, var(--c1) 53% 147%, var(--c2) 153% 247%,
        var(--c1) 253% 347%, var(--c2) 353% 447%, var(--c1) 453% 547%, #0008 553%, #0000 575%;
    --_s: calc(25%/3) calc(25%/4) at 50%;
    background:
        radial-gradient(var(--_s) 100%, var(--_g)),
        radial-gradient(var(--_s) 100%, var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
        radial-gradient(var(--_s) 0, var(--_g)) calc(var(--s)/2) 0,
        radial-gradient(var(--_s) 0, var(--_g)) 0 calc(3*var(--s)/4),
        repeating-linear-gradient(90deg, #ACCEC0 calc(25%/-6) calc(25%/6), #61A6AB 0 calc(25%/2));
    background-size: var(--s) calc(3*var(--s)/2);
    animation: geometric-matrix-flow 2.5s infinite linear;
}

.card-border-geometric-matrix::after {
    filter: blur(15px);
    opacity: 0.6;
}

/* ===================================
   STYLE 18: Conic Layers (Shifting Arcs) - ULTIMATE
   =================================== */
.avatar-border-conic-layers {
    position: relative;
}

.avatar-border-conic-layers::before,
.avatar-border-conic-layers::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    --s: 25px;
    --c1: #C3CCAF;
    --c2: #67434F;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
    background:
        calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
        calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
        calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
        calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
        conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 
        0 0/var(--s) var(--s);
    animation: conic-layers-flow 3s infinite;
}

.avatar-border-conic-layers::after {
    filter: blur(18px);
    opacity: 0.7;
}

@keyframes conic-layers-flow {
    0% {
        background-position: 
            calc(.9*var(--s)) calc(.9*var(--s)),
            calc(-.1*var(--s)) calc(-.1*var(--s)),
            calc(.7*var(--s)) calc(.7*var(--s)),
            calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0;
    }
    25% {
        background-position: 
            calc(1.9*var(--s)) calc(.9*var(--s)),
            calc(-1.1*var(--s)) calc(-.1*var(--s)),
            calc(1.7*var(--s)) calc(.7*var(--s)),
            calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0;
    }
    50% {
        background-position: 
            calc(1.9*var(--s)) calc(-.1*var(--s)),
            calc(-1.1*var(--s)) calc(.9*var(--s)),
            calc(1.7*var(--s)) calc(-.3*var(--s)),
            calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0;
    }
    75% {
        background-position: 
            calc(2.9*var(--s)) calc(-.1*var(--s)),
            calc(-2.1*var(--s)) calc(.9*var(--s)),
            calc(2.7*var(--s)) calc(-.3*var(--s)),
            calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0;
    }
    100% {
        background-position: 
            calc(2.9*var(--s)) calc(-1.1*var(--s)),
            calc(-2.1*var(--s)) calc(1.9*var(--s)),
            calc(2.7*var(--s)) calc(-1.3*var(--s)),
            calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0;
    }
}

.banner-conic-layers {
    position: relative;
    overflow: hidden;
    --s: 60px;
    --c1: #C3CCAF;
    --c2: #67434F;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
    background:
        calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
        calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
        calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
        calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
        conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 
        0 0/var(--s) var(--s);
    animation: conic-layers-banner 4s infinite;
}

@keyframes conic-layers-banner {
    0% {
        background-position: 
            calc(.9*var(--s)) calc(.9*var(--s)),
            calc(-.1*var(--s)) calc(-.1*var(--s)),
            calc(.7*var(--s)) calc(.7*var(--s)),
            calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0;
    }
    25% {
        background-position: 
            calc(1.9*var(--s)) calc(.9*var(--s)),
            calc(-1.1*var(--s)) calc(-.1*var(--s)),
            calc(1.7*var(--s)) calc(.7*var(--s)),
            calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0;
    }
    50% {
        background-position: 
            calc(1.9*var(--s)) calc(-.1*var(--s)),
            calc(-1.1*var(--s)) calc(.9*var(--s)),
            calc(1.7*var(--s)) calc(-.3*var(--s)),
            calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0;
    }
    75% {
        background-position: 
            calc(2.9*var(--s)) calc(-.1*var(--s)),
            calc(-2.1*var(--s)) calc(.9*var(--s)),
            calc(2.7*var(--s)) calc(-.3*var(--s)),
            calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0;
    }
    100% {
        background-position: 
            calc(2.9*var(--s)) calc(-1.1*var(--s)),
            calc(-2.1*var(--s)) calc(1.9*var(--s)),
            calc(2.7*var(--s)) calc(-1.3*var(--s)),
            calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0;
    }
}

.card-border-conic-layers {
    position: relative;
}

.card-border-conic-layers::before,
.card-border-conic-layers::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    --s: 20px;
    --c1: #C3CCAF;
    --c2: #67434F;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
    background:
        calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
        calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
        calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
        calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
        conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 
        0 0/var(--s) var(--s);
    animation: conic-layers-flow 3s infinite;
}

.card-border-conic-layers::after {
    filter: blur(15px);
    opacity: 0.6;
}

/* ===================================
   STYLE 19: Morphing Crystals (Dynamic Properties) - ULTIMATE
   =================================== */
@property --morph-a {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
@property --morph-p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
@property --morph-c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}
@property --morph-c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}

.avatar-border-morphing-crystals {
    position: relative;
}

.avatar-border-morphing-crystals::before,
.avatar-border-morphing-crystals::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    --s: 15px;
    --_g: #0000, var(--morph-c1) 2deg calc(var(--morph-a) - 2deg), #0000 var(--morph-a);
    background: 
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g))
        var(--morph-c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: morphing-crystals-flow 2s infinite alternate linear;
}

.avatar-border-morphing-crystals::after {
    filter: blur(18px);
    opacity: 0.8;
}

@keyframes morphing-crystals-flow {
    0%, 15% {
        --morph-a: 135deg;
        --morph-p: 20%;
        --morph-c1: #3B8183;
        --morph-c2: #FAD089;
        background-position: 0 0, var(--s) var(--s);
    }
    45%, 50% {
        --morph-a: 90deg;
        --morph-p: 25%;
        --morph-c1: #3B8183;
        --morph-c2: #FAD089;
        background-position: 0 0, var(--s) var(--s);
    }
    50.01%, 55% {
        --morph-a: 90deg;
        --morph-p: 25%;
        --morph-c2: #3B8183;
        --morph-c1: #FAD089;
        background-position: var(--s) 0, 0 var(--s);
    }
    85%, 100% {
        --morph-a: 135deg;
        --morph-p: 20%;
        --morph-c2: #3B8183;
        --morph-c1: #FAD089;
        background-position: var(--s) 0, 0 var(--s);
    }
}

.banner-morphing-crystals {
    position: relative;
    overflow: hidden;
    --s: 50px;
    --_g: #0000, var(--morph-c1) 2deg calc(var(--morph-a) - 2deg), #0000 var(--morph-a);
    background: 
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g))
        var(--morph-c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: morphing-crystals-banner 2.5s infinite alternate linear;
}

@keyframes morphing-crystals-banner {
    0%, 15% {
        --morph-a: 135deg;
        --morph-p: 20%;
        --morph-c1: #3B8183;
        --morph-c2: #FAD089;
        background-position: 0 0, var(--s) var(--s);
    }
    45%, 50% {
        --morph-a: 90deg;
        --morph-p: 25%;
        --morph-c1: #3B8183;
        --morph-c2: #FAD089;
        background-position: 0 0, var(--s) var(--s);
    }
    50.01%, 55% {
        --morph-a: 90deg;
        --morph-p: 25%;
        --morph-c2: #3B8183;
        --morph-c1: #FAD089;
        background-position: var(--s) 0, 0 var(--s);
    }
    85%, 100% {
        --morph-a: 135deg;
        --morph-p: 20%;
        --morph-c2: #3B8183;
        --morph-c1: #FAD089;
        background-position: var(--s) 0, 0 var(--s);
    }
}

.card-border-morphing-crystals {
    position: relative;
}

.card-border-morphing-crystals::before,
.card-border-morphing-crystals::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    --s: 12px;
    --_g: #0000, var(--morph-c1) 2deg calc(var(--morph-a) - 2deg), #0000 var(--morph-a);
    background: 
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-45deg - var(--morph-a)/2) at top var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--morph-a)/2) at top var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--morph-a)/2) at bottom var(--morph-p) left var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--morph-a)/2) at bottom var(--morph-p) right var(--morph-p), var(--_g))
        var(--morph-c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: morphing-crystals-flow 2s infinite alternate linear;
}

.card-border-morphing-crystals::after {
    filter: blur(15px);
    opacity: 0.7;
}

/* ===================================
   STYLE 20: Hexagonal Tessellation (Parallax Layers) - ULTIMATE
   =================================== */
.avatar-border-hexagonal-tessellation {
    position: relative;
}

.avatar-border-hexagonal-tessellation::before,
.avatar-border-hexagonal-tessellation::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
    border-radius: 50%;
    --s: 14px;
    --g: 2px;
    --c: #ECD078;
    --_l: #0000 calc(33% - .866*var(--g)), var(--c) calc(33.2% - .866*var(--g)) 33%, #0000 34%;
    background:
        repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
        0 calc(.866*var(--s) - var(--g)/2),
        conic-gradient(from -150deg at var(--g) 50%, var(--c) 120deg, #0000 0),
        linear-gradient(-120deg, var(--_l)), linear-gradient(-60deg, var(--_l))
        #0B486B;
    background-size: var(--s) calc(3.466*var(--s));
    animation: hexagonal-flow 2s infinite linear;
}

.avatar-border-hexagonal-tessellation::after {
    -webkit-mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    animation: hexagonal-flow-reverse 2s infinite linear;
    filter: blur(18px);
    opacity: 0.8;
}

@keyframes hexagonal-flow {
    to {
        background-position-x: calc(-1*var(--s));
    }
}

@keyframes hexagonal-flow-reverse {
    to {
        background-position-x: var(--s);
    }
}

.banner-hexagonal-tessellation {
    position: relative;
    overflow: hidden;
    --s: 40px;
    --g: 6px;
    --c: #ECD078;
    --_l: #0000 calc(33% - .866*var(--g)), var(--c) calc(33.2% - .866*var(--g)) 33%, #0000 34%;
    background:
        repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
        0 calc(.866*var(--s) - var(--g)/2),
        conic-gradient(from -150deg at var(--g) 50%, var(--c) 120deg, #0000 0),
        linear-gradient(-120deg, var(--_l)), linear-gradient(-60deg, var(--_l))
        #0B486B;
    background-size: var(--s) calc(3.466*var(--s));
    animation: hexagonal-banner-flow 2.5s infinite linear;
}

.banner-hexagonal-tessellation::before {
    content: "";
    position: absolute;
    inset: 0;
    --s: 40px;
    --g: 6px;
    --c: #ECD078;
    --_l: #0000 calc(33% - .866*var(--g)), var(--c) calc(33.2% - .866*var(--g)) 33%, #0000 34%;
    background:
        repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
        0 calc(.866*var(--s) - var(--g)/2),
        conic-gradient(from -150deg at var(--g) 50%, var(--c) 120deg, #0000 0),
        linear-gradient(-120deg, var(--_l)), linear-gradient(-60deg, var(--_l))
        #0B486B;
    background-size: var(--s) calc(3.466*var(--s));
    -webkit-mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    animation: hexagonal-banner-flow-reverse 2.5s infinite linear;
}

@keyframes hexagonal-banner-flow {
    to {
        background-position-x: calc(-1*var(--s));
    }
}

@keyframes hexagonal-banner-flow-reverse {
    to {
        background-position-x: var(--s);
    }
}

.card-border-hexagonal-tessellation {
    position: relative;
}

.card-border-hexagonal-tessellation::before,
.card-border-hexagonal-tessellation::after {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: -1;
    border-radius: 0.375rem;
    --s: 12px;
    --g: 2px;
    --c: #ECD078;
    --_l: #0000 calc(33% - .866*var(--g)), var(--c) calc(33.2% - .866*var(--g)) 33%, #0000 34%;
    background:
        repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
        0 calc(.866*var(--s) - var(--g)/2),
        conic-gradient(from -150deg at var(--g) 50%, var(--c) 120deg, #0000 0),
        linear-gradient(-120deg, var(--_l)), linear-gradient(-60deg, var(--_l))
        #0B486B;
    background-size: var(--s) calc(3.466*var(--s));
    animation: hexagonal-flow 2s infinite linear;
}

.card-border-hexagonal-tessellation::after {
    -webkit-mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    mask: 
        linear-gradient(#000 50%, #0000 0) 
        0 calc(.866*var(--s))/100% calc(3.466*var(--s));
    animation: hexagonal-flow-reverse 2s infinite linear;
    filter: blur(15px);
    opacity: 0.7;
}

/* ===================================
   Helper Classes
   =================================== */

/* Container for avatar with animated border */
.premium-avatar-container {
    position: relative;
    display: inline-block;
    z-index: 0; /* Establish stacking context */
}

/* Ensures the avatar image stays on top */
.premium-avatar-container img,
.premium-avatar-container .bg-primary {
    position: relative;
    z-index: 2; /* Higher than pseudo-elements */
}

/* Banner container should be positioned relative */
.premium-banner-container {
    position: relative;
    overflow: hidden;
}

/* Firefly effect helper - can be added to any banner */
.firefly {
  width:4px;
  height:4px;
  position:absolute;
  background-color: #ecc45e;
  box-shadow:0px 0px 17px 2px wheat;
  border-radius: 50%;
}

.profile-banner {
    border-radius:0.375rem;
}