/* ============================================================
   QUEST MANAGER — CREATOR LEVEL VISUAL PROGRESSION
   ============================================================
   Tiers:
     Rookie     (1-4)   — Clean, minimal, just getting started
     Bronze     (5-9)   — Warm glow, earned your stripes
     Silver     (10-14) — Cool steel, serious player
     Gold       (15-19) — Prestige glow, top performer
     Diamond    (20-24) — Prismatic shine, elite status
     Legendary  (25+)   — Animated aura, untouchable
   ============================================================ */

/* ── Base: The creator profile frame ────────────────────────── */

.creator-rank-frame {
    position: relative;
    display: inline-block;
}

.creator-rank-frame img {
    position: relative;
    z-index: 2;
}

/* The ring around the avatar */
.creator-rank-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    z-index: 1;
    transition: all 0.4s ease;
}

/* The ambient glow behind the avatar */
.creator-rank-glow {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}

/* The level badge */
.creator-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    z-index: 3;
    border-radius: 50%;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Large variant (creator dashboard header) */
.creator-rank-frame.frame-lg .creator-rank-ring { inset: -5px; }
.creator-rank-frame.frame-lg .creator-rank-glow { inset: -18px; filter: blur(16px); }
.creator-rank-frame.frame-lg .creator-level-badge {
    width: 28px;
    height: 28px;
    font-size: 13px;
    bottom: -2px;
    right: -2px;
}

/* Small variant (creator cards on dashboard) */
.creator-rank-frame.frame-sm .creator-rank-ring { inset: -3px; }
.creator-rank-frame.frame-sm .creator-rank-glow { inset: -8px; filter: blur(8px); }
.creator-rank-frame.frame-sm .creator-level-badge {
    width: 20px;
    height: 20px;
    font-size: 10px;
    bottom: -3px;
    right: -3px;
}

/* ── Tier: Rookie (Level 1-4) ──────────────────────────────── */

.creator-rank-frame[data-tier="rookie"] .creator-rank-ring {
    border: 2.5px solid #94a3b8;
}

.creator-rank-frame[data-tier="rookie"] .creator-rank-glow {
    opacity: 0;
}

.creator-rank-frame[data-tier="rookie"] .creator-level-badge {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    color: #fff;
    width: 24px;
    height: 24px;
}

.creator-rank-frame[data-tier="rookie"] .rank-title {
    color: #64748b;
}

/* Rookie XP bar */
[data-tier="rookie"] .level-progress-fill {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}


/* ── Tier: Bronze (Level 5-9) ──────────────────────────────── */

