/* ══════════════════════════════════════════════
   daily-challenge-celebration.css
   Phase 2.4 — Daily Challenge completion overlay.
   Phase 2.5 — Premium pass: bigger hero, idle
   breathing animation, ambient stars, radiating
   glow, tighter composition, legacy-visual
   suppression while the overlay is open.

   Architecture notes:
   - Overlay is created/destroyed programmatically by
     daily-challenge-celebration.js (mirrors showLevelUpOverlay).
   - Uses existing design tokens (--gold, --gold-glow, --surface,
     --surface2, --border, --text-bright, --text-muted, --xp-green,
     --font, --font-mono, --radius-lg, --space-*, --z-effect).
   - z-index sits above --z-effect (240) but below --z-onboarding (600)
     so it never covers the critical onboarding or signup flows.
   - Loads last in index.html, so its rules win the cascade over
     badges-toasts.css / motion.css for the legacy-visual suppression
     below without needing to touch those files.
   ══════════════════════════════════════════════ */

/* ── Backdrop ── */
.dc-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Dark obsidian backdrop with a warm gold radial glow at centre */
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%,
            rgba(226, 176, 74, 0.18) 0%,
            rgba(14, 26, 55, 0.10) 55%,
            transparent 80%),
        rgba(7, 11, 18, 0.92);
    backdrop-filter: blur(8px);
    padding: var(--space-5) var(--space-4);
    /* Entrance: fade in */
    animation: dcOverlayIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Exit class added by JS */
}

.dc-celebration-overlay.dc-exit {
    animation: dcOverlayOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

@keyframes dcOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dcOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Particle canvas (purely decorative) ── */
.dc-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.dc-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: dcParticleDrift var(--dc-dur, 2s) var(--dc-delay, 0s) ease-out forwards;
}

@keyframes dcParticleDrift {
    0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
    20%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translate(var(--dc-tx, 0px), var(--dc-ty, -80px)) scale(1.1); }
}

/* ── Card shell ── */
.dc-celebration-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    gap: 0;
    /* No card background — the overlay backdrop IS the scene */
}

/* ── Character image ──
   260px (was 200px) — roughly +30% linear size so the hero reads as
   the clear visual anchor of the screen instead of competing with
   the text block below it. */
.dc-character-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: var(--space-2);
    /* Entrance: scale up + float up with bounce */
    animation: dcCharIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

@keyframes dcCharIn {
    0%   { opacity: 0; transform: scale(0.55) translateY(24px); }
    70%  { opacity: 1; transform: scale(1.06) translateY(-6px); }
    100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Warm glow halo behind the character — layered radial gradients so
   the light reads as radiating outward from the character's core
   rather than a single flat circular spotlight. A tight hot core,
   a mid-spread bloom, and a soft outer falloff, all sharing the same
   centre as the character's visual mass (slightly above true centre,
   where the character's torso/head sit). */
.dc-character-glow {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 245, 214, 0.40) 0%, transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(240, 200, 96, 0.32) 0%, rgba(226, 176, 74, 0.16) 38%, transparent 60%),
        radial-gradient(circle at 50% 55%, rgba(226, 176, 74, 0.14) 0%, transparent 72%);
    pointer-events: none;
    mix-blend-mode: screen;
    animation: dcGlowPulse 2.4s ease-in-out infinite;
}

@keyframes dcGlowPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.06); }
}

/* ── Ambient stars ──
   Small unicode glyphs positioned by inline style (top/left/delay/
   size, set in JS) around the character's silhouette. Sits above the
   glow but below nothing in particular — they read as floating
   sparkle motes, not fireworks. */
.dc-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.dc-star {
    position: absolute;
    color: var(--gold-glow);
    line-height: 1;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(240, 200, 96, 0.65));
    animation: dcStarPulse 2.6s ease-in-out infinite;
    animation-delay: var(--dc-star-delay, 0s);
    will-change: opacity, transform;
}

