/* Motion thumbnails: see thumb-motion.js.
   One loop is 8s everywhere (--T). Resting styles are the still frame from the Figma artboard, so with motion
   off (or before a scene scrolls into view) it looks like the still thumbnail. */

.scene { --T: 8s; position: relative; width: 100%; height: 100%; container-type: size; display: grid; place-items: center; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; pointer-events: none; }
.stage { position: relative; width: min(100cqw, calc(100cqh * var(--ar, 1.08))); container-type: inline-size; }
.scene-lingoda-app .stage { --ar: 1.0787; }
.scene-monetisation .stage { --ar: 1.4652; width: min(80cqw, calc(80cqh * var(--ar))); }
.scene-seda { align-items: end; }
html .card.is-bare .card-media:has(> .scene-seda) { padding-bottom: 0; }
[data-display="bento"] .card-media > .scene-seda { padding-bottom: 0; }
.scene-lingobites .stage.bx { width: min(78cqw, calc(78cqh * var(--ar))); }
.scene-seda .stage { --ar: 1.46; }
.scene-seda .stage.sc { --ar: 1.17; }
.pos { position: absolute; }
.crop { display: block; width: 100%; background-repeat: no-repeat; }
.scene i, .scene b { font-style: normal; }
.scene svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card-media > .scene { grid-area: 1 / 1; }
[data-display="bento"] .card-media > .scene { position: absolute; inset: 0; padding: 3%; box-sizing: border-box; }

/* nothing runs until the scene is on screen; motion off freezes everything on the resting frame */
.scene:not([data-play]) *, .scene:not([data-play]) *::before, .scene:not([data-play]) *::after { animation-play-state: paused !important; }
html[data-motion="off"] .scene *, html[data-motion="off"] .scene *::before, html[data-motion="off"] .scene *::after { animation: none !important; }

/* entrance: everything rises into place once, then settles into a slow float */
.rise { animation: rise 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }
@keyframes rise { from { opacity: 0; translate: 0 6cqh; scale: .94; } }
.ph { position: relative; container-type: inline-size; --p: calc(100cqw / var(--w)); filter: drop-shadow(0 calc(30 * var(--p)) calc(40 * var(--p)) rgba(40, 30, 80, .16)) drop-shadow(0 calc(4 * var(--p)) calc(10 * var(--p)) rgba(40, 30, 80, .1)); animation: bob 6s ease-in-out infinite; }
.ph-l .ph { animation-delay: -1s; } .ph-r .ph { animation-delay: -3s; } .ph-c .ph { animation-delay: -2s; }
@keyframes bob { 50% { translate: 0 -1.4cqw; } }

/* a pass of light across a phone */
.glint { position: absolute; inset: 0; overflow: hidden; border-radius: calc(70 * var(--p)); pointer-events: none; }
.glint::before { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-12deg); animation: glint var(--T) ease-in-out infinite; }
.ph-l .glint::before { animation-delay: .1s; } .ph-c .glint::before { animation-delay: .3s; } .ph-r .glint::before { animation-delay: .5s; }
@keyframes glint { 0%, 62% { left: -60%; } 80%, 100% { left: 130%; } }