.creator-rank-frame[data-tier="bronze"] .creator-rank-ring {
    border: 3px solid transparent;
    background: linear-gradient(135deg, #cd7f32, #e8a854, #cd7f32) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.creator-rank-frame[data-tier="bronze"] .creator-rank-glow {
    opacity: 0.3;
    background: radial-gradient(circle, #cd7f32, transparent 70%);
}

.creator-rank-frame[data-tier="bronze"] .creator-level-badge {
    background: linear-gradient(135deg, #cd7f32, #e8a854);
    color: #fff;
    width: 24px;
    height: 24px;
}

.creator-rank-frame[data-tier="bronze"] .rank-title {
    color: #cd7f32;
    font-weight: 600;
}

[data-tier="bronze"] .level-progress-fill {
    background: linear-gradient(90deg, #cd7f32, #e8a854, #cd7f32);
    background-size: 200% 100%;
}


/* ── Tier: Silver (Level 10-14) ────────────────────────────── */

.creator-rank-frame[data-tier="silver"] .creator-rank-ring {
    border: 3px solid transparent;
    background: linear-gradient(135deg, #9ca3af, #e5e7eb, #9ca3af) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.creator-rank-frame[data-tier="silver"] .creator-rank-glow {
    opacity: 0.35;
    background: radial-gradient(circle, #c0c7d1, transparent 70%);
}

.creator-rank-frame[data-tier="silver"] .creator-level-badge {
    background: linear-gradient(135deg, #8b97a8, #d1d8e0, #8b97a8);
    color: #1f2937;
    width: 24px;
    height: 24px;
    font-weight: 900;
}

.creator-rank-frame[data-tier="silver"] .rank-title {
    color: #6b7280;
    font-weight: 700;
}

[data-tier="silver"] .level-progress-fill {
    background: linear-gradient(90deg, #9ca3af, #e5e7eb, #9ca3af);
    background-size: 200% 100%;
    animation: silver-shimmer 3s ease-in-out infinite;
}

@keyframes silver-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


/* ── Tier: Gold (Level 15-19) ──────────────────────────────── */

.creator-rank-frame[data-tier="gold"] .creator-rank-ring {
    border: 3px solid transparent;
    background: linear-gradient(135deg, #d4a017, #ffd700, #d4a017) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gold-ring-pulse 2.5s ease-in-out infinite;
}

.creator-rank-frame[data-tier="gold"] .creator-rank-glow {
    opacity: 0.45;
    background: radial-gradient(circle, #ffd700, transparent 70%);
    animation: gold-glow-breathe 3s ease-in-out infinite;
}

.creator-rank-frame[data-tier="gold"] .creator-level-badge {
    background: linear-gradient(135deg, #d4a017, #ffd700, #f5e642);
    color: #422006;
    width: 26px;
    height: 26px;
    font-weight: 900;
    box-shadow: 0 2px 12px rgba(212, 160, 23, 0.5);
}

.creator-rank-frame[data-tier="gold"] .rank-title {
    color: #d4a017;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(212, 160, 23, 0.3);
}

[data-tier="gold"] .level-progress-fill {
    background: linear-gradient(90deg, #d4a017, #ffd700, #f5e642, #ffd700, #d4a017);
    background-size: 300% 100%;
    animation: gold-bar-flow 4s ease-in-out infinite;
}

@keyframes gold-ring-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes gold-glow-breathe {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.05); }
}

@keyframes gold-bar-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}


/* ── Tier: Diamond (Level 20-24) ───────────────────────────── */

.creator-rank-frame[data-tier="diamond"] .creator-rank-ring {
    border: 3.5px solid transparent;
    background: linear-gradient(135deg, #67e8f9, #a78bfa, #f0abfc, #67e8f9) border-box;
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: diamond-ring-shift 4s ease-in-out infinite;
}

.creator-rank-frame[data-tier="diamond"] .creator-rank-glow {
    opacity: 0.5;
    background: radial-gradient(circle, rgba(103, 232, 249, 0.6), rgba(167, 139, 250, 0.4), transparent 70%);
    animation: diamond-glow 3s ease-in-out infinite;
}

.creator-rank-frame[data-tier="diamond"] .creator-level-badge {
    background: linear-gradient(135deg, #67e8f9, #a78bfa, #f0abfc);
    background-size: 200% 200%;
    animation: diamond-badge-shift 3s ease-in-out infinite;
    color: #1e1b4b;
    width: 26px;
    height: 26px;
    font-weight: 900;
    box-shadow: 0 2px 16px rgba(167, 139, 250, 0.6);
}

.creator-rank-frame[data-tier="diamond"] .rank-title {
    background: linear-gradient(90deg, #67e8f9, #a78bfa, #f0abfc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

[data-tier="diamond"] .level-progress-fill {
    background: linear-gradient(90deg, #67e8f9, #a78bfa, #f0abfc, #67e8f9);
    background-size: 300% 100%;
    animation: diamond-bar-flow 3s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

@keyframes diamond-ring-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes diamond-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.08); }
}

@keyframes diamond-badge-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes diamond-bar-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}


/* ── Tier: Legendary (Level 25+) ───────────────────────────── */

.creator-rank-frame[data-tier="legendary"] .creator-rank-ring {
    border: 4px solid transparent;
    background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b) border-box;
    background-size: 100% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: legendary-ring-spin 6s linear infinite;
}

.creator-rank-frame[data-tier="legendary"] .creator-rank-glow {
    opacity: 0.6;
    background: conic-gradient(from 0deg, rgba(255, 107, 107, 0.5), rgba(255, 217, 61, 0.5), rgba(107, 203, 119, 0.5), rgba(77, 150, 255, 0.5), rgba(155, 89, 182, 0.5), rgba(255, 107, 107, 0.5));
    animation: legendary-glow-spin 8s linear infinite, legendary-glow-pulse 3s ease-in-out infinite;
}

.creator-rank-frame[data-tier="legendary"] .creator-level-badge {
    background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
    animation: legendary-badge-spin 4s linear infinite;
    color: #fff;
    width: 28px;
    height: 28px;
    font-weight: 900;
    font-size: 12px;
    box-shadow: 0 2px 20px rgba(155, 89, 182, 0.6), 0 0 40px rgba(255, 217, 61, 0.2);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Keep the text still while the background spins */
.creator-rank-frame[data-tier="legendary"] .creator-level-badge span {
    display: block;
    animation: legendary-badge-counter-spin 4s linear infinite;
}

.creator-rank-frame[data-tier="legendary"] .rank-title {
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    animation: legendary-text-flow 4s ease-in-out infinite;
}

[data-tier="legendary"] .level-progress-fill {
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
    background-size: 400% 100%;
    animation: legendary-bar-flow 3s linear infinite;
    box-shadow: 0 0 16px rgba(155, 89, 182, 0.5), 0 0 4px rgba(255, 217, 61, 0.3);
}

@keyframes legendary-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* We need the ring to spin but keep its shape — use a pseudo-element approach */
.creator-rank-frame[data-tier="legendary"] .creator-rank-ring {
    animation: none; /* disable direct spin — it distorts the circle */
}

.creator-rank-frame[data-tier="legendary"] .creator-rank-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
    animation: legendary-ring-spin 6s linear infinite;
    z-index: -1;
}

.creator-rank-frame[data-tier="legendary"] .creator-rank-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
}

@keyframes legendary-glow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes legendary-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.75; }
}

@keyframes legendary-badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes legendary-badge-counter-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes legendary-text-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes legendary-bar-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}


/* ── Rank title labels ──────────────────────────────────────── */

.rank-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rank-title-lg {
    font-size: 13px;
}


/* ── XP bar level-aware overrides ───────────────────────────── */

.level-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 12px;
    background: #e5e7eb;
    overflow: hidden;
    position: relative;
}

.level-progress-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Shimmer overlay on all bars silver+ */
[data-tier="silver"] .level-progress-fill::after,
[data-tier="gold"] .level-progress-fill::after,
[data-tier="diamond"] .level-progress-fill::after,
[data-tier="legendary"] .level-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    animation: shimmer-sweep 2.5s ease-in-out infinite;
}

@keyframes shimmer-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}


/* ── Dark mode adjustments ──────────────────────────────────── */

.dark-mode .creator-rank-frame[data-tier="rookie"] .creator-rank-ring {
    border-color: #475569;
}

.dark-mode .creator-rank-frame[data-tier="rookie"] .creator-level-badge {
    background: linear-gradient(135deg, #475569, #64748b);
}

.dark-mode .level-progress-track {
    background: #374151;
}

.dark-mode .creator-rank-frame[data-tier="bronze"] .creator-rank-glow { opacity: 0.2; }
.dark-mode .creator-rank-frame[data-tier="silver"] .creator-rank-glow { opacity: 0.25; }
.dark-mode .creator-rank-frame[data-tier="gold"] .creator-rank-glow { opacity: 0.35; }
.dark-mode .creator-rank-frame[data-tier="diamond"] .creator-rank-glow { opacity: 0.4; }
.dark-mode .creator-rank-frame[data-tier="legendary"] .creator-rank-glow { opacity: 0.5; }

.dark-mode .creator-level-badge {
    border-color: #1f2937 !important;
}

.dark-mode .rank-title {
    opacity: 0.9;
}


/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .creator-rank-ring,
    .creator-rank-glow,
    .creator-level-badge,
    .level-progress-fill,
    .level-progress-fill::after,
    .creator-rank-ring::before {
        animation: none !important;
    }
    .creator-rank-frame[data-tier="legendary"] .creator-rank-glow {
        opacity: 0.4;
    }
}