/* Polish Bhasa — animation layer (body.anim). Respects prefers-reduced-motion. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* scroll progress */
.sprog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#C8102E,#fff 50%,#003893);z-index:120}

.anim .hdr{transition:box-shadow .3s,min-height .3s}
.anim .hdr.small{box-shadow:0 8px 24px -16px rgba(31,42,92,.45)}
.anim .hdr.small .hdr-in{min-height:58px}
.anim .hdr .brand img{transition:transform .5s var(--spring),width .3s,height .3s}
.anim .hdr.small .brand img{width:40px;height:40px}
.anim .brand:hover img{transform:rotate(-8deg) scale(1.08)}

/* ---------- hero entrance ---------- */
.anim .hero-copy>*{opacity:0;transform:translateY(22px);animation:up .8s var(--ease) forwards}
.anim .hero-copy>*:nth-child(1){animation-delay:.05s}.anim .hero-copy>*:nth-child(2){animation-delay:.15s}
.anim .hero-copy>*:nth-child(3){animation-delay:.3s}.anim .hero-copy>*:nth-child(4){animation-delay:.42s}
.anim .hero-copy>*:nth-child(5){animation-delay:.54s}.anim .hero-copy>*:nth-child(6){animation-delay:.66s}.anim .hero-copy>*:nth-child(7){animation-delay:.78s}
@keyframes up{to{opacity:1;transform:none}}
.anim .hero h1 .pl,.anim .hero h1 .ne{position:relative;display:inline-block}
@keyframes swoosh{to{transform:scaleX(1)}}
.anim .eyebrow{position:relative;overflow:hidden}
.anim .eyebrow:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.2s 1.6s infinite}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}

/* rotating greeting */
.rot{display:none}
.anim .rot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.05rem;color:var(--soft);margin:-.2em 0 1em}
.rot .box{position:relative;display:inline-block;height:1.9em;min-width:15em;overflow:hidden;vertical-align:middle;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:0 .8em}
.rot .w{position:absolute;left:.8em;right:.8em;top:0;line-height:1.9em;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .55s var(--spring),opacity .4s}
.rot .w.on{opacity:1;transform:none}.rot .w.out{opacity:0;transform:translateY(-100%)}
.rot .w b{font-family:var(--fd);color:var(--head)}.rot .w span{color:var(--crimson)}

/* hero logo float + glow */
.anim .hero-art{perspective:900px}
.anim .hero-logo{opacity:0;animation:logoIn 1s .2s var(--spring) forwards,float 6s 1.3s ease-in-out infinite;transition:transform .2s ease-out;will-change:transform}
@keyframes logoIn{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.anim .hero-art:before{content:"";position:absolute;top:8%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.22),transparent 65%);filter:blur(10px);animation:pulse 4s ease-in-out infinite;z-index:-1}
@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}

/* floating letters */
.floaters{display:none}
.anim .floaters{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero{position:relative}.hero-in{position:relative;z-index:1}
.floaters span{position:absolute;bottom:-60px;font-family:var(--fd);font-weight:800;color:rgba(31,42,92,.07);animation:rise linear infinite}
.floaters span.np{font-family:var(--fn);color:rgba(200,16,46,.08)}
@keyframes rise{from{transform:translateY(0) rotate(0)}to{transform:translateY(-120vh) rotate(40deg)}}

/* try card */
.anim .try{opacity:0;animation:up .8s 1s var(--ease) forwards}
.anim .try-row{opacity:0;transform:translateX(24px);animation:up .6s var(--ease) forwards}
.anim .try-row:nth-of-type(1){animation-delay:1.2s}.anim .try-row:nth-of-type(2){animation-delay:1.35s}.anim .try-row:nth-of-type(3){animation-delay:1.5s}

/* speak button: ripple + bars */
.anim .speak{position:relative;transition:transform .25s var(--spring),background .2s}
.anim .speak:hover{transform:scale(1.12)}
.anim .speak:active{transform:scale(.92)}
.anim .speak.playing:before,.anim .speak.playing:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--crimson);animation:ring 1.2s ease-out infinite}
.anim .speak.playing:after{animation-delay:.6s}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.eq{display:none}
.anim .playing~div .eq,.anim .vw .playing~.eq,.anim .letter .playing~.eq{display:inline-flex}
.eq{gap:2px;align-items:flex-end;height:14px;margin-left:6px;vertical-align:middle}
.eq i{width:3px;background:var(--crimson);border-radius:2px;animation:eq .8s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.anim .speak.hint{animation:nudge 2.4s 2.4s ease-in-out 2}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.0)}30%{box-shadow:0 0 0 8px rgba(200,16,46,.18)}}