@keyframes dcStarPulse {
    0%, 100% { opacity: 0;    transform: scale(0.55) translateY(0); }
    45%      { opacity: 0.95; transform: scale(1.1)  translateY(-2px); }
    55%      { opacity: 0.95; transform: scale(1.05) translateY(-2px); }
}

.dc-character-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    /* transparent PNG — no background */
    filter:
        drop-shadow(0 0 26px rgba(226, 176, 74, 0.55))
        drop-shadow(0 0 12px rgba(226, 176, 74, 0.28))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.60));
    transform-origin: 50% 100%;
    /* Idle celebration animation — slow "breathing" scale, never a
       translate, so the character never drifts off its mark. */
    animation: dcBreathe 3.6s ease-in-out infinite;
}

@keyframes dcBreathe {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

/* ── "⭐ CHALLENGE COMPLETE!" heading ── */
.dc-heading {
    font-family: 'Oswald', var(--font), sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: var(--space-1);
    background: linear-gradient(180deg, #fff5d6 0%, #f0c860 35%, #e2b04a 65%, #b9842f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(226, 176, 74, 0.45));
    /* Entrance: slide up + fade */
    animation: dcTextIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ── Appreciation message ── */
.dc-message {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    max-width: 260px;
    animation: dcTextIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

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

/* ── XP reward pill ── */
.dc-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: linear-gradient(145deg,
        rgba(92, 201, 138, 0.14) 0%,
        rgba(92, 201, 138, 0.07) 100%);
    border: 1.5px solid rgba(92, 201, 138, 0.45);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow:
        0 0 18px rgba(92, 201, 138, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    /* Entrance: pop in with scale */
    animation: dcRewardPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.52s both;
}

@keyframes dcRewardPop {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

.dc-reward-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.dc-reward-text {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: var(--text-2xl);
    color: var(--xp-green);
    letter-spacing: 0.04em;
}

.dc-reward-label {
    font-size: var(--text-base);
    font-weight: 700;
    color: rgba(92, 201, 138, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Continue button ── */
.dc-continue-btn {
    /* Reuse .btn .btn-primary visual style without inheriting the class
       (avoids any cascade conflicts from buttons.css) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    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;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    white-space: nowrap;
    /* Entrance: fade up after reward */
    animation: dcTextIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}

.dc-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);
}

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

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

/* ══════════════════════════════════════════════
   LEGACY QUEST-COMPLETION VISUAL SUPPRESSION
   Phase 2.5

   While the Daily Challenge celebration overlay is open, JS adds
   `dc-active` to <body>. This visually hides any in-flight or
   newly-spawned XP float number and toast (the "+23 XP" float and
   the "🏆 Main Quest Complete! +100 XP" toast) so they don't visually
   compete with the celebration screen.

   Deliberately uses opacity/visibility, not display:none — the
   elements keep animating and their `animationend` listeners
   (render.js's spawnXPFloat/showToast) still fire normally, so they
   still clean themselves out of the DOM on schedule. Nothing about
   quest completion, XP awarding, or toast/float creation is changed;
   this is a pure visual suppression that self-reverses the instant
   `dc-active` is removed (see daily-challenge-celebration.js _close).
   ══════════════════════════════════════════════ */
body.dc-active .toast-container,
body.dc-active .xp-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Kills all decorative motion. Overlay still
   appears and content is fully readable.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .dc-celebration-overlay,
    .dc-celebration-overlay.dc-exit {
        animation: none;
        opacity: 1;
    }

    .dc-celebration-overlay.dc-exit {
        /* Still need to hide on exit — use visibility instead of animation */
        opacity: 0;
    }

    .dc-character-wrap {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .dc-character-glow {
        animation: none;
    }

    /* Idle breathing scale — disabled per spec; glow + layout persist. */
    .dc-character-img {
        animation: none;
        transform: none;
    }

    /* Stars: no pulsing/motion, but keep them softly visible so the
       "magical reward" framing isn't lost entirely — just static. */
    .dc-star {
        animation: none;
        opacity: 0.55;
        transform: none;
    }

    .dc-heading,
    .dc-message,
    .dc-continue-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .dc-reward-pill {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .dc-particle {
        display: none;
    }
}