/* ===== Base Status Bar ===== */
.status-bar {
    width: 88%;
    height: 48px;
    margin: 16px auto;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
}

/* Gradient Layer */
.status-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: 400% 400%;
    z-index: 1;
}

/* Content */
.status-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

/* Shared Text Style */
.status-text {
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* =========================
   UPCOMING – Cool Blue Energy
   ========================= */
.status-bar.upcoming::before {
    background-image: linear-gradient(
        120deg,
        #c9e7ff,
        #a6d4fa,
        #d8f0ff
    );
    animation: upcomingWave 16s cubic-bezier(.4,0,.2,1) infinite;
}

.upcoming-text {
    color: #1f3c5a;
    animation: upcomingBreathe 4s ease-in-out infinite;
}

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

@keyframes upcomingBreathe {
    0%, 100% {
        opacity: 0.85;
        letter-spacing: 1.5px;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        letter-spacing: 2.4px;
        transform: translateY(-1px);
    }
}

/* =========================
   ONGOING – High Energy Motion
   ========================= */
.status-bar.ongoing::before {
    background-image: linear-gradient(
        120deg,
        #ff512f,
        #f09819,
        #ff512f
    );
    animation: ongoingFlow 7s ease-in-out infinite;
}

.ongoing-text {
    color: white;
    animation: ongoingLive 1.2s infinite;
}

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

/* Text feels alive without chaos */
@keyframes ongoingLive {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255,255,255,0);
    }
    40% {
        transform: scale(1.08) rotate(-0.4deg);
        text-shadow: 0 0 14px rgba(255,255,255,0.7);
    }
    60% {
        transform: scale(1.08) rotate(0.4deg);
        text-shadow: 0 0 18px rgba(255,255,255,0.9);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255,255,255,0);
    }
}

/* =========================
   FINISHED – True Text Shine
   ========================= */
.finished-text {
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    background: linear-gradient(
        110deg,
        #2a2a2a 40%,
        #f5f5f5 50%,
        #2a2a2a 60%
    );

    background-size: 250% 100%;
    background-position: 0% 50%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    animation: finishedTextShine 4.5s ease-in-out infinite;
}
.status-bar.finished::before {
    background-image: linear-gradient(
        120deg,
        #c2c2c2,
        #9f9f9f,
        #c2c2c2
    );
}

/* Smooth, earned shine pass */
@keyframes finishedTextShine {
    0%   { background-position: 0% 50%; }
    55%  { background-position: 100% 50%; }
    100% { background-position: 100% 50%; }
}