/* ===================================
   MOVACAM - Custom Sport Icons (SVG)
   Animationen NUR bei Hover
   =================================== */

/* Base Icon Styles */
.sport-icon-svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sport-icon-svg svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary);
    stroke-width: 1.5;
    fill: none;
    transition: var(--transition);
}

.sport-card:hover .sport-icon-svg svg {
    stroke: var(--accent);
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

/* ===================================
   ANIMATIONEN NUR BEI HOVER
   =================================== */

/* Swimming Icon Animation – nur bei Hover */
.sport-card:hover .icon-swimming svg .wave {
    animation: waveMotion 2s ease-in-out infinite;
}

@keyframes waveMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Running Icon Animation – nur bei Hover */
.sport-card:hover .icon-running svg .leg {
    transform-origin: center;
    animation: runCycle 0.8s ease-in-out infinite;
}

@keyframes runCycle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

/* Tennis Icon Animation – nur bei Hover */
.sport-card:hover .icon-tennis svg .ball {
    animation: ballBounce 1s ease-in-out infinite;
}

@keyframes ballBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Volleyball Icon Animation – nur bei Hover */
.sport-card:hover .icon-volleyball svg .ball {
    animation: volleySpin 3s linear infinite;
}

@keyframes volleySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Table Tennis Icon Animation – nur bei Hover */
.sport-card:hover .icon-tabletennis svg .paddle {
    transform-origin: bottom center;
    animation: paddleSwing 0.6s ease-in-out infinite;
}

@keyframes paddleSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Fitness Icon Animation – nur bei Hover */
.sport-card:hover .icon-fitness svg .weight {
    animation: weightLift 1.5s ease-in-out infinite;
}

@keyframes weightLift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Football Icon Animation – nur bei Hover */
.sport-card:hover .icon-football svg .ball {
    animation: footballRoll 2s linear infinite;
}

@keyframes footballRoll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Basketball Icon Animation – nur bei Hover */
.sport-card:hover .icon-basketball svg .ball {
    animation: basketballBounce 0.5s ease-in-out infinite;
}

@keyframes basketballBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(0.95); }
}

/* Badminton Icon Animation – nur bei Hover */
.sport-card:hover .icon-badminton svg .shuttlecock {
    animation: shuttleFly 1s ease-in-out infinite;
}

@keyframes shuttleFly {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}