/* Practice-hall celebrations. One fixed layer above the page and below the toast; it never takes a tap. */
.keiko-celebration{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;contain:strict}
.keiko-celebration>span{position:absolute;display:block}
.kc-call{left:var(--x);top:var(--call-y);translate:-50% -50%;rotate:-6deg;text-align:center;white-space:nowrap;font-weight:900;line-height:1.05;color:#ffdc4f;-webkit-text-stroke:7px #7a1f12;paint-order:stroke fill;filter:drop-shadow(0 5px 0 #4a1209aa);animation:kc-call 1.05s cubic-bezier(.2,1.4,.4,1) both}
.kc-call strong{display:block;font-size:min(46px,13vw);letter-spacing:2px}
.kc-call small{display:block;margin-top:6px;font-size:min(20px,6vw);color:#fff6d6;-webkit-text-stroke:5px #7a1f12;paint-order:stroke fill}
[data-tier="2"] .kc-call strong{font-size:min(56px,15vw)}
[data-tier="3"] .kc-call strong{font-size:min(66px,17vw)}
[data-tier="4"] .kc-call strong{font-size:min(76px,19vw);color:#fff2a8}
[data-tier="2"] .kc-call{animation-duration:1.45s}
[data-tier="3"] .kc-call{animation-duration:2s}
[data-tier="4"] .kc-call{animation-duration:2.4s}
@keyframes kc-call{0%{opacity:0;scale:.2}14%{opacity:1;scale:1.22}24%{scale:.95}32%,78%{opacity:1;scale:1}100%{opacity:0;scale:1.06;translate:-50% -95%}}
.kc-flash{inset:0;background:radial-gradient(circle at var(--x) var(--y),#fff6c9 0,#ffd86a 35%,#ffb84000 75%);animation:kc-flash .42s ease-out both}
[data-tier="3"] .kc-flash,[data-tier="4"] .kc-flash{animation-duration:.6s}
@keyframes kc-flash{0%{opacity:0}18%{opacity:.62}100%{opacity:0}}
.kc-rays{left:var(--x);top:var(--y);width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffd75e66 0 5deg,#ffd75e00 5deg 13deg);-webkit-mask:radial-gradient(circle,#0000 0 9%,#000 16%,#0000 62%);mask:radial-gradient(circle,#0000 0 9%,#000 16%,#0000 62%);animation:kc-rays 1.4s ease-out both}
[data-tier="3"] .kc-rays{animation-duration:1.9s}
[data-tier="4"] .kc-rays{animation-duration:2.3s;background:repeating-conic-gradient(from 0deg,#fff1a899 0 5deg,#ffd75e00 5deg 11deg)}
@keyframes kc-rays{0%{opacity:0;scale:.4;rotate:0deg}15%{opacity:1}75%{opacity:.8}100%{opacity:0;scale:1.15;rotate:40deg}}
.kc-ring{left:var(--x);top:var(--y);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:6px solid #ffd45c;box-shadow:0 0 18px #ffcf4a,inset 0 0 14px #fff3;animation:kc-ring .75s ease-out var(--delay,0ms) both}
@keyframes kc-ring{0%{opacity:.95;scale:.25}100%{opacity:0;scale:3.4}}
.kc-paper{left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*.62);margin:-4px 0 0 -4px;background:var(--color);border-radius:1px;animation:kc-paper 1.05s cubic-bezier(.12,.7,.35,1) var(--delay,0ms) both}
@keyframes kc-paper{0%{opacity:1;translate:0 0;rotate:0deg}70%{opacity:1}100%{opacity:0;translate:var(--dx) calc(var(--dy) + 120px);rotate:var(--spin)}}
.kc-paper.shower{left:var(--left);top:-4vh;animation:kc-shower 1.7s linear var(--delay,0ms) both}
@keyframes kc-shower{0%{opacity:1;translate:0 0;rotate:0deg}85%{opacity:1}100%{opacity:0;translate:calc(var(--dx)*.12) var(--dy);rotate:var(--spin)}}
.kc-firework{left:var(--fx);top:var(--fy);width:0;height:0}
.kc-firework i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--color);box-shadow:0 0 8px 2px var(--color);opacity:0;animation:kc-spark .9s ease-out var(--delay,0ms) both}
@keyframes kc-spark{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(1.3)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-78px) scale(.3)}}
.kc-cushion{left:0;top:0;width:0;height:0;animation:kc-cushion-x 1.5s linear var(--delay,0ms) both}
.kc-cushion::before{content:"";position:absolute;width:44px;height:30px;margin:-15px 0 0 -22px;border-radius:9px;background:radial-gradient(circle at 50% 50%,#f0c24c 0 3px,#0000 4px),linear-gradient(160deg,#7d4bb0,#4d2a7c);box-shadow:inset 0 0 0 2px #a97fd6,0 4px 8px #1a0d2e55;animation:kc-cushion-y 1.5s cubic-bezier(.3,0,.7,1) var(--delay,0ms) both}
@keyframes kc-cushion-x{0%{opacity:0;translate:var(--from) 0}8%{opacity:1}90%{opacity:1}100%{opacity:0;translate:var(--to) 0}}
@keyframes kc-cushion-y{0%{translate:0 78vh;rotate:0deg;animation-timing-function:cubic-bezier(.2,.6,.4,1)}45%{translate:0 var(--peak);animation-timing-function:cubic-bezier(.6,0,.9,.5)}100%{translate:0 var(--land);rotate:var(--spin)}}

/* The lesson itself joins in: the card lands like a stamp, the wrestler jumps, the seal glows. */
.lesson-stage[data-celebration] .flashcard{animation:kc-card .5s cubic-bezier(.2,1.5,.4,1)}
.lesson-stage[data-celebration="3"] .flashcard,.lesson-stage[data-celebration="4"] .flashcard{animation:kc-card-big .7s cubic-bezier(.2,1.5,.4,1);box-shadow:0 0 0 4px #ffe597aa,0 0 34px #ffcf4acc,0 12px 26px #2d170b40}
@keyframes kc-card{0%{scale:.96}45%{scale:1.035}100%{scale:1}}
@keyframes kc-card-big{0%{scale:.94;rotate:0deg}30%{scale:1.06;rotate:-1.2deg}50%{rotate:1deg}70%{scale:.99;rotate:-.5deg}100%{scale:1;rotate:0deg}}
.lesson-stage[data-celebration] .lesson-card-actor .mini-actor{animation:kc-jump .6s ease-out}
.lesson-stage[data-celebration="2"] .lesson-card-actor .mini-actor{animation:kc-jump-high .62s ease-out 2}
.lesson-stage[data-celebration="3"] .lesson-card-actor .mini-actor,.lesson-stage[data-celebration="4"] .lesson-card-actor .mini-actor{animation:kc-jump-high .55s ease-out 3}
@keyframes kc-jump{0%,100%{translate:0 0}40%{translate:0 -16px}70%{translate:0 -3px}}
@keyframes kc-jump-high{0%,100%{translate:0 0;scale:1}12%{scale:1.08 .9}45%{translate:0 -30px;scale:.96 1.06}80%{translate:0 0;scale:1.05 .94}}
.lesson-stage[data-celebration] .lesson-result-stamp{box-shadow:0 0 0 0 #ffd45c;animation:learning-stamp .38s ease-out both,kc-seal 1s ease-out .3s}
@keyframes kc-seal{0%{box-shadow:0 0 0 0 #ffd45ccc}100%{box-shadow:0 0 0 18px #ffd45c00}}
.lesson-stage[data-celebration="2"] .lesson-result-banner strong,.lesson-stage[data-celebration="3"] .lesson-result-banner strong,.lesson-stage[data-celebration="4"] .lesson-result-banner strong{color:#ffe083;animation:kc-headline .5s cubic-bezier(.2,1.5,.4,1) both;transform-origin:left center}
@keyframes kc-headline{0%{scale:.7;opacity:0}100%{scale:1;opacity:1}}

/* Reduced motion keeps the words of praise and drops everything that moves. */
.keiko-celebration.still .kc-call{animation:none;opacity:1}
.reduce-motion .lesson-stage[data-celebration] .flashcard,.reduce-motion .lesson-stage[data-celebration] .lesson-card-actor .mini-actor,.reduce-motion .lesson-stage[data-celebration] .lesson-result-stamp,.reduce-motion .lesson-stage[data-celebration] .lesson-result-banner strong{animation:none!important}
@media(prefers-reduced-motion:reduce){.lesson-stage[data-celebration] .flashcard,.lesson-stage[data-celebration] .lesson-card-actor .mini-actor,.lesson-stage[data-celebration] .lesson-result-stamp,.lesson-stage[data-celebration] .lesson-result-banner strong{animation:none!important}}