/* ==========================================================================
   Advanced Status Badge / Indicator System.
   ADD-ON ONLY - isolated component. No selector here targets existing
   site markup: every rule starts with .status-badge or
   .status-announcement, so the existing UI cannot change.
   Load this file only on pages that render badges.
   ========================================================================== */

/* ---------- Component tokens (scoped, never touch :root globals) ---------- */
.status-badge {
    --status-font-size: 0.75rem;
    --status-font-weight: 800;
    --status-letter-spacing: 0.05em;
    --status-line-height: 1;
    --status-icon-size: 14px;
    --status-gap: 6px;
    --status-pad-y: 5px;
    --status-pad-x: 11px;
    --status-radius: 999px;
    --status-bg: #eef1f4;
    --status-color: #3c4650;
    --status-border: #d7dde3;
    --status-dot: currentColor;
    --status-glow: transparent;
    --status-glow-strength: 0 0 0 0 transparent;
    --status-speed: 1.4s; /* default = normal */

    --status-animation-fast: 0.8s;
    --status-animation-normal: 1.4s;
    --status-animation-slow: 2.2s;

    display: inline-flex;
    align-items: center;
    gap: var(--status-gap);
    max-width: 100%;
    padding: var(--status-pad-y) var(--status-pad-x);
    border: 1px solid var(--status-border);
    border-radius: var(--status-radius);
    background: var(--status-bg);
    color: var(--status-color);
    font-family: inherit;
    font-size: var(--status-font-size);
    font-weight: var(--status-font-weight);
    letter-spacing: var(--status-letter-spacing);
    line-height: var(--status-line-height);
    text-transform: uppercase; /* no-op on Devanagari - Hindi text is unaffected */
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

/* Devanagari / mixed text: never force case change, keep readable size. */
.status-badge__text:lang(hi),
.status-badge__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge__icon {
    width: var(--status-icon-size);
    height: var(--status-icon-size);
    flex: 0 0 auto;
}

.status-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-dot);
    flex: 0 0 auto;
}

/* ---------- Intensity: speed + glow strength ---------- */
.status-badge--subtle {
    --status-speed: var(--status-animation-slow);
    --status-glow-strength: 0 0 0 0 transparent;
}
.status-badge--normal {
    --status-speed: var(--status-animation-normal);
}
.status-badge--attention {
    --status-speed: var(--status-animation-fast);
    --status-glow-strength: 0 0 12px 0 var(--status-glow);
}

/* ---------- Size system (default md) ---------- */
.status-badge--xs {
    --status-font-size: 0.68rem;
    --status-icon-size: 11px;
    --status-gap: 4px;
    --status-pad-y: 3px;
    --status-pad-x: 8px;
}
.status-badge--sm {
    --status-font-size: 0.72rem;
    --status-icon-size: 12px;
    --status-pad-y: 4px;
    --status-pad-x: 9px;
}
.status-badge--md {
    --status-font-size: 0.75rem;
    --status-icon-size: 14px;
}
.status-badge--lg {
    --status-font-size: 0.85rem;
    --status-icon-size: 16px;
    --status-pad-y: 7px;
    --status-pad-x: 14px;
}

/* ---------- Shape system (default pill) ---------- */
.status-badge--pill { --status-radius: 999px; }
.status-badge--rounded { --status-radius: 7px; }
.status-badge--square { --status-radius: 2px; }

/* ==========================================================================
   Badge type identities (component-scoped vars only).
   ========================================================================== */
.status-badge--new {
    --status-bg: #fff6dd; --status-color: #7a5200; --status-border: #ecd07f;
    --status-glow: rgba(212, 160, 20, .55);
}
.status-badge--live {
    --status-bg: #fdecec; --status-color: #b71c1c; --status-border: #f0b9b9;
    --status-dot: #e01f1f; --status-glow: rgba(224, 31, 31, .45);
}
.status-badge--updated,
.status-badge--update {
    --status-bg: #e8f1fb; --status-color: #0b5ea8; --status-border: #b8d4ee;
    --status-glow: rgba(11, 94, 168, .35);
}
.status-badge--hot {
    --status-bg: #fff0e4; --status-color: #b23c0a; --status-border: #f0bd93;
    --status-glow: rgba(220, 90, 20, .5);
}
.status-badge--latest {
    --status-bg: #e7f5ec; --status-color: #1c7a45; --status-border: #b7dfc4;
    --status-glow: rgba(28, 122, 69, .4);
}
.status-badge--alert {
    --status-bg: #fdf0d3; --status-color: #7a4a00; --status-border: #e6c476;
    --status-glow: rgba(190, 130, 10, .5);
}
.status-badge--notice {
    --status-bg: #eef1f4; --status-color: #3c4650; --status-border: #d3d9e0;
    --status-glow: rgba(90, 105, 118, .35);
}
.status-badge--featured {
    --status-bg: #f1eafe; --status-color: #6d28d9; --status-border: #d2c2f7;
    --status-glow: rgba(109, 40, 217, .45);
}
.status-badge--branding {
    --status-bg: #101418; --status-color: #f5b301; --status-border: #101418;
    --status-glow: rgba(245, 179, 1, .5);
}
.status-badge--online {
    --status-bg: #e7f5ec; --status-color: #157347; --status-border: #b7dfc4;
    --status-dot: #22a355; --status-glow: rgba(34, 163, 85, .5);
}
.status-badge--trending {
    --status-bg: #eef0ff; --status-color: #4338ca; --status-border: #c6cbf3;
    --status-glow: rgba(67, 56, 202, .4);
}
.status-badge--upcoming {
    --status-bg: #e8ebef; --status-color: #5b6770; --status-border: #cfd6dd;
    --status-glow: rgba(107, 120, 131, .35);
}
.status-badge--breaking {
    --status-bg: #c62828; --status-color: #ffffff; --status-border: #8e1414;
    --status-dot: #ffd9d9; --status-glow: rgba(198, 40, 40, .6);
}
.status-badge--important {
    --status-bg: #fdeee2; --status-color: #9c3d00; --status-border: #eec39b;
    --status-glow: rgba(180, 80, 10, .5);
}

