/**
 * tags.css
 * Contains all styling for the user tag system.
 * Based on the example provided in tags1.html.
 */

/* * Base Tag Styles 
 */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 20px;
    width: 60px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* * ========================================
 * CSS KEYFRAME ANIMATIONS
 * ========================================
 */
@keyframes snowfall {
    0% { background-position: 0 0; }
    100% { background-position: 20px 40px; }
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 4px rgba(242, 113, 33, 0.3); }
    50% { box-shadow: 0 0 10px rgba(242, 113, 33, 0.7); }
    100% { box-shadow: 0 0 4px rgba(242, 113, 33, 0.3); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 4px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.7); }
    100% { box-shadow: 0 0 4px rgba(46, 204, 113, 0.3); }
}

@keyframes shine {
    0% { transform: translateX(-100%) skewX(-25deg); }
    100% { transform: translateX(100%) skewX(-25deg); }
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(1px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0); }
}

/* * ========================================
 * SPECIFIC TAG STYLES
 * ========================================
 */

/* --- Milestone Tags --- */
.tag-pioneer {
    background: linear-gradient(45deg, #4a00e0, #8e2de2);
    color: white;
}

.tag-prolific {
    background: linear-gradient(45deg, #f27121, #e94057);
    color: white;
    animation: pulse-orange 2.5s infinite;
}

.tag-influencer {
    background: linear-gradient(45deg, #ffc107, #ffeb3b);
    color: #424242;
    border-color: #ffc107;
}
.tag-influencer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    animation: shine 2s infinite ease-in-out;
}
.tag-veteran {
    background: linear-gradient(45deg, #8E9EAB, #DAD4B5);
    color: #2c3e50;
    border: 1px solid #8E9EAB;
}
.tag-luminary {
    background: #fff;
    color: #f0e68c;
    text-shadow: 0 0 5px #f0e68c;
    box-shadow: 0 0 8px #fff;
}

/* --- Event Tags --- */
.tag-xmas-25 {
    background-color: #c0392b;
    color: white;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1.5px, transparent 1.5px);
    background-size: 20px 20px, 35px 35px;
    background-position: 0 0, 15px 15px;
    animation: snowfall 4s linear infinite;
}
.tag-halloween-25 {
    background: #000;
    color: #e67e22;
    border-color: #e67e22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23e67e22' fill-opacity='0.1' d='M12 2a10 10 0 0 0-9.9 9h-2v2h2a10 10 0 0 0 9.9 9v2h2v-2a10 10 0 0 0 9.9-9h2v-2h-2A10 10 0 0 0 12 2zm0 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8z'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}
.tag-new-year-26 {
    background-color: #141E30;
    color: #f1c40f;
    border: 1px solid #f1c40f;
}

/* --- Anniversary Tags --- */
.tag-anniversary-1 {
    background-color: #111;
    color: #88aaff;
    border: 1px solid #333;
    text-transform: none;
}
.tag-anniversary-2 { background: linear-gradient(45deg, #2980b9, #3498db); color: white; }
.tag-anniversary-2::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); animation: shine 2.5s infinite; }
.tag-anniversary-3 { background: linear-gradient(45deg, #27ae60, #2ecc71); color: white; animation: pulse-green 2s infinite; }
.tag-anniversary-4 { background: linear-gradient(45deg, #c0392b, #e74c3c); color: white; text-shadow: 0 0 3px rgba(0,0,0,0.5); }
.tag-anniversary-5 { background: linear-gradient(135deg, #ecf0f1, #bdc3c7); color: #2c3e50; border: 1px solid #fff; box-shadow: 0 0 5px #fff; }

/* --- Special & Rare Tags --- */
.tag-voter {
    background: #27ae60;
    color: white;
}
.tag-founder {
    background: #2c3e50;
    color: #f0e68c;
    border: 1px solid #f0e68c;
    box-shadow: 0 0 5px rgba(240, 230, 140, 0.5);
}
.tag-moderator {
    background: linear-gradient(45deg, #0052D4, #4364F7, #6FB1FC);
    color: white;
    border: 1px solid #6FB1FC;
    box-shadow: 0 0 6px rgba(111, 177, 252, 0.7);
}
.tag-moderator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    animation: shine 3s infinite;
}

/* --- QA Tags --- */
.tag-bug-hunter {
    background: #34495e;
    color: #e74c3c;
    gap: 4px;
}
.tag-bug-hunter svg { width: 10px; height: 10px; fill: #e74c3c; }
.tag-exploiter {
    background: #000;
    color: #0f0;
    border: 1px solid #0f0;
    text-shadow: 0 0 3px #0f0;
    animation: glitch 1.5s infinite steps(2, end);
}
.tag-feedback {
    background: #95a5a6;
    color: #2c3e50;
}