/* ============================================================
   ANIMATIONS — Keyframes and transition classes
   ============================================================ */

/* ── Falling letter enter/exit ───────────────────────────── */
@keyframes letter-enter {
    from { opacity: 0; scale: 0.5; }
    to   { opacity: 1; scale: 1;   }
}

@keyframes letter-exit {
    from { opacity: 1; scale: 1;   }
    to   { opacity: 0; scale: 0.3; rotate: 15deg; }
}

/* ── Word complete ───────────────────────────────────────── */
@keyframes word-complete {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.06); }
    60%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* ── Unit arrival flash ──────────────────────────────────── */
@keyframes unit-arrive {
    0%   { transform: scale(1);    text-shadow: 0 0 0   transparent; }
    40%  { transform: scale(1.25); text-shadow: 0 0 20px rgba(196, 154, 82, 0.60); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1);    text-shadow: 0 0 12px rgba(196, 154, 82, 0.30); }
}

/* ── Key shake (wrong press) ─────────────────────────────── */
@keyframes key-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX( 5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX( 3px); }
}

.key-shake {
    animation: key-shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Hint pulse ──────────────────────────────────────────── */
@keyframes hint-pulse {
    0%,  100% { box-shadow: 0 0 0 0   rgba(196, 154, 82, 0.30); }
    50%        { box-shadow: 0 0 0 6px rgba(196, 154, 82, 0.00); }
}

/* ── Danger pulse (falling letter near ground) ──────────── */
@keyframes danger-pulse {
    0%,  100% { scale: 1; }
    50%       { scale: 1.08; }
}

/* ── Next unit pulse (target word) ──────────────────────── */
@keyframes next-pulse {
    0%,  100% { opacity: 1; }
    50%        { opacity: 0.55; }
}

/* ── Life lost pulse ─────────────────────────────────────── */
@keyframes life-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); background: var(--color-danger); }
    100% { transform: scale(1); }
}

@keyframes life-gain {
    0%   { transform: scale(0.4); background: var(--color-gold); }
    60%  { transform: scale(1.35); background: var(--color-gold); }
    100% { transform: scale(1); }
}

/* ── Screen overlay fade in ──────────────────────────────── */
@keyframes overlay-enter {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1);    }
}

.screen-overlay:not(.hidden) {
    animation: overlay-enter 250ms ease forwards;
}

/* ── Card slide up ───────────────────────────────────────── */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.overlay-card {
    animation: card-enter 350ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}

/* ── Score update flash ──────────────────────────────────── */
@keyframes score-flash {
    0%   { color: var(--color-gold); transform: scale(1.15); }
    100% { color: var(--color-text); transform: scale(1); }
}

.score-update {
    animation: score-flash 400ms ease forwards;
}

/* ── Score penalty flash ─────────────────────────────────── */
@keyframes score-penalty {
    0%   { color: var(--color-danger); transform: scale(1.15); }
    100% { color: var(--color-text); transform: scale(1); }
}

.score-penalty {
    animation: score-penalty 400ms ease forwards;
}

/* ── Hindi reveal ────────────────────────────────────────── */
/* Handled via CSS transition in game.css */