/* One visual language for the homepage and educational section previews. */
.learning-animation{--sa-navy:#142b50;--sa-blue:#1878ea;--sa-pv:#fb2153;--sa-extra:#098b54;position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;width:100%;min-height:210px;border:1px solid #d7e3f3;border-radius:20px;background:linear-gradient(145deg,#f5f8fe,#e8f0fc);color:var(--sa-navy);font-family:inherit;container-type:inline-size;text-align:center}
.learning-animation *{box-sizing:border-box}
.learning-animation .sa-inner{width:100%;max-width:660px;min-height:inherit;margin:auto;padding:22px 18px 16px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.learning-animation.sa-expanded{min-height:230px;margin:0 0 24px}
.learning-animation .sa-kicker{font-size:11px;line-height:1.4;letter-spacing:.08em;font-weight:700;text-transform:uppercase;color:#506684}
.learning-animation .sa-caption{font-size:11px;line-height:1.5;color:#506684;display:flex;justify-content:center;gap:14px}
.learning-animation .sa-sentence{position:relative;width:100%;height:72px;max-width:550px;margin:0 auto;flex-shrink:0}
.learning-animation .sa-token{position:absolute;top:14px;display:grid;place-items:center;height:43px;width:31%;font-size:clamp(14px,5.6cqw,22px);font-weight:700;border-radius:10px;border:1px solid currentColor;background:#fff;white-space:nowrap;box-shadow:0 3px 9px #142b5008}
.learning-animation .sa-subject{left:0;color:var(--sa-blue);animation:saSubject 12s ease-in-out infinite}
.learning-animation .sa-verb{left:33.5%;color:#c31b40}
.learning-animation .sa-extra{left:67%;color:#06783f;animation:saExtra 12s ease-in-out infinite}
.learning-animation .sa-before,.learning-animation .sa-after{grid-area:1/1}
.learning-animation .sa-before{animation:saBefore 12s linear infinite}
.learning-animation .sa-after{opacity:0;animation:saAfter 12s linear infinite}
.learning-animation .sa-period{position:absolute;right:-5px;top:28px;font-size:20px}
@keyframes saSubject{0%,25%,95%,100%{transform:translate(0,0)}32%,86%{transform:translate(108.065%,-15px)}40%,78%{transform:translate(216.129%,0)}}
@keyframes saExtra{0%,25%,95%,100%{transform:translate(0,0)}32%,86%{transform:translate(-108.065%,15px)}40%,78%{transform:translate(-216.129%,0)}}
@keyframes saBefore{0%,30%,88%,100%{opacity:1}35%,82%{opacity:0}}
@keyframes saAfter{0%,30%,88%,100%{opacity:0}35%,82%{opacity:1}}
.learning-animation .sa-card-stage{position:relative;width:85%;max-width:290px;height:116px;margin:auto;perspective:900px}
.learning-animation .sa-flip{position:absolute;inset:0;transform-style:preserve-3d;animation:saFlip 16s ease-in-out infinite,saCardVisible 16s steps(1,end) infinite}
.learning-animation .sa-flip-two{animation-delay:-8s}
.learning-animation .sa-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;border:1px solid #b9cce7;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;color:var(--sa-navy);box-shadow:0 5px 12px #142b5009}
.learning-animation .sa-face small,.learning-animation .sa-tense small{font-size:11px;font-weight:500;letter-spacing:.05em;color:#637793}
.learning-animation .sa-face strong{font-size:clamp(19px,7cqw,29px);line-height:1.2}
.learning-animation .sa-back{transform:rotateY(180deg);background:#142b50;color:#fff;border-color:#142b50}
.learning-animation .sa-back small{color:#cad9ef}
@keyframes saFlip{0%,18%{transform:rotateY(0)}24%,45%{transform:rotateY(180deg)}50%,100%{transform:rotateY(0)}}
@keyframes saCardVisible{0%,49.99%{visibility:visible}50%,100%{visibility:hidden}}
.learning-animation .sa-reduced-translation,.learning-animation .sa-tense-static{display:none}
.learning-animation .sa-tense-stage{height:112px;position:relative}
.learning-animation .sa-tense{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;opacity:0;animation:saTense 16s ease-in-out infinite;animation-delay:calc(var(--tense)*-4s)}
.learning-animation .sa-tense:nth-child(2){animation-delay:-12s}.learning-animation .sa-tense:nth-child(3){animation-delay:-8s}.learning-animation .sa-tense:nth-child(4){animation-delay:-4s}
.learning-animation .sa-tense strong{font-size:clamp(20px,7.5cqw,33px);font-weight:700;line-height:1.3;white-space:nowrap}
.learning-animation .sa-tense em{font-style:normal;color:#c31b40;border-bottom:2px solid #fac8d2;padding-bottom:3px}
@keyframes saTense{0%,19%{opacity:1;transform:translateY(0)}23%,95%{opacity:0;transform:translateY(-8px)}96%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.learning-animation .sa-story-stage{width:100%;max-width:430px;margin:auto;aspect-ratio:3.2;position:relative;min-height:72px}
.learning-animation .sa-story-stage img{position:absolute;left:0;top:0;width:23%;height:auto;aspect-ratio:3/4;object-fit:contain;border-radius:7px;box-shadow:0 3px 9px #142b5012;animation:saScenes 12s ease-in-out infinite;transform:translateX(var(--from));max-width:none}
@keyframes saScenes{0%,25%,95%,100%{transform:translateX(var(--from))}40%,78%{transform:translateX(var(--to))}}
.learning-animation .sa-word-list{width:100%;max-width:360px;display:grid;gap:7px;margin:auto}
.learning-animation .sa-word-list>span{display:flex;justify-content:space-between;gap:12px;font-size:clamp(13px,4.5cqw,17px);padding:8px 12px;border:1px solid #d7e3f3;border-radius:9px;background:#fff;animation:saList 12s ease-in-out infinite;animation-delay:calc(var(--row)*-4s)}
.learning-animation .sa-word-list>span>span{color:#637793}
@keyframes saList{0%,17%,100%{background:#e2edfd;transform:translateX(3px)}28%,90%{background:#fff;transform:translateX(0)}}
.learning-animation.sa-paused *,.learning-animation.sa-document-hidden *{animation-play-state:paused!important}
.home-paths .learning-animation{border:0;border-radius:0;min-height:210px}
.home-paths .learning-animation *{animation-duration:16s}
.home-paths .learning-animation .sa-flip,.home-paths .learning-animation .sa-tense{animation-duration:16s}
@media(max-width:400px){.learning-animation .sa-inner{padding:18px 12px 14px}.learning-animation .sa-caption{gap:9px}.learning-animation.sa-expanded{min-height:210px}}
@media(prefers-reduced-motion:reduce){.learning-animation *{animation:none!important;transition:none!important}.learning-animation .sa-after{display:none}.learning-animation .sa-subject,.learning-animation .sa-extra{transform:none}.learning-animation .sa-flip{display:none}.learning-animation .sa-card-stage{height:0}.learning-animation .sa-reduced-translation{display:block;font-size:20px;line-height:1.8;font-weight:700}.learning-animation .sa-tense-stage{display:none}.learning-animation .sa-tense-static{display:block;line-height:1.8;font-size:18px;font-weight:700}.learning-animation .sa-story-stage img{transform:translateX(var(--to))}.learning-animation .sa-word-list>span{transform:none;background:#fff}}