/* animated per-category Otto (topical practice list) */
.oc{position:relative;display:block;width:64px;height:64px;flex:none;overflow:visible}
.oc-o{position:absolute;left:0;top:10px;width:44px;display:block}
.oc-o .otto{width:44px}
.oc-p{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.oc-p *{transform-box:fill-box;transform-origin:50% 50%}
/* Punctuation: stamp slams down */
.c-stamp{animation:cStamp 1.8s cubic-bezier(.5,0,.5,1) infinite;transform-origin:50% 100%}
@keyframes cStamp{0%,60%{transform:translateY(-6px) scaleY(1)}70%{transform:translateY(8px) scale(1.1,.8)}80%,100%{transform:translateY(0) scaleY(1)}}
.c-ink{animation:cInk 1.8s infinite;opacity:0}@keyframes cInk{0%,68%{opacity:0;transform:scaleX(.2)}74%{opacity:.7;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.4)}}
/* Nouns: lid pops, star bursts out */
.c-lid{animation:cLid 2.4s ease-in-out infinite;transform-origin:0% 100%}
@keyframes cLid{0%,25%{transform:rotate(0)}35%,75%{transform:rotate(-55deg)}90%,100%{transform:rotate(0)}}
.c-pop{animation:cPop 2.4s ease-out infinite;transform-origin:50% 100%;opacity:0}
@keyframes cPop{0%,30%{opacity:0;transform:translateY(8px) scale(.3)}45%{opacity:1;transform:translateY(-8px) scale(1.1)}75%{opacity:1;transform:translateY(-6px) scale(1)}90%,100%{opacity:0;transform:translateY(0) scale(.3)}}
/* Nouns items alternate */
.c-it{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:cIt 4.8s ease-out infinite}
.c-it2{animation-delay:-2.4s}
@keyframes cIt{0%,16%{opacity:0;transform:translateY(8px) scale(.3)}24%{opacity:1;transform:translateY(-9px) scale(1.1)}36%{opacity:1;transform:translateY(-7px) scale(1)}42%,100%{opacity:0;transform:translateY(2px) scale(.3)}}
/* Adjectives: a plain thing gets bigger and colourful */
.c-adj{transform-box:fill-box;transform-origin:50% 50%;animation:cAdj 3.2s ease-in-out infinite}
@keyframes cAdj{0%,15%{transform:scale(.8);fill:#9a97b5}40%,80%{transform:scale(1.55);fill:#ff6fa8}92%,100%{transform:scale(.8);fill:#9a97b5}}
.c-sp{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:cSp 3.2s ease-out infinite}
.c-sp2{animation-delay:.25s}
@keyframes cSp{0%,38%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(30deg)}78%{opacity:1;transform:scale(.9) rotate(60deg)}90%,100%{opacity:0;transform:scale(.2) rotate(90deg)}}
/* (old paint strokes unused) */
.c-s1,.c-s2,.c-s3{transform-origin:0 50%;animation:cPaint 3s ease-out infinite}
.c-s2{animation-delay:.35s}.c-s3{animation-delay:.7s}
@keyframes cPaint{0%{transform:scaleX(0);opacity:1}25%,80%{transform:scaleX(1);opacity:1}95%,100%{transform:scaleX(1);opacity:0}}
/* Adverbs: Otto speeds along, lines streak back */
.c-run{animation:cRun .5s ease-in-out infinite alternate}@keyframes cRun{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}
.c-l1,.c-l2,.c-l3{animation:cLine .9s linear infinite}.c-l2{animation-delay:.3s}.c-l3{animation-delay:.6s}
@keyframes cLine{from{transform:translateX(14px);opacity:0}30%{opacity:.9}to{transform:translateX(-8px);opacity:0}}
/* Prepositions: Otto crouches, jumps ON the box, bobs, then hops down */
.c-hop{animation:cHop 4.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes cHop{0%,12%{transform:translate(0,0)}18%{transform:translate(0,0) scale(1.06,.9)}32%{transform:translate(14px,-26px) scale(.93)}42%{transform:translate(28px,-20px) scale(.85,.9)}46%{transform:translate(28px,-20px) scale(.85)}56%,66%{transform:translate(28px,-23px) scale(.85)}60%{transform:translate(28px,-20px) scale(.85,.9)}76%{transform:translate(14px,-26px) scale(.93)}88%{transform:translate(0,0) scale(1.04,.94)}94%,100%{transform:translate(0,0)}}
/* Modal verbs: bubble cycles can / must / may */
.c-w1,.c-w2,.c-w3{opacity:0;animation:cWord 3s infinite}.c-w2{animation-delay:1s}.c-w3{animation-delay:2s}
@keyframes cWord{0%{opacity:0;transform:translateY(3px)}8%,28%{opacity:1;transform:none}36%,100%{opacity:0}}
.c-bub{animation:cBub 3s ease-in-out infinite}@keyframes cBub{50%{transform:translateY(-1.5px)}}
/* Connectors: two links slide together */
.c-k1{animation:cK1 2s ease-in-out infinite}.c-k2{animation:cK2 2s ease-in-out infinite}
@keyframes cK1{0%,15%{transform:translateX(-10px)}45%,80%{transform:translateX(0)}100%{transform:translateX(-10px)}}
@keyframes cK2{0%,15%{transform:translateX(10px)}45%,80%{transform:translateX(0)}100%{transform:translateX(10px)}}
.c-sp{animation:cSp 2s infinite;opacity:0}@keyframes cSp{0%,42%{opacity:0}50%{opacity:1}65%,100%{opacity:0}}
/* Sentences: bricks drop to build a wall */
.c-b1,.c-b2,.c-b3{animation:cBrick 3s cubic-bezier(.4,0,.6,1) infinite;opacity:0}.c-b2{animation-delay:.4s}.c-b3{animation-delay:.8s}
@keyframes cBrick{0%{opacity:0;transform:translateY(-26px)}12%{opacity:1;transform:translateY(-26px)}28%{transform:translateY(2px)}34%,82%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(0)}}
/* Pronouns: I / you / we pop one after another */
.c-pr1,.c-pr2,.c-pr3{opacity:0;animation:cPr 3s infinite}.c-pr2{animation-delay:1s}.c-pr3{animation-delay:2s}
@keyframes cPr{0%{opacity:0;transform:scale(.3)}6%{opacity:1;transform:scale(1.15)}12%,30%{opacity:1;transform:scale(1)}36%,100%{opacity:0;transform:scale(.3)}}
/* Determiners: apple sits in his paw and bobs gently, label swaps a / an / the */
.c-ap{animation:cAp 1.8s ease-in-out infinite}@keyframes cAp{50%{transform:translateY(-1.5px) rotate(5deg)}}
/* Verbs: Otto jumps, shadow shrinks */
.c-jump{animation:cJump 1.1s cubic-bezier(.3,.7,.4,1) infinite}@keyframes cJump{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.05,.92)}50%{transform:translateY(-12px)}90%{transform:translateY(0)}}
.c-sh{animation:cSh 1.1s ease-in-out infinite}@keyframes cSh{0%,100%{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.55);opacity:.15}}
.c-st1{animation:cTw 1.1s infinite}@keyframes cTw{50%{transform:scale(1.4) rotate(20deg);opacity:.6}}
/* Tenses: hourglass flips, sand falls */
.c-hg{animation:cHg 4s ease-in-out infinite}@keyframes cHg{0%,40%{transform:rotate(0)}55%,95%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.c-sand{animation:cSand 1.2s linear infinite}@keyframes cSand{from{transform:translateY(-8px);opacity:1}to{transform:translateY(4px);opacity:0}}
/* Direct and indirect speech: quote bubbles answer each other */
.c-q1{animation:cQ 2.4s infinite}.c-q2{animation:cQ 2.4s infinite 1.2s}
@keyframes cQ{0%,100%{transform:scale(.8);opacity:.5}10%,45%{transform:scale(1.12);opacity:1}60%{transform:scale(.9);opacity:.6}}
/* Active and passive: arrows swap places */
.c-sw{animation:cSw 3s ease-in-out infinite;transform-origin:50% 50%}@keyframes cSw{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(180deg)}}
/* Questions and answers: ? turns into a tick */
.c-qm{animation:cQm 2.8s infinite}.c-an{animation:cAn 2.8s infinite;opacity:0}
@keyframes cQm{0%,40%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(.4) rotate(-90deg)}90%{opacity:0}100%{opacity:1;transform:scale(1)}}
@keyframes cAn{0%,45%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.2)}62%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.4)}}
/* Exam skills: arrow flies straight into the bullseye, ring flashes on the hit */
.c-ar{animation:cAr 2.4s cubic-bezier(.45,0,.5,1) infinite;transform-origin:92% 50%}
@keyframes cAr{0%{transform:translateX(-20px);opacity:0}12%{opacity:1}38%{transform:translateX(1.5px)}42%{transform:translateX(0) rotate(-2.5deg)}48%{transform:translateX(0) rotate(2deg)}54%,84%{transform:translateX(0) rotate(0)}94%,100%{transform:translateX(0);opacity:0}}
.c-hit{animation:cHit 2.4s ease-out infinite;opacity:0}@keyframes cHit{0%,37%{opacity:0;transform:scale(.5)}40%{opacity:.9;transform:scale(.7)}58%,100%{opacity:0;transform:scale(1.25)}}
.accd .ico.occ{width:64px;height:64px;background:none;border-radius:0;display:block;flex:none;overflow:visible}

