/* ============================================
   Countdown Section Styles
   ============================================ */

.countdown-section {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 32px var(--color-shadow-teal);
    border: 2px solid rgba(77, 184, 196, 0.3);
    opacity: 0;
    animation: fadeInScale var(--countdown-duration) var(--ease-out) var(--countdown-delay) forwards;
}

.countdown-label {
    font-size: 1rem;
    color: var(--color-text-dark);
    opacity: 0.7;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.countdown-timer {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
}

.countdown-timer.pulse {
    animation: countdownPulse 300ms ease-out;
}

.countdown-timer.near-unlock {
    animation: glowPulse var(--countdown-pulse) ease-in-out infinite;
}