/* Learn Tamil — Kids layer: playful motion and kid fonts.
   Order matters: files load in number order (see tools/lib/assets.mjs). */
/* =================== Kids layer: playful motion =================== */
:root{--font-kid:'Baloo Thambi 2','Noto Sans Tamil',sans-serif}
.hero h1,.sec-head h2,.tile .l,.player .big,.equation,.quiz .q,.ptext,.book .bt,.chip,.rtitle,.theend .t,.stat b,.tab .ta{font-family:var(--font-kid)}

/* moving background blobs */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(18vmax 18vmax at 20% 30%,rgb(0 120 212 / .16),transparent 70%),
             radial-gradient(16vmax 16vmax at 80% 20%,rgb(255 183 77 / .16),transparent 70%),
             radial-gradient(20vmax 20vmax at 70% 80%,rgb(76 194 176 / .14),transparent 70%);
  animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) rotate(6deg)}}

/* hero: floating letters + mascot */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.floaters{position:absolute;inset:0;pointer-events:none;z-index:0}
.floaters span{position:absolute;font-family:var(--font-kid);font-weight:800;opacity:.13;color:var(--accent);animation:floaty var(--t,9s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes floaty{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-28px) rotate(8deg)}}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.mascot{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0}
.mascot .bird{font-size:clamp(70px,11vw,120px);line-height:1;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgb(0 60 120 / .25))}
.mascot:hover .bird{animation:hop .5s ease}
@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes hop{30%{transform:translateY(-22px) scale(1.08)}60%{transform:translateY(0) scale(.96)}}
.bubble{position:relative;font-family:var(--font-kid);font-weight:700;font-size:17px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);border-radius:18px;padding:8px 14px;max-width:230px;text-align:center;animation:pop .5s ease}
.bubble::after{content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;background:inherit;border-left:1px solid var(--glass-line);border-top:1px solid var(--glass-line);transform:translateX(-50%) rotate(45deg)}
@media (max-width:620px){.hero-grid{grid-template-columns:1fr}.mascot{flex-direction:row;justify-self:start}.bubble::after{left:-7px;top:50%;transform:translateY(-50%) rotate(-45deg)}}
.stat{transition:transform .2s}
.stat:hover{transform:translateY(-4px) rotate(-1.5deg)}

/* stars chip in header */
.stars{display:inline-flex;align-items:center;gap:6px;font-weight:800;border:1px solid var(--border);background:var(--glass);border-radius:999px;padding:6px 12px;font-size:15px}
.stars.bump{animation:bump .5s ease}
@keyframes bump{40%{transform:scale(1.35) rotate(-6deg)}}

/* tabs with icons */
.tab .ic{display:inline-block;margin-right:6px;transition:transform .25s}
.tab:hover .ic{transform:scale(1.25) rotate(-10deg)}
.tab[aria-selected="true"] .ic{animation:wiggle .6s ease}

/* chunky, colourful, bouncy tiles */
.tile{border-radius:20px;background:color-mix(in srgb,var(--fam) 9%,var(--glass));box-shadow:0 5px 0 color-mix(in srgb,var(--fam) 30%,transparent),var(--glass-shadow);transition:transform .15s,box-shadow .15s,background .15s}
.tile::after{display:none}
.tile:hover{transform:translateY(-3px) rotate(-2deg)}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--fam) 30%,transparent)}
.tile.playing{animation:boing .55s ease}
.tile .e{transition:transform .2s}
.tile:hover .e{transform:scale(1.3)}
@keyframes boing{0%{transform:scale(1)}30%{transform:scale(1.18,.86)}55%{transform:scale(.92,1.1)}80%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.panel.enter .tile,.panel.enter .book,.panel.enter .group,.opts .tile{animation:popIn .45s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both}
@keyframes popIn{from{opacity:0;transform:scale(.4) translateY(14px)}to{opacity:1;transform:none}}
table.um .tile{box-shadow:0 3px 0 color-mix(in srgb,var(--fam) 30%,transparent)}

/* now-playing letter floats gently */
.player .big:not(.pop){animation:floatBig 3s ease-in-out infinite}
@keyframes floatBig{50%{transform:translateY(-6px)}}
.play-btn{transition:transform .15s}
.play-btn:hover{transform:scale(1.1)}
.play-btn:active{transform:scale(.92)}
.player .ex:hover #exPic{display:inline-block;animation:wiggle .5s}

/* stories */
.book{transition:transform .2s}
.book:hover{transform:translateY(-5px) rotate(-1deg)}
.book:hover .cover{animation:hop .6s ease}
.pic{animation:bob 3s ease-in-out infinite}
.btn{transition:transform .15s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.97)}

/* practice: parrot speech bubble */
.feedback{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.feedback:not(:empty)::before{content:"🦜";font-size:28px;animation:hop .5s ease}
.tile.right{animation:boing .55s ease}
.opts .tile.wrong,.tile.wrong{animation:shake .35s}

/* sparkles & confetti */
.fx{position:fixed;z-index:100;pointer-events:none;font-size:20px;left:0;top:0;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}html{scroll-behavior:auto}.fx{display:none}}