/* Mixed practice: topic dots fly together and become one star */
.c-mx{animation:cMx 3.6s ease-in-out infinite}
@keyframes cMx{0%,10%{transform:translate(0,0);opacity:1}40%,48%{transform:translate(var(--dx),var(--dy));opacity:1}52%,100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.c-mxs{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:cMxs 3.6s ease-out infinite}
@keyframes cMxs{0%,8%{opacity:0;transform:scale(.2) rotate(-40deg)}22%{opacity:1;transform:scale(1.3) rotate(8deg)}32%,82%{opacity:1;transform:scale(1) rotate(0)}91%{transform:scale(1.08)}98%,100%{opacity:0;transform:scale(.4)}}
.row>.ico.occ,.tile2>.ico.occ{width:64px;height:64px;background:none!important;border-radius:0;display:block;flex:none;overflow:visible}
.oc-o.c-lft{left:-15px}

/* My Academy: Otto builds the house, wall up, roof drops, flag raised */
.c-hw,.c-hr,.c-hd,.c-hf{transform-box:fill-box}
.c-hw{transform-origin:50% 100%;animation:cHw 4.4s ease-out infinite}
.c-hr{transform-origin:50% 100%;animation:cHr 4.4s ease-in infinite}
.c-hd{transform-origin:50% 100%;opacity:0;animation:cHd 4.4s ease-out infinite}
.c-hf{transform-origin:0 100%;animation:cHf 4.4s ease-out infinite}
@keyframes cHw{0%{transform:scaleY(0)}18%{transform:scaleY(1.06)}22%,90%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes cHr{0%,20%{transform:translateY(-16px);opacity:0}32%{transform:translateY(1px);opacity:1}36%,90%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(0);opacity:0}}
@keyframes cHd{0%,36%{opacity:0;transform:scale(.3)}44%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes cHf{0%,44%{transform:scaleY(0);opacity:0}54%,90%{transform:scaleY(1);opacity:1}96%,100%{opacity:0}}
.card>.ico.occ{width:64px;height:64px;flex:none;display:block;overflow:visible;margin-right:6px}

/* My Academy (big): Otto walks out of the door */
.ico.occ.acad{width:96px;height:96px}
.ico.occ.acad .oc{transform:scale(1.5);transform-origin:0 0}
.ico.occ.acad .oc-o{z-index:2}.ico.occ.acad .oc-p{z-index:1}
.ico.occ.acad{margin-left:-14px}
.oc-o.c-out{left:13px;transform-origin:50% 100%;opacity:0;animation:cOut 4.4s ease-out infinite}
@keyframes cOut{0%,6%{opacity:0;transform:translate(0,0) scale(.35)}12%{opacity:1;transform:translate(0,0) scale(.4)}26%{opacity:1;transform:translate(-12px,-8px) scale(.7)}34%,78%{opacity:1;transform:translate(-22px,0) scale(.85)}88%{opacity:1;transform:translate(-12px,-8px) scale(.7)}95%{opacity:1;transform:translate(0,0) scale(.4)}98%,100%{opacity:0;transform:translate(0,0) scale(.35)}}