/* ============================================================
   Sets · celebrate.css
   Confetti-canvas en de celebratie-overlay van js/celebrate.js.

   De overlay zit boven de modals (z 70) maar onder het laadscherm
   (z 2000); de confetti valt over de kaart heen voor het feestje.
   ============================================================ */

.celebrate-canvas {
    position: fixed;
    inset: 0;
    z-index: 1600;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    display: none;
}
.celebrate-canvas-live { display: block; }

/* ─── Overlay + backdrop ───────────────────────────────────────── */

.celebrate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 24px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.celebrate-overlay.hidden { display: none; }

.celebrate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 7, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: celebrate-backdrop-in 320ms var(--sets-ease-out, ease-out) both;
}
html:not(.dark) .celebrate-backdrop { background: rgba(28, 31, 38, 0.42); }

@keyframes celebrate-backdrop-in {
    from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

/* ─── Kaart met spring-entrance ────────────────────────────────── */

.celebrate-card {
    position: relative;
    width: min(100%, 360px);
    padding: 30px 24px 24px;
    text-align: center;
    border-radius: 26px;
    border: 1px solid var(--sets-border-strong, rgba(226, 232, 240, 0.18));
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(200, 248, 63, 0.10), transparent 55%),
        var(--sets-surface-1, #111318);
    box-shadow: var(--sets-shadow-raised, 0 24px 70px rgba(0, 0, 0, 0.34));
    animation: celebrate-card-in 480ms var(--sets-ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.18)) both;
}
html:not(.dark) .celebrate-card {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(145, 189, 17, 0.10), transparent 55%),
        var(--sets-surface-1, #ffffff);
}

@keyframes celebrate-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.86); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.celebrate-overlay-out .celebrate-backdrop,
.celebrate-overlay-out .celebrate-card {
    animation: celebrate-out 190ms ease-in both;
}
@keyframes celebrate-out {
    to { opacity: 0; transform: scale(0.96); }
}
.celebrate-overlay-out .celebrate-backdrop { transform: none; }

/* Zacht accentlicht achter de inhoud. Het ademt alleen op een zeldzaam
   moment (PR, gouden badge, weekafsluiting) — een loop die bij elke
   afsluiting draait is geen feedback meer maar behang. */
.celebrate-halo {
    position: absolute;
    top: -70px;
    left: 50%;
    width: 240px;
    height: 240px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 248, 63, 0.16), transparent 65%);
    filter: blur(6px);
    pointer-events: none;
    animation: celebrate-halo 2.8s ease-in-out infinite;
}
html:not(.dark) .celebrate-halo {
    background: radial-gradient(circle, rgba(145, 189, 17, 0.14), transparent 65%);
}
.celebrate-overlay:not(.celebrate-dramatic) .celebrate-halo {
    animation: none;
    opacity: 0.55;
}
@keyframes celebrate-halo {
    0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

/* ─── Badge (achievement-unlocks) ──────────────────────────────── */

.celebrate-badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 22px;
    border: 1px solid var(--sets-border-strong, rgba(226, 232, 240, 0.18));
    background: var(--sets-surface-2, #171a20);
    animation: celebrate-badge-in 560ms 120ms var(--sets-ease-spring, cubic-bezier(0.2, 0.9, 0.3, 1.18)) both;
}
.celebrate-badge.hidden { display: none; }
.celebrate-badge[data-tier="bronze"] { box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.35), 0 0 26px rgba(217, 119, 6, 0.25); }
.celebrate-badge[data-tier="silver"] { box-shadow: 0 0 0 1px rgba(161, 161, 170, 0.4), 0 0 26px rgba(161, 161, 170, 0.3); }
/* Goud komt uit `--sets-gold` en nergens anders vandaan (G3). De rgba
   hierboven voor brons en zilver is prima — dat zijn geen goud — maar een
   eigen geel (#eab308) naast het token maakt van goud een vage familie
   kleuren in plaats van één betekenis, en het volgt de themawissel niet:
   licht zet `--sets-gold` op #9f6308, een literal blijft op #eab308 staan. */
