/* ══════════════════════════════════════════════
   achievement-unlock-celebration.css
   Phase 2.7 — Achievement Unlocked celebration modal.

   Separate from achievement.css's .ach-modal-* rules, which style the
   EXISTING manually-opened achievement browser modal
   (#achievement-modal-overlay) — that modal and its CSS are untouched.
   This file only styles the new automatic-unlock celebration
   (.au-celebration-overlay), built/destroyed programmatically by
   achievement-unlock-celebration.js, mirroring the
   daily-challenge-celebration.css/.js pattern already used in this
   codebase.

   Reuses existing design tokens (--gold, --gold-glow, --surface-deep,
   --border, --text-bright, --text-muted, --font, --font-mono,
   --radius-lg, --space-*, --ink). Rarity accent color is passed in as
   the --rarity-color custom property on .au-card, same technique
   achievement.css already uses for .ach-card.

   z-index sits just below the Daily Challenge celebration (260) but
   above the standard modal layer (--z-modal, 200) — the two celebration
   overlays are not expected to ever be open simultaneously, but if they
   somehow were, the Daily Challenge overlay wins.
   ══════════════════════════════════════════════ */

/* ── Backdrop ── */
.au-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 255;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 18, 0.90);
    backdrop-filter: blur(6px);
    padding: var(--space-4);
    animation: auOverlayIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.au-celebration-overlay.au-exit {
    animation: auOverlayOut 0.24s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

@keyframes auOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes auOverlayOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Card shell — a proper modal card, visually distinct from
   .settings-card and from achievement.css's .ach-modal-card ── */
.au-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surface-deep);
    border: 1.5px solid var(--rarity-color, var(--gold));
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5) var(--space-5);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 34px color-mix(in srgb, var(--rarity-color, var(--gold)) 30%, transparent);
    animation: auCardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes auCardIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Character (small, secondary — existing hero artwork) ──
   Isolated to this modal only; never touches .avatar-frame or
   QL.character's state classes. */
.au-character-wrap {
    width: 120px;
    height: 120px;
    margin-bottom: calc(-1 * var(--space-2));
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.au-character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    transform-origin: 50% 100%;
    opacity: 0;
    /* Entrance-only: small scale-in, upward bounce, settle — then holds
       still at its final keyframe (fill-mode both, single iteration). */
    animation: auCharReact 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes auCharReact {
    0%   { opacity: 0; transform: scale(0.82) translateY(10px); }
    55%  { opacity: 1; transform: scale(1.05) translateY(-5px); }
    78%  { transform: scale(0.98) translateY(1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Achievement badge — the star of the celebration ── */
.au-badge-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-2) 0 var(--space-3);
}

.au-badge-glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--rarity-color, var(--gold)) 55%, transparent) 0%,
        color-mix(in srgb, var(--rarity-color, var(--gold)) 22%, transparent) 45%,
        transparent 72%);
    animation: auBadgeGlowPulse 2.6s ease-in-out 0.4s infinite;
}

@keyframes auBadgeGlowPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.07); }
}

.au-badge-icon {
    position: relative;
    z-index: 1;
    font-size: 3.1rem;
    line-height: 1;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rarity-color, var(--gold)) 60%, transparent));
    opacity: 0;
    animation: auBadgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.22s both;
}

@keyframes auBadgePop {
    0%   { opacity: 0; transform: scale(0.75); }
    70%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Sparkles — small, controlled, one-shot twinkle per point, then
   settle to a faint resting glow rather than looping indefinitely. ── */
.au-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.au-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    color: var(--gold-glow);
    opacity: 0;
    animation: auSparkleTwinkle 0.9s ease-out var(--au-sparkle-delay, 0s) both;
}

.au-sparkle::before {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(240, 200, 96, 0.7));
}

@keyframes auSparkleTwinkle {
    0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
    45%  { opacity: 1; transform: scale(1.15) rotate(45deg); }
    100% { opacity: 0.32; transform: scale(0.85) rotate(70deg); }
}

/* ── Text block ── */
.au-unlocked-label {
    font-family: 'Oswald', var(--font), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    animation: auTextIn 0.35s ease-out 0.5s both;
}

.au-rarity {
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-1);
    opacity: 0;
    animation: auTextIn 0.35s ease-out 0.56s both;
}

.au-name {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-bright);
    margin-top: var(--space-2);
    opacity: 0;
    animation: auTextIn 0.35s ease-out 0.62s both;
}

.au-desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: var(--space-2);
    max-width: 280px;
    opacity: 0;
    animation: auTextIn 0.35s ease-out 0.68s both;
}

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

/* ── Reward pill (rarity points — existing data, no hardcoding) ── */
.au-points-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(226, 176, 74, 0.12);
    border: 1.5px solid rgba(226, 176, 74, 0.40);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--gold);
    opacity: 0;
    animation: auPillPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.78s both;
}

@keyframes auPillPop {
    0%   { opacity: 0; transform: scale(0.8); }
    70%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Continue button ── */
.au-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-sm);
    border: 2px solid var(--gold);
    background: var(--gold);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--text-xl);
    cursor: pointer;
    margin-top: var(--space-5);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    opacity: 0;
    animation: auTextIn 0.35s ease-out 0.9s both;
}

.au-continue-btn:hover {
    background: var(--gold-glow);
    border-color: var(--gold-glow);
    box-shadow: 0 0 20px rgba(226, 176, 74, 0.40);
    transform: translateY(-1px);
}

.au-continue-btn:active { transform: scale(0.97); }

.au-continue-btn:focus-visible {
    outline: 3px solid rgba(226, 176, 74, 0.60);
    outline-offset: 3px;
}

/* ── Responsive: narrow phones ── */
@media (max-width: 360px) {
    .au-card { padding: var(--space-5) var(--space-4) var(--space-4); }
    .au-badge-wrap { width: 96px; height: 96px; }
    .au-badge-icon { font-size: 2.6rem; }
    .au-name { font-size: var(--text-xl); }
}

/* ══════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Self-contained, same pattern as
   daily-challenge-celebration.css — kills all decorative
   motion, keeps the modal fully readable and stable.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .au-celebration-overlay,
    .au-celebration-overlay.au-exit {
        animation: none;
        opacity: 1;
    }
    .au-celebration-overlay.au-exit { opacity: 0; }

    .au-card { animation: none; opacity: 1; transform: none; }

    .au-character-img { animation: none; opacity: 1; transform: none; }

    .au-badge-glow { animation: none; opacity: 0.75; transform: none; }
    .au-badge-icon { animation: none; opacity: 1; transform: none; }

    .au-sparkle { display: none; }

    .au-unlocked-label,
    .au-rarity,
    .au-name,
    .au-desc,
    .au-points-pill,
    .au-continue-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }
}