/* The celebration (assets/js/celebrate.js) — a page read through, a journey
 * milestone. Flat tokens with literal fallbacks: it opens over pages of both
 * A/B arms. */

.rs-cel { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
          padding: 16px; background: rgba(10, 10, 10, .55); font-family: var(--flat-font, 'Be Vietnam Pro', system-ui, sans-serif); }
.rs-cel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
.rs-cel-card { position: relative; width: min(440px, 100%); padding: 22px 22px 20px; text-align: center;
               background: var(--flat-paper, #fff); color: var(--flat-ink, #0a0a0a); border: 2px solid var(--flat-ink, #0a0a0a);
               animation: rs-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.rs-cat { display: block; width: 150px; height: 150px; margin: -80px auto 4px; animation: rs-cat 1.1s ease-out both; }
.rs-cel-k { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--flat-green, #0f7a4a); }
.rs-cel-h { margin: 6px 0 6px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.rs-cel-m { margin: 0; font-size: 13px; color: var(--flat-dim, #6b7280); }
.rs-cel-act { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.rs-cel-go, .rs-cel-x { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
                        font: inherit; font-size: 14px; font-weight: 800; border: 2px solid var(--flat-ink, #0a0a0a); cursor: pointer; }
.rs-cel-go { background: var(--flat-blue, #1a3aff); border-color: var(--flat-blue, #1a3aff); color: #fff; text-decoration: none; }
.rs-cel-x { background: #fff; color: var(--flat-ink, #0a0a0a); }
.rs-cel-go:focus-visible, .rs-cel-x:focus-visible { outline: 3px solid var(--flat-blue, #1a3aff); outline-offset: 2px; }
@keyframes rs-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rs-cat { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-8px) scale(1.05); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-cel-card, .rs-cat { animation: none; } }
@media (max-width: 560px) { .rs-cat { width: 120px; height: 120px; margin-top: -64px; } }