/* YessFish Realistische Vis Animaties - Nederlandse Vissoorten */

/* Verberg oude emoji vissen */
.fish-1, .fish-2, .fish-3, .fish-4, .fish-5 {
    display: none !important;
}

/* Realistische Vis Containers */
.realistic-fish {
    position: fixed;
    pointer-events: none;
    z-index: -9;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    will-change: transform;
}

/* Karper - Groot en rustig zwemmend */
.fish-carp {
    width: 120px;
    height: 60px;
    background: linear-gradient(135deg, #8B6914 0%, #D4AF37 50%, #8B6914 100%);
    border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
    animation: swimCarp 35s linear infinite;
    top: 55%;
    opacity: 0.7;
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.3), inset 10px 10px 20px rgba(255,255,255,0.2);
}

.fish-carp::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, rgba(139,105,20,0.8), rgba(212,175,55,0.6));
    border-radius: 50% 0 0 50%;
    left: -15px;
    top: 15px;
    transform: rotate(20deg);
}

.fish-carp::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(0,0,0,0.8) 40%, transparent 70%);
    border-radius: 50%;
    left: 15px;
    top: 20px;
}

/* Snoek - Lang en snel */
.fish-pike {
    width: 150px;
    height: 30px;
    background: linear-gradient(90deg, #3D5A3D 0%, #6B8E6B 30%, #8FAF8F 50%, #6B8E6B 70%, #3D5A3D 100%);
    border-radius: 0 50% 50% 0;
    animation: swimPike 25s linear infinite;
    top: 30%;
    opacity: 0.75;
    position: relative;
    animation-delay: -10s;
}

.fish-pike::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(61,90,61,0.9), rgba(107,142,107,0.7));
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    right: -20px;
    top: -5px;
}

.fish-pike::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255,200,0,0.9) 30%, rgba(0,0,0,0.8) 50%, transparent 70%);
    border-radius: 50%;
    left: 20px;
    top: 10px;
}

/* Baars - Klassieke vorm met strepen */
.fish-perch {
    width: 80px;
    height: 50px;
    background: linear-gradient(90deg,
        #4A5F3D 0%, #5C7A4D 15%,
        #4A5F3D 20%, #5C7A4D 35%,
        #4A5F3D 40%, #5C7A4D 55%,
        #4A5F3D 60%, #5C7A4D 75%,
        #4A5F3D 80%, #5C7A4D 95%, #4A5F3D 100%);
    border-radius: 50% 40% 40% 50% / 50% 50% 50% 50%;
    animation: swimPerch 28s linear infinite;
    top: 45%;
    opacity: 0.7;
    animation-delay: -5s;
}

.fish-perch::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 35px;
    background: linear-gradient(180deg, rgba(200,50,50,0.8), transparent);
    clip-path: polygon(50% 0%, 0% 70%, 100% 70%);
    left: 30px;
    top: -5px;
}

.fish-perch::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(255,200,0,0.9) 30%, rgba(0,0,0,0.8) 50%, transparent 70%);
    border-radius: 50%;
    left: 12px;
    top: 18px;
}

/* Brasem - Platter en zilverachtig */
.fish-bream {
    width: 90px;
    height: 65px;
    background: linear-gradient(135deg, #B0B8C0 0%, #D8E0E8 50%, #B0B8C0 100%);
    border-radius: 45% 55% 55% 45% / 60% 60% 40% 40%;
    animation: swimBream 32s linear infinite;
    top: 70%;
    opacity: 0.65;
    animation-delay: -20s;
}

.fish-bream::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, rgba(176,184,192,0.8), rgba(216,224,232,0.6));
    border-radius: 0 50% 50% 0;
    right: -10px;
    top: 20px;
}

.fish-bream::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(0,0,0,0.7) 40%, transparent 70%);
    border-radius: 50%;
    left: 15px;
    top: 25px;
}