/* ==========================================================================
   Per-type icon/dot motion (only the indicator moves, not the whole badge).
   ========================================================================== */
/* NEW: smooth blink of the whole badge handled below; icon gently pulses. */
.status-badge--new .status-badge__icon {
    animation: statusIconPulse var(--status-speed) ease-in-out infinite;
}
/* LIVE + ONLINE + BREAKING: dot pulses, badge glows softly. */
.status-badge--live .status-badge__dot,
.status-badge--online .status-badge__dot,
.status-badge--breaking .status-badge__dot {
    animation: statusDotPulse var(--status-speed) ease-in-out infinite;
}
.status-badge--live,
.status-badge--online {
    box-shadow: var(--status-glow-strength);
}
/* UPDATED / UPDATE: slow refresh rotation. */
.status-badge--updated .status-badge__icon,
.status-badge--update .status-badge__icon {
    animation: statusIconRotate 3.2s linear infinite;
}
/* HOT: flame breathes. */
.status-badge--hot .status-badge__icon {
    animation: statusIconPulse var(--status-speed) ease-in-out infinite;
    transform-origin: 50% 85%;
}
/* FEATURED: star scale pulse. */
.status-badge--featured .status-badge__icon {
    animation: statusIconPulse var(--status-speed) ease-in-out infinite;
}
/* TRENDING: arrow nudges upward. */
.status-badge--trending .status-badge__icon {
    animation: statusBounce var(--status-speed) ease-in-out infinite;
}
/* UPCOMING: soft clock pulse. */
.status-badge--upcoming .status-badge__icon {
    animation: statusIconPulse var(--status-speed) ease-in-out infinite;
}
/* ALERT / IMPORTANT: controlled attention (icon only). */
.status-badge--alert .status-badge__icon,
.status-badge--important .status-badge__icon {
    animation: statusAttention var(--status-speed) ease-in-out infinite;
}
/* NOTICE: soft glow shell. */
.status-badge--notice {
    box-shadow: var(--status-glow-strength);
}
/* BRANDING: shine sweep across the badge. */
.status-badge--branding::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: statusShimmer 3s ease-in-out infinite;
}

/* ==========================================================================
   Whole-badge animation variants via data-animation.
   ========================================================================== */
.status-badge[data-animation="blink"] {
    animation: statusBlink var(--status-speed) ease-in-out infinite;
}
.status-badge[data-animation="pulse"] {
    animation: statusPulse var(--status-speed) ease-in-out infinite;
}
.status-badge[data-animation="glow"] {
    animation: statusGlow var(--status-speed) ease-in-out infinite;
}
.status-badge[data-animation="bounce"] {
    animation: statusBounce var(--status-speed) ease-in-out infinite;
}
.status-badge[data-animation="shimmer"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: statusShimmer 2.6s ease-in-out infinite;
}
.status-badge[data-animation="none"],
.status-badge[data-animation="none"] .status-badge__icon,
.status-badge[data-animation="none"] .status-badge__dot,
.status-badge[data-animation="none"]::after {
    animation: none !important;
}

/* ==========================================================================
   Keyframes (unique names - no clash with existing site keyframes).
   ========================================================================== */
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    25% { opacity: .75; }
    50% { opacity: .3; }
    75% { opacity: .75; }
}
@keyframes statusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}
@keyframes statusGlow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 12px 0 var(--status-glow); }
}
@keyframes statusShimmer {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}
@keyframes statusIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .85; }
}
@keyframes statusIconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes statusDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 var(--status-glow); }
    50% { transform: scale(1.35); opacity: .7; box-shadow: 0 0 0 5px transparent; }
}
@keyframes statusBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.5px); }
}
@keyframes statusAttention {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(1.05); }
}

/* ==========================================================================
   Announcement bar: badge animates, text stays stable.
   ========================================================================== */
.status-announcement {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid #e9edf1;
    border-radius: 10px;
    background: #ffffff;
}
.status-announcement .status-badge {
    flex: 0 0 auto;
}
.status-announcement__text {
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: inherit;
}

/* ---------- Responsive: compact on small phones, no overflow ---------- */
@media (max-width: 414px) {
    .status-badge--md {
        --status-font-size: 0.7rem;
        --status-pad-x: 9px;
    }
    .status-badge--lg {
        --status-font-size: 0.78rem;
        --status-icon-size: 14px;
    }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .status-badge,
    .status-badge .status-badge__icon,
    .status-badge .status-badge__dot,
    .status-badge::after {
        animation: none !important;
    }
    .status-badge--live,
    .status-badge--online,
    .status-badge--notice {
        box-shadow: none;
    }
}