/* ============================================
   SUPPORTER TIER BADGES & FLAIR
   Shared across all pages
   ============================================ */

/* === TIER BADGES === */

.supporter-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.supporter-tier-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.supporter-tier-badge .badge-label {
    display: inline;
}

/* Compact mode (smaller text) */
.supporter-tier-badge.badge-compact {
    padding: 1px 5px;
    font-size: 0.55rem;
}

/* Supporter (Purple) */
.tier-supporter {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}

/* Super Supporter (Pink) */
.tier-super {
    background: rgba(244, 114, 182, 0.15);
    color: #f472b6;
    border: 1px solid rgba(244, 114, 182, 0.25);
}

/* Ultra Supporter (Gold) */
.tier-ultra {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

/* Ultra Custom Badge */
.tier-ultra-custom {
    background: var(--badge-bg, rgba(251, 191, 36, 0.15));
    color: var(--badge-color, #fbbf24);
    border: 1px solid color-mix(in srgb, var(--badge-color, #fbbf24) 30%, transparent);
}

/* Badge effect animations (Ultra Supporter) */
.badge-effect-pulse,
.badge-anim-pulse {
    animation: badgePulse 2s ease-in-out infinite;
}

.badge-effect-glow,
.badge-anim-glow {
    animation: badgeGlow 2s ease-in-out infinite;
}

.badge-effect-shimmer,
.badge-anim-shimmer {
    background-size: 200% 100%;
    animation: badgeShimmer 2.5s linear infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.96); }
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 4px currentColor, 0 0 8px rgba(251, 191, 36, 0.2); filter: brightness(1); }
    50% { box-shadow: 0 0 8px currentColor, 0 0 18px currentColor, 0 0 30px rgba(251, 191, 36, 0.3); filter: brightness(1.15); }
}

@keyframes badgeShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === FORUM USERNAME FLAIR === */

.flair-supporter {
    color: var(--primary-light);
}

.flair-super-supporter {
    color: #f472b6;
}

.flair-ultra-supporter {
    color: #fbbf24;
}

/* === PROFILE BADGE (next to profile name) === */

.profile-supporter-badge {
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

/* === ACCENT COLOR SUPPORT === */

.profile-info-bar[data-accent] {
    --user-accent: attr(data-accent);
}

/* === AVATAR FRAME STYLES === */

/* 1. Small avatar frame base — rounded-square shape with border */
.activity-avatar.has-frame,
.reply-avatar.has-frame,
.review-avatar.has-frame,
.follow-avatar.has-frame,
.follow-user-avatar.has-frame,
.thread-avatar.has-frame,
.op-avatar.has-frame,
.leaderboard-avatar.has-frame,
.wall-avatar.has-frame {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

/* 2. Generic frame colors — AFTER base rules so they override border-color */
.has-frame.frame-gold { border-color: #fbbf24; }
.has-frame.frame-cyan { border-color: #22d3ee; }
.has-frame.frame-pink { border-color: #f472b6; }
.has-frame.frame-red { border-color: #ef4444; }

.has-frame.frame-gradient {
    border: 2px solid transparent;
    border-image: none;
    background:
        linear-gradient(var(--bg-surface, #1e1e2e), var(--bg-surface, #1e1e2e)) padding-box,
        linear-gradient(135deg, var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
}

.has-frame.frame-animated {
    border: 2px solid transparent;
    border-image: none;
    background:
        linear-gradient(var(--bg-surface, #1e1e2e), var(--bg-surface, #1e1e2e)) padding-box,
        linear-gradient(var(--frame-angle, 135deg), var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
    animation: frameAngle 4s linear infinite;
}

/* 3. Profile avatar: higher specificity (0,3,0) to beat user.css (0,2,0) */
.user-avatar.has-frame.frame-gold { border-color: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
.user-avatar.has-frame.frame-cyan { border-color: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.3); }
.user-avatar.has-frame.frame-pink { border-color: #f472b6; box-shadow: 0 0 10px rgba(244, 114, 182, 0.3); }
.user-avatar.has-frame.frame-red { border-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
.user-avatar.has-frame.frame-gradient {
    border: 4px solid transparent;
    border-image: none;
    background:
        linear-gradient(var(--bg-surface, #1e1e2e), var(--bg-surface, #1e1e2e)) padding-box,
        linear-gradient(135deg, var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.25);
}
.user-avatar.has-frame.frame-animated {
    border: 4px solid transparent;
    border-image: none;
    background:
        linear-gradient(var(--bg-surface, #1e1e2e), var(--bg-surface, #1e1e2e)) padding-box,
        linear-gradient(var(--frame-angle, 135deg), var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.25);
    animation: frameAngle 4s linear infinite;
}

/* 4. Navbar avatar: override the background set by user.css .navbar .user-nav-btn.has-frame */
.user-nav-btn.has-frame.frame-gradient {
    border: 2px solid transparent;
    border-image: none;
    background:
        linear-gradient(rgba(30, 30, 46, 0.6), rgba(30, 30, 46, 0.6)) padding-box,
        linear-gradient(135deg, var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
}
.user-nav-btn.has-frame.frame-animated {
    border: 2px solid transparent;
    border-image: none;
    background:
        linear-gradient(rgba(30, 30, 46, 0.6), rgba(30, 30, 46, 0.6)) padding-box,
        linear-gradient(var(--frame-angle, 135deg), var(--frame-g1, #22d3ee), var(--frame-g2, #f472b6), var(--frame-g3, #fbbf24)) border-box;
    animation: frameAngle 4s linear infinite;
}

@keyframes frameAngle {
    0% { --frame-angle: 0deg; }
    100% { --frame-angle: 360deg; }
}

@property --frame-angle {
    syntax: "<angle>";
    initial-value: 135deg;
    inherits: false;
}

/* === CUSTOM FRAME COLOR (Super Supporter+) === */

/* Small avatars: override border-color on solid frames */
.has-frame.frame-custom-color:not(.frame-gradient):not(.frame-animated) {
    border-color: var(--frame-color);
}

/* Profile avatar: solid frame + glow */
.user-avatar.has-frame.frame-custom-color:not(.frame-gradient):not(.frame-animated) {
    border-color: var(--frame-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--frame-color) 30%, transparent);
}

/* Navbar avatar: solid frame */
.user-nav-btn.has-frame.frame-custom-color:not(.frame-gradient):not(.frame-animated) {
    border-color: var(--frame-color);
}

/* ============================================
   ANIMATED USERNAME EFFECTS (Ultra Supporter)
   ============================================ */

/* Base effect class */
.name-effect {
    display: inline;
    font-weight: inherit;
}

/* 1. Shimmer - horizontal light sweep (uses --shimmer-color for highlight, defaults to white) */
.name-effect-shimmer {
    background: linear-gradient(
        90deg,
        var(--ne-color, currentColor) 0%,
        var(--ne-color, currentColor) 40%,
        var(--shimmer-color, rgba(255, 255, 255, 0.8)) 50%,
        var(--ne-color, currentColor) 60%,
        var(--ne-color, currentColor) 100%
    );
    background-size: 300% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameShimmer 2.5s linear infinite;
}

@keyframes nameShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* 2. Wave - vertical bounce per character */
.name-effect-wave {
    display: inline-flex;
    color: var(--ne-color, currentColor);
}

.wave-char {
    display: inline-block;
    animation: nameWave 1.8s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}

/* Wave chars inside bgClip parents: use inline + position for bounce so background-clip works */
.wave-char-clip {
    display: inline;
    position: relative;
    animation: nameWaveClip 1.8s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}

@keyframes nameWave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes nameWaveClip {
    0%, 100% { top: 0; }
    50% { top: -3px; }
}

/* 3. Pulse - rhythmic scale pulse */
.name-effect-pulse {
    color: var(--ne-color, currentColor);
    display: inline-block;
    animation: namePulse 2s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}

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

/* 4. Glow - pulsing glow/shadow */
.name-effect-glow {
    color: var(--ne-color, currentColor);
    animation: nameGlow 2.5s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}

@keyframes nameGlow {
    0%, 100% { text-shadow: 0 0 4px rgba(var(--ne-color-rgb, 139, 92, 246), 0.4); }
    50% { text-shadow: 0 0 12px rgba(var(--ne-color-rgb, 139, 92, 246), 0.8), 0 0 24px rgba(var(--ne-color-rgb, 139, 92, 246), 0.4); }
}

/* 5. Rainbow - cycling hue rotation */
.name-effect-rainbow {
    animation: nameRainbow 4s linear infinite;
}

@keyframes nameRainbow {
    0% { color: #ff6b6b; }
    16% { color: #ffa36b; }
    33% { color: #ffd93d; }
    50% { color: #6bcb77; }
    66% { color: #6b9eff; }
    83% { color: #c56bff; }
    100% { color: #ff6b6b; }
}

/* 6. Prism - rotating rainbow gradient (customizable via --prism-1/2/3) */
.name-effect-prism {
    background: linear-gradient(var(--name-angle, 0deg), var(--prism-1, #ff6b6b), var(--prism-2, #6bcb77), var(--prism-3, #6b9eff), var(--prism-1, #ff6b6b));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: namePrism 4s linear infinite;
}

/* 7. Flow - moving gradient (uses --flow-1 and --flow-2 colors) */
.name-effect-flow {
    background: linear-gradient(90deg, var(--flow-1, #8b5cf6), var(--flow-2, #f472b6), var(--flow-1, #8b5cf6));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameFlow 3s ease-in-out infinite;
}

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

@keyframes namePrism {
    0% { --name-angle: 0deg; }
    100% { --name-angle: 360deg; }
}

@property --name-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Gradient text coloring (3-stop: start, mix, end) */
.name-gradient {
    background: linear-gradient(90deg, var(--ng-color-1, var(--primary)) 0%, color-mix(in srgb, var(--ng-color-1, var(--primary)) 50%, var(--ng-color-2, var(--primary-light))) 50%, var(--ng-color-2, var(--primary-light)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* ============================================
   BADGE EFFECTS (Ultra Supporter)
   ============================================ */

/* Prism - rotating gradient bg/border (customizable via --bprism-1/2/3) */
.badge-effect-prism {
    background: linear-gradient(var(--badge-angle, 0deg), var(--bprism-1, rgba(255,107,107,0.2)), var(--bprism-2, rgba(107,203,119,0.2)), var(--bprism-3, rgba(107,158,255,0.2)), var(--bprism-1, rgba(255,107,107,0.2)));
    color: var(--bprism-text, #ffd93d);
    border-color: transparent;
    animation: badgePrism 4s linear infinite;
}

/* Flow - moving gradient on badge */
.badge-effect-flow {
    background-size: 200% 100%;
    animation: badgeFlow 3s ease-in-out infinite;
}

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

@keyframes badgePrism {
    0% { --badge-angle: 0deg; }
    100% { --badge-angle: 360deg; }
}

@property --badge-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Bounce - playful double bounce */
.badge-effect-bounce {
    animation: badgeBounce 1.4s ease-in-out infinite;
}

/* Shake - glitch-style jitter burst */
.badge-effect-shake {
    animation: badgeShake 3s linear infinite;
    position: relative;
}

/* Rainbow - full color cycle on bg, border, text */
.badge-effect-rainbow {
    animation: badgeRainbow 4s linear infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3px) scale(1.05); }
    50% { transform: translateY(0) scale(1); }
    65% { transform: translateY(-1.5px) scale(1.02); }
    80% { transform: translateY(0) scale(1); }
}

@keyframes badgeShake {
    0%, 85%, 100% { transform: translate(0) rotate(0); text-shadow: none; }
    87% { transform: translate(-2px, -1px) rotate(-1deg); text-shadow: -1px 0 #ff0040, 1px 0 #0ff; }
    89% { transform: translate(2px, 1px) rotate(1deg); text-shadow: 1px 0 #ff0040, -1px 0 #0ff; }
    91% { transform: translate(-1px, 0) rotate(0); text-shadow: -1px 0 #ff0040, 1px 0 #0ff; }
    93% { transform: translate(1px, -1px) rotate(0.5deg); text-shadow: none; }
    95% { transform: translate(0) rotate(0); }
}

@keyframes badgeRainbow {
    0% { background: rgba(255, 107, 107, 0.15); border-color: rgba(255, 107, 107, 0.35); color: #ff6b6b; }
    20% { background: rgba(255, 163, 107, 0.15); border-color: rgba(255, 163, 107, 0.35); color: #ffa36b; }
    40% { background: rgba(255, 217, 61, 0.15); border-color: rgba(255, 217, 61, 0.35); color: #ffd93d; }
    60% { background: rgba(107, 203, 119, 0.15); border-color: rgba(107, 203, 119, 0.35); color: #6bcb77; }
    80% { background: rgba(107, 158, 255, 0.15); border-color: rgba(107, 158, 255, 0.35); color: #6b9eff; }
    100% { background: rgba(255, 107, 107, 0.15); border-color: rgba(255, 107, 107, 0.35); color: #ff6b6b; }
}

/* Badge text-static: animation only affects bg/border, text stays solid */
.badge-text-static .badge-label {
    color: var(--badge-static-color, inherit) !important;
    -webkit-text-fill-color: var(--badge-static-color, unset) !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .badge-anim-pulse,
    .badge-anim-glow,
    .badge-anim-shimmer,
    .badge-effect-pulse,
    .badge-effect-glow,
    .badge-effect-shimmer,
    .badge-effect-bounce,
    .badge-effect-shake,
    .badge-effect-rainbow,
    .badge-effect-prism,
    .badge-effect-flow,
    .user-avatar.has-frame.frame-animated,
    .user-nav-btn.has-frame.frame-animated,
    .name-effect-shimmer,
    .wave-char,
    .wave-char-clip,
    .name-effect-pulse,
    .name-effect-glow,
    .name-effect-rainbow,
    .name-effect-prism,
    .name-effect-flow {
        animation: none;
    }
}