/* ========================================
   AQUARIUM EFFECT - Platforms Section
   ======================================== */

/* Aquarium container styling */
.aquarium {
    position: relative;
    background: linear-gradient(135deg,
            rgba(0, 80, 120, 0.15) 0%,
            rgba(0, 150, 200, 0.08) 50%,
            rgba(0, 100, 140, 0.12) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 2px solid rgba(100, 200, 255, 0.25);
    box-shadow:
        0 0 40px rgba(0, 150, 200, 0.15),
        inset 0 0 60px rgba(0, 100, 150, 0.1),
        inset 0 -20px 40px rgba(0, 50, 80, 0.2);
    overflow: hidden;
}

/* Glass refraction effect on canvas */
.aquarium #platforms-canvas {
    filter: url(#aquarium-distortion);
    opacity: 0.85;
    touch-action: pan-y pan-x;
    /* Allow scrolling on touch devices */
}

/* Aquarium glass shine/reflection */
.aquarium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 30%,
            transparent 100%);
    pointer-events: none;
    z-index: 5;
}

/* Bottom "sand/shadow" effect */
.aquarium::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(0deg,
            rgba(0, 30, 50, 0.3) 0%,
            transparent 100%);
    pointer-events: none;
    z-index: 5;
}

/* === BLUEFISH - Swimming with proper mirroring === */
.aquarium__fish {
    position: absolute;
    width: 52px;
    height: auto;
    opacity: 0.85;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Bluefish swims from LEFT to RIGHT and back */
.fish--bluefish {
    top: 35%;
    left: -10%;
    animation: bluefish-swim 28s linear infinite;
    /* 40% slower: 20s * 1.4 = 28s */
}

@keyframes bluefish-swim {

    /* Start off-screen RIGHT, facing LEFT (normal orientation) */
    0% {
        left: 110%;
        transform: translateY(0) scaleX(1);
    }

    /* Swim to the left edge, still facing LEFT (normal) */
    48% {
        left: -10%;
        transform: translateY(-15px) scaleX(1);
    }

    /* Flip to face RIGHT for return journey (flipped) */
    48.01% {
        left: -10%;
        transform: translateY(-15px) scaleX(-1);
    }

    /* Swim back to right, facing RIGHT (flipped) */
    95% {
        left: 110%;
        transform: translateY(10px) scaleX(-1);
    }

    /* Flip back to face LEFT (normal) */
    95.01% {
        left: 110%;
        transform: translateY(10px) scaleX(1);
    }

    100% {
        left: 110%;
        transform: translateY(0) scaleX(1);
    }
}

/* === Wave Effect === */
.wave-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(100, 200, 255, 0.4);
    background: radial-gradient(circle,
            rgba(100, 200, 255, 0.2) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 8;
    animation: wave-expand 0.8s ease-out forwards;
}

@keyframes wave-expand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        width: 100px;
        height: 40px;
        opacity: 0;
        transform: translate(-50%, -80%) scale(1.5);
    }
}

/* === Bubble effects === */
.aquarium .bubble {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.6),
            rgba(100, 200, 255, 0.2));
    border-radius: 50%;
    animation: bubble-rise 8s ease-in infinite;
    opacity: 0;
    pointer-events: none;
}

@keyframes bubble-rise {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(20px) scale(1);
    }
}