/* ==========================================================================
   Freude: Figuren, lebendige Startseite, Erfolgs-Animationen, Titelbilder
   Nur transform/opacity werden animiert. Bei „weniger Bewegung“ bleibt alles ruhig.
   1. Figuren  2. Hero-Szene  3. Erfolgs-Funken  4. Figur schaut herein
   5. Titelbilder  6. Feinschliff  7. Weniger Bewegung
   ========================================================================== */

.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ill .s-y { stroke: var(--yellow); }
.ill .c-y.s-y { fill: var(--yellow); stroke: var(--yellow); }

/* 1. Figuren */
.char { display: block; width: 100%; height: auto; overflow: visible; }
.char .char__eyes { transform: translate(calc(var(--ex, 0) * 2.4px), calc(var(--ey, 0) * 2px)); transition: transform .25s ease-out; }
.char .char__eye { transform-box: fill-box; transform-origin: center; }
.char .char__dots { transform-box: fill-box; transform-origin: center bottom; }

/* 2. Hero-Szene */
.hero__art .hl { width: 100%; max-width: 620px; margin-inline: auto; }
.hl {
	position: relative;
	aspect-ratio: 600 / 520;
	container-type: inline-size;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.hl__layer {
	position: absolute;
	left: var(--x, 0);
	top: var(--y, 0);
	width: var(--w, auto);
	transform: translate3d(calc(var(--mx, 0) * var(--d, 10) * 1px), calc(var(--my, 0) * var(--d, 10) * .8px), 0);
	transition: transform .7s cubic-bezier(.16, .84, .3, 1);
}
.hl__bg { inset: 0; width: 100%; height: 100%; }
.hl__bg .ill { width: 100%; height: 100%; }
.hl__shadow { left: 12%; top: 90%; width: 76%; height: 4%; border-radius: 50%; background: var(--il-shadow); }

.hl__float { display: block; position: relative; }
.hl__tile { aspect-ratio: 1; rotate: var(--r, 0deg); }
.hl__tile .hl__float { width: 100%; height: 100%; }
.hl__tile-face {
	display: grid; place-items: center; width: 100%; height: 100%;
	border-radius: 26%;
	font-weight: 900; font-size: 7.4cqw; line-height: 1; color: #293A35;
	box-shadow: inset 0 -.9cqw 0 rgba(41, 58, 53, .14), 0 .8cqw 1.6cqw var(--il-shadow);
}
.hl__tile--g .hl__tile-face { background: var(--green); }
.hl__tile--b .hl__tile-face { background: var(--blue); }
.hl__tile--c .hl__tile-face { background: var(--coral); }
.hl__tile--y .hl__tile-face { background: var(--yellow); }

.hl__spark { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; }
.hl__spark--c { background: var(--coral); }
.hl__spark--b { background: var(--blue); }
.hl__spark--y { background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 3.6cqw; height: 3.6cqw; border-radius: 0; }
.hl__spark--g { background: var(--green); }

.hl__btn {
	display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 40%; touch-action: manipulation;
}
.hl__btn:focus-visible { outline-offset: 0; }
.hl__btn .char { transform-origin: 50% 90%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.hl__btn:hover .char { transform: scale(1.06) rotate(-2deg); }
.hl__btn.is-jump .char { animation: joy-jump .7s cubic-bezier(.3, 1.5, .5, 1); }

.hl__say {
	position: absolute; left: 50%; bottom: 96%; z-index: 2;
	padding: .55em .95em; border-radius: 1.1em;
	background: var(--surface); color: var(--ink);
	font-weight: 900; font-size: clamp(.8rem, 2.9cqw, 1.15rem); line-height: 1.2; white-space: nowrap;
	box-shadow: var(--shadow);
	transform: translateX(-50%);
	pointer-events: none;
}
.hl__say::after {
	content: ""; position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; margin: -8px 0 0 -7px;
	background: inherit; border-radius: 0 0 4px 0; rotate: 45deg;
}
.hl__say.is-pop { animation: joy-say .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.hl__char--lumi .hl__say { left: 58%; }
.hl__char--nuri .hl__say { bottom: 102%; }
.hl__char--fritz .hl__say { bottom: 100%; }
:root[data-theme="dark"] .hl__say { background: #F2F4EF; color: #293A35; }

.hl__hint {
	position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
	background: var(--surface); box-shadow: var(--shadow-sm);
	font-size: .8125rem; font-weight: 800; color: var(--ink-2); white-space: nowrap;
	transition: opacity .4s ease;
}
.hl__hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); }
.hl.is-played .hl__hint { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.hl__float { animation: joy-float 6.5s ease-in-out infinite; animation-delay: calc(var(--t, 0) * -1.7s); }
	.hl__tile .hl__float { animation-duration: 7.5s; }
	.hl__spark { animation: joy-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--t, 0) * -.6s); }
	.hl .char__eye { animation: joy-blink 5.5s infinite; }
	.hl__char--pia .char__eye { animation-delay: -2s; }
	.hl__char--fritz .char__eye { animation-delay: -3.4s; }
	.hl__char--nuri .char__eye { animation-delay: -1.1s; }
	.hl__char--fritz .char__dots { animation: joy-bob 2.6s ease-in-out infinite; }
	.hl__hint-dot { animation: joy-ping 2s ease-out infinite; }
	.hl.is-paused .hl__float, .hl.is-paused .hl__spark, .hl.is-paused .char__eye, .hl.is-paused .char__dots, .hl.is-paused .hl__hint-dot { animation-play-state: paused; }
	.hl:not(.is-ready) .hl__layer { opacity: 0; transform: translate3d(0, 24px, 0) scale(.92); }
	.hl.is-ready .hl__layer { transition: transform .7s cubic-bezier(.16, .84, .3, 1), opacity .6s ease; transition-delay: 0s, calc(var(--t, 0) * 70ms); }
}
@media (max-width: 960px) {
	.hero__art .hl { max-width: 460px; }
}
@media (max-width: 960px) {
	/* Szene am Handy ganz oben, kompakt; Text und Knöpfe folgen direkt */
	.hero:has(.hl) .hero__grid { gap: 8px; }
	.hero__art:has(.hl) { order: -1; }
}
@media (max-width: 560px) {
	.hero__art { margin-top: 0; }
	.hero__art .hl { max-width: 330px; margin-bottom: 14px; }
	.hero:has(.hl) { padding-top: 20px; }
	.hl__hint { font-size: .75rem; }
}

