/* frontend/animations.css – CSS-Keyframe-Animationen für Herzlich Braut Weltmeister Challenge 2026 Elfmeter-Spiel */

/* 4a. Einlauf (Spieler) */
@keyframes playerRunIn {
    0%   { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0);       opacity: 1; }
}
.player-avatar { animation: playerRunIn 1s ease-out forwards; }

/* 4b. Ballflug - Treffer (ins Torsegment) */
@keyframes ballGoal {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(var(--ball-target-x), var(--ball-target-y)) rotate(720deg) scale(0.6); }
}

/* 4c. Ballflug - Daneben (außerhalb des Tors) */
@keyframes ballMiss {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(var(--ball-target-x), var(--ball-target-y)) rotate(360deg) scale(0.4); opacity: 0.3; }
}

/* 4d. Ballflug - Gehalten (zum Tor, zurückprallen, vor dem Tor liegenbleiben) */
@keyframes ballBounce {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    40%  { transform: translate(calc(var(--ball-target-x) * 0.8), var(--ball-goal-y)) rotate(288deg) scale(0.6); }
    60%  { transform: translate(calc(var(--ball-target-x) * 0.6), calc(var(--ball-goal-y) * 0.7)) rotate(432deg) scale(0.6); }
    100% { transform: translate(var(--ball-target-x), var(--ball-target-y)) rotate(720deg) scale(0.5); }
}

/* 4c. Torwart-Sprung */
@keyframes goalkeeperJump {
    0%   { transform: translateX(0) translateY(0); }
    50%  { transform: translateX(var(--jump-x)) translateY(-30px); }
    100% { transform: translateX(var(--jump-x)) translateY(0); }
}
.goalkeeper { animation: goalkeeperJump 0.6s ease-in-out forwards; }

/* 4d. Netz-Welle */
@keyframes netWave {
    0%   { transform: scaleX(1) scaleY(1); }
    25%  { transform: scaleX(1.05) scaleY(1.1); }
    50%  { transform: scaleX(0.98) scaleY(1.05); }
    75%  { transform: scaleX(1.02) scaleY(1.02); }
    100% { transform: scaleX(1) scaleY(1); }
}
.net { animation: netWave 0.8s ease-out forwards; }

/* 4e. Konfetti-Explosion */
@keyframes confettiFall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece { animation: confettiFall var(--duration,2s) ease-in forwards; }

/* 4f. Slow-Motion-Replay */
@keyframes slowMotion {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.slow-motion-overlay { animation: slowMotion 2s ease-in-out forwards; }

/* 4g. Ziel-Pulsieren */
@keyframes zonePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,204,0,0.7); }
    50%  { box-shadow: 0 0 0 15px rgba(255,204,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
}
.zone.selected { animation: zonePulse 0.8s ease-out; }

/* Modal-Pop-In */
@keyframes modalPopIn {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.modal-content { animation: modalPopIn 0.5s ease-out; }

/* 4j. Torwart-Fang */
@keyframes keeperCatch {
    0%   { transform: translateX(var(--jump-x)) translateY(0); }
    50%  { transform: translateX(var(--jump-x)) translateY(-40px) scale(1.1); }
    100% { transform: translateX(var(--jump-x)) translateY(0) scale(1); }
}
.goalkeeper.catching { animation: keeperCatch 0.6s ease-in-out forwards; }