/* ============================================
   UI POLISH
   Overlay open transitions, shop ambience,
   counter flash effects, progress bar styling.
   ============================================ */

/* ── Overlay Transitions ────────────────────
   Animate overlays on open. Close is instant
   (display:none can't transition) but the open
   feels smooth. Each overlay keeps its own
   display value (flex, block) via specificity.
   ─────────────────────────────────────────── */

.overlay-container.active {
    animation: overlayFadeIn 150ms ease-out both;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Shop Ambience ──────────────────────────
   Slow pulsating glow on the shop shell border.
   Subtle enough to feel alive, not distracting.
   ─────────────────────────────────────────── */

@keyframes shopBorderPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--t-accent) 30%, transparent),
            0 0 10px color-mix(in srgb, var(--t-accent) 18%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--t-accent) 40%, transparent),
            0 0 18px color-mix(in srgb, var(--t-accent) 30%, transparent),
            inset 0 0 10px color-mix(in srgb, var(--t-accent) 8%, transparent);
    }
}

.shop-overlay.active .shop-shell {
    animation: shopBorderPulse 3.2s ease-in-out infinite;
}

/* ASCII spinner element placed before shop title by JS */
.shop-ascii-spinner {
    display: inline-block;
    font-family: inherit;
    color: var(--t-accent);
    text-shadow: var(--t-glow);
    margin-right: 6px;
    min-width: 1ch;
}

/* ── Counter Flash Effects ──────────────────
   Applied by NumberAnimator when a value ticks
   up or down. Brief color+scale pop.
   ─────────────────────────────────────────── */

@keyframes counterFlashUp {
    0% {
        color: var(--t-green);
        transform: scale(1.15);
    }
    100% {
        color: inherit;
        transform: scale(1);
    }
}

@keyframes counterFlashDown {
    0% {
        color: var(--t-red);
        transform: scale(1.15);
    }
    100% {
        color: inherit;
        transform: scale(1);
    }
}

.counter-flash-up {
    display: inline-block; /* required for transform */
    animation: counterFlashUp 400ms ease-out;
}

.counter-flash-down {
    display: inline-block;
    animation: counterFlashDown 400ms ease-out;
}

/* ── Progress Bar ───────────────────────────
   Inline ASCII progress bars for deployment
   status, sector rollout, etc.
   ─────────────────────────────────────────── */

.deploy-progress {
    color: var(--t-accent);
    font-family: inherit;
}

.deploy-progress-filled {
    color: var(--t-green);
    text-shadow: var(--t-glow);
}

.deploy-progress-empty {
    color: var(--t-text-dim);
    opacity: 0.35;
}

/* ── Reduced Motion ─────────────────────────
   Respect user preference: kill non-essential
   animations but keep layout functional.
   ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .overlay-container.active {
        animation-duration: 0.01ms;
    }

    .shop-overlay.active .shop-shell {
        animation: none;
    }

    .counter-flash-up,
    .counter-flash-down {
        animation-duration: 0.01ms;
    }
}