@keyframes joy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2cqw); } }
@keyframes joy-twinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
@keyframes joy-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } }
@keyframes joy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes joy-ping { 0% { box-shadow: 0 0 0 0 rgba(114, 185, 154, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(114, 185, 154, 0); } }
@keyframes joy-jump {
	0% { transform: none; }
	25% { transform: translateY(4%) scale(1.08, .9); }
	55% { transform: translateY(-16%) scale(.95, 1.06) rotate(3deg); }
	80% { transform: translateY(0) scale(1.04, .96); }
	100% { transform: none; }
}
@keyframes joy-say { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* 3. Erfolgs-Funken (joy.js erzeugt die Teilchen, entfernt sie danach wieder) */
.joy-fx { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 400; pointer-events: none; }
.joy-fx i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 3px; will-change: transform, opacity; }
.joy-fx i.is-round { border-radius: 50%; }
.joy-fx i.is-star { width: 17px; height: 17px; left: -8px; top: -8px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.joy-fx .joy-plus {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	font-weight: 900; font-size: 1.05rem; color: var(--green-ink); white-space: nowrap;
	text-shadow: 0 1px 0 var(--surface), 0 0 10px var(--surface);
}
.ex.is-correct { animation: joy-glow .9s ease-out; }
@keyframes joy-glow { 0% { box-shadow: 0 0 0 0 rgba(114, 185, 154, .5); } 100% { box-shadow: 0 0 0 14px rgba(114, 185, 154, 0); } }

/* 4. Figur schaut herein (nach einer Serie richtiger Antworten) */
.joy-peek {
	position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: 0; z-index: 350;
	display: flex; align-items: flex-end; gap: 6px; pointer-events: none;
	transform: translateY(110%);
	transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.joy-peek.is-in { transform: translateY(14%); }
.joy-peek .char { width: 92px; }
.joy-peek__say {
	margin-bottom: 64px; padding: 8px 14px; border-radius: 16px 16px 4px 16px;
	background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
	font-weight: 900; font-size: 1rem; white-space: nowrap;
}
[dir="rtl"] .joy-peek { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }

/* Figuren in Lektionen: Lob-Box und Abschluss bekommen die passende Figur */
.praise .char, .finish__mascot .char { width: 92px; }
.finish__mascot { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.finish__mascot .char:nth-child(2) { width: 112px; }
.finish__mascot .char:nth-child(1), .finish__mascot .char:nth-child(3) { width: 70px; }
@media (prefers-reduced-motion: no-preference) {
	.finish.is-celebrating .finish__mascot .char { animation: joy-jump .8s cubic-bezier(.3, 1.5, .5, 1) both; }
	.finish.is-celebrating .finish__mascot .char:nth-child(1) { animation-delay: .15s; }
	.finish.is-celebrating .finish__mascot .char:nth-child(3) { animation-delay: .3s; }
	.praise:not([hidden]) .char { animation: dl-mascot-hop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
}

/* 5. Titelbilder (Lektionskopf): Bilder zum Thema auf Karten, Figur mit Schlüsselwort */
.joy-cover {
	--tone: var(--green); --tone-soft: var(--green-soft);
	position: relative; overflow: hidden;
	height: clamp(128px, 19vw, 200px);
	margin: 4px 0 22px;
	border-radius: var(--radius);
	background: var(--tone-soft);
}
.joy-cover--b { --tone: var(--blue); --tone-soft: var(--blue-soft); }
.joy-cover--y { --tone: var(--yellow); --tone-soft: var(--yellow-soft); }
.joy-cover--c { --tone: var(--coral); --tone-soft: var(--coral-soft); }
.joy-cover__blob { position: absolute; width: 46%; aspect-ratio: 1; right: -8%; top: -60%; border-radius: 50%; background: var(--tone); opacity: .32; }
.joy-cover__blob--2 { width: 22%; left: -6%; right: auto; top: auto; bottom: -40%; opacity: .22; }
.joy-cover__card {
	position: absolute; display: block; box-sizing: border-box;
	width: clamp(66px, 10.5vw, 112px); aspect-ratio: 1; padding: clamp(8px, 1.2vw, 13px);
	border-radius: 24%; background: var(--surface); box-shadow: var(--shadow);
	rotate: var(--r, 0deg);
}
.joy-cover__card .vi { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.joy-cover__card--1 { left: 5%; top: 17%; --r: -8deg; }
.joy-cover__card--2 { left: 21%; top: 36%; --r: 6deg; }
.joy-cover__card--3 { left: 37%; top: 14%; --r: -3deg; }
.joy-cover__char { position: absolute; right: 5%; bottom: -5%; width: clamp(92px, 15vw, 150px); }
.joy-cover__say {
	position: absolute; right: 88%; top: 6%;
	padding: .45em .85em; border-radius: 1em 1em .25em 1em;
	background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
	font-weight: 900; font-size: clamp(.8rem, .7rem + .5vw, 1.05rem); white-space: nowrap;
}
[dir="rtl"] .joy-cover__say { border-radius: 1em 1em 1em .25em; }
@media (max-width: 640px) {
	.joy-cover { height: 118px; margin-bottom: 16px; }
	.joy-cover__card { width: 64px; }
	.joy-cover__card--2 { left: 23%; top: 40%; }
	.joy-cover__card--3 { display: none; }
	.joy-cover__char { width: 84px; right: 4%; }
	.joy-cover__say { right: 92%; top: 10%; }
	.is-pilot .joy-cover { height: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
	.joy-cover__card { animation: joy-card 7s ease-in-out infinite; }
	.joy-cover__card--2 { animation-delay: -2.3s; }
	.joy-cover__card--3 { animation-delay: -4.6s; }
	.joy-cover__char .char { animation: dl-mascot-hop .8s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
	.joy-cover__say { animation: joy-say-in .5s cubic-bezier(.3, 1.6, .5, 1) .7s both; }
}
@keyframes joy-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes joy-say-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* 6. Feinschliff */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.level-card, .area-card, .game-card, .course-card { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s ease; }
	.level-card:hover, .area-card:hover, .game-card:hover, .course-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
}

/* 7. Weniger Bewegung: keine Teilchen, keine Hüpfer */
@media (prefers-reduced-motion: reduce) {
	.hl__layer { transition: none; transform: none; }
	.joy-fx { display: none; }
	.ex.is-correct { animation: none; }
}

/* 8. Bereichskarten: Bild oben, sanft bewegt (nur transform/opacity) */
.area-card { padding-top: 0; }
.area-art {
	position: relative; margin: 0 -24px; padding: 14px 20px 6px;
	background: var(--accent-soft);
	overflow: hidden;
}
.area-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--surface) 55%, transparent), transparent 75%); pointer-events: none; }
.area-art__svg { position: relative; }
.area-art__svg { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; overflow: visible; }
.area-art__tagrow { margin: 16px 0 0; }
.area-art__tagrow .level-card__stage { display: inline-block; }
.area-card .level-card__title { margin-top: 10px; }

.area-art__svg .an-float, .area-art__svg .an-sway, .area-art__svg .an-hop,
.area-art__svg .an-pulse, .area-art__svg .an-twinkle, .area-art__svg .an-wave, .area-art__svg .an-glow {
	transform-box: fill-box; transform-origin: var(--o, 50% 50%);
}
@media (prefers-reduced-motion: no-preference) {
	.area-art__svg .an-float   { animation: ar-float 3.6s ease-in-out var(--d, 0s) infinite; }
	.area-art__svg .an-sway    { animation: ar-sway 3.2s ease-in-out var(--d, 0s) infinite; }
	.area-art__svg .an-hop     { animation: ar-hop 2.8s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) infinite; }
	.area-art__svg .an-pulse   { animation: ar-pulse 2.2s ease-in-out var(--d, 0s) infinite; }
	.area-art__svg .an-twinkle { animation: ar-twinkle 2.4s ease-in-out var(--d, 0s) infinite; }
	.area-art__svg .an-wave    { animation: ar-wave 1.8s ease-in-out var(--d, 0s) infinite; }
	.area-art__svg .an-glow    { animation: ar-glow 2.6s ease-in-out infinite; }
	.area-card:hover .area-art__svg .an-float,
	.area-card:hover .area-art__svg .an-hop { animation-duration: 1.6s; }
}
@keyframes ar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ar-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ar-hop { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-12px) rotate(-6deg); } 40% { transform: translateY(0) rotate(3deg); } }
@keyframes ar-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes ar-twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ar-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ar-glow { 0%, 100% { opacity: .18; transform: scale(.92); } 50% { opacity: .38; transform: scale(1.06); } }
.area-card::before { z-index: 3; }