/* ============ Lingoda app ============ */
.mid { position: relative; }
.mid > div, .ph > .hl { position: absolute; }
.hl { left: 0; top: calc(601 * var(--p)); border-radius: calc(26 * var(--p)); background: rgba(112, 98, 235, .1); animation: rows var(--T) cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rows { 0%, 6% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 18%, 28% { translate: 0 0; } 36%, 46% { translate: 0 calc(256 * var(--p)); } 54%, 64% { translate: 0 calc(511 * var(--p)); } 72%, 82% { translate: 0 calc(762 * var(--p)); opacity: 1; } 90%, 100% { translate: 0 calc(762 * var(--p)); opacity: 0; } }
.known { position: absolute; border-radius: calc(46 * var(--p)); box-shadow: 0 0 0 calc(4 * var(--p)) rgba(34, 170, 90, .55); opacity: 0; animation: known var(--T) ease-out infinite; }
@keyframes known { 0%, 38% { opacity: 0; scale: 1; } 40% { opacity: 1; scale: 1; } 56% { opacity: 0; scale: 1.07; } 100% { opacity: 0; } }

/* weekly goal 6/8 -> 7/8 -> 8/8: our own track + fill replace the one baked into the artwork, so the edges line up exactly */
.barbg { background: #fff; border-radius: calc(14 * var(--p)); }
.trk { background: #eceef2; border-radius: 999px; }
.bar2 { background: #2bbe55; border-radius: 999px; width: calc(463 * var(--p)); animation: goal var(--T) infinite; }
@keyframes goal { 0%, 15% { width: calc(463 * var(--p)); } 21%, 39% { width: calc(541 * var(--p)); } 45%, 92% { width: calc(618 * var(--p)); } 97%, 100% { width: calc(463 * var(--p)); } }
.num { overflow: hidden; background: #fff; text-align: right; font: 600 calc(40 * var(--p)) / calc(48 * var(--p)) 'Nunito Sans', system-ui, sans-serif; color: #10204b; }
.num b { display: block; height: calc(48 * var(--p)); font-weight: 600; animation: numroll var(--T) cubic-bezier(.7, 0, .2, 1) infinite; }
.num { position: absolute; }
@keyframes numroll { 0%, 15% { translate: 0 0; } 21%, 39% { translate: 0 calc(-48 * var(--p)); } 45%, 92% { translate: 0 calc(-96 * var(--p)); } 97%, 100% { translate: 0 0; } }

/* the two practice checkboxes: each grey, unchecked circle turns green and gets its tick, one after the other.
   The element sits exactly over the circle in the artwork, drawn the same way, so nothing appears "on top". */
.chk { position: absolute; box-sizing: border-box; border-radius: 50%; background: #fff; border: calc(3 * var(--p)) solid #cdd1d9; color: #c8ccd4; display: grid; place-items: center; }
.chk svg { width: 62%; stroke-width: 2.4; overflow: visible; }
.chk .tk0 { stroke: currentColor; }
.chk .tk1 { stroke: #fff; stroke-dasharray: 24; stroke-dashoffset: 24; }
.c1 .tk1 { animation: tick1 var(--T) infinite; } .c2 .tk1 { animation: tick2 var(--T) infinite; }
@keyframes tick1 { 0%, 18% { stroke-dashoffset: 24; animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 27%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 24; } }
@keyframes tick2 { 0%, 42% { stroke-dashoffset: 24; animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 51%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 24; } }
.c1 { animation: chk1 var(--T) infinite; } .c2 { animation: chk2 var(--T) infinite; }
@keyframes chk1 {
  0%, 14% { background: #fff; border-color: #cdd1d9; color: #c8ccd4; scale: 1; }
  19% { scale: 1.18; }
  25%, 92% { background: #28c15e; border-color: #28c15e; color: #28c15e; scale: 1; }
  97%, 100% { background: #fff; border-color: #cdd1d9; color: #c8ccd4; scale: 1; }
}
@keyframes chk2 {
  0%, 38% { background: #fff; border-color: #cdd1d9; color: #c8ccd4; scale: 1; }
  43% { scale: 1.18; }
  49%, 92% { background: #28c15e; border-color: #28c15e; color: #28c15e; scale: 1; }
  97%, 100% { background: #fff; border-color: #cdd1d9; color: #c8ccd4; scale: 1; }
}

/* sparks burst from the face when the bar reaches 8/8 */
.gsparks { position: absolute; }
.gspark { position: absolute; left: 0; top: 0; width: calc(var(--s) * var(--p)); height: calc(var(--s) * var(--p)); margin: calc(var(--s) * var(--p) / -2) 0 0 calc(var(--s) * var(--p) / -2); background: #ffc62e; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: gburst var(--T) cubic-bezier(.2, .7, .3, 1) var(--j) infinite; }
@keyframes gburst {
  0%, 47% { opacity: 0; transform: rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)) scale(.2); }
  50% { opacity: 1; }
  60% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--r) * var(--p))) rotate(calc(var(--a) * -1 + 90deg)) scale(1); }
  68%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--r) * 1.25 * var(--p))) rotate(calc(var(--a) * -1 + 140deg)) scale(.3); }
}

.btnfx { position: absolute; border-radius: 999px; overflow: hidden; animation: press var(--T) infinite; }
.rip { position: absolute; left: 50%; top: 50%; width: 35%; aspect-ratio: 1; margin: -17.5% 0 0 -17.5%; border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: 0; scale: 0; animation: ripple var(--T) ease-out infinite; }
.btnfx .rip { width: 20%; margin: -10% 0 0 -10%; }
@keyframes ripple { 0%, 60% { opacity: 0; scale: 0; } 61% { opacity: .75; scale: 0; } 74% { opacity: 0; scale: 9; } 100% { opacity: 0; } }
@keyframes press { 0%, 58% { background: transparent; box-shadow: 0 0 0 0 rgba(120, 90, 235, 0); } 61% { background: rgba(0, 0, 40, .12); box-shadow: 0 0 0 0 rgba(120, 90, 235, .5); } 72% { background: transparent; box-shadow: 0 0 0 calc(34 * var(--p)) rgba(120, 90, 235, 0); } 100% { background: transparent; } }

/* ============ Cards (monetisation + Seda) ============ */
.tcard { transform: rotate(var(--r, 0deg)); transform-origin: 50% 50%; background: #fbfcfe; border-radius: calc(70 * var(--p)); box-shadow: 0 calc(10 * var(--p)) calc(30 * var(--p)) rgba(40, 50, 90, .13), 0 calc(40 * var(--p)) calc(70 * var(--p)) rgba(40, 50, 90, .12); border: calc(2 * var(--p)) solid rgba(120, 140, 200, .22); }
.tcard .hop { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.tcard p { position: absolute; left: 0; right: 0; margin: 0; text-align: center; }
.cta { position: absolute; border-radius: 999px; overflow: hidden; display: grid; place-items: center; color: #fff; font: 600 calc(54 * var(--p)) 'Outfit', 'Nunito Sans', system-ui, sans-serif; }
.cta .rip { width: 14%; margin: -7% 0 0 -7%; }
.cta.dark { background: #1c2331; } .cta.blue { background: linear-gradient(95deg, #1649e8, #2f86ff); }

/* paywall */
.pay { font-family: 'Source Sans 3', 'Nunito Sans', system-ui, sans-serif; }
.pay { border: 0; background: transparent; }
.pay .hop { animation: hop var(--T) infinite; }
@keyframes hop { 0%, 60% { translate: 0 0; } 63% { translate: 0 calc(-12 * var(--p)); } 68%, 100% { translate: 0 0; } }
.pay-bg { position: absolute; left: 0; right: 0; top: 0; height: 84.7%; background: none; }
.pay .hop { background: #fff; }
.pay-illo { position: absolute; display: block; height: auto; }
.pay-h { color: #0c0c0c; font: 700 calc(64 * var(--p)) 'Outfit', system-ui, sans-serif; }
.pay-s { left: calc(90 * var(--p)) !important; right: calc(90 * var(--p)) !important; color: #1c2331; font: 400 calc(42 * var(--p)) / 1.4 'Source Sans 3', system-ui, sans-serif; }
.pay .cta.blue { font-size: calc(48 * var(--p)); background: linear-gradient(to top right, #031de5, #348dfe); animation: glow var(--T) infinite; }
.pay-alt { position: absolute; border-radius: 999px; box-sizing: border-box; border: calc(3 * var(--p)) solid #d0d5dd; background: #fff; display: grid; place-items: center; color: #344054; font: 600 calc(44 * var(--p)) 'Source Sans 3', system-ui, sans-serif; }

/* out of charges */
.chg { animation-name: rise; }
.chg .hop { animation: none; }
.batt { position: absolute; animation: battshake var(--T) infinite; filter: drop-shadow(0 calc(16 * var(--p)) calc(16 * var(--p)) rgba(0, 0, 0, .22)); }
.batt .cap { position: absolute; left: 33%; width: 34%; top: 0; height: 12%; border-radius: calc(16 * var(--p)) calc(16 * var(--p)) 0 0; background: linear-gradient(#bdbdbd, #9a9a9a); }
.batt .body { position: absolute; left: 0; right: 0; top: 9%; bottom: 0; border-radius: calc(40 * var(--p)); background: linear-gradient(135deg, #c5c5c5, #8c8c8c); padding: 9% 11%; box-sizing: border-box; box-shadow: inset 0 calc(5 * var(--p)) calc(8 * var(--p)) rgba(255, 255, 255, .4), inset 0 calc(-6 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, .18); }
.batt .screen { position: relative; width: 100%; height: 100%; border-radius: calc(22 * var(--p)); background: linear-gradient(#a7a7a7, #bcbcbc); box-shadow: inset 0 calc(6 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, .22); overflow: hidden; }
.batt .fill { position: absolute; left: 7%; right: 7%; bottom: 7%; height: 17%; border-radius: calc(16 * var(--p)); background: linear-gradient(#f04646, #cf1c1c); box-shadow: 0 calc(3 * var(--p)) calc(6 * var(--p)) rgba(0, 0, 0, .25); animation: drain var(--T) cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes drain {
  0%, 4% { height: 82%; background: linear-gradient(#4ade80, #16a34a); }
  36%, 90% { height: 17%; background: linear-gradient(#f04646, #cf1c1c); }
  97%, 100% { height: 82%; background: linear-gradient(#4ade80, #16a34a); }
}
@keyframes battshake { 0%, 36% { rotate: 0deg; } 38% { rotate: -5deg; } 40% { rotate: 4deg; } 42% { rotate: -3deg; } 44%, 100% { rotate: 0deg; } }
.chg-h { font: 700 calc(76 * var(--p)) / 1.1 'Outfit', system-ui, sans-serif; color: #0c0c0c; white-space: nowrap; }
.chg-s { font: 400 calc(54 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #1c2331; }
.chg-s b { font-weight: 700; }
.roll { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.roll > span { display: block; translate: 0 -1.1em; animation: count var(--T) cubic-bezier(.7, 0, .2, 1) infinite; }
.roll b { display: block; height: 1.1em; font-weight: 700; }
@keyframes count { 0%, 12% { translate: 0 0; } 38%, 90% { translate: 0 -1.1em; } 97%, 100% { translate: 0 0; } }
.chg .cta.blue { background: linear-gradient(to top right, #031de5, #348dfe); animation: none; }
.shine { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: shine var(--T) ease-in-out infinite; }
@keyframes shine { 0%, 46% { left: -40%; } 62%, 100% { left: 130%; } }
@keyframes glow { 0%, 44% { scale: 1; } 52% { scale: 1.025; } 60%, 100% { scale: 1; } }

/* Seda */
.sd { font-family: 'Nunito Sans', system-ui, sans-serif; background: #fbf8f0; border-color: rgba(190, 170, 120, .25); }
.sd .hop { animation: none; }
.sd-a .hop { animation-delay: -2s; } .sd-b .hop { animation-delay: -4s; } 
@keyframes bobcard { 50% { translate: 0 calc(-10 * var(--p)); } }
.sd-t { font: 400 calc(31 * var(--p)) 'Nunito Sans', system-ui, sans-serif; letter-spacing: .04em; color: #6c6a64; }
.sd-word { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: calc(36 * var(--p)); }
.sd-word span { font: 600 calc(78 * var(--p)) / 1.1 'Noto Sans Tamil', system-ui, sans-serif; color: #1d1b17; }
.spk { width: calc(84 * var(--p)); height: calc(84 * var(--p)); border-radius: 50%; background: #f3d9b8; border: calc(3 * var(--p)) solid #3a2e22; display: grid; place-items: center; color: #3a2e22; }
.spk svg { width: 55%; }
.tiles { position: absolute; left: calc(60 * var(--p)); right: calc(60 * var(--p)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--p)); }
.tile { position: relative; display: block; aspect-ratio: 1; background: #fff; border-radius: calc(20 * var(--p)); padding: calc(14 * var(--p)); box-sizing: border-box; border: calc(4 * var(--p)) solid transparent; box-shadow: 0 0 0 calc(2 * var(--p)) #eee9dd; overflow: hidden; }
.tile .crop { border-radius: calc(10 * var(--p)); }
.tile.low { background: #dcdfe4; padding: 0; display: flex; align-items: flex-end; } .tile.low .crop { border-radius: 0; }
.tile.pick { animation: pick var(--T) infinite; }
.ok { position: absolute; right: calc(14 * var(--p)); top: calc(14 * var(--p)); width: calc(62 * var(--p)); height: calc(62 * var(--p)); border-radius: 50%; background: #2fb463; color: #fff; display: grid; place-items: center; opacity: 0; scale: .3; animation: okpop var(--T) infinite; }
.ok svg { width: 62%; stroke-width: 2.8; }
@keyframes pick { 0%, 53% { box-shadow: 0 0 0 calc(2 * var(--p)) #eee9dd; border-color: transparent; scale: 1; } 56% { scale: .95; } 60% { box-shadow: 0 0 0 calc(2 * var(--p)) #2fb463; border-color: #2fb463; scale: 1.04; } 66%, 91% { box-shadow: 0 0 0 calc(2 * var(--p)) #2fb463; border-color: #2fb463; scale: 1; } 96%, 100% { box-shadow: 0 0 0 calc(2 * var(--p)) #eee9dd; border-color: transparent; scale: 1; } }
@keyframes okpop { 0%, 58% { opacity: 0; scale: .3; } 63% { opacity: 1; scale: 1.25; } 67%, 91% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: .3; } }
.frame { position: absolute; background: #fff; border-radius: calc(22 * var(--p)); padding: calc(24 * var(--p)); box-sizing: border-box; box-shadow: 0 0 0 calc(2 * var(--p)) #eee9dd; }
.frame { display: grid; place-items: center; overflow: hidden; }
.frame .crop { width: auto; height: 100%; border-radius: calc(6 * var(--p)); animation: breathe2 6s ease-in-out infinite; }
@keyframes breathe2 { 50% { scale: 1.035; } }
.urdu { height: calc(170 * var(--p)); display: grid; place-items: center; font: 400 calc(84 * var(--p)) / 2.1 'Noto Nastaliq Urdu', 'Geeza Pro', serif; color: #1d1b17; direction: rtl; overflow: visible; }
.acts { position: absolute; left: calc(14 * var(--p)); right: calc(14 * var(--p)); display: flex; justify-content: space-around; font: 400 calc(30 * var(--p)) 'Nunito Sans', system-ui, sans-serif; color: #6c6a64; }
.acts span { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--p)); animation: nudge var(--T) infinite; }
.acts span:nth-child(2) { animation-delay: .35s; } .acts span:nth-child(3) { animation-delay: .7s; } .acts span:nth-child(4) { animation-delay: 1.05s; }
.acts i { width: calc(74 * var(--p)); height: calc(74 * var(--p)); border-radius: 50%; background: #f3d9b8; border: calc(3 * var(--p)) solid #3a2e22; display: grid; place-items: center; color: #3a2e22; font: 600 calc(40 * var(--p)) Georgia, serif; position: relative; }
.acts i svg { width: 56%; }
@keyframes nudge { 0%, 12% { translate: 0 0; } 15% { translate: 0 calc(-12 * var(--p)); } 19%, 100% { translate: 0 0; } }
.aud i::after, .spk::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: calc(3 * var(--p)) solid #3a2e22; opacity: 0; animation: wave 4s ease-out infinite; }
.aud i::after { animation-delay: 1.4s; }
@keyframes wave { 0% { opacity: .55; scale: 1; } 60%, 100% { opacity: 0; scale: 1.9; } }
.spk { position: relative; }
.boxes { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: calc(22 * var(--p)); }
.b { width: calc(100 * var(--p)); height: calc(100 * var(--p)); border-radius: calc(14 * var(--p)); border: calc(3 * var(--p)) dashed #cdbff0; background: #f3eefc; display: grid; place-items: center; color: transparent; font: 500 calc(66 * var(--p)) Georgia, 'Times New Roman', serif; box-sizing: border-box; }
.b.on { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; animation: win var(--T) infinite; }
.l1 { animation: letter1 var(--T) infinite; } .l2 { animation: letter2 var(--T) infinite; } .l3 { animation: letter3 var(--T) infinite; }
@keyframes letter1 { 0%, 11% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; scale: 1; } 15% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1.18; } 19%, 39% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1; } 42%, 91% { background: #2fb463; border: calc(3 * var(--p)) solid #2fb463; color: #fff; scale: 1; } 97%, 100% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; } }
@keyframes letter2 { 0%, 21% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; scale: 1; } 25% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1.18; } 29%, 39% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1; } 42%, 91% { background: #2fb463; border: calc(3 * var(--p)) solid #2fb463; color: #fff; scale: 1; } 97%, 100% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; } }
@keyframes letter3 { 0%, 31% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; scale: 1; } 35% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1.18; } 39%, 39% { background: #9b6fd8; border: calc(3 * var(--p)) solid #9b6fd8; color: #fff; scale: 1; } 42%, 91% { background: #2fb463; border: calc(3 * var(--p)) solid #2fb463; color: #fff; scale: 1; } 97%, 100% { background: #f3eefc; border: calc(3 * var(--p)) dashed #cdbff0; color: transparent; } }
@keyframes win { 0%, 39% { background: #9b6fd8; border-color: #9b6fd8; } 42%, 91% { background: #2fb463; border-color: #2fb463; } 97%, 100% { background: #9b6fd8; border-color: #9b6fd8; } }
.sd-c .b.l1, .sd-c .b.l2, .sd-c .b.l3 { animation-name: letter1; }
.sd-c .b.l2 { animation-name: letter2; } .sd-c .b.l3 { animation-name: letter3; }
@keyframes hopc { 0%, 40% { translate: 0 0; } 43% { translate: 0 calc(-16 * var(--p)); } 48%, 100% { translate: 0 0; } }
.illo .crop { animation: none; }
.sd .frame .crop { animation: none; }
.sd .acts span { animation: none; }


/* ============ Variants ============ */
.sp, .bubble { position: absolute; }
.scene canvas { display: block; }

/* Lingoda B: Frank reel */
.lb .pos canvas.frank { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; scale: .86; transition: opacity .45s, scale .6s cubic-bezier(.3, 1.4, .5, 1); }
.lb .pos canvas.f0 { opacity: 1; scale: 1; }
.scene[data-k] .lb canvas.frank { opacity: 0; scale: .86; }
.scene[data-k="0"] .lb canvas.f0, .scene[data-k="1"] .lb canvas.f1, .scene[data-k="2"] .lb canvas.f2, .scene[data-k="3"] .lb canvas.f3 { opacity: 1; scale: 1; }
.lb-hero, .lb-card { background: #fff; border-radius: calc(64 * var(--p)); box-shadow: 0 calc(10 * var(--p)) calc(30 * var(--p)) rgba(40, 60, 20, .14), 0 calc(40 * var(--p)) calc(70 * var(--p)) rgba(40, 60, 20, .14); overflow: hidden; }
.lb-label { position: absolute; left: 0; right: 0; top: calc(34 * var(--p)); margin: 0; height: 1.25em; font: 700 calc(66 * var(--p)) / 1.25 'Outfit', system-ui, sans-serif; color: #10204b; text-align: center; overflow: hidden; }
.lb-label > span { display: block; transition: translate .5s cubic-bezier(.6, 0, .2, 1); }
.lb-label b { display: block; height: 1.25em; font-weight: 700; }
.scene[data-k="1"] .lb-label > span { translate: 0 -1.25em; } .scene[data-k="2"] .lb-label > span { translate: 0 -2.5em; } .scene[data-k="3"] .lb-label > span { translate: 0 -3.75em; }
.lb-card canvas.score { position: absolute; left: 4%; right: 4%; top: calc(122 * var(--p)); bottom: calc(52 * var(--p)); width: 92%; height: auto; }
.lb-dots { position: absolute; left: 0; right: 0; bottom: calc(20 * var(--p)); display: flex; justify-content: center; gap: calc(14 * var(--p)); }
.lb-dots u { width: calc(14 * var(--p)); height: calc(14 * var(--p)); border-radius: 50%; background: #d9d6ea; transition: background .3s, scale .3s; text-decoration: none; }
.scene[data-k="0"] .d0, .scene[data-k="1"] .d1, .scene[data-k="2"] .d2, .scene[data-k="3"] .d3 { background: #6a58e0; scale: 1.5; }
.scene:not([data-k]) .d0 { background: #6a58e0; scale: 1.5; }

/* Lingoda C: Frank + sparkles over the live UI */
.sp { inset: 0; pointer-events: none; }
.spk4 { position: absolute; fill: #ffb42e; opacity: 0; scale: 0; filter: drop-shadow(0 0 calc(6 * var(--p)) rgba(255, 190, 60, .7)); }
.sp1 .spk4 { animation: spark var(--T) infinite; animation-delay: var(--sd); }
.sp2 .spk4 { animation: spark2 var(--T) infinite; animation-delay: var(--sd); }
@keyframes spark { 0%, 17% { opacity: 0; scale: 0; rotate: 0deg; } 21% { opacity: 1; scale: 1.2; rotate: 25deg; } 30%, 100% { opacity: 0; scale: .2; rotate: 90deg; } }
@keyframes spark2 { 0%, 41% { opacity: 0; scale: 0; rotate: 0deg; } 45% { opacity: 1; scale: 1.2; rotate: 25deg; } 54%, 100% { opacity: 0; scale: .2; rotate: 90deg; } }
.bubble { background: #fff; border-radius: calc(80 * var(--p)); box-shadow: 0 calc(20 * var(--p)) calc(50 * var(--p)) rgba(40, 30, 90, .28); overflow: hidden; clip-path: circle(0% at 12% 100%); opacity: 0; animation: bub var(--T) infinite; }
.bubble canvas { width: 100%; height: 100%; }
@keyframes bub { 0%, 41% { clip-path: circle(0% at 12% 100%); opacity: 0; translate: 0 4%; } 42% { opacity: 1; } 50%, 88% { clip-path: circle(150% at 12% 100%); opacity: 1; translate: 0 0; } 95%, 100% { clip-path: circle(0% at 12% 100%); opacity: 0; translate: 0 4%; } }

/* phone shells shared by the Fluid variants */
.fb-phone, .fc-phone { position: absolute; inset: 0; border-radius: calc(50 * var(--p)); overflow: hidden; background: #fff; border: calc(7 * var(--p)) solid #1b2230; box-sizing: border-box; box-shadow: 0 calc(30 * var(--p)) calc(60 * var(--p)) rgba(30, 40, 110, .3); }
.fb-s, .fc-s { position: absolute; left: 0; right: 0; }
.fb-s .crop, .fc-s .crop { width: 100%; height: 100%; }
.fb-s.s1, .fb-s.s3, .fc-s { bottom: 0; }

/* Fluid B: out of sessions -> paywall (T = 10s) */
.fb-dim { position: absolute; inset: 0; background: #000; opacity: 0; animation: fbdim 10s infinite; }
.fb-s.s2 { bottom: 0; translate: 0 101%; animation: fbs2 10s infinite; }
.fb-s.s3 { top: 0; translate: 0 101%; animation: fbs3 10s infinite; box-shadow: 0 0 calc(40 * var(--p)) rgba(0, 0, 0, .3); }
@keyframes fbdim { 0%, 17% { opacity: 0; } 24%, 90% { opacity: .42; } 97%, 100% { opacity: 0; } }
@keyframes fbs2 { 0%, 17% { translate: 0 101%; } 26%, 91% { translate: 0 0; } 98%, 100% { translate: 0 101%; } }
@keyframes fbs3 { 0%, 40% { translate: 0 101%; } 50%, 79% { translate: 0 0; } 88%, 100% { translate: 0 101%; } }
.fb-rip { position: absolute; width: calc(60 * var(--p)); height: calc(60 * var(--p)); margin: calc(-30 * var(--p)) 0 0 calc(-30 * var(--p)); border-radius: 50%; background: rgba(255, 255, 255, .75); opacity: 0; scale: 0; }
.fb-rip.r1 { animation: fbr1 10s ease-out infinite; } .fb-rip.r2 { animation: fbr2 10s ease-out infinite; }
@keyframes fbr1 { 0%, 31% { opacity: 0; scale: 0; } 32% { opacity: .8; scale: 0; } 40% { opacity: 0; scale: 7; } 100% { opacity: 0; } }
@keyframes fbr2 { 0%, 71% { opacity: 0; scale: 0; } 72% { opacity: .8; scale: 0; } 80% { opacity: 0; scale: 8; } 100% { opacity: 0; } }
.fb-pick { position: absolute; border-radius: calc(16 * var(--p)); opacity: 0; animation: fbpick 10s ease-out infinite; }
@keyframes fbpick { 0%, 56% { opacity: 0; box-shadow: 0 0 0 0 rgba(22, 73, 232, .5); } 57% { opacity: 1; } 66%, 100% { opacity: 0; box-shadow: 0 0 0 calc(24 * var(--p)) rgba(22, 73, 232, 0); } }

/* Fluid C: two treatments (T = 9s) */
.fc-wrap { rotate: var(--r); }
.fc-s { top: 0; opacity: 0; }
.fc-s.l1 { opacity: 1; animation: fc1 9s infinite; } .fc-s.l2 { animation: fc2 9s infinite; } .fc-s.l3 { animation: fc3 9s infinite; }
.fc-b .fc-s, .pb u i { animation-delay: .6s !important; }
@keyframes fc1 { 0%, 29% { opacity: 1; } 34%, 94% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes fc2 { 0%, 29% { opacity: 0; } 34%, 60% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes fc3 { 0%, 60% { opacity: 0; } 65%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
.fc-pill { background: #fff; border-radius: 999px; box-shadow: 0 calc(10 * var(--p)) calc(26 * var(--p)) rgba(30, 40, 110, .2); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(34 * var(--p)); box-sizing: border-box; font: 600 calc(31 * var(--p)) 'Outfit', system-ui, sans-serif; color: #10204b; white-space: nowrap; }
.fc-pill u { display: flex; gap: calc(10 * var(--p)); text-decoration: none; }
.fc-pill u i { width: calc(16 * var(--p)); height: calc(16 * var(--p)); border-radius: 50%; background: #c9d1ee; }
.fc-pill u i:nth-child(1) { animation: fd1 9s infinite; } .fc-pill u i:nth-child(2) { animation: fd2 9s infinite; } .fc-pill u i:nth-child(3) { animation: fd3 9s infinite; }
@keyframes fd1 { 0%, 29% { background: #1649e8; scale: 1.4; } 34%, 94% { background: #c9d1ee; scale: 1; } 99%, 100% { background: #1649e8; scale: 1.4; } }
@keyframes fd2 { 0%, 29% { background: #c9d1ee; scale: 1; } 34%, 60% { background: #1649e8; scale: 1.4; } 65%, 100% { background: #c9d1ee; scale: 1; } }
@keyframes fd3 { 0%, 60% { background: #c9d1ee; scale: 1; } 65%, 94% { background: #1649e8; scale: 1.4; } 99%, 100% { background: #c9d1ee; scale: 1; } }

/* Seda B: vocabulary conveyor */
.sb { overflow: hidden; }
.belt { position: absolute; left: 0; right: 0; top: calc(320 * var(--p)); height: calc(760 * var(--p)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); display: flex; align-items: center; }
.track { display: flex; gap: calc(46 * var(--p)); width: max-content; padding-left: calc(60 * var(--p)); animation: belt 32s linear infinite; }
@keyframes belt { to { translate: calc(-50% - 23 * var(--p)) 0; } }
.vc { margin: 0; flex: none; width: calc(430 * var(--p)); padding: calc(22 * var(--p)); box-sizing: border-box; background: #fff; border-radius: calc(34 * var(--p)); box-shadow: 0 calc(14 * var(--p)) calc(40 * var(--p)) rgba(60, 20, 20, .25); rotate: var(--rot); animation: vwave 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.vc span { display: block; } .vc .crop { border-radius: calc(18 * var(--p)); }
@keyframes vwave { 50% { translate: 0 calc(-36 * var(--p)); rotate: calc(var(--rot) * -.4); } }
.ast { position: absolute; color: #111; animation: spin 9s linear infinite; }
.ast svg { stroke-width: 13; width: 100%; }
@keyframes spin { to { rotate: 360deg; } }

/* Seda C: your progress */
.sc { font-family: 'Nunito Sans', system-ui, sans-serif; }
.sp-panel { position: absolute; inset: 0; background: #fffdf8; border-radius: calc(44 * var(--p)); padding: calc(46 * var(--p)); box-sizing: border-box; box-shadow: 0 calc(20 * var(--p)) calc(60 * var(--p)) rgba(60, 30, 0, .22); overflow: hidden; }
.sp-panel h4 { margin: 0; font: 600 calc(58 * var(--p)) 'Lora', Georgia, serif; color: #2a2620; }
.sp-sub { margin: calc(14 * var(--p)) 0 calc(34 * var(--p)); font: 400 calc(30 * var(--p)) / 1.4 'Nunito Sans', system-ui, sans-serif; color: #7a7770; }
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--p)); }
.sp-tile { position: relative; height: calc(230 * var(--p)); border-radius: calc(28 * var(--p)); padding: calc(30 * var(--p)); box-sizing: border-box; overflow: hidden; }
.sp-tile.learn { background: #f8d560; } .sp-tile.mast { background: #86cffc; }
.sp-tile small { display: block; font: 400 calc(28 * var(--p)) 'Nunito Sans', system-ui, sans-serif; color: #5d5a4e; }
.sp-tile strong { display: block; margin-top: calc(18 * var(--p)); font: 500 calc(76 * var(--p)) 'Lora', Georgia, serif; color: #1d1b17; }
.sp-tile .art { position: absolute; right: calc(20 * var(--p)); bottom: calc(14 * var(--p)); height: calc(176 * var(--p)); }
.sp-tile .art .crop { height: 100%; width: auto; }
.sp-tile.mast .art { animation: clap var(--T) infinite; transform-origin: 50% 60%; }
@keyframes clap { 0%, 44% { scale: 1; rotate: 0deg; } 48% { scale: 1.25; rotate: -6deg; } 53% { scale: .95; rotate: 4deg; } 58%, 100% { scale: 1; rotate: 0deg; } }
.burst { position: absolute; right: calc(60 * var(--p)); bottom: calc(60 * var(--p)); width: calc(90 * var(--p)); height: calc(90 * var(--p)); border-radius: 50%; border: calc(6 * var(--p)) solid rgba(255, 255, 255, .9); opacity: 0; animation: burst var(--T) ease-out infinite; }
@keyframes burst { 0%, 46% { opacity: 0; scale: .3; } 48% { opacity: 1; } 62%, 100% { opacity: 0; scale: 3.2; } }
.nr { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.nr > span { display: block; animation: nroll var(--T) cubic-bezier(.7, 0, .2, 1) infinite; }
.nr b { display: block; height: 1.1em; font-weight: inherit; }
@keyframes nroll { 0%, 44% { translate: 0 0; } 52%, 90% { translate: 0 -1.1em; } 97%, 100% { translate: 0 0; } }
.sp-panel h5 { margin: calc(40 * var(--p)) 0 calc(22 * var(--p)); font: 400 calc(38 * var(--p)) 'Lora', Georgia, serif; color: #3a362e; }
.sp-rows { border: calc(2 * var(--p)) solid #eee9dd; border-radius: calc(30 * var(--p)); background: #fff; }
.sp-row { position: relative; display: flex; align-items: center; gap: calc(24 * var(--p)); height: calc(150 * var(--p)); padding: 0 calc(30 * var(--p)); }
.sp-row + .sp-row { border-top: calc(2 * var(--p)) solid #eee9dd; }
.sp-row .th { width: calc(104 * var(--p)); height: calc(104 * var(--p)); border-radius: calc(10 * var(--p)); overflow: hidden; flex: none; background: #d9dde2; }
.sp-row .th .crop { width: 100%; height: 100%; }
.sp-row b { font: 400 calc(42 * var(--p)) 'Noto Sans Bengali', system-ui, sans-serif; color: #1d1b17; }
.sp-row svg { width: calc(40 * var(--p)); color: #3a362e; }
.sp-row u { margin-left: auto; display: flex; gap: calc(14 * var(--p)); text-decoration: none; }
.sp-row u i { width: calc(30 * var(--p)); height: calc(58 * var(--p)); border-radius: calc(15 * var(--p)); background: #e8dfd4; }
.r1 u i:nth-child(1) { animation: pill1 var(--T) infinite; } .r1 u i:nth-child(2) { animation: pill2 var(--T) infinite; } .r1 u i:nth-child(3) { animation: pill3 var(--T) infinite; }
@keyframes pill1 { 0%, 14% { background: #e8dfd4; scale: 1; } 18% { background: #2fb463; scale: 1.25; } 22%, 92% { background: #2fb463; scale: 1; } 98%, 100% { background: #e8dfd4; } }
@keyframes pill2 { 0%, 26% { background: #e8dfd4; scale: 1; } 30% { background: #2fb463; scale: 1.25; } 34%, 92% { background: #2fb463; scale: 1; } 98%, 100% { background: #e8dfd4; } }
@keyframes pill3 { 0%, 38% { background: #e8dfd4; scale: 1; } 42% { background: #2fb463; scale: 1.25; } 46%, 92% { background: #2fb463; scale: 1; } 98%, 100% { background: #e8dfd4; } }
.sp-row em { position: absolute; left: calc(160 * var(--p)); bottom: calc(18 * var(--p)); height: calc(8 * var(--p)); border-radius: 99px; background: #10204b; width: calc(150 * var(--p)); animation: prog var(--T) cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes prog { 0%, 55% { width: 0; } 80%, 92% { width: calc(240 * var(--p)); } 98%, 100% { width: 0; } }


/* Lingobites A: matching exercise (T = 10s) */
.mt-win, .rf-win, .bc-win { background: #fff; box-shadow: 0 calc(30 * var(--p)) calc(60 * var(--p)) rgba(60, 30, 120, .22); }
.mt-win { border-radius: calc(28 * var(--p)); font-family: 'Source Sans 3', system-ui, sans-serif; overflow: hidden; }
.mt-win > * { position: absolute; margin: 0; }
.mt-title { font: 500 calc(22 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #232a45; }
.mt-x { color: #232a45; }
.mt-prog { height: calc(6 * var(--p)); border-radius: 9px; background: #e6e8ef; }
.mt-prog .fill { display: block; height: 100%; width: 33%; border-radius: 9px; background: #7bd88f; animation: mtfill 10s ease-in-out infinite; }
@keyframes mtfill { 0%, 66% { width: 33%; } 76%, 91% { width: 66%; } 97%, 100% { width: 33%; } }
.mt-node { top: calc(86 * var(--p)); width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: 50%; background: #eef0f6; box-sizing: border-box; display: grid; place-items: center; color: #fff; }
.mt-node.n1 { left: calc(35 * var(--p)); background: #7bd88f; } .mt-node.n2 { left: calc(300 * var(--p)); background: #fff; border: calc(3 * var(--p)) solid #c8cde0; animation: mtn2 10s infinite; }
.mt-node.n3 { left: calc(560 * var(--p)); } .mt-node.n4 { left: calc(795 * var(--p)); }
.mt-node svg { width: 64%; stroke-width: 3; }
@keyframes mtn2 { 0%, 74% { background: #fff; border-color: #c8cde0; } 80%, 91% { background: #7bd88f; border-color: #7bd88f; } 97%, 100% { background: #fff; border-color: #c8cde0; } }
.mt-help { width: calc(30 * var(--p)); height: calc(30 * var(--p)); border-radius: 50%; border: calc(2 * var(--p)) solid #232a45; box-sizing: border-box; display: grid; place-items: center; font: 600 calc(18 * var(--p)) system-ui; color: #232a45; }
.mt-cap { font: 400 calc(20 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #6a7388; }
.mt-box { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: calc(2 * var(--p)) solid #cfd5e3; border-radius: calc(8 * var(--p)); background: #fff; font: 600 calc(23 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #1c2331; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; }
.mt-box i { position: absolute; left: calc(14 * var(--p)); width: calc(26 * var(--p)); height: calc(26 * var(--p)); border: calc(1.5 * var(--p)) solid #c4c9d8; border-radius: calc(4 * var(--p)); font: 500 calc(15 * var(--p)) / calc(24 * var(--p)) 'Source Sans 3', system-ui; text-align: center; color: #9aa1b5; }
.mt-lines path { fill: none; stroke: #6b4be0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.mt-bar { left: 0; right: 0; top: calc(700 * var(--p)); height: calc(2 * var(--p)); background: #eceef4; }
.mt-tries { left: 0; right: 0; top: calc(724 * var(--p)); text-align: center; font: 400 calc(20 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #232a45; }
.mt-tries u { display: inline-flex; gap: calc(6 * var(--p)); margin-right: calc(10 * var(--p)); vertical-align: middle; text-decoration: none; }
.mt-tries u i { width: calc(18 * var(--p)); height: calc(18 * var(--p)); border-radius: 50%; border: calc(2 * var(--p)) solid #7c5ce6; box-sizing: border-box; }
.mt-check { border-radius: calc(8 * var(--p)); background: #c9cdd8; overflow: hidden; display: grid; place-items: center; color: #fff; font: 600 calc(22 * var(--p)) 'Source Sans 3', system-ui, sans-serif; animation: mtcheck 10s infinite; }
.mt-check .rip { width: 14%; margin: -7% 0 0 -7%; animation-name: mtrip; animation-duration: 10s; }
@keyframes mtcheck { 0%, 64% { background: #c9cdd8; scale: 1; } 68% { background: linear-gradient(95deg, #8a14e0, #4a2de0); } 72% { scale: 1; } 75% { scale: .96; } 79%, 91% { background: linear-gradient(95deg, #8a14e0, #4a2de0); scale: 1; } 97%, 100% { background: #c9cdd8; scale: 1; } }
@keyframes mtrip { 0%, 73% { opacity: 0; scale: 0; } 74% { opacity: .7; scale: 0; } 84% { opacity: 0; scale: 9; } 100% { opacity: 0; } }

/* Lingobites B: reflection + Frank */
.rf-win { border-radius: calc(20 * var(--p)); overflow: hidden; font-family: 'Source Sans 3', system-ui, sans-serif; }
.rf-win > * { position: absolute; margin: 0; }
.rf-top { font: 400 calc(13 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #2a3358; }
.rf-prog { display: flex; justify-content: space-between; height: calc(18 * var(--p)); }
.rf-prog::before { content: ''; position: absolute; left: 0; right: 0; top: calc(7 * var(--p)); height: calc(4 * var(--p)); background: #eceef6; border-radius: 9px; }
.rf-prog i { position: relative; width: calc(18 * var(--p)); height: calc(18 * var(--p)); border-radius: 50%; background: #eef0f8; }
.rf-h { left: 0; right: 0; text-align: center; font: 700 calc(20 * var(--p)) 'Outfit', system-ui, sans-serif; color: #10122b; }
.rf-p { font: 400 calc(14 * var(--p)) / 1.45 'Source Sans 3', system-ui, sans-serif; color: #3a4160; }
.rf-tile { width: calc(80 * var(--p)); animation: rfhop 8s ease-in-out infinite; }
.rf-tile.t1 { animation-delay: 1s; } .rf-tile.t2 { animation-delay: 1.6s; } .rf-tile.t3 { animation-delay: 2.2s; }
.rf-tile span { display: block; margin-top: calc(25 * var(--p)); border-radius: calc(12 * var(--p)); overflow: hidden; }
.rf-tile.t2 span { animation: rfsel 8s infinite; }
.rf-tile b { display: block; width: calc(150 * var(--p)); margin: calc(8 * var(--p)) 0 0 calc(-35 * var(--p)); text-align: center; white-space: nowrap; font: 400 calc(12.5 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #6a7388; }
@keyframes rfhop { 0% { translate: 0 0; } 4% { translate: 0 calc(-12 * var(--p)); } 8%, 100% { translate: 0 0; } }
@keyframes rfsel { 0%, 38% { box-shadow: 0 0 0 0 rgba(124, 92, 230, 0); } 44%, 90% { box-shadow: 0 0 0 calc(3 * var(--p)) #7c5ce6, 0 calc(6 * var(--p)) calc(16 * var(--p)) rgba(124, 92, 230, .35); } 96%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 230, 0); } }
.rf-skip { font: 400 calc(11.5 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #3a4160; }
.rf-skip i { display: inline-block; width: calc(10 * var(--p)); height: calc(10 * var(--p)); border: calc(1 * var(--p)) solid #8a90a8; border-radius: 2px; margin-right: calc(8 * var(--p)); vertical-align: -1px; }
.rf-frank { animation: breathe2 5s ease-in-out infinite; transform-origin: 50% 100%; }
.rf-say { background: #eceafc; border-radius: calc(10 * var(--p)); padding: calc(8 * var(--p)) calc(14 * var(--p)); box-sizing: border-box; font: 400 calc(12.5 * var(--p)) / 1.4 'Source Sans 3', system-ui, sans-serif; color: #2a3358; transform-origin: 0 70%; animation: rfsay 8s ease-out infinite; }
@keyframes rfsay { 0% { scale: .4; opacity: 0; } 6%, 92% { scale: 1; opacity: 1; } 98%, 100% { scale: .9; opacity: 0; } }
.rf-next { border-radius: calc(5 * var(--p)); background: linear-gradient(95deg, #8a14e0, #4a2de0); overflow: hidden; display: grid; place-items: center; color: #fff; font: 600 calc(11 * var(--p)) 'Source Sans 3', system-ui, sans-serif; animation: rfnext 8s infinite; }
.rf-next .rip { width: 12%; margin: -6% 0 0 -6%; animation-name: rfrip; animation-duration: 8s; }
@keyframes rfnext { 0%, 64% { scale: 1; } 68% { scale: .95; } 72%, 100% { scale: 1; } }
@keyframes rfrip { 0%, 66% { opacity: 0; scale: 0; } 67% { opacity: .6; scale: 0; } 78% { opacity: 0; scale: 9; } 100% { opacity: 0; } }
.rf-pop { left: calc(251 * var(--p)); top: calc(150 * var(--p)); width: calc(320 * var(--p)); height: calc(250 * var(--p)); background: #fff; border-radius: calc(24 * var(--p)); box-shadow: 0 calc(16 * var(--p)) calc(50 * var(--p)) rgba(60, 30, 120, .35); overflow: hidden; clip-path: circle(0% at 50% 100%); opacity: 0; animation: rfpop 8s infinite; }
.rf-canvas { width: 100%; height: 100%; }
@keyframes rfpop { 0%, 69% { clip-path: circle(0% at 50% 100%); opacity: 0; } 70% { opacity: 1; } 77%, 93% { clip-path: circle(150% at 50% 100%); opacity: 1; } 98%, 100% { clip-path: circle(0% at 50% 100%); opacity: 0; } }

/* Lingobites C: practice tiles on the course page */
.bc-win { border-radius: calc(18 * var(--p)); overflow: hidden; position: relative; }
.bc-win .bs, .bc-win .bt, .bc-num, .bc-cur { position: absolute; }
.scene .bs { fill: #f5ae1d; stroke: none; opacity: 0; scale: 0; filter: drop-shadow(0 0 calc(2 * var(--p)) rgba(245, 174, 29, .7)); }
.bt { border-radius: calc(9 * var(--p)); opacity: 0; box-sizing: border-box; }
.bt.ta { animation: btp 8s ease-out infinite; } .bt.tb { animation: btp2 8s ease-out infinite; }
@keyframes btp { 0%, 28% { opacity: 0; scale: 1; box-shadow: 0 0 0 0 rgba(107, 75, 224, .4); } 30% { opacity: 1; scale: .94; background: rgba(107, 75, 224, .14); } 36% { scale: 1.05; } 46%, 100% { opacity: 0; scale: 1; box-shadow: 0 0 0 calc(8 * var(--p)) rgba(107, 75, 224, 0); } }
@keyframes btp2 { 0%, 60% { opacity: 0; scale: 1; box-shadow: 0 0 0 0 rgba(107, 75, 224, .4); } 62% { opacity: 1; scale: .94; background: rgba(107, 75, 224, .14); } 68% { scale: 1.05; } 78%, 100% { opacity: 0; scale: 1; box-shadow: 0 0 0 calc(8 * var(--p)) rgba(107, 75, 224, 0); } }
.bc-num { background: #fff; overflow: hidden; font: 600 calc(12.5 * var(--p)) / calc(16 * var(--p)) 'Source Sans 3', system-ui, sans-serif; color: #2b3050; }
.bc-num b { display: block; height: calc(16 * var(--p)); font-weight: 600; }
.bc-num > span { display: block; animation: bcroll 8s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes bcroll { 0%, 48% { translate: 0 0; } 54%, 74% { translate: 0 calc(-16 * var(--p)); } 80%, 92% { translate: 0 calc(-32 * var(--p)); } 97%, 100% { translate: 0 0; } }
.scene .bc-cur { fill: #111; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 calc(3 * var(--p)) calc(4 * var(--p)) rgba(0, 0, 0, .35)); translate: calc(530 * var(--p)) calc(415 * var(--p)); opacity: 0; animation: bcur 8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes bcur { 0%, 6% { opacity: 0; translate: calc(530 * var(--p)) calc(415 * var(--p)); } 10% { opacity: 1; } 26%, 36% { translate: calc(306 * var(--p)) calc(350 * var(--p)); } 28% { scale: .85; } 31% { scale: 1; } 52%, 62% { translate: calc(306 * var(--p)) calc(408 * var(--p)); opacity: 1; } 60% { scale: .85; } 64% { scale: 1; } 78%, 100% { opacity: 0; translate: calc(306 * var(--p)) calc(408 * var(--p)); } }
.bs.a1 { animation: bsa1 var(--T) infinite; }
@keyframes bsa1 { 0%, 34% { scale: 0; opacity: 0; rotate: -30deg; } 37% { scale: 1.7; opacity: 1; rotate: 10deg; } 40%, 92% { scale: 1.05; opacity: 1; rotate: 0deg; } 97%, 100% { scale: 0; opacity: 0; } }
.bs.a2 { animation: bsa2 var(--T) infinite; }
@keyframes bsa2 { 0%, 40% { scale: 0; opacity: 0; rotate: -30deg; } 43% { scale: 1.7; opacity: 1; rotate: 10deg; } 46%, 92% { scale: 1.05; opacity: 1; rotate: 0deg; } 97%, 100% { scale: 0; opacity: 0; } }
.bs.a3 { animation: bsa3 var(--T) infinite; }
@keyframes bsa3 { 0%, 46% { scale: 0; opacity: 0; rotate: -30deg; } 49% { scale: 1.7; opacity: 1; rotate: 10deg; } 52%, 92% { scale: 1.05; opacity: 1; rotate: 0deg; } 97%, 100% { scale: 0; opacity: 0; } }
.bs.b1 { animation: bsb1 var(--T) infinite; }
@keyframes bsb1 { 0%, 66% { scale: 0; opacity: 0; rotate: -30deg; } 69% { scale: 1.7; opacity: 1; rotate: 10deg; } 72%, 92% { scale: 1.05; opacity: 1; rotate: 0deg; } 97%, 100% { scale: 0; opacity: 0; } }
.bs.b2 { animation: bsb2 var(--T) infinite; }
@keyframes bsb2 { 0%, 72% { scale: 0; opacity: 0; rotate: -30deg; } 75% { scale: 1.7; opacity: 1; rotate: 10deg; } 78%, 92% { scale: 1.05; opacity: 1; rotate: 0deg; } 97%, 100% { scale: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .scene *, .scene *::before, .scene *::after { animation: none !important; } }

/* Lingoda D: the new screens, floating like version A. Screen picture inside rounded corners; the shadow comes from .ph */
.npi { position: relative; border-radius: calc(66 * var(--p)); overflow: hidden; background: #fff; aspect-ratio: 390 / 844; }
.npi .shot { display: block; width: 100%; height: 100%; object-fit: cover; }
.npi .op { position: absolute; display: block; max-width: none; }
/* the sparks and speech bubbles of the welcome screen (kept small and slow so they read as alive, not busy) */
.ob-spark { transform-origin: 50% 50%; animation: twinkle 3.4s ease-in-out infinite; }
.ob-spark.s2 { animation-delay: -1.1s; animation-duration: 3s; } .ob-spark.s3 { animation-delay: -2s; animation-duration: 3.8s; } .ob-spark.s4 { animation-delay: -.5s; animation-duration: 3.2s; }
@keyframes twinkle { 0%, 100% { scale: .8; rotate: 0deg; opacity: .75; } 50% { scale: 1.2; rotate: 45deg; opacity: 1; } }
.ob-top { transform-origin: 90% 100%; animation: obtop 5.5s ease-in-out infinite; }
.ob-top img { display: block; width: 100%; height: 100%; }
@keyframes obtop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6%; } }
/* typing indicator: the original dots (x 44-134, y 22-56 of the 180 x 99 bubble picture) are painted over, then three dots bounce in turn */
.tb-patch { position: absolute; left: 24%; top: 21%; width: 52%; height: 36%; background: linear-gradient(90deg, rgb(250, 228, 249), rgb(246, 225, 249)); }
.tb-dot { position: absolute; top: 32.3%; width: 8.9%; aspect-ratio: 1; border-radius: 50%; background: #1d3295; animation: typing 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * .17s); }
.ch-dot { top: 42.9%; width: 9.4%; animation-delay: calc(var(--i) * .17s - .5s); }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; opacity: .35; } 30% { translate: 0 -55%; opacity: 1; } }
.ob-heart { transform-origin: 50% 50%; animation: obheart 3.6s ease-in-out infinite; }
@keyframes obheart { 0%, 40%, 100% { scale: 1; translate: 0 0; } 15% { scale: 1.1; translate: 0 -1%; } 28% { scale: 1.02; } }
.ob-card { transform-origin: 50% 100%; animation: obcard 6.5s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes obcard { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -1.2%; rotate: -.5deg; } }
/* phones in version D bob less than in A */
.ld-zoom .ph { animation-name: bobsoft; animation-duration: 7s; }
@keyframes bobsoft { 50% { translate: 0 -.6cqw; } }
/* 80% size done with layout (a smaller box and a smaller unit), not transform: scale(.8). A scaled parent made the animated phones inside render soft. */
@property --z { syntax: '<number>'; inherits: true; initial-value: .8; }
.ld-zoom { --z: .8; position: absolute; inset: calc((1 - var(--z)) * 50%); --p: calc(100cqw * var(--z) / 2400); transition: --z .45s var(--ease-spring, cubic-bezier(.2, .8, .2, 1)); }
/* hover zoom (3%) the same way: grow --z instead of scaling the scene, so nothing gets re-rendered soft */
.card:hover .scene-lingoda-app .ld-zoom { --z: .824; }
.card:hover .card-media > .scene-lingoda-app { scale: none; }

/* Lingoda D, welcome carousel: one 14s loop. Hold on screen 1, swipe to 2, swipe to 3, then a quick fade back to 1.
   Everything below is timed in % of that loop (--L) so the animated parts start when their screen arrives. */
.ld-zoom { --L: 14s; }
.car { position: absolute; inset: 0; display: flex; width: 100%; animation: carrun var(--L) infinite; }
.sl { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
@keyframes carrun {
  0%, 26% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .2, 1); }
  31%, 56% { translate: -100% 0; opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .2, 1); }
  61%, 88% { translate: -200% 0; opacity: 1; }
  90.5% { translate: -200% 0; opacity: 0; }
  91%, 92% { translate: 0 0; opacity: 0; }
  94%, 100% { translate: 0 0; opacity: 1; }
}
/* the screens each carry their own page dots; they are painted white and one live set is drawn instead */
.dpatch { position: absolute; left: calc(158 / 390 * 100%); top: calc(688 / 844 * 100%); width: calc(74 / 390 * 100%); height: calc(24 / 844 * 100%); background: #fff; }
.dots { position: absolute; left: calc(168 / 390 * 100%); top: calc(694 / 844 * 100%); width: calc(54 / 390 * 100%); height: calc(12 / 844 * 100%); }
.dots i { position: absolute; top: 0; height: 100%; aspect-ratio: 1; border-radius: 50%; background: #cfd3de; }
.dots i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #6f66ee, #8f50de); opacity: 0; }
.dots .d1 { left: 0; } .dots .d2 { left: 50%; translate: -50% 0; } .dots .d3 { right: 0; }
.dots i::after { animation: dot1 var(--L) infinite; }
.dots .d2::after { animation-name: dot2; } .dots .d3::after { animation-name: dot3; }
@keyframes dot1 { 0%, 27% { opacity: 1; scale: 1; } 30%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes dot2 { 0%, 27% { opacity: 0; } 30%, 57% { opacity: 1; scale: 1; } 60%, 100% { opacity: 0; } }
@keyframes dot3 { 0%, 57% { opacity: 0; } 60%, 90% { opacity: 1; scale: 1; } 91%, 100% { opacity: 0; } }

/* screen 2: "Pizza" gets picked (chip presses, turns dark), then the green tick pops on its corner */
.pz-chip { transform-origin: 50% 50%; animation: pzchip var(--L) infinite; }
@keyframes pzchip { 0%, 35% { clip-path: inset(0 100% 0 0); scale: 1; } 36.5% { clip-path: inset(0 100% 0 0); scale: .94; } 40% { clip-path: inset(0 0 0 0); scale: 1.02; } 41.5%, 62% { clip-path: inset(0 0 0 0); scale: 1; } 62.5%, 100% { clip-path: inset(0 100% 0 0); scale: 1; } }
.pz-check { transform-origin: 50% 50%; animation: pzcheck var(--L) infinite; }
@keyframes pzcheck { 0%, 40% { scale: 0; rotate: -40deg; opacity: 0; } 43% { scale: 1.35; rotate: 8deg; opacity: 1; } 45.5%, 62% { scale: 1; rotate: 0deg; opacity: 1; } 62.5%, 100% { scale: 0; opacity: 0; } }

/* screen 3: the little things around her face drift, and the bell rings in three short bursts */
.fl { transform-origin: 50% 50%; animation: flo var(--t, 5s) ease-in-out infinite; animation-delay: var(--o, 0s); }
@keyframes flo { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: calc(var(--dx) * 1cqw) calc(var(--dy) * 1cqw); rotate: calc(var(--r) * 1deg); } }
.bell { transform-origin: 50% 12%; animation: ring var(--L) infinite; }
@keyframes ring {
  0%, 63% { rotate: 0deg; } 64.2% { rotate: 16deg; } 65.4% { rotate: -14deg; } 66.6% { rotate: 11deg; } 67.8% { rotate: -8deg; } 69% { rotate: 4deg; } 70%, 73% { rotate: 0deg; }
  74.2% { rotate: 16deg; } 75.4% { rotate: -14deg; } 76.6% { rotate: 11deg; } 77.8% { rotate: -8deg; } 79% { rotate: 4deg; } 80%, 83% { rotate: 0deg; }
  84.2% { rotate: 16deg; } 85.4% { rotate: -14deg; } 86.6% { rotate: 11deg; } 87.8% { rotate: -8deg; } 89%, 100% { rotate: 0deg; }
}

/* Lingobites D: a recorded clip (grammar exercise, then the score) floating on the card gradient like a window */
.scene-lingobites .stage.bv { position: relative; width: min(82cqw, calc(82cqh * 4 / 3)); aspect-ratio: 4 / 3; background: none; }
.scene-lingobites .stage.bv video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3.2cqw; box-shadow: 0 2.4cqw 6cqw -1.2cqw rgba(60, 20, 60, .35); background: #fcfcfc; }

/* ============ Seda D: bench + language cards (see sceneSedaD) ============ */
.scene-seda:has(.sd2) { overflow: hidden; align-items: end; background: var(--g, linear-gradient(180deg, #ffb994 0%, #f7b497 55%, #c8caf9 100%)); }
.card.is-bare .card-media:has(> .scene-seda .sd2), html .card.is-bare .card-media:has(> .scene-seda .sd2) { padding: 0; }
[data-display="bento"] .card-media > .scene-seda:has(.sd2) { padding: 0; }
.scene-seda .stage.sd2 { width: min(100cqw, calc(100cqh * var(--ar))); margin-inline: auto; font-family: 'Nunito Sans', system-ui, sans-serif; --T: 12s; }
.sd2 > * { position: absolute; }
.sd2-bench { display: block; height: auto; }
.sd2-back { background: #fbf6ea; border-radius: calc(26 * var(--p)); box-shadow: 0 calc(10 * var(--p)) calc(30 * var(--p)) rgba(20, 30, 80, .22); }
.sd2-deck { scale: .9; }
/* each card is on screen for a third of the 12s loop; the first one is visible at rest (motion off) */
.dk-card { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: calc(26 * var(--p)); background: #fffcf5; box-shadow: 0 calc(14 * var(--p)) calc(40 * var(--p)) rgba(20, 30, 80, .28); opacity: 0; transform-origin: 60% 80%; animation: dkcard var(--T) cubic-bezier(.4, 0, .2, 1) var(--dl, 0s) infinite both; }
/* at rest (motion off): first card in front, second peeking out behind it, third hidden */
.dk-card:nth-child(1) { opacity: 1; z-index: 3; }
.dk-card:nth-child(2) { opacity: 1; z-index: 2; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; }
/* a card's 12s life: waits behind the front card with its content showing (0-29%), rises to the front as that one leaves (29-35%),
   gets answered (35-62%), flies off to the right (62-68%), then tucks away underneath until it is next in line again */
@keyframes dkcard {
  0% { opacity: 1; z-index: 2; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; rotate: 0deg; }
  28.99% { opacity: 1; z-index: 2; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; rotate: 0deg; }
  29% { opacity: 1; z-index: 3; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; rotate: 0deg; }
  37%, 62% { opacity: 1; z-index: 3; translate: 0 0; scale: 1; rotate: 0deg; }
  62.01% { z-index: 4; }
  68% { opacity: 1; z-index: 4; translate: calc(300 * var(--p)) calc(60 * var(--p)); scale: 1; rotate: 9deg; }
  70% { opacity: 0; z-index: 4; translate: calc(360 * var(--p)) calc(70 * var(--p)); scale: 1; rotate: 10deg; }
  70.01%, 94% { opacity: 0; z-index: 1; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; rotate: 0deg; }
  94.01% { z-index: 2; }
  100% { opacity: 1; z-index: 2; translate: calc(-8 * var(--p)) calc(8 * var(--p)); scale: .985; rotate: 0deg; }
}
.dk-t { top: calc(30 * var(--p)); left: 0; right: 0; margin: 0; text-align: center; font: 400 calc(17.5 * var(--p)) 'Nunito Sans', system-ui, sans-serif; letter-spacing: .02em; color: #6c6a64; position: absolute; }
.dk-word { position: absolute; left: 0; right: 0; top: calc(68 * var(--p)); height: calc(104 * var(--p)); display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--p)); }
.dk-spk { position: relative; width: calc(52 * var(--p)); height: calc(52 * var(--p)); flex: none; border-radius: 50%; background: #f3d9b8; border: calc(2.5 * var(--p)) solid #3a2e22; box-sizing: border-box; display: grid; place-items: center; color: #3a2e22; }
.dk-spk svg { width: 52%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dk-word span { color: #1d1b17; line-height: 1.8; font-size: calc(46 * var(--p)); font-weight: 600; white-space: nowrap; }
.dk-word .w-ur { font-family: 'Noto Nastaliq Urdu', 'Geeza Pro', serif; font-weight: 400; font-size: calc(42 * var(--p)); line-height: 2.1; direction: rtl; translate: 0 calc(-14 * var(--p)); }
.dk-word .w-hi { font-family: 'Noto Sans Devanagari', 'Devanagari Sangam MN', system-ui, sans-serif; }
.dk-word .w-id { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: calc(40 * var(--p)); line-height: 1.3; }
.dk-grid { position: absolute; left: calc(30 * var(--p)); top: calc(192 * var(--p)); width: calc(426 * var(--p)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--p)); }
.dk-tile { position: relative; aspect-ratio: 1; box-sizing: border-box; background: #fff; border: calc(1.5 * var(--p)) solid #eee9dd; border-radius: calc(18 * var(--p)); padding: calc(10 * var(--p)); display: block; animation: dkdim var(--T) infinite both; animation-delay: calc(var(--i, 0) * 0s); }
.dk-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(9 * var(--p)); }
.dk-ok { position: absolute; top: calc(-10 * var(--p)); right: calc(-10 * var(--p)); width: calc(44 * var(--p)); height: calc(44 * var(--p)); border-radius: 50%; background: #2fb463; display: grid; place-items: center; scale: 0; color: #fff; box-shadow: 0 calc(4 * var(--p)) calc(10 * var(--p)) rgba(0, 0, 0, .25); }
.dk-ok svg { width: 62%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* the answer: right picture gets its green frame and tick at ~1/3 into the card's slot, the rest soften */
.dk-card .dk-tile { animation: none; }
.dk-card .dk-tile.pick { animation: dkpick var(--T) cubic-bezier(.4, 0, .2, 1) var(--dl, 0s) infinite both; }
.dk-card .dk-tile:not(.pick) { animation: dkother var(--T) ease var(--dl, 0s) infinite both; }
.dk-card .dk-tile.pick .dk-ok { animation: dktick var(--T) cubic-bezier(.3, 1.6, .5, 1) var(--dl, 0s) infinite both; }
@keyframes dkpick { 0%, 44% { border-color: #eee9dd; background: #fff; scale: 1; } 46% { scale: .95; } 48%, 66% { border-color: #2fb463; background: #effaf2; scale: 1; } 68%, 100% { border-color: #eee9dd; background: #fff; scale: 1; } }
@keyframes dkother { 0%, 44% { opacity: 1; } 48%, 66% { opacity: .45; } 68%, 100% { opacity: 1; } }
@keyframes dktick { 0%, 46% { scale: 0; } 49%, 66% { scale: 1; } 68%, 100% { scale: 0; } }
@media (prefers-reduced-motion: reduce) { .dk-card { animation: none; } }