/* ==========================================================================
   TORJUBEL-SZENE (js/celebrate.js) – 6-Sekunden-Loop, läuft nur wenn sichtbar
   ========================================================================== */
.celebrate-sec { overflow: hidden; }
.celebrate-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.4rem; align-items: center; }
.celebrate-copy h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; font-style: italic; margin: .5rem 0 .8rem; }
.celebrate-copy p { color: var(--muted); max-width: 440px; margin-bottom: 1.6rem; }
.scene { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, #10241a, var(--bg) 70%); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(57, 255, 143, .08); }
.scene svg { display: block; width: 100%; height: auto; }
.scene .fig { cursor: pointer; outline: none; }
.scene .fig:focus-visible .fig-label { fill: var(--accent); }
.scene .fig-label { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: 1.5px; fill: rgba(240, 255, 246, .85); }
.scene .goal-text text { font-family: var(--font-head); font-weight: 800; font-style: italic; font-size: 76px; fill: var(--accent); letter-spacing: 2px; transform: translate(-400px, -70px); }
.scene .goal-text { transform: translate(400px, 70px) scale(0); opacity: 0; }
.scene .ball-path { transform: translate(-30px, 300px); }
.scene .fl { fill: #fff; opacity: 0; }
.scene .cf { opacity: 0; }
.scene .arm-l { transform: rotate(12deg); }
.scene .arm-r { transform: rotate(-12deg); }

.scene * { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
.scene.playing * { animation-play-state: running; }

@media (prefers-reduced-motion: no-preference) {
  .scene .ball-path { animation-name: cs-ball; animation-timing-function: linear; }
  .scene .ball { animation-name: cs-spin; animation-timing-function: linear; }
  .scene .net { animation-name: cs-net; }
  .scene .goal-text { animation-name: cs-text; }
  .scene .cf { animation-name: cs-fall; animation-timing-function: linear; animation-delay: var(--d); }
  .scene .fl { animation-name: cs-flash; animation-duration: 3s; animation-delay: var(--d); }
  /* Mbappé: zweimal hochspringen, beide Arme hoch */
  .scene .fig-a .body { animation-name: a-body; }
  .scene .fig-a .arm-l { animation-name: a-arm-l; }
  .scene .fig-a .arm-r { animation-name: a-arm-r; }
  .scene .fig-a .fore-l { animation-name: a-fore-l; }
  .scene .fig-a .fore-r { animation-name: a-fore-r; }
  .scene .fig-a .leg-l { animation-name: a-leg-l; }
  .scene .fig-a .leg-r { animation-name: a-leg-r; }
  .scene .fig-a .shin-l { animation-name: a-shin-l; }
  .scene .fig-a .shin-r { animation-name: a-shin-r; }
  /* Pina: Faust pumpen, hüpfen, Kopf mitnehmen */
  .scene .fig-b .body { animation-name: b-body; }
  .scene .fig-b .arm-r { animation-name: b-arm-r; }
  .scene .fig-b .fore-r { animation-name: b-fore-r; }
  .scene .fig-b .arm-l { animation-name: b-arm-l; }
  .scene .fig-b .head { animation-name: b-head; transform-origin: 0 -70px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene .fig-a .arm-l { transform: rotate(155deg); }
  .scene .fig-a .arm-r { transform: rotate(-155deg); }
  .scene .fig-b .arm-r { transform: rotate(-125deg); }
  .scene .fig-b .fore-r { transform: rotate(60deg); }
  .scene .goal-text { transform: translate(400px, 70px) scale(1); opacity: 1; }
  .scene .ball-path { transform: translate(470px, 238px); }
}

@keyframes cs-ball { 0% { transform: translate(-30px, 300px); } 8% { transform: translate(120px, 214px); } 17% { transform: translate(470px, 168px); } 20% { transform: translate(482px, 236px); } 60% { transform: translate(470px, 238px); } 61%, 100% { transform: translate(-30px, 300px); } }
@keyframes cs-spin { 0% { transform: rotate(0); } 20%, 100% { transform: rotate(900deg); } }
@keyframes cs-net { 0%, 16% { transform: none; } 19% { transform: translate(6px, 2px); } 24%, 100% { transform: none; } }
@keyframes cs-text { 0%, 18% { transform: translate(400px, 70px) scale(0); opacity: 0; } 23% { transform: translate(400px, 70px) scale(1.18); opacity: 1; } 27%, 66% { transform: translate(400px, 70px) scale(1); opacity: 1; } 72%, 100% { transform: translate(400px, 70px) scale(.9); opacity: 0; } }
@keyframes cs-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(var(--x), 390px) rotate(var(--r)); opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes cs-flash { 0%, 92%, 100% { opacity: 0; } 95% { opacity: .9; } }

@keyframes a-body { 0%, 19% { transform: none; } 23% { transform: translateY(8px); } 30% { transform: translateY(-50px); } 37% { transform: none; } 41% { transform: translateY(8px); } 48% { transform: translateY(-50px); } 55%, 100% { transform: none; } }
@keyframes a-arm-l { 0%, 19% { transform: rotate(12deg); } 26%, 78% { transform: rotate(155deg); } 90%, 100% { transform: rotate(12deg); } }
@keyframes a-arm-r { 0%, 19% { transform: rotate(-12deg); } 26%, 78% { transform: rotate(-155deg); } 90%, 100% { transform: rotate(-12deg); } }
@keyframes a-fore-l { 0%, 19%, 90%, 100% { transform: rotate(-10deg); } 30%, 48% { transform: rotate(18deg); } 26%, 78% { transform: rotate(-12deg); } }
@keyframes a-fore-r { 0%, 19%, 90%, 100% { transform: rotate(10deg); } 30%, 48% { transform: rotate(-18deg); } 26%, 78% { transform: rotate(12deg); } }
@keyframes a-leg-l { 0%, 23%, 37%, 41%, 55%, 100% { transform: none; } 30%, 48% { transform: rotate(16deg); } }
@keyframes a-leg-r { 0%, 23%, 37%, 41%, 55%, 100% { transform: none; } 30%, 48% { transform: rotate(-16deg); } }
@keyframes a-shin-l { 0%, 23%, 37%, 41%, 55%, 100% { transform: none; } 30%, 48% { transform: rotate(-34deg); } }
@keyframes a-shin-r { 0%, 23%, 37%, 41%, 55%, 100% { transform: none; } 30%, 48% { transform: rotate(34deg); } }

@keyframes b-body { 0%, 20% { transform: none; } 26%, 38%, 50%, 62% { transform: translateY(-14px); } 32%, 44%, 56%, 68%, 100% { transform: none; } }
@keyframes b-arm-r { 0%, 19% { transform: rotate(-12deg); } 25%, 72% { transform: rotate(-125deg); } 82%, 100% { transform: rotate(-12deg); } }
@keyframes b-fore-r { 0%, 19%, 82%, 100% { transform: rotate(8deg); } 25%, 37%, 49%, 61% { transform: rotate(70deg); } 31%, 43%, 55%, 67% { transform: rotate(20deg); } }
@keyframes b-arm-l { 0%, 19%, 82%, 100% { transform: rotate(12deg); } 30%, 70% { transform: rotate(40deg); } }
@keyframes b-head { 0%, 20%, 80%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-6deg); } 45% { transform: rotate(5deg); } }

@media (max-width: 860px) {
  .celebrate-grid { grid-template-columns: 1fr; }
}