/* Brief, purposeful transitions; all content remains available without motion. */
.review-intro { max-width:680px; min-height:calc(100dvh - 70px); gap:20px; }
.review-intro__body { gap:16px; padding:20px 0; }
.review-intro__body h1 { margin:0; }
.review-intro__body p { margin:0; line-height:1.55; font-size:clamp(15px,2.5vw,19px); }
.review-intro .review-step-heading { font-size:clamp(26px,4vw,34px); line-height:1.25; }
.review-intro>header { flex:none; }
.review-intro>.btn { min-height:52px; flex:none; border-radius:999px; }
.review-dots .is-visited { background:var(--primary); }
.review-welcome { width:100%; display:grid; place-items:center; min-height:300px; }
.review-welcome h1 { font-size:clamp(32px,5.5vw,52px); letter-spacing:-1.5px; line-height:1.23; }
.review-welcome h1 span { color:var(--primary); animation:welcome-ink .8s cubic-bezier(.2,.65,.2,1) both; }
.review-welcome h1 span:last-child { animation-delay:.16s; }
.review-intro__body>* { animation:gentle-arrive .55s cubic-bezier(.2,.65,.2,1) both; }
.review-intro__body>*:nth-child(2) { animation-delay:.09s; }
.review-intro__body>*:nth-child(3) { animation-delay:.18s; }
.review-intro__body>*:nth-child(4) { animation-delay:.25s; }
.review-intro--1 .review-intro__body { justify-content:space-evenly; gap:28px; }
.review-memory-chart { width:100%; margin:0; padding:15px 13px 12px; border-radius:26px; background:#fff; }
.review-memory-chart svg { display:block; width:100%; overflow:visible; }
.chart-grid { stroke:#eff0f2; stroke-width:1; fill:none; }
.chart-forgetting { stroke:#caced3; stroke-width:4; stroke-dasharray:3 10; stroke-linecap:round; fill:none; }
.chart-retention { stroke:#d5ad32; stroke-width:4; fill:none; stroke-dasharray:1; stroke-dashoffset:0; animation:chart-draw .9s .15s ease-out both; }
.chart-end { fill:#e0b944; stroke:#fff6d7; stroke-width:3; animation:gentle-arrive .3s .85s both; }
.review-memory-chart figcaption { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; padding:0 10px; }
.review-memory-chart figcaption i { display:inline-block; width:14px; height:3px; background:#d5ad32; vertical-align:middle; margin-right:6px; }
.review-brain { width:106px; height:106px; color:var(--primary); position:relative; margin:10px auto 12px; }
.review-brain:before { content:''; position:absolute; inset:-30px; background:radial-gradient(circle,rgba(102,57,92,.12),transparent 68%); }
.review-brain svg { width:100%; height:100%; position:relative; }
.review-intro .review-promise { grid-template-columns:1fr 1fr; align-items:center; max-width:560px; text-align:left; background:rgba(104,59,94,.045); border:1px solid rgba(104,59,94,.16); padding:22px; margin-top:28px; }
.review-promise strong { color:var(--primary); font-size:clamp(21px,3.5vw,30px); line-height:1.2; }
.review-promise span { font-size:14px; line-height:1.45; }
.lesson-xp-card { position:relative; }
.lesson-xp-card__bar { height:8px; background:#eee7ed; }
.lesson-xp-card__bar i { background:linear-gradient(90deg,var(--primary),#a77898); transition:none; }
.lesson-xp-card b { position:relative; font-variant-numeric:tabular-nums; font-size:11px; }
.lesson-xp-card small { font-variant-numeric:tabular-nums; }
.lesson-xp-card.is-level-burst b { animation:level-pop .48s ease-out; }
.lesson-xp-card.is-level-burst b:after { content:''; position:absolute; inset:-8px; border:2px solid #c89e55; border-radius:inherit; pointer-events:none; animation:level-ring .55s ease-out both; }
.lesson-xp-card.is-level-burst b:before { content:''; position:absolute; width:4px; height:4px; left:50%; top:50%; border-radius:50%; background:transparent; box-shadow:-31px -20px #c89e55,28px -17px #a77898,-25px 20px #a77898,32px 17px #c89e55,0 -29px #c89e55; animation:level-sparks .55s ease-out both; pointer-events:none; }
.level-up-banner.is-awaiting-level { visibility:hidden; }
.level-up-banner span { color:#766047; }
.level-up-banner.is-revealed { animation:gentle-arrive .4s ease-out both; }
.review-feedback,.answer-feedback { animation:gentle-arrive .25s ease-out both; }
.motion-settled * { animation:none!important; }
@keyframes gentle-arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes welcome-ink { from { color:#c7c6cf; opacity:.55; } to { color:var(--primary); opacity:1; } }
@keyframes chart-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes level-pop { 0%,100% { transform:scale(1); } 40% { transform:scale(1.19); background:#f4e5c9; } }
@keyframes level-ring { from { opacity:.85; transform:scale(.8); } to { opacity:0; transform:scale(1.5); } }
@keyframes level-sparks { from { opacity:1; transform:scale(.6); } to { opacity:0; transform:scale(1.25); } }
@media(max-width:600px) { .review-intro { min-height:calc(100dvh - 65px); gap:12px; } .review-intro--1 .review-intro__body { gap:25px; } .review-intro .review-promise { padding:18px; } }
@media(max-height:650px) { .review-intro__body { padding:10px 0; gap:12px; } .review-welcome { min-height:190px; } .review-brain { width:72px; height:72px; margin:0 auto; } .review-intro .review-promise { margin-top:10px; } }
@media(prefers-reduced-motion:reduce) { .review-intro *, .lesson-xp-card *, .lesson-xp-card *:before, .lesson-xp-card *:after, .level-up-banner, .review-feedback, .answer-feedback { animation:none!important; transition:none!important; } }