/**
 * Trader display-name themes — class suffix matches `users.name_effect` / paired banner id.
 * Legacy aliases (rainbow, gold, …) remain for cached HTML or unmigrated rows.
 */

.trader-name {
    font-weight: var(--font-weight-bold, 700) !important;
}

/* --- Matrix (+ legacy rainbow) --- */
.trader-name-matrix,
.trader-name-rainbow {
    background: linear-gradient(
        90deg,
        #10b981,
        #14b8a6,
        #06b6d4,
        #0ea5e9,
        #6366f1,
        #8b5cf6,
        #a855f7,
        #d946ef,
        #ec4899,
        #f43f5e,
        #f97316,
        #eab308,
        #22c55e,
        #10b981
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-matrix 8s linear infinite;
}

@keyframes tn-matrix {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* --- Aurora (+ legacy gold as distant cousin — prefer gilded for gold) --- */
.trader-name-aurora {
    background: linear-gradient(
        90deg,
        #2dd4bf,
        #14b8a6,
        #5eead4,
        #99f6e4,
        #a78bfa,
        #818cf8,
        #2dd4bf
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-aurora 5s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.45));
}

@keyframes tn-aurora {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Neon grid (+ legacy neon) --- */
.trader-name-neongrid,
.trader-name-neon {
    background: linear-gradient(
        90deg,
        #a78bfa,
        #6366f1,
        #22d3ee,
        #38bdf8,
        #a78bfa
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-neongrid 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.55));
}

@keyframes tn-neongrid {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Pulse --- */
.trader-name-pulse {
    background: linear-gradient(
        90deg,
        #4c1d95,
        #7c3aed,
        #c4b5fd,
        #7c3aed,
        #4c1d95
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-pulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.55));
}

@keyframes tn-pulse {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4)); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 14px rgba(196, 181, 253, 0.7)); }
}

/* --- Starfield --- */
.trader-name-starfield {
    background: linear-gradient(
        90deg,
        #e2e8f0,
        #94a3b8,
        #f8fafc,
        #cbd5e1,
        #e2e8f0
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-starfield 6s linear infinite;
    filter: drop-shadow(0 0 4px rgba(226, 232, 240, 0.5));
}

@keyframes tn-starfield {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* --- Void --- */
.trader-name-void {
    background: linear-gradient(
        90deg,
        #7c3aed,
        #a78bfa,
        #c4b5fd,
        #ede9fe,
        #c4b5fd,
        #a78bfa,
        #7c3aed
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-void 4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.4));
}

@keyframes tn-void {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Inferno (+ legacy fire) --- */
.trader-name-inferno,
.trader-name-fire {
    background: linear-gradient(
        90deg,
        #ef4444,
        #f97316,
        #fbbf24,
        #f97316,
        #ef4444,
        #dc2626,
        #ef4444
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-inferno 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

@keyframes tn-inferno {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Frozen (+ legacy ice) --- */
.trader-name-frozen,
.trader-name-ice {
    background: linear-gradient(
        90deg,
        #06b6d4,
        #22d3ee,
        #a5f3fc,
        #ecfeff,
        #a5f3fc,
        #22d3ee,
        #06b6d4
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-frozen 4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.4));
}

@keyframes tn-frozen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Prism --- */
.trader-name-prism {
    background: linear-gradient(
        90deg,
        #ef4444,
        #f97316,
        #eab308,
        #22c55e,
        #06b6d4,
        #6366f1,
        #a855f7,
        #ec4899,
        #ef4444
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-prism 6s linear infinite;
}

@keyframes tn-prism {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* --- Gilded (+ legacy gold) --- */
.trader-name-gilded,
.trader-name-gold {
    background: linear-gradient(
        90deg,
        #fbbf24,
        #f59e0b,
        #fcd34d,
        #fde68a,
        #fbbf24,
        #d97706,
        #f59e0b,
        #fbbf24
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-gilded 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.35));
}

@keyframes tn-gilded {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Eclipse (new) --- */
.trader-name-eclipse {
    background: linear-gradient(
        90deg,
        #0f172a,
        #f59e0b,
        #fde68a,
        #f59e0b,
        #0f172a,
        #1e293b
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-eclipse 5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
}

@keyframes tn-eclipse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Nova (new) --- */
.trader-name-nova {
    background: linear-gradient(
        90deg,
        #fdf4ff,
        #f0abfc,
        #e879f9,
        #c026d3,
        #86198f,
        #f0abfc,
        #fdf4ff
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-nova 3.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(232, 121, 249, 0.45));
}

@keyframes tn-nova {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Profile heading (larger drop-shadows) --- */
.profile-name.trader-name {
    font-weight: 700 !important;
}

/* --- Home feed meta (reuse same gradients, smaller glow) --- */
.feed-meta .trader-name-matrix,
.feed-meta .trader-name-rainbow {
    background: linear-gradient(
        90deg,
        #10b981, #14b8a6, #06b6d4, #0ea5e9, #6366f1,
        #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e,
        #f97316, #eab308, #22c55e, #10b981
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-matrix 8s linear infinite;
}

.feed-meta .trader-name-gilded,
.feed-meta .trader-name-gold {
    background: linear-gradient(
        90deg,
        #fbbf24, #f59e0b, #fcd34d, #fde68a,
        #fbbf24, #d97706, #f59e0b, #fbbf24
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-gilded 3s ease-in-out infinite;
}

.feed-meta .trader-name-neongrid,
.feed-meta .trader-name-neon {
    background: linear-gradient(90deg, #a78bfa, #6366f1, #22d3ee, #38bdf8, #a78bfa);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-neongrid 3s ease-in-out infinite;
}

.feed-meta .trader-name-inferno,
.feed-meta .trader-name-fire {
    background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #f97316, #ef4444, #dc2626, #ef4444);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-inferno 2s ease-in-out infinite;
}

.feed-meta .trader-name-frozen,
.feed-meta .trader-name-ice {
    background: linear-gradient(90deg, #06b6d4, #22d3ee, #a5f3fc, #ecfeff, #a5f3fc, #22d3ee, #06b6d4);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-frozen 4s ease-in-out infinite;
}

.feed-meta .trader-name-void {
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #c4b5fd, #ede9fe, #c4b5fd, #a78bfa, #7c3aed);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-void 4s ease-in-out infinite;
}

.feed-meta .trader-name-aurora {
    background: linear-gradient(90deg, #2dd4bf, #14b8a6, #5eead4, #99f6e4, #a78bfa, #818cf8, #2dd4bf);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-aurora 5s ease-in-out infinite;
}

.feed-meta .trader-name-pulse {
    background: linear-gradient(90deg, #4c1d95, #7c3aed, #c4b5fd, #7c3aed, #4c1d95);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-pulse 2.8s ease-in-out infinite;
}

.feed-meta .trader-name-starfield {
    background: linear-gradient(90deg, #e2e8f0, #94a3b8, #f8fafc, #cbd5e1, #e2e8f0);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-starfield 6s linear infinite;
}

.feed-meta .trader-name-prism {
    background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #a855f7, #ec4899, #ef4444);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-prism 6s linear infinite;
}

.feed-meta .trader-name-eclipse {
    background: linear-gradient(90deg, #0f172a, #f59e0b, #fde68a, #f59e0b, #0f172a, #1e293b);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-eclipse 5s ease-in-out infinite;
}

.feed-meta .trader-name-nova {
    background: linear-gradient(90deg, #fdf4ff, #f0abfc, #e879f9, #c026d3, #86198f, #f0abfc, #fdf4ff);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tn-nova 3.5s ease-in-out infinite;
}