/* ---------- scroll reveal ---------- */
.anim .rv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-l{transform:translateX(-40px)}.anim .rv-r{transform:translateX(40px)}

/* feature cards */
.anim .feat{transition:transform .35s var(--spring),box-shadow .35s}
.anim .feat:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(200,16,46,.45)}
.anim .feat.in .fi{animation:pop .7s var(--spring) both;animation-delay:calc(var(--d,0s) + .25s)}
.anim .feat:hover .fi{animation:wiggle .6s ease}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}

/* pillars: sequential highlight */
.anim .pillars{position:relative}
.anim .pillars div{transition:transform .4s var(--spring),border-color .3s,background .3s,color .3s}
.anim .pillars div.lit{transform:translateY(-6px);border-color:#F2C4CC;background:#fff;box-shadow:var(--shadow)}
.anim .pillars div.lit .ic{animation:wiggle .6s ease}

/* chapters */
.anim .chap{transition:transform .3s ease-out,box-shadow .3s;transform-style:preserve-3d;will-change:transform}
.anim .chap:hover{box-shadow:0 26px 50px -24px rgba(31,42,92,.45)}
.anim .chap li a{transition:padding .25s var(--ease),color .2s}
.anim .chap li a:hover{padding-left:6px}
.anim .chap li a:hover .ln{background:var(--crimson);color:#fff;transform:rotate(-8deg) scale(1.1)}
.anim .chap .ln{transition:all .3s var(--spring)}
.anim .chap li a:hover .ic.mini{animation:shake .5s ease}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.anim .free{position:relative;overflow:hidden}
.anim .free:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.6s infinite}

/* steps: drawn progress line */
.anim .steps{position:relative}
.anim .steps:before{content:"";position:absolute;top:40px;left:8%;right:8%;height:3px;border-radius:3px;background:linear-gradient(90deg,#C8102E,#3A2E6E);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease);z-index:0}
.anim .steps.in:before{transform:scaleX(1)}
.anim .steps li{position:relative;z-index:1}
.anim .steps.in li b{animation:pop .6s var(--spring) both}
.anim .steps.in li:nth-child(2) b{animation-delay:.45s}.anim .steps.in li:nth-child(3) b{animation-delay:.9s}
@media (max-width:820px){.anim .steps:before{display:none}}

/* faq */
.anim .faq-i{transition:transform .25s var(--ease),box-shadow .25s}
.anim .faq-i:hover{transform:translateX(4px)}
.anim .faq-i summary:after{transition:transform .3s var(--spring);display:inline-block}
.anim .faq-i[open] summary:after{transform:rotate(180deg)}
.anim .faq-i[open] p{animation:up .45s var(--ease) both}
.anim .faq-i p{opacity:1}

/* final CTA */
.anim .final img{animation:float 5s ease-in-out infinite}
.anim .btn-red{position:relative;overflow:hidden}
.anim .btn-red:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sweep 3.5s 2s infinite}
@keyframes sweep{0%{left:-60%}35%,100%{left:130%}}
.anim .btn-lg.btn-red:hover svg{animation:arrow .6s ease infinite alternate}
@keyframes arrow{to{transform:translateX(5px)}}

/* ---------- lesson demo ---------- */
.demo-h{text-align:center;margin:70px 0 22px}
.demo-h .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:99px;padding:.3em .9em;margin-bottom:.8em}
.demo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}}

