.learning-animation{
 margin:20px 0;
 padding:18px;
 overflow:hidden;
 border:2px solid #a9cdf7;
 border-radius:20px;
 background:linear-gradient(145deg,#f4f9ff,#fffbea);
 box-shadow:0 10px 24px rgba(20,86,217,.10);
}
.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.animation-heading span{
 display:inline-block;padding:4px 8px;border-radius:999px;
 color:#0b4ba7;background:#dcecff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
}
.animation-heading h3{margin:5px 0 0;color:#0b2f73}
.animation-play{
 border:0;border-radius:11px;padding:11px 16px;color:#fff;font-weight:800;
 background:linear-gradient(115deg,#0b2f73,#1456d9);box-shadow:0 6px 14px rgba(20,86,217,.2);
}
.animation-stage{
 position:relative;min-height:230px;overflow:hidden;border-radius:16px;
 background:linear-gradient(#cceaff 0 58%,#d6efc5 58% 100%);
}
.animation-caption{
 min-height:30px;margin:12px 0 2px;padding:8px 12px;border-radius:10px;
 color:#173d61;background:#fff;font-weight:800;text-align:center;
}
.animation-note{margin:7px 0 0;color:#62758a;font-size:12px;text-align:center}
.letter-animation{min-height:230px;position:relative}
.animated-letters{
 position:absolute;left:7%;top:50%;transform:translateY(-50%);
 display:flex;gap:8px;opacity:.35;
}
.animated-letters b{
 display:grid;place-items:center;width:76px;height:92px;border-radius:17px;
 color:#fff;background:#7357d9;font-size:58px;box-shadow:0 9px 18px rgba(55,47,130,.22);
}
.animated-word{position:absolute;top:25px;width:138px;margin:0;opacity:0;text-align:center}
.animated-word img{width:112px;height:112px;object-fit:contain;border-radius:20px}
.animated-word figcaption{color:#173d61;font-size:22px;font-weight:800}.animated-word figcaption strong{color:#1456d9}
.moon-word{left:48%}.milk-word{right:5%}
.playing .animated-letters{animation:letter-pop 1s ease forwards}
.playing .moon-word{animation:word-arrive 1s ease 2s forwards}
.playing .milk-word{animation:word-arrive 1s ease 4s forwards}
.count-animation{min-height:230px;display:flex;align-items:center;justify-content:center;gap:14px;padding:25px}
.count-animation span{position:relative;opacity:0;transform:translateY(55px) scale(.5)}
.count-animation img{width:105px;max-width:15vw;height:105px;object-fit:contain}
.count-animation b{
 position:absolute;right:-2px;top:-7px;width:30px;height:30px;display:grid;place-items:center;
 border-radius:50%;color:#0b2f73;background:#ffd84d;
}
.playing .count-animation span{animation:apple-count .7s cubic-bezier(.2,.8,.2,1) calc(var(--order)*.75s) forwards}
.addition-animation{position:relative;min-height:230px;display:flex;align-items:center;justify-content:center;gap:28px}
.moving-group{display:flex;gap:8px}.moving-group img{width:105px;height:105px;object-fit:contain}
.animated-plus{font-size:44px;color:#0b2f73}
.addition-result{
 position:absolute;left:50%;bottom:15px;transform:translateX(-50%) scale(.7);
 padding:8px 18px;border-radius:999px;opacity:0;color:#fff;background:#14866f;font-size:24px;font-weight:900;
}
.playing .group-two{animation:group-left 1s ease 2s forwards}
.playing .group-one{animation:group-right 1s ease 2s forwards}
.playing .animated-plus{animation:plus-pulse 1s ease 1s 2}
.playing .addition-result{animation:result-pop .7s ease 3.6s forwards}
.plant-animation{position:relative;min-height:230px;background:linear-gradient(#bfe5ff 0 64%,#885b36 64%)}
.plant-sun{position:absolute;right:8%;top:8%;font-size:62px;opacity:.3}
.plant-rain{position:absolute;left:14%;top:18%;opacity:0;font-size:28px;transform:rotate(18deg)}
.plant-soil{position:absolute;left:50%;bottom:28%;width:1px;height:1px}
.animated-seed{position:absolute;width:19px;height:13px;border-radius:50%;background:#694127;transform:translate(-50%,0)}
.animated-sprout,.animated-plant{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) scale(0);transform-origin:bottom;font-size:72px}
.animated-plant{font-size:115px}
.playing .plant-sun{animation:sun-glow 1.5s ease .5s forwards}
.playing .plant-rain{animation:rain-fall 1.5s ease 1.4s forwards}
.playing .animated-sprout{animation:plant-grow 1.2s ease 2.7s forwards}
.playing .animated-plant{animation:plant-grow 1.3s ease 4.2s forwards}
@keyframes letter-pop{0%{opacity:.35;transform:translateY(-50%) scale(.7)}70%{opacity:1;transform:translateY(-50%) scale(1.08)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes word-arrive{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes apple-count{to{opacity:1;transform:none}}
@keyframes group-left{to{transform:translateX(28px)}}
@keyframes group-right{to{transform:translateX(-28px)}}
@keyframes plus-pulse{50%{transform:scale(1.35);color:#ff6b5f}}
@keyframes result-pop{to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes sun-glow{to{opacity:1;transform:rotate(12deg) scale(1.08)}}
@keyframes rain-fall{0%{opacity:0;transform:translateY(-20px) rotate(18deg)}50%{opacity:1}100%{opacity:.25;transform:translateY(65px) rotate(18deg)}}
@keyframes plant-grow{0%{transform:translateX(-50%) scale(0)}70%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1)}}
@media(max-width:650px){
 .animation-heading{align-items:flex-start;flex-direction:column}.animation-stage{min-height:250px}
 .animated-letters{left:4%;top:34%;transform:translateY(-50%)}.animated-letters b{width:54px;height:65px;font-size:40px}
 .animated-word{top:125px;width:110px}.animated-word img{width:78px;height:78px}.moon-word{left:14%}.milk-word{right:14%}
 .count-animation{gap:3px;padding:16px}.count-animation img{width:65px;height:65px}.count-animation b{width:24px;height:24px;font-size:12px}
 .addition-animation{gap:8px}.moving-group{gap:2px}.moving-group img{width:68px;height:68px}
}
@media(prefers-reduced-motion:reduce){
 .animation-stage *{animation:none!important;transition:none!important}
 .animated-letters,.animated-word,.count-animation span,.addition-result,.plant-sun,.plant-rain,.animated-sprout,.animated-plant{opacity:1!important}
 .count-animation span{transform:none!important}.addition-result{transform:translateX(-50%) scale(1)!important}
 .animated-sprout{transform:translateX(-85%) scale(.65)!important}.animated-plant{transform:translateX(-20%) scale(.65)!important}
}