/* public/css/moments.css: full-screen moments and one-time notes (V2-SPEC §17.6, §17.7; REVIEW-NOTES R47: CSS only, every
   animation done within 1.2 s, and none at all with reduced motion: data-motion="still"). Theme tokens from app.css. The only
   violet on the overlay is the ✱ and the points amount. */

.moments { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.moments-backdrop { position: absolute; inset: 0; background: var(--ink); opacity: 0.55; animation: moment-fade 180ms ease-out both; }
.moment-panel {
  position: relative; width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: var(--s3, 16px) var(--s3, 16px) var(--s2, 8px);
  animation: moment-in 220ms ease-out both; text-align: center;
}
.moment-panel h2 { font-size: 1.6rem; margin: var(--s2, 8px) 0; }
.moment-panel [data-testid="moment-text"] { text-align: left; }
.moment-stage { height: 120px; display: grid; place-items: center; position: relative; overflow: hidden; }
.moment-amount { font: 800 1.5rem/1.2 var(--font-ui); margin: 0 0 var(--s2, 8px); }
.moment-row { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; justify-content: center; }

/* points: a large ✱ pops with a half turn; 12 small ones burst outward and fade */
.moment-ast { font-size: 96px; line-height: 1; color: var(--accent); animation: moment-pop 420ms cubic-bezier(.34, 1.56, .64, 1) both; }
.moment-spark { position: absolute; left: 50%; top: 50%; font-size: 14px; color: var(--accent); opacity: 0;
  animation: moment-spark 650ms ease-out 120ms both; }

/* xp: the bar fills from 0 to into/of; no violet */
.moment-bar { width: 100%; height: 12px; background: var(--rule); }
.moment-bar > span { display: block; height: 100%; width: var(--w); background: var(--ink); animation: moment-fill 900ms ease-out both; }
.moment-bar-label { margin: var(--s1, 4px) 0 0; }

/* level-up: the level number in the display size, pulsing once; the unlock rows fade in 60 ms apart */
.moment-level { font: 800 5rem/1 var(--font-ui); animation: moment-pulse 500ms ease-out both; }
.moment-unlocks { text-align: left; max-height: min(52vh, 30rem); border-bottom: 1px solid var(--rule); overflow-y: auto; margin: var(--s2, 8px) 0; }
.moment-group { font-size: 1rem; margin: var(--s2, 8px) 0 var(--s1, 4px); }
.moment-list { list-style: none; margin: 0; padding: 0; }
.moment-list li { padding: 2px 0; overflow-wrap: anywhere; }
.moment-row-in { animation: moment-fade 200ms ease-out both; animation-delay: calc(300ms + var(--i) * 60ms); }

/* Round 5 (DECISIONS 40-42) */
.moment-result { text-align: left; font-weight: 700; margin: 0 0 var(--s2, 8px); padding: var(--s2, 8px) var(--s3, 12px); border: 1px solid var(--rule); border-left: 3px solid var(--ink); }
/* first XP: a big XP badge pops, ten "+" rise around it, then the bar fills (all within 1.2 s, R47) */
.moment-stage-xp { height: 160px; align-content: center; gap: var(--s2, 8px); }
.moment-xp-burst { position: relative; display: grid; place-items: center; height: 96px; }
.moment-xp-badge { font: 900 2.75rem/1 var(--font-ui); letter-spacing: 0.02em; border: 4px solid var(--ink); border-radius: 10px; padding: 8px 14px;
  animation: moment-pop 420ms cubic-bezier(.34, 1.56, .64, 1) both; }
.moment-xp-spark { position: absolute; left: 50%; top: 50%; font: 800 1.1rem/1 var(--font-ui); color: var(--ink); opacity: 0;
  animation: moment-spark 700ms ease-out calc(180ms + var(--t)) both; }
.moment-stage-xp .moment-bar { height: 14px; }
.moment-stage-xp .moment-bar > span { animation-delay: 350ms; animation-duration: 800ms; }
/* key: the key swings in and settles */
.moment-key { display: inline-block; color: var(--ink); animation: moment-key 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
.moment-key .icon-key { width: 150px; height: 75px; }
.moment-key-until { font-weight: 700; }
/* level-up: "Unlocked" and a plain sentence under each row */
.moment-unlocked-h { display: flex; align-items: center; gap: var(--s2, 8px); font-size: 1.25rem; margin: var(--s2, 8px) 0; }
.moment-unlocked-h .icon-unlock { width: 1em; height: 1em; }
.moment-list li { padding: var(--s1, 4px) 0 var(--s2, 8px); }
.moment-why { margin: 2px 0 0; font-size: var(--fs-list, 0.9375rem); color: var(--muted); }
.moment-price { font-weight: 700; }

.moment-panel[data-motion="still"], .moment-panel[data-motion="still"] *, .moments:has([data-motion="still"]) .moments-backdrop { animation: none !important; }
.moment-panel[data-motion="still"] .moment-spark, .moment-panel[data-motion="still"] .moment-xp-spark { display: none; }

@keyframes moment-fade { from { opacity: 0; } }
@keyframes moment-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes moment-pop { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.15) rotate(0deg); } 100% { transform: scale(1); } }
@keyframes moment-spark { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))); } }
@keyframes moment-fill { from { width: 0; } }
@keyframes moment-key { 0% { opacity: 0; transform: rotate(-35deg) scale(0.4); } 100% { opacity: 1; transform: none; } }
@keyframes moment-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* the one-time note: a 3px ink rule on the left, body text, no background, no shadow, no violet */
.first-note { border-left: 3px solid var(--ink); padding: var(--s1, 4px) 0 var(--s1, 4px) var(--s3, 12px); margin: var(--s3, 12px) 0; }
.first-note p { margin: 0 0 var(--s1, 4px); }
.first-note-row { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); align-items: center; }
.first-note svg.ast { color: inherit; }