.fishContainer{
    position: absolute;
    z-index: 8;
    transition-property: top, left, rotate, transform;
    cursor: pointer;
}

[data-fish-selected="true"]{
    filter: brightness(150%) drop-shadow(0px 0px 25px #ffffff41);
}

[data-fish-selected="false"]{
    filter: brightness(100%);
}

.fishMovementContainer{
    position: relative;
}

.fishAnimations{
    position: relative;
}

.outline{
    filter: drop-shadow(0px 0px 0.65px #000000) drop-shadow(0px 0px 0.6px #000000);
}

.fishSpriteWrapper{
    position: relative;
    transition: rotate 4s;
}

.blurPlane{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
    width: 2000px;
    height: 100%;
    backdrop-filter: blur(10px);
    opacity: 0.2;
    animation: blurPlane 66s infinite;
}

.fishSprite{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fish-width, 100px);
    height: var(--fish-height, 50px);  
    z-index: 2;
}

.fin {
    position: absolute;
    left: var(--fin-posX, 0px);
    top: var(--fin-posY, 0px);
    width: var(--fin-width, 165px);
    height: var(--fin-height, 165px);
    z-index: 4;
}

.leg1 {
    position: absolute;
    left: var(--leg1-posX, 0px);
    top: var(--leg1-posY, 0px);
    width: var(--leg1-width, 165px);
    height: var(--leg1-height, 165px);
    z-index: 3;

    animation : leg1 0.6s infinite;
}

.leg2 {
    position: absolute;
    left: var(--leg2-posX, 0px);
    top: var(--leg2-posY, 0px);
    width: var(--leg2-width, 165px);
    height: var(--leg2-height, 165px);
    z-index: 3;
    animation : leg2 0.6s infinite;
}

@keyframes leg1 {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-4deg) translateY(-1px); }
    100% { transform: rotate(0deg); }
}

@keyframes leg2 {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg) translateY(-2px); }
    100% { transform: rotate(2deg); }
}

.backfin {
    position: absolute;
    left: var(--backfin-posX, 0px);
    top: var(--backfin-posY, 0px);
    width: var(--backfin-width, 165px);
    height: var(--backfin-height, 165px);
    z-index: 1;
    animation: backfin 1s infinite;
}

@keyframes backfin {
    0% { transform: scaleX(1) rotateZ(0deg) translateX(0px); }
    50% { transform: scaleX(0.95) rotateZ(1deg) translateX(-2px);}
    100% { transform: scaleX(1) rotateZ(0deg) translateX(0px);}
}

@keyframes blurPlane {
    0% { backdrop-filter: blur(10px); opacity: 0.2; }
    50% { backdrop-filter: blur(12px); opacity: 0.4; }
    100% { backdrop-filter: blur(10px); opacity: 0.2; }
}

.fish-right {
    transform: scaleX(1);
    animation: boing-right 0.4s 1;
}

.fish-left {
    transform: scaleX(-1);
    animation: boing-left 0.4s 1;
}

  @keyframes boing-right {
    from, to { transform: scale(1, 1) scaleX(1); }
    25% { transform: scale(0.9, 1.1) scaleX(1); }
    50% { transform: scale(1.1, 0.9) scaleX(1); }
    75% { transform: scale(0.95, 1.15) scaleX(1); }
}

@keyframes boing-left {
    from, to { transform: scale(1, 1) scaleX(-1); }
    25% { transform: scale(0.9, 1.1) scaleX(-1); }
    50% { transform: scale(1.1, 0.9) scaleX(-1); }
    75% { transform: scale(0.95, 1.15) scaleX(-1); }
}

.monch {
    animation: monch 2s forwards;
}

@keyframes monch {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1, 1); }
  }

.fishAnimations{
    width: 100%;
    height: 100%;
}

[data-fish-state="boing"] .fishAnimations{
    animation: boince 0.3s forwards;
}

[data-fish-state="drifting"] .fishMovementContainer{
    animation: fishMove 2s infinite;
}

[data-fish-state="hunting"] .fishMovementContainer {
    animation: fishDart 0.4s infinite; 
}

[data-fish-state="feeding"] .fishMovementContainer {
    animation: fishDart 0.4s infinite; 
}

@keyframes fishDart {
    0% { transform: scaleX(1) rotateZ(1deg) translateY(6px);}
    50% { transform: scaleX(0.94) rotateZ(0deg) translateY(0px);  }
    100% { transform: scaleX(1) rotateZ(1deg) translateY(6px); }
    
}

@keyframes fishMove {
    0% { transform: scaleX(1) rotateZ(-1deg) translateY(10px);}
    50% { transform: scaleX(0.94) rotateZ(0deg) translateY(0px);  }
    100% { transform: scaleX(1) rotateZ(-1deg) translateY(10px); }
}

[data-fish-state="drifting"] .fin {
    animation: fin 1s infinite;
}

[data-fish-state="hiding"] .fin {
    animation: fin 0.3s infinite;
}

[data-fish-state="hunting"] .fin {
    animation: fin 0.2s infinite;
}


[data-fish-state="boing"] {
    animation: bounce 0.5s 1;
}

@keyframes fin {
    0% { transform: rotate(0deg) scaleX(1) translate(0px); }
    50% { transform: rotate(-5deg) scaleX(0.8) translate(-3px); }
    100% { transform: rotate(0deg) scaleX(1) translate(0px); }
}

.foodTarget {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 99;
    background: #FF0000B3;
    border-radius: 50px;
}