/**
 * View Count Fire / Smoke Effects
 *
 * Applied via CSS classes on the <span class="sc-views ..."> element
 * returned by strategic_club_get_post_views().
 *
 * Thresholds:
 *   1,000+   .sc-views--warm     (orange glow)
 *   5,000+   .sc-views--hot      (red glow + subtle pulse)
 *  10,000+   .sc-views--fire     (fire text + flicker)
 *  50,000+   .sc-views--inferno  (intense fire + smoke particles)
 */

/* ---------- base span ---------- */
.sc-views {
    position: relative;
    display: inline-block;
    /* Prevent layout shift from animations */
    transform: translateZ(0);
}

/* ---- 1K+ : warm orange glow ---- */
.sc-views--warm {
    color: #ff9800;
    text-shadow:
        0 0 4px rgba(255, 152, 0, .45),
        0 0 10px rgba(255, 152, 0, .20);
}

/* ---- 5K+ : hot red glow + pulse ---- */
.sc-views--hot {
    color: #ff5722;
    text-shadow:
        0 0 4px rgba(255, 87, 34, .55),
        0 0 12px rgba(255, 87, 34, .30);
    animation: sc-views-pulse 2s ease-in-out infinite;
}

/* ---- 10K+ : fire text ---- */
.sc-views--fire {
    color: #ff6d00;
    font-weight: 600;
    background: linear-gradient(0deg, #ff6d00, #ffab00, #ff6d00);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sc-views-fire-shift 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 109, 0, .60))
            drop-shadow(0 0 8px rgba(255, 171, 0, .30));
}

/* ---- 50K+ : inferno (intense fire + smoke) ---- */
.sc-views--inferno {
    color: #ff3d00;
    font-weight: 700;
    background: linear-gradient(0deg, #ff3d00, #ff6d00, #ffab00, #fff176, #ff6d00);
    background-size: 100% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sc-views-inferno-shift 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 61, 0, .70))
            drop-shadow(0 0 12px rgba(255, 109, 0, .50))
            drop-shadow(0 0 20px rgba(255, 171, 0, .30));
}

/* ---- Smoke particle pseudo-elements for inferno ---- */
.sc-views--inferno::before,
.sc-views--inferno::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(200, 200, 200, .35);
    pointer-events: none;
    transform: translateX(-50%);
}

.sc-views--inferno::before {
    animation: sc-views-smoke 2.4s ease-out infinite;
    opacity: 0;
}

.sc-views--inferno::after {
    animation: sc-views-smoke 2.4s ease-out 1.2s infinite;
    opacity: 0;
}

/* ---- Fire sparks for fire level ---- */
.sc-views--fire::before,
.sc-views--fire::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 90%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffab00;
    pointer-events: none;
    transform: translateX(-50%);
}

.sc-views--fire::before {
    animation: sc-views-spark 1.8s ease-out infinite;
    opacity: 0;
}

.sc-views--fire::after {
    animation: sc-views-spark 1.8s ease-out 0.9s infinite;
    opacity: 0;
}

/* ============================================================
 * Keyframes
 * ============================================================ */

@keyframes sc-views-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.08); opacity: .85; }
}

@keyframes sc-views-fire-shift {
    0%   { background-position: 0% 100%; }
    50%  { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

@keyframes sc-views-inferno-shift {
    0%   { background-position: 0% 100%; }
    50%  { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

@keyframes sc-views-smoke {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: .40;
    }
    100% {
        transform: translateX(-50%) translateY(-18px) scale(2.2);
        opacity: 0;
    }
}

@keyframes sc-views-spark {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: .8;
    }
    60% {
        transform: translateX(calc(-50% + 5px)) translateY(-12px) scale(.6);
        opacity: .4;
    }
    100% {
        transform: translateX(calc(-50% - 3px)) translateY(-20px) scale(0);
        opacity: 0;
    }
}