.celebrate-badge[data-tier="gold"]   {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sets-gold, #e5bd4b) 50%, transparent),
        0 0 32px color-mix(in srgb, var(--sets-gold, #e5bd4b) 40%, transparent);
}

@keyframes celebrate-badge-in {
    from { opacity: 0; transform: scale(0.4) rotate(-10deg); }
    65%  { opacity: 1; transform: scale(1.1) rotate(3deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.celebrate-badge-icon {
    width: 34px;
    height: 34px;
    color: var(--sets-accent-text);
}

/* ─── Tekst en statistieken ────────────────────────────────────── */

.celebrate-eyebrow {
    margin-bottom: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sets-accent-text);
    animation: celebrate-rise 420ms 80ms var(--sets-ease-out, ease-out) both;
}
/* D4: het accent als TEKST op een lichte kaart haalt AA niet. `--sets-accent`
   op wit is 2.21:1 en `--sets-accent-strong` (#759b0c) nog maar 3.01:1 op de
   licht getinte kaartkop — AA vraagt 4.5:1 voor tekst van deze grootte.
   Daarom in lichte modus het token verduisteren in plaats van vervangen: het
   accent blijft herkenbaar en komt op 4.96:1. De eerste regel is de terugval
   voor engines zonder color-mix; die haalt 6.56:1, dus beide paden zijn AA. */
html:not(.dark) .celebrate-eyebrow {
    color: var(--sets-text-2, #535a65);
    color: color-mix(in srgb, var(--sets-accent-strong, #759b0c) 75%, black);
}
.celebrate-eyebrow.hidden { display: none; }

.celebrate-title {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1.15;
    color: var(--sets-text, #f5f7fa);
    animation: celebrate-rise 420ms 120ms var(--sets-ease-out, ease-out) both;
}

.celebrate-subtitle {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sets-text-2, #b8bec8);
    animation: celebrate-rise 420ms 160ms var(--sets-ease-out, ease-out) both;
}
.celebrate-subtitle.hidden { display: none; }

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

.celebrate-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}
.celebrate-stats.hidden { display: none; }

.celebrate-stat {
    min-width: 0;
    padding: 12px 6px 10px;
    border-radius: 16px;
    border: 1px solid var(--sets-border, rgba(226, 232, 240, 0.11));
    background: var(--sets-surface-2, #171a20);
    animation: celebrate-rise 420ms var(--celebrate-stagger, 140ms) var(--sets-ease-out, ease-out) both;
}

.celebrate-stat-value {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sets-text, #f5f7fa);
}

.celebrate-stat-label {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sets-text-3, #929aa7);
}

.celebrate-dismiss {
    width: 100%;
    margin-top: 20px;
    animation: celebrate-rise 420ms 240ms var(--sets-ease-out, ease-out) both;
}

/* Secundaire actie (bv. "Deel workout") onder de hoofdknop; stijgt als
   laatste op zodat de knop-hiërarchie ook in de beweging zit. */
.celebrate-action {
    width: 100%;
    margin-top: 6px;
    animation: celebrate-rise 420ms 300ms var(--sets-ease-out, ease-out) both;
}

/* ─── Reduced motion: alles wordt een rustige fade ─────────────── */

@media (prefers-reduced-motion: reduce) {
    .celebrate-backdrop,
    .celebrate-card,
    .celebrate-badge,
    .celebrate-eyebrow,
    .celebrate-title,
    .celebrate-subtitle,
    .celebrate-stat,
    .celebrate-dismiss {
        animation: celebrate-fade 160ms ease-out both;
    }
    .celebrate-halo { animation: none; opacity: 0.8; }
    .celebrate-overlay-out .celebrate-backdrop,
    .celebrate-overlay-out .celebrate-card { animation: none; }
}
@keyframes celebrate-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Extra kaartje: de variabele beloning (F6) ────────────────── */

/* Een toegift onder de statistieken, niet een tweede held. Daarom
   dezelfde matte kaartachtergrond als de stat-tegels, één accentrand
   links en verder geen eigen kleurenschema. */
.celebrate-bonus {
    margin-top: 14px;
    padding: 12px 14px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid var(--sets-border, rgba(226, 232, 240, 0.11));
    border-left: 2px solid var(--sets-accent, #c8f83f);
    background: var(--sets-surface-2, #171a20);
    animation: celebrate-rise 420ms 320ms var(--sets-ease-out, ease-out) both;
}
.celebrate-bonus.hidden { display: none; }

/* Goud alleen als de uitspraak zelf zeldzaam is (een record of een
   mijlpaal); de gewone waarheden blijven lime. */
.celebrate-bonus[data-tier="rare"] {
    border-left-color: var(--sets-gold-text);
}

.celebrate-bonus-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sets-text-3, #929aa7);
}

.celebrate-bonus-value {
    display: block;
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--sets-text, #f5f7fa);
}

.celebrate-bonus-label {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sets-text-2, #b8bec8);
}

.celebrate-bonus-note {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sets-border, rgba(226, 232, 240, 0.11));
    font-size: 11px;
    color: var(--sets-text-3, #929aa7);
}

.celebrate-bonus-note-value {
    font-family: "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
    color: var(--sets-text-2, #b8bec8);
}

@media (prefers-reduced-motion: reduce) {
    .celebrate-bonus { animation: celebrate-fade 160ms ease-out both; }
}