/* XP + streak bar */
.xpbar{display:flex;align-items:center;gap:14px;padding:12px 18px;margin-bottom:16px;flex-wrap:wrap}
.xpbar .lv{font-weight:700;color:var(--head);white-space:nowrap}
.xp{flex:1;min-width:140px;height:12px;border-radius:99px;background:#F1EEF6;overflow:hidden}
.xp i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#C8102E,#E04460,#3A2E6E);transition:width .8s var(--spring)}
.xpfly{position:fixed;z-index:150;font-weight:800;color:var(--ok);pointer-events:none;animation:fly 1s var(--ease) forwards}
@keyframes fly{to{transform:translateY(-60px);opacity:0}}

/* flip cards */
.flips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:560px){.flips{grid-template-columns:repeat(2,1fr)}}
.flip{perspective:800px;height:150px;cursor:pointer;border:0;background:none;padding:0;font:inherit;-webkit-tap-highlight-color:transparent}
.flip:focus-visible{outline:3px solid rgba(46,58,122,.45);outline-offset:3px;border-radius:var(--r)}
.flip .speak{display:none}
.flip .in{position:relative;width:100%;height:100%;transition:transform .7s var(--spring);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px}
.flip .f{background:#fff}
.flip .f .L{font-family:var(--fd);font-size:3rem;font-weight:800;color:var(--head);line-height:1}
.flip .f small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.flip .b{transform:rotateY(180deg);background:linear-gradient(160deg,#FFF5F6,#EEF0FA)}
.flip .b .dv{font-size:1.15rem;margin:0;text-align:center;line-height:1.4}.flip .b .ph{font-size:.9rem}.flip .b .w{font-size:.82rem;color:var(--soft);text-align:center}
.anim .flip:hover .in{transform:rotateY(12deg)}.anim .flip.on:hover .in{transform:rotateY(168deg)}
.flip:not(.on) .f:after{content:"↻";position:absolute;top:8px;right:10px;color:var(--line2);font-size:.9rem}

/* chat */
.chat{padding:0;overflow:hidden}
.chat .dlg-h{display:flex;justify-content:space-between;align-items:center}
.chat .dlines{min-height:300px}
.anim .chat .dl{animation:bubIn .5s var(--spring) both}
.anim .chat .dl.r{animation-name:bubInR}
@keyframes bubIn{from{opacity:0;transform:translate(-20px,10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bubInR{from{opacity:0;transform:translate(20px,10px) scale(.9)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:#EEF0FA;border:1px solid #D6DBF2;width:max-content}
.typing.r{align-self:flex-end;border-radius:18px 18px 6px 18px;background:#FFF1F3;border-color:#F6CDD4}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.bub .who{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* quiz */
.quiz{padding:20px;margin-top:20px;text-align:center;overflow:hidden;position:relative}
.quiz .q{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin:0}
.quiz .qw{font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--head);margin:.2em 0 .1em}
.quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.quiz .opt{font:600 1rem var(--fn);padding:.9em .6em;border-radius:12px;border:1.5px solid var(--line2);background:#fff;color:var(--head);cursor:pointer;transition:transform .2s var(--spring),border-color .2s,background .2s}
.quiz .opt:hover{transform:translateY(-2px);border-color:#C9C1D0}
.quiz .opt.ok{background:#EEFAF2;border-color:var(--ok);color:#14532D}
.anim .quiz .opt.ok{animation:boing .6s var(--spring)}
.quiz .opt.no{background:#FFF0F3;border-color:var(--bad);color:#881337}
.anim .quiz .opt.no{animation:shakeX .45s}
@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shakeX{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.quiz .fb{min-height:1.6em;margin:12px 0 0;font-weight:700}
.anim .quiz .fb.yay{animation:boing .6s var(--spring)}
.mascot{font-size:2.4rem;display:inline-block}
.anim .mascot{animation:bob 2.2s ease-in-out infinite}
.anim .mascot.happy{animation:jump .7s var(--spring) 2}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes jump{0%,100%{transform:none}40%{transform:translateY(-22px) rotate(10deg) scale(1.15)}}

/* confetti */
.cf{position:fixed;top:0;left:0;width:9px;height:14px;z-index:300;pointer-events:none;border-radius:2px;will-change:transform}

/* counters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px auto 10px}
.stats div{text-align:center;padding:16px 8px}
.stats b{display:block;font-family:var(--fd);font-size:2.2rem;color:var(--crimson);line-height:1.1}
.stats span{font-size:.85rem;color:var(--muted)}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:reduce){.anim *,.anim *:before,.anim *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.anim .floaters{display:none}}

/* lesson complete button */
.anim [data-done]{position:relative;overflow:hidden}
.demo{margin-top:10px}

/* lesson rows */
.anim .rv-s{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--spring);transition-delay:var(--d,0s)}
.anim .letter.rv-s{transform:scale(.85)}
.anim .rv-s.in{opacity:1;transform:none}
.anim .letter{transition:background .2s}
.anim .letter:hover{background:#FFF8F9}
.anim .letter:hover .L{animation:wiggle .6s ease}