/* Kleine visjes - Scholen */
.fish-small {
    width: 30px;
    height: 15px;
    background: linear-gradient(90deg, #7BA8B8 0%, #A5C9D8 50%, #7BA8B8 100%);
    border-radius: 50%;
    opacity: 0.5;
    position: fixed;
    pointer-events: none;
    z-index: -9;
}

.fish-school-1 {
    animation: swimSchool1 18s linear infinite;
    top: 20%;
}

.fish-school-2 {
    animation: swimSchool1 18s linear infinite;
    top: 22%;
    animation-delay: -0.3s;
}

.fish-school-3 {
    animation: swimSchool1 18s linear infinite;
    top: 24%;
    animation-delay: -0.6s;
}

.fish-school-4 {
    animation: swimSchool2 22s linear infinite;
    top: 75%;
    animation-delay: -8s;
}

.fish-school-5 {
    animation: swimSchool2 22s linear infinite;
    top: 77%;
    animation-delay: -8.4s;
}

.fish-school-6 {
    animation: swimSchool2 22s linear infinite;
    top: 79%;
    animation-delay: -8.8s;
}

/* Zwem Animaties - CORRECT GERICHT */

/* Karper - Links naar rechts (groot en rustig) */
@keyframes swimCarp {
    0% {
        left: -150px;
        transform: translateY(0px) scaleX(1);
    }
    25% {
        transform: translateY(-15px) scaleX(1);
    }
    50% {
        transform: translateY(10px) scaleX(1);
    }
    75% {
        transform: translateY(-8px) scaleX(1);
    }
    100% {
        left: calc(100% + 150px);
        transform: translateY(0px) scaleX(1);
    }
}

/* Snoek - Links naar rechts (snel en recht) */
@keyframes swimPike {
    0% {
        left: -180px;
        transform: translateY(0px) rotate(0deg) scaleX(1);
    }
    30% {
        transform: translateY(-20px) rotate(-3deg) scaleX(1);
    }
    60% {
        transform: translateY(15px) rotate(2deg) scaleX(1);
    }
    100% {
        left: calc(100% + 180px);
        transform: translateY(0px) rotate(0deg) scaleX(1);
    }
}

/* Baars - Rechts naar links (omgekeerd) */
@keyframes swimPerch {
    0% {
        left: calc(100% + 100px);
        transform: translateY(0px) scaleX(-1);
    }
    25% {
        transform: translateY(12px) scaleX(-1);
    }
    50% {
        transform: translateY(-10px) scaleX(-1);
    }
    75% {
        transform: translateY(8px) scaleX(-1);
    }
    100% {
        left: -100px;
        transform: translateY(0px) scaleX(-1);
    }
}

/* Brasem - Links naar rechts (langzaam) */
@keyframes swimBream {
    0% {
        left: -120px;
        transform: translateY(0px) rotate(0deg) scaleX(1);
    }
    20% {
        transform: translateY(-12px) rotate(-2deg) scaleX(1);
    }
    40% {
        transform: translateY(8px) rotate(3deg) scaleX(1);
    }
    60% {
        transform: translateY(-6px) rotate(-1deg) scaleX(1);
    }
    80% {
        transform: translateY(10px) rotate(2deg) scaleX(1);
    }
    100% {
        left: calc(100% + 120px);
        transform: translateY(0px) rotate(0deg) scaleX(1);
    }
}

/* Kleine visjes school - Links naar rechts */
@keyframes swimSchool1 {
    0% {
        left: -40px;
        transform: translateY(0px) scaleX(1);
    }
    100% {
        left: calc(100% + 40px);
        transform: translateY(8px) scaleX(1);
    }
}

/* Kleine visjes school - Rechts naar links */
@keyframes swimSchool2 {
    0% {
        left: calc(100% + 40px);
        transform: translateY(0px) scaleX(-1);
    }
    100% {
        left: -40px;
        transform: translateY(-8px) scaleX(-1);
    }
}

/* Extra detail: Vinnen beweging */
@keyframes finFlutter {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.8);
    }
}

/* Voeg subtiele vinbeweging toe aan vissen */
.fish-carp::before, .fish-pike::before {
    animation: finFlutter 2s ease-in-out infinite;
}

.fish-perch::before {
    animation: finFlutter 1.5s ease-in-out infinite;
}

.fish-bream::before {
    animation: finFlutter 2.5s ease-in-out infinite;
}

/* Grote vis die plots voorbij komt */
.fish-surprise {
    width: 200px;
    height: 80px;
    background: linear-gradient(135deg, #2C4A2C 0%, #4A6B4A 30%, #689068 50%, #4A6B4A 70%, #2C4A2C 100%);
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    position: fixed;
    pointer-events: none;
    z-index: -8;
    opacity: 0;
    animation: surpriseFish 60s ease-in-out infinite;
    top: 50%;
    filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.5));
}

.fish-surprise::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(44,74,44,0.9), rgba(74,107,74,0.7));
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    right: -30px;
    top: 10px;
}

.fish-surprise::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(255,220,0,0.9) 30%, rgba(0,0,0,0.8) 50%, transparent 70%);
    border-radius: 50%;
    left: 30px;
    top: 30px;
}

@keyframes surpriseFish {
    0% {
        left: -250px;
        opacity: 0;
        transform: translateY(0px) scale(0.5) scaleX(1);
    }
    5% {
        opacity: 0.9;
        transform: translateY(-30px) scale(1) scaleX(1);
    }
    12% {
        opacity: 0.9;
        transform: translateY(20px) scale(1.1) scaleX(1);
    }
    20% {
        opacity: 0;
        left: calc(100% + 250px);
        transform: translateY(0px) scale(0.8) scaleX(1);
    }
    100% {
        left: calc(100% + 250px);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .fish-carp, .fish-pike, .fish-bream, .fish-perch {
        transform: scale(0.7);
    }

    .fish-surprise {
        transform: scale(0.6);
    }
}