@keyframes tem-underwater-shimmer {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes tem-bubble-rise {
    0% {
        transform: translateY(6vh) translateX(0) scale(0.7);
        opacity: 0;
    }

    10% {
        transform: translateY(-10vh) translateX(calc(var(--drift, 16px) * 0.3)) scale(0.85);
        opacity: 0.85;
    }

    25% {
        transform: translateY(-30vh) translateX(calc(var(--drift, 16px) * 0.6)) scale(0.95);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-60vh) translateX(calc(var(--drift, 16px) * -0.4)) scale(1.0);
        opacity: 0.9;
    }

    75% {
        transform: translateY(-90vh) translateX(calc(var(--drift, 16px) * 0.5)) scale(1.05);
        opacity: 0.85;
    }

    100% {
        transform: translateY(-120vh) translateX(var(--drift, 16px)) scale(1.08);
        opacity: 0;
    }
}

.tem-bubble {
    position: absolute;
    bottom: -12vh;
    width: var(--size, 10px);
    height: var(--size, 10px);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.20);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
    animation-name: tem-bubble-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 1;
    filter: none;
}

.tem-bubble::after {
    display: none;
}

.tem-big-bubble {
    position: absolute;
    bottom: -14vh;
    width: var(--size, 24px);
    height: var(--size, 24px);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.20);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
    animation: tem-bubble-rise var(--dur, 24s) linear infinite;
    z-index: 1;
}

.tem-big-bubble::before {
    display: none;
}

.tem-fish-container {
    animation: tem-fish-swim 28s linear infinite;
    will-change: transform;
}

@keyframes tem-fish-swim {
    0% {
        transform: translateX(-12vw) translateY(6px) rotate(0deg);
    }

    7% {
        transform: translateX(2vw) translateY(-12px) rotate(-6deg);
    }

    15% {
        transform: translateX(18vw) translateY(12px) rotate(3deg);
    }

    28% {
        transform: translateX(34vw) translateY(-18px) rotate(-8deg);
    }

    42% {
        transform: translateX(52vw) translateY(8px) rotate(6deg);
    }

    55% {
        transform: translateX(66vw) translateY(-16px) rotate(-4deg);
    }

    69% {
        transform: translateX(80vw) translateY(6px) rotate(5deg);
    }

    82% {
        transform: translateX(95vw) translateY(-12px) rotate(-2deg);
    }

    100% {
        transform: translateX(120vw) translateY(0px) rotate(0deg);
    }
}

.tem-fish-container svg {
    transform-origin: 20% 50%;
    animation: tem-fish-tail 1.2s ease-in-out infinite;
}

@keyframes tem-fish-tail {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-3deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .tem-bubble,
    .tem-fish-container {
        animation: none !important;
    }
}