/* Lexio motion: start-up screen, loading animations, page transitions and small feedback effects.
   Every element is fully visible in its normal state; the animations only start from a hidden/small state via keyframes, so with
   animations turned off (system "reduce motion", or Profile → Animations → Off) nothing is missing, it just does not move. */

/* ---------- animation switch ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *, html:not([data-motion="on"]) *::before, html:not([data-motion="on"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- start-up screen ---------- */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand) 16%, var(--bg)) 0%, var(--bg) 62%), var(--bg); color: var(--ink); transition: opacity .5s ease, visibility 0s linear .5s; }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-center { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; text-align: center; width: min(360px, 88vw); }
.splash-logo { position: relative; width: clamp(84px, 22vmin, 120px); height: clamp(84px, 22vmin, 120px); border-radius: 28%; box-shadow: 0 14px 40px color-mix(in srgb, var(--brand) 38%, transparent), 0 2px 0 rgba(255,255,255,.4) inset; animation: splash-logo .9s cubic-bezier(.2, .9, .3, 1.15) both; }
.splash-logo-wrap { position: relative; display: grid; place-items: center; margin-bottom: 16px; }
.splash-logo-wrap::before { content: ""; position: absolute; inset: -14px; border-radius: 34%; border: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); animation: splash-ring 2.2s ease-out infinite; }
.splash-name { font-size: clamp(1.5rem, 5vmin, 2rem); font-weight: 900; letter-spacing: -.02em; color: var(--brand-ink); animation: splash-fade .7s .25s ease both; }
.splash-msg { min-height: 1.5em; font-weight: 700; color: var(--ink-2); animation: splash-fade .5s ease both; }
.splash-bar { width: 100%; height: 14px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); overflow: hidden; box-shadow: 0 2px 0 var(--line); animation: splash-fade .7s .35s ease both; }
.splash-bar > i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #34d399 35%, var(--info) 70%, var(--brand)); background-size: 360px 100%; transition: width .5s cubic-bezier(.3, .8, .3, 1); animation: splash-shine 2.4s linear infinite; }
.splash-stuck { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8vh; text-align: center; opacity: 0; animation: splash-fade .4s 25s ease forwards; font-weight: 700; padding: 0 20px; }
.splash.alive .splash-stuck { display: none; }
.splash-stuck a { color: var(--brand-ink); }
.sp-f { position: absolute; left: var(--x); top: var(--y); font-weight: 900; font-size: var(--s, 1.4rem); color: color-mix(in srgb, var(--c, var(--brand)) 70%, var(--ink)); opacity: .5; animation: sp-float var(--t, 7s) ease-in-out var(--d, 0s) infinite alternate; user-select: none; pointer-events: none; }
.sp-f.word { font-size: var(--s, 1.2rem); letter-spacing: .01em; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 2px solid var(--line); border-radius: 999px; padding: 4px 14px; color: var(--ink-2); }
.sp-f svg { width: var(--s, 28px); height: var(--s, 28px); fill: currentColor; }
.sp-f.bubble { display: grid; place-items: center; width: var(--s, 38px); height: var(--s, 38px); border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
@keyframes splash-logo { from { opacity: 0; transform: scale(.55) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splash-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes splash-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-shine { to { background-position: -360px 0; } }
@keyframes sp-float { from { transform: translate3d(0, 0, 0) rotate(-4deg); } to { transform: translate3d(var(--mx, 10px), var(--my, -22px), 0) rotate(5deg); } }
@media (max-width: 520px) { .sp-f.word { display: none; } .sp-f.hide-sm { display: none; } }

/* ---------- loading animations ---------- */
.ld { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 34px 16px; text-align: center; width: min(420px, 100%); margin: 0 auto; }
.ld.compact { padding: 18px 12px; }
.ld-text { margin: 0; font-weight: 800; color: var(--ink-2); animation: ld-fade .4s ease both; }
.ld-art { position: relative; width: min(260px, 70vw); height: 130px; display: grid; place-items: center; }
.ld.compact .ld-art { height: 96px; }
.ld-bar { width: min(300px, 80vw); height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.ld-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #34d399, var(--info)); transition: width .3s ease; }
.ld-bar.indeterminate > i { width: 40%; animation: ld-slide 1.3s ease-in-out infinite; }
.ld-slow { display: grid; gap: 8px; justify-items: center; animation: ld-fade .4s ease both; }
.ld-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity .16s ease; }
.ld-overlay.in { opacity: 1; }
@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.ld-star { width: 22px; height: 22px; fill: var(--gold); position: absolute; }

/* vocabulary: floating words + letters typed one by one */
.ld-vocab .ld-word { position: absolute; font-weight: 900; color: color-mix(in srgb, var(--brand) 60%, var(--ink-2)); opacity: .55; font-size: .95rem; animation: ld-drift 5s ease-in-out calc(var(--i) * -1.1s) infinite alternate; }
.ld-vocab .ld-word:nth-child(1) { left: 2%; top: 6%; } .ld-vocab .ld-word:nth-child(2) { right: 0; top: 18%; } .ld-vocab .ld-word:nth-child(3) { left: 8%; bottom: 6%; } .ld-vocab .ld-word:nth-child(4) { right: 6%; bottom: 0; }
.ld-vocab .ld-typed { min-width: 6ch; min-height: 1.6em; font-size: 1.7rem; font-weight: 900; color: var(--brand-ink); letter-spacing: .02em; }
.ld-vocab .ld-typed::after { content: ""; display: inline-block; width: 3px; height: 1.1em; margin-left: 3px; vertical-align: -.15em; background: var(--gold); animation: ld-blink 1s steps(1) infinite; }
@keyframes ld-drift { from { transform: translate(0, 0); } to { transform: translate(8px, -14px); } }
@keyframes ld-blink { 50% { opacity: 0; } }

/* lesson: a small book that opens, stars appear */
.ld-book { width: 150px; height: 107px; overflow: visible; }
.ld-book .bk-left path:first-child, .ld-book .bk-right path:first-child { fill: var(--surface); stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
.ld-book .bk-line { fill: none; stroke: color-mix(in srgb, var(--brand) 40%, transparent); stroke-width: 3; stroke-linecap: round; }
.ld-book .bk-shadow { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 5; stroke-linecap: round; fill: none; }
.ld-book .bk-left { transform-origin: 70px 50px; animation: bk-open-l 2.2s ease-in-out infinite; }
.ld-book .bk-right { transform-origin: 70px 50px; animation: bk-open-r 2.2s ease-in-out infinite; }
@keyframes bk-open-l { 0%, 12% { transform: scaleX(.08); } 45%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@keyframes bk-open-r { 0%, 12% { transform: scaleX(.08); } 45%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
.ld-lesson .ld-s1, .ld-lesson .ld-s2, .ld-lesson .ld-s3 { animation: ld-star 2.2s ease-in-out infinite; }
.ld-lesson .ld-s2 { animation-delay: .25s; width: 28px; height: 28px; } .ld-lesson .ld-s3 { animation-delay: .5s; }
@keyframes ld-star { 0%, 30% { transform: scale(0) rotate(-40deg); opacity: 0; } 55% { transform: scale(1.2) rotate(8deg); opacity: 1; } 75%, 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* quiz: letters slide into place, question marks and answer cards */
.ld-quiz { gap: 10px; }
.ld-letters { display: flex; gap: 8px; }
.ld-letter { display: grid; place-items: center; width: 40px; height: 46px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); font-weight: 900; font-size: 1.3rem; color: var(--brand-ink); animation: ld-letter 2.4s cubic-bezier(.3, .9, .3, 1) calc(var(--i) * .16s) infinite; }
@keyframes ld-letter { 0% { transform: translate(var(--from), -26px) rotate(12deg); opacity: 0; } 30%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.ld-cards { display: flex; gap: 8px; }
.ld-ans { width: 54px; height: 22px; border-radius: 10px; background: var(--brand-soft); border: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); animation: ld-pop 2.4s ease-in-out calc(var(--i) * .2s + .5s) infinite; }
.ld-q { position: absolute; font-weight: 900; font-size: 1.6rem; color: var(--gold); animation: ld-drift 3s ease-in-out infinite alternate; }
.ld-q1 { left: 6%; top: 8%; } .ld-q2 { right: 8%; bottom: 10%; animation-delay: -1.2s; }
@keyframes ld-pop { 0%, 12% { transform: scale(.4); opacity: 0; } 30%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

/* progress: the learning path draws itself, stars appear */
.ld-path svg { width: 100%; height: 100%; overflow: visible; }
.ld-path .pt-base { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.ld-path .pt-draw { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pt-draw 2.8s ease-in-out infinite; }
.ld-path .pt-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 4; animation: pt-dot 2.8s ease-in-out infinite; }
.ld-path .pt-dot.d2 { animation-delay: .5s; } .ld-path .pt-dot.d3 { animation-delay: 1s; }
.ld-path .pt-star { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: pt-star 2.8s ease-in-out infinite; } .ld-path .pt-star.s2 { animation-delay: .4s; }
@keyframes pt-draw { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes pt-dot { 0%, 10% { transform: scale(0); } 30%, 100% { transform: scale(1); } }
@keyframes pt-star { 0%, 55% { opacity: 0; transform: scale(0) rotate(-30deg); } 80%, 100% { opacity: 1; transform: scale(1) rotate(0); } }
.ld-path .pt-dot { transform-box: fill-box; transform-origin: center; }

/* import: word cards enter, a counter shows the real number of words */
.ld-import { grid-auto-flow: column; gap: 16px; }
.ld-stack { position: relative; width: 120px; height: 86px; }
.ld-card { position: absolute; left: 0; right: 0; top: calc(var(--i) * 10px); display: grid; place-items: center; height: 46px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); font-weight: 900; color: var(--brand-ink); animation: ld-card 2.4s ease-in-out calc(var(--i) * .25s) infinite; }
@keyframes ld-card { 0% { transform: translateX(-60px) rotate(-6deg); opacity: 0; } 25%, 80% { transform: translateX(calc(var(--i) * 4px)); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
.ld-count { font-size: 2.4rem; font-weight: 900; color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* generic */
.ld-art.ld-generic { height: 40px; grid-auto-flow: column; gap: 8px; }  /* only the dots, not the whole loader (it also carries the kind class) */
.ld.compact.ld-generic .ld-art { height: 30px; }
.ld-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); animation: ld-bounce 1s ease-in-out infinite; }
.ld-dot:nth-child(2) { background: var(--gold); animation-delay: .15s; } .ld-dot:nth-child(3) { background: var(--info); animation-delay: .3s; }
@keyframes ld-bounce { 0%, 80%, 100% { transform: translateY(0) scale(.85); } 40% { transform: translateY(-10px) scale(1.1); } }

/* ---------- page transitions ---------- */
.page-in { animation: page-in .28s cubic-bezier(.2, .8, .3, 1) both; }
.page-zoom { animation: page-zoom .32s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes page-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- interactive feedback ---------- */
.btn { transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); }
.option, .tile, .fchip, .lang-btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .12s ease; }
.option:hover:not(:disabled) { transform: translateY(-1px); }
.shake-x { animation: shake-x .4s ease both; }
@keyframes shake-x { 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(3px); } }
.hint-pulse { animation: hint-pulse 1s ease-in-out 2; }
@keyframes hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 32%, transparent); } }
.good-glow { animation: good-glow .7s ease both; }
@keyframes good-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 40%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.xp-float { display: inline-block; animation: xp-float 1.3s ease-out both; }
@keyframes xp-float { 0% { transform: translateY(8px) scale(.7); opacity: 0; } 25% { transform: translateY(0) scale(1.12); opacity: 1; } 100% { transform: translateY(-4px) scale(1); opacity: 1; } }
.stat-pop { animation: stat-pop .55s ease both; }
@keyframes stat-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.chip.flame.lit svg { transform-origin: 50% 90%; animation: flame 2.6s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.1, 1.14) rotate(-3deg); } 60% { transform: scale(.96, 1.04) rotate(3deg); } }
.streak-up { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--gold-soft); color: var(--flame); font-weight: 900; animation: stat-pop .7s .3s ease both; }
.streak-up svg { width: 26px; height: 26px; animation: flame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.badge-reveal { animation: badge-reveal .7s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i, 0) * .18s + .2s) both; }
.badge-reveal .ico { position: relative; overflow: hidden; }
.badge-reveal .ico::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; transform: skewX(-20deg); background: rgba(255,255,255,.65); animation: badge-shine 1.1s calc(var(--i, 0) * .18s + .7s) ease both; }
@keyframes badge-reveal { 0% { opacity: 0; transform: scale(.5) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes badge-shine { to { left: 130%; } }
.result.celebrate img { animation: mascot-hop .8s cubic-bezier(.3, .9, .3, 1.3) both; }
@keyframes mascot-hop { 0% { transform: translateY(24px) scale(.8); opacity: 0; } 60% { transform: translateY(-10px) scale(1.05); opacity: 1; } 100% { transform: none; } }

/* stars / confetti layer */
.fx-layer { position: fixed; z-index: 900; width: 0; height: 0; pointer-events: none; }
.fx-p { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); background: var(--c); opacity: 0; animation: fx-fly 1s cubic-bezier(.15, .8, .3, 1) var(--dl) forwards; }
.fx-stars .fx-p { clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); background: var(--gold); }
.fx-confetti .fx-p { width: calc(var(--s) * .7); height: var(--s); border-radius: 2px; animation-duration: 2s; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
@keyframes fx-fly { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)) scale(1); } }