/* =========================================================
   CreditScorium – animierte SVG-Szenen (reines CSS)
   Jede Szene läuft nur, solange sie sichtbar ist (.is-playing via JS).
   ========================================================= */

.scene { --ink: #14121F; --red: #E5203A; --ok: #1FB863; width: 100%; margin: 0 auto; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene g, .scene path, .scene rect, .scene circle, .scene text, .scene ellipse { transform-box: fill-box; transform-origin: center; }
.scene text { font-family: var(--font-display, "Inter Display", system-ui, sans-serif); font-weight: 900; text-anchor: middle; }
.scene:not(.is-playing) * { animation-play-state: paused !important; }

/* ---------- Figur ---------- */
.scene .floor { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .2; fill: none; }
.scene .torso { fill: var(--ink); }
.scene .arm, .scene .leg { transform-origin: 50% 0; }
.scene .arm path, .scene .leg path { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; fill: none; }
.scene .head { transform-origin: 50% 100%; }
.scene .skull { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.scene .eye { fill: var(--ink); }
.scene .mouth { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.scene .mouth-open { fill: var(--ink); }
.scene .brows { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; }
.scene .fig-shadow { fill: var(--ink); opacity: .14; }
.scene .fig-bounce { transform-origin: 50% 100%; }

/* =========================================================
   Szene 1: Briefe & Inkasso (12 s)
   ========================================================= */
.scene-stress { --still: -8.5s; }
.s1-letter { animation: s1-letter 12s cubic-bezier(.3, .75, .3, 1) infinite both; }
.s1-letter .paper { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.s1-letter .flap { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.s1-letter .stamp { transform: rotate(-9deg); }
.s1-letter .stamp rect { fill: #fff; stroke: var(--red); stroke-width: 1.8; }
.s1-letter .stamp text { fill: var(--red); font-size: 8.5px; letter-spacing: .04em; }
@keyframes s1-letter {
  0%      { transform: translate(var(--fx), var(--fy)) rotate(-140deg) scale(.5); opacity: 0; }
  2%      { opacity: 1; }
  9%      { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(1.05); }
  11%     { transform: translate(var(--sx), calc(var(--sy) - 9px)) rotate(var(--sr)) scale(1); }
  13%, 46% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(1); opacity: 1; }
  56%, 92% { transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1); opacity: 1; }
  100%    { transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1); opacity: 0; }
}

.s1-face { animation: s1-look 12s ease-in-out infinite; }
@keyframes s1-look {
  0%, 10% { transform: translateX(0); } 14% { transform: translateX(-5px); } 20% { transform: translateX(5px); }
  26% { transform: translateX(-5px); } 32% { transform: translateX(5px); } 38% { transform: translateX(-4px); } 44%, 100% { transform: translateX(0); }
}
.s1-head { animation: s1-head 12s ease-in-out infinite; }
@keyframes s1-head {
  0%, 12% { transform: rotate(0); } 18% { transform: rotate(-7deg); } 26% { transform: rotate(6deg); }
  34% { transform: rotate(-6deg); } 42% { transform: rotate(5deg); } 48%, 60% { transform: rotate(0); }
  66% { transform: rotate(-5deg); } 74% { transform: rotate(5deg); } 82%, 100% { transform: rotate(0); }
}
.s1-m-worry { animation: s1-worry 12s infinite; }
.s1-m-smile { animation: s1-smile 12s infinite; }
@keyframes s1-worry { 0%, 50% { opacity: 1; } 53%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s1-smile { 0%, 51% { opacity: 0; } 54%, 96% { opacity: 1; } 100% { opacity: 0; } }

.s1-arm-r { animation: s1-arm-r 12s ease-in-out infinite; }
@keyframes s1-arm-r {
  0%, 12% { transform: rotate(-12deg); } 16% { transform: rotate(-176deg); } 19% { transform: rotate(-158deg); }
  22% { transform: rotate(-176deg); } 25% { transform: rotate(-158deg); } 28% { transform: rotate(-176deg); }
  31% { transform: rotate(-158deg); } 34% { transform: rotate(-176deg); } 37% { transform: rotate(-158deg); }
  40% { transform: rotate(-176deg); } 46%, 60% { transform: rotate(-12deg); }
  64% { transform: rotate(-148deg); } 70% { transform: rotate(-122deg); } 76% { transform: rotate(-148deg); }
  82% { transform: rotate(-122deg); } 88% { transform: rotate(-148deg); } 94%, 100% { transform: rotate(-12deg); }
}
.s1-arm-l { animation: s1-arm-l 12s ease-in-out infinite; }
@keyframes s1-arm-l {
  0%, 60% { transform: rotate(12deg); } 64% { transform: rotate(148deg); } 70% { transform: rotate(122deg); }
  76% { transform: rotate(148deg); } 82% { transform: rotate(122deg); } 88% { transform: rotate(148deg); } 94%, 100% { transform: rotate(12deg); }
}
.s1-bounce { animation: s1-bounce 12s ease-in-out infinite; }
@keyframes s1-bounce {
  0%, 62% { transform: translateY(0); } 66% { transform: translateY(-14px); } 70% { transform: translateY(0); }
  74% { transform: translateY(-14px); } 78% { transform: translateY(0); } 82% { transform: translateY(-14px); } 86%, 100% { transform: translateY(0); }
}

.scene-stress .qm text { font-size: 42px; fill: #fff; stroke: var(--ink); stroke-width: 2.5; paint-order: stroke; }
.s1-q1, .s1-q2, .s1-q3 { animation: s1-q 12s ease-out infinite both; }
.s1-q2 { animation-delay: .5s; }
.s1-q3 { animation-delay: 1s; }
@keyframes s1-q {
  0%, 12% { transform: scale(0) rotate(-30deg); opacity: 0; }
  16% { transform: scale(1.35) rotate(12deg); opacity: 1; }
  19% { transform: scale(1) rotate(0); }
  28% { transform: translateY(-7px) rotate(-10deg); }
  38% { transform: translateY(0) rotate(10deg); }
  44% { transform: scale(1) rotate(0); opacity: 1; }
  49%, 100% { transform: scale(0); opacity: 0; }
}
.s1-drop { fill: #4CC9F0; stroke: var(--ink); stroke-width: 1.5; animation: s1-drop 12s ease-in infinite; }
@keyframes s1-drop {
  0%, 15% { opacity: 0; transform: translateY(0); } 17% { opacity: 1; } 25% { opacity: 0; transform: translateY(16px); }
  27% { opacity: 0; transform: translateY(0); } 29% { opacity: 1; } 37% { opacity: 0; transform: translateY(16px); } 38%, 100% { opacity: 0; }
}
.s1-badge { animation: s1-badge 12s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes s1-badge {
  0%, 44% { transform: scale(0) rotate(-200deg); } 49% { transform: scale(1.3) rotate(12deg); } 52% { transform: scale(1) rotate(0); }
  56% { transform: translateY(-5px); } 60%, 92% { transform: translateY(0) scale(1); } 97%, 100% { transform: scale(0); }
}
.scene .burst circle { fill: none; stroke: #fff; stroke-width: 3; }
.s1-badge .burst { animation: s1-burst 12s ease-out infinite; }
@keyframes s1-burst { 0%, 47% { transform: scale(.4); opacity: 0; } 49% { opacity: 1; } 58%, 100% { transform: scale(1.9); opacity: 0; } }
.scene .spark path { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.s1-sp1, .s1-sp2, .s1-sp3 { animation: s1-spark 12s ease-out infinite both; }
.s1-sp2 { animation-delay: .25s; } .s1-sp3 { animation-delay: .5s; }
@keyframes s1-spark { 0%, 48% { transform: scale(0) rotate(0); } 52% { transform: scale(1.3) rotate(90deg); } 57%, 100% { transform: scale(0) rotate(180deg); } }
.scene .bubble rect, .scene .bubble path { fill: #fff; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.scene .bubble text { font-size: 17px; fill: var(--ink); }
.s1-bubble { transform-origin: 30% 100%; animation: s1-bubble 12s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes s1-bubble { 0%, 64% { transform: scale(0); } 68% { transform: scale(1.12); } 71%, 90% { transform: scale(1); } 94%, 100% { transform: scale(0); } }

/* =========================================================
   Szene 2: Online-Shopping (10 s)
   ========================================================= */
.scene-shopper { --still: -7.2s; }
.s2-phone .ph-body { fill: var(--ink); }
.s2-phone .ph-screen { fill: #fff; }
.s2-phone { animation: s2-phone 10s ease-in-out infinite; }
@keyframes s2-phone {
  0%, 14% { transform: translate(0, 0) rotate(0); } 16% { transform: translate(-5px, 0) rotate(-4deg); } 18% { transform: translate(5px, 0) rotate(4deg); }
  20% { transform: translate(-5px, 0) rotate(-4deg); } 22% { transform: translate(5px, 0) rotate(3deg); } 24%, 52% { transform: translate(0, 0) rotate(0); }
  55% { transform: scale(1.08) rotate(-2deg); } 58%, 100% { transform: scale(1) rotate(0); }
}
.s2-cart .cart { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.s2-cart circle { fill: var(--ink); }
.s2-cart { animation: s2-cart 10s infinite; }
@keyframes s2-cart { 0%, 12% { opacity: 1; transform: scale(1); } 14%, 97% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
.s2-cart .dots circle { animation: s2-dot .5s ease-in-out infinite alternate; }
.s2-cart .dots circle:nth-child(2) { animation-delay: .15s; } .s2-cart .dots circle:nth-child(3) { animation-delay: .3s; }
@keyframes s2-dot { to { transform: translateY(-5px); opacity: .4; } }
.s2-deny .deny-c { fill: #FF5C5C; }
.s2-deny .deny-x { stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
.s2-deny .deny-t { fill: var(--red); font-size: 11.5px; }
.s2-deny { animation: s2-deny 10s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes s2-deny { 0%, 13% { transform: scale(0); } 16% { transform: scale(1.25); } 18%, 48% { transform: scale(1); } 52%, 100% { transform: scale(0); } }
.s2-ok .ok-c { fill: var(--ok); }
.s2-ok .ok-v { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.s2-ok .ok-t { fill: #13864A; font-size: 11px; }
.s2-ok { animation: s2-ok 10s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes s2-ok { 0%, 52% { transform: scale(0); } 56% { transform: scale(1.25); } 58%, 93% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

.scene .toast rect { fill: #FF5C5C; stroke: var(--ink); stroke-width: 2; }
.scene .toast text { fill: #fff; font-size: 10.5px; }
.s2-t1 { --tx: -150px; --ty: -36px; --r: -14deg; }
.s2-t2 { --tx: 96px; --ty: -46px; --r: 12deg; animation-delay: .7s !important; }
.s2-t3 { --tx: -60px; --ty: -88px; --r: -6deg; animation-delay: 1.4s !important; }
.s2-t1, .s2-t2, .s2-t3 { animation: s2-toast 10s cubic-bezier(.2, .8, .3, 1) infinite both; }
@keyframes s2-toast {
  0%, 15% { transform: translate(0, 0) scale(0); opacity: 0; } 18% { transform: translate(0, 0) scale(1); opacity: 1; }
  28% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r)); opacity: 1; }
  40% { transform: translate(var(--tx), calc(var(--ty) - 10px)) scale(1) rotate(var(--r)); opacity: 1; }
  45%, 100% { transform: translate(var(--tx), calc(var(--ty) - 14px)) scale(.8) rotate(var(--r)); opacity: 0; }
}

.s2-m-angry { animation: s2-angry 10s infinite; }
.s2-m-open { animation: s2-open 10s infinite; }
.s2-brows { animation: s2-brows 10s infinite; }
@keyframes s2-angry { 0%, 50% { opacity: 1; } 53%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s2-open { 0%, 51% { opacity: 0; } 54%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes s2-brows { 0%, 14% { opacity: 0; } 17%, 49% { opacity: 1; } 52%, 100% { opacity: 0; } }
.scene-shopper .skull { animation: s2-flush 10s infinite; }
@keyframes s2-flush { 0%, 15% { fill: #fff; } 22%, 46% { fill: #FFB8B8; } 52%, 100% { fill: #fff; } }
.s2-head { animation: s2-head 10s ease-in-out infinite; }
@keyframes s2-head {
  0%, 17% { transform: rotate(0); } 19% { transform: rotate(-5deg); } 21% { transform: rotate(5deg); } 23% { transform: rotate(-5deg); }
  25% { transform: rotate(4deg); } 27%, 60% { transform: rotate(0); } 66% { transform: rotate(-6deg); } 74% { transform: rotate(6deg); } 82%, 100% { transform: rotate(0); }
}
.s2-arm-r { animation: s2-arm-r 10s ease-in-out infinite; }
@keyframes s2-arm-r { 0%, 100% { transform: rotate(-78deg); } 16% { transform: rotate(-70deg); } 18% { transform: rotate(-84deg); } 20% { transform: rotate(-72deg); } 24% { transform: rotate(-78deg); } }
.s2-arm-l { animation: s2-arm-l 10s ease-in-out infinite; }
@keyframes s2-arm-l {
  0%, 18% { transform: rotate(14deg); } 22% { transform: rotate(160deg); } 25% { transform: rotate(140deg); } 28% { transform: rotate(160deg); }
  31% { transform: rotate(140deg); } 34% { transform: rotate(160deg); } 37% { transform: rotate(140deg); } 40% { transform: rotate(160deg); }
  46%, 58% { transform: rotate(14deg); } 62% { transform: rotate(150deg); } 68% { transform: rotate(118deg); } 74% { transform: rotate(150deg); }
  80% { transform: rotate(118deg); } 86% { transform: rotate(150deg); } 92%, 100% { transform: rotate(14deg); }
}
.s2-bounce { animation: s2-bounce 10s ease-in-out infinite; }
@keyframes s2-bounce {
  0%, 18% { transform: translateY(0); } 20% { transform: translateY(-4px) scale(1.02, .98); } 22%, 60% { transform: translateY(0); }
  64% { transform: translateY(-16px); } 68% { transform: translateY(0); } 72% { transform: translateY(-16px); } 76% { transform: translateY(0); }
  80% { transform: translateY(-16px); } 84%, 100% { transform: translateY(0); }
}
.s2-scribble path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.s2-scribble { animation: s2-scribble 10s linear infinite; }
@keyframes s2-scribble { 0%, 17% { transform: scale(0) rotate(0); } 20% { transform: scale(1.1) rotate(20deg); } 46% { transform: scale(1) rotate(300deg); } 50%, 100% { transform: scale(0) rotate(360deg); } }
.scene .puff circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.s2-puff1, .s2-puff2 { animation: s2-puff 10s ease-out infinite both; }
.s2-puff2 { animation-delay: .4s; }
@keyframes s2-puff {
  0%, 18% { transform: translateY(0) scale(0); opacity: 0; } 20% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(-28px) scale(1.5); opacity: 0; } 31% { transform: translateY(0) scale(0); opacity: 0; }
  33% { transform: translateY(0) scale(1); opacity: 1; } 43% { transform: translateY(-28px) scale(1.5); opacity: 0; } 44%, 100% { opacity: 0; }
}
.scene .box rect { fill: #E8B06A; stroke: var(--ink); stroke-width: 2.5; }
.scene .box path { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.s2-box1, .s2-box2, .s2-box3 { transform-origin: 50% 100%; animation: s2-box 10s cubic-bezier(.5, 0, .7, .4) infinite both; }
.s2-box2 { animation-delay: .35s; } .s2-box3 { animation-delay: .7s; }
@keyframes s2-box {
  0%, 55% { transform: translateY(-300px); opacity: 0; } 56% { opacity: 1; }
  61% { transform: translateY(0) scale(1.12, .86); animation-timing-function: ease-out; }
  64% { transform: translateY(-12px) scale(1); } 67%, 94% { transform: translateY(0) scale(1); opacity: 1; } 98%, 100% { transform: translateY(0); opacity: 0; }
}
.scene .heart path { fill: #FF5C5C; stroke: var(--ink); stroke-width: 1.8; }
.s2-h1, .s2-h2, .s2-h3 { animation: s2-heart 10s ease-out infinite both; }
.s2-h2 { animation-delay: .4s; } .s2-h3 { animation-delay: .8s; }
@keyframes s2-heart { 0%, 64% { transform: translateY(0) scale(0); opacity: 0; } 68% { transform: translateY(0) scale(1.3); opacity: 1; } 88% { transform: translateY(-46px) scale(1) rotate(-12deg); opacity: 1; } 94%, 100% { transform: translateY(-60px) scale(.6); opacity: 0; } }

/* =========================================================
   Szene 3: Wohnungssuche (11 s)
   ========================================================= */
.scene-wohnung { --still: -8.2s; }
.scene-wohnung .roof { fill: #7B5CFF; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.scene-wohnung .walls { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.scene-wohnung .win { stroke: var(--ink); stroke-width: 3; animation: s3-win 11s infinite; }
@keyframes s3-win { 0%, 60% { fill: #2B3050; } 63%, 95% { fill: #FFC83D; } 100% { fill: #2B3050; } }
.scene-wohnung .door-frame { fill: var(--ink); }
.s3-door rect { fill: #FF5C5C; stroke: var(--ink); stroke-width: 3; }
.s3-door circle { fill: var(--ink); }
.s3-door { transform-origin: 0 50%; animation: s3-door 11s ease-in-out infinite; }
@keyframes s3-door { 0%, 62% { transform: scaleX(1); } 67%, 93% { transform: scaleX(.18); } 98%, 100% { transform: scaleX(1); } }
.s3-key circle { fill: #FFC83D; stroke: var(--ink); stroke-width: 3; }
.s3-key .key-hole { fill: var(--ink); stroke: none; }
.s3-key path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.s3-key { animation: s3-key 11s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes s3-key { 0%, 63% { transform: scale(0) rotate(-90deg); } 67% { transform: scale(1.3) rotate(15deg); } 70% { transform: scale(1) rotate(0); } 76% { transform: rotate(-12deg); } 82% { transform: rotate(10deg); } 88%, 92% { transform: rotate(0) scale(1); } 96%, 100% { transform: scale(0); } }

.scene-wohnung .clock { fill: #fff; stroke: var(--ink); stroke-width: 3.5; }
.scene-wohnung .clock-pin { fill: var(--ink); }
.s3-hand-m path, .s3-hand-h path { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.s3-hand-m { transform-origin: 50% 100%; animation: s3-min 11s linear infinite; }
.s3-hand-h { transform-origin: 0 50%; animation: s3-hour 11s linear infinite; }
@keyframes s3-min { 0% { transform: rotate(0); } 52%, 100% { transform: rotate(2880deg); } }
@keyframes s3-hour { 0% { transform: rotate(0); } 52%, 100% { transform: rotate(240deg); } }

.s3-cal rect { fill: #fff; stroke: var(--ink); stroke-width: 2.8; }
.s3-cal .cal-top { fill: #FF5C5C; stroke: none; }
.s3-cal .cal-l { fill: #fff; font-size: 8.5px; letter-spacing: .1em; }
.s3-cal .d { fill: var(--ink); font-size: 26px; opacity: 0; }
.s3-cal .d1 { animation: s3-d1 11s infinite; } .s3-cal .d2 { animation: s3-d2 11s infinite; }
.s3-cal .d3 { animation: s3-d3 11s infinite; } .s3-cal .d4 { animation: s3-d4 11s infinite; } .s3-cal .d5 { animation: s3-d5 11s infinite; }
@keyframes s3-d1 { 0%, 9% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes s3-d2 { 0%, 9% { opacity: 0; } 10%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes s3-d3 { 0%, 19% { opacity: 0; } 20%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes s3-d4 { 0%, 29% { opacity: 0; } 30%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes s3-d5 { 0%, 39% { opacity: 0; } 40%, 96% { opacity: 1; } 100% { opacity: 0; } }
.s3-cal { animation: s3-cal 11s ease-in-out infinite; }
@keyframes s3-cal {
  0%, 8% { transform: rotate(0); } 10% { transform: rotate(-10deg) scale(1.1); } 12%, 18% { transform: rotate(0); } 20% { transform: rotate(10deg) scale(1.1); }
  22%, 28% { transform: rotate(0); } 30% { transform: rotate(-10deg) scale(1.1); } 32%, 38% { transform: rotate(0); } 40% { transform: rotate(10deg) scale(1.15); } 43%, 100% { transform: rotate(0); }
}
.scene-wohnung .zz text { font-size: 20px; fill: var(--ink); }
.s3-z1, .s3-z2, .s3-z3 { animation: s3-z 11s ease-out infinite both; }
.s3-z2 { animation-delay: .4s; } .s3-z3 { animation-delay: .8s; }
@keyframes s3-z { 0%, 26% { transform: translate(0, 0) scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 46% { transform: translate(10px, -16px) scale(1); opacity: 1; } 50%, 100% { transform: translate(14px, -22px) scale(.6); opacity: 0; } }

.s3-m-worry { animation: s3-worry 11s infinite; }
.s3-m-open { animation: s3-open 11s infinite; }
@keyframes s3-worry { 0%, 59% { opacity: 1; } 62%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s3-open { 0%, 60% { opacity: 0; } 63%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
.s3-leg-r { animation: s3-tap 11s ease-in-out infinite; }
@keyframes s3-tap {
  0% { transform: rotate(0); } 3% { transform: rotate(-16deg); } 6% { transform: rotate(0); } 9% { transform: rotate(-16deg); } 12% { transform: rotate(0); }
  15% { transform: rotate(-16deg); } 18% { transform: rotate(0); } 21% { transform: rotate(-16deg); } 24%, 100% { transform: rotate(0); }
}
.s3-head { animation: s3-head 11s ease-in-out infinite; }
@keyframes s3-head { 0%, 24% { transform: rotate(0); } 30%, 50% { transform: rotate(14deg) translateY(4px); } 56%, 62% { transform: rotate(-8deg); } 68% { transform: rotate(6deg); } 76%, 100% { transform: rotate(0); } }
.s3-bounce { animation: s3-droop 11s ease-in-out infinite; }
@keyframes s3-droop { 0%, 26% { transform: scaleY(1); } 32%, 50% { transform: scaleY(.93); } 56%, 64% { transform: scaleY(1); } 68% { transform: translateY(-8px); } 72% { transform: translateY(0); } 76% { transform: translateY(-8px); } 80%, 100% { transform: translateY(0); } }
.s3-arm-r { animation: s3-arm-r 11s ease-in-out infinite; }
@keyframes s3-arm-r { 0%, 62% { transform: rotate(-24deg); } 66% { transform: rotate(-150deg); } 72% { transform: rotate(-120deg); } 78% { transform: rotate(-150deg); } 84% { transform: rotate(-120deg); } 90% { transform: rotate(-150deg); } 96%, 100% { transform: rotate(-24deg); } }
.s3-arm-l { animation: s3-arm-l 11s ease-in-out infinite; }
@keyframes s3-arm-l { 0%, 54% { transform: rotate(10deg); } 59%, 95% { transform: rotate(58deg); } 100% { transform: rotate(10deg); } }

.s3-plane .plane { fill: #fff; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.s3-plane .plane-fold { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.s3-plane { animation: s3-plane 11s ease-in-out infinite; }
@keyframes s3-plane {
  0%, 50% { transform: translate(-40px, 40px) rotate(10deg); opacity: 0; } 51% { opacity: 1; }
  54% { transform: translate(140px, 30px) rotate(-6deg); } 57% { transform: translate(240px, 120px) rotate(40deg); }
  59.5% { transform: translate(282px, 216px) rotate(60deg) scale(1); opacity: 1; } 60.5%, 100% { transform: translate(286px, 222px) scale(0); opacity: 0; }
}
.s3-doc rect { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.s3-doc .doc-l { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.s3-doc .doc-c { fill: var(--ok); }
.s3-doc .doc-v { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s3-doc { animation: s3-doc 11s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes s3-doc { 0%, 59.5% { transform: scale(0) rotate(-30deg); } 63% { transform: scale(1.25) rotate(6deg); } 66%, 93% { transform: scale(1) rotate(-4deg); } 97%, 100% { transform: scale(0); } }

/* =========================================================
   Szene 4: Freude (Endlosschleife)
   ========================================================= */
.scene-happy { --still: -.6s; }
.s4-bounce { animation: s4-jump 1.3s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes s4-jump {
  0% { transform: translateY(0) scale(1.08, .9); } 15% { transform: translateY(0) scale(.95, 1.07); }
  45% { transform: translateY(-50px) scale(1); } 72% { transform: translateY(0) scale(1.07, .91); } 100% { transform: translateY(0) scale(1.08, .9); }
}
.s4-shadow { animation: s4-shadow 1.3s cubic-bezier(.3, .7, .4, 1) infinite; }
@keyframes s4-shadow { 0%, 100% { transform: scale(1); } 45% { transform: scale(.55); opacity: .07; } }
.s4-arm-l { animation: s4-arm-l .65s ease-in-out infinite alternate; }
.s4-arm-r { animation: s4-arm-r .65s ease-in-out infinite alternate; }
@keyframes s4-arm-l { from { transform: rotate(150deg); } to { transform: rotate(115deg); } }
@keyframes s4-arm-r { from { transform: rotate(-150deg); } to { transform: rotate(-115deg); } }
.s4-head { animation: s4-head 1.3s ease-in-out infinite; }
@keyframes s4-head { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.scene .confetti { animation-name: s4-fall; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
@keyframes s4-fall { 0% { transform: translate(0, -20px) rotate(0); opacity: 0; } 6% { opacity: 1; } 100% { transform: translate(var(--drift), 320px) rotate(600deg); opacity: 1; } }
.c-li { fill: #7B5CFF; } .c-co { fill: #FF5C5C; } .c-sk { fill: #4CC9F0; } .c-su { fill: #FFC83D; } .c-in { fill: var(--ink); }

.scene .ring circle { fill: none; stroke: #fff; stroke-width: 4; }
.s4-r1, .s4-r2 { animation: s4-ring 2.4s ease-out infinite both; }
.s4-r2 { animation-delay: 1.2s; }
@keyframes s4-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

.s4-score rect, .s4-score .tail { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.s4-score .sc-n { font-size: 32px; fill: var(--ink); }
.s4-score .sc-c { fill: var(--ok); }
.s4-score .sc-v { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s4-score { transform-origin: 20% 100%; animation: s4-score 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes s4-score { 0%, 100% { transform: scale(1) rotate(0); } 12% { transform: scale(1.14) rotate(-4deg); } 24% { transform: scale(1) rotate(0); } }

.scene .star path { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.s4-st1, .s4-st2, .s4-st3 { animation: s4-star 1.6s ease-in-out infinite alternate; }
.s4-st2 { animation-delay: .5s; } .s4-st3 { animation-delay: 1s; }
@keyframes s4-star { from { transform: scale(.5) rotate(0); } to { transform: scale(1.2) rotate(90deg); } }

/* Barrierefreiheit: bei "Bewegung reduzieren" ein ruhiges Standbild zeigen */
@media (prefers-reduced-motion: reduce) {
  .scene * { animation-delay: var(--still, -6s) !important; animation-play-state: paused !important; }
}