/* ── Ocean background layer ─────────────────────────────── */
.ocean-bg {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* ── Seaweed blades ─────────────────────────────────────── */
.sw {
    position: absolute;
    bottom: 0;
    border-radius: 50% 50% 0 0 / 80% 80% 0 0;
    transform-origin: bottom center;
    animation: sway ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(-11deg) scaleX(0.92); }
    50%       { transform: rotate(11deg)  scaleX(1.08); }
}

.sw1  { left:  1%;    width: 13px; height: 100px; background: linear-gradient(to top, #0a3d22, #17704a); animation-duration: 5.4s; animation-delay:  0.0s; opacity: 0.39; }
.sw2  { left:  2.5%;  width: 19px; height: 145px; background: linear-gradient(to top, #083018, #126038); animation-duration: 6.6s; animation-delay: -1.6s; opacity: 0.33; }
.sw3  { left:  4.5%;  width: 11px; height:  72px; background: linear-gradient(to top, #0d5030, #20905c); animation-duration: 4.8s; animation-delay: -0.9s; opacity: 0.36; }
.sw4  { left:  6%;    width: 16px; height: 118px; background: linear-gradient(to top, #0a3d22, #17704a); animation-duration: 6.1s; animation-delay: -2.2s; opacity: 0.30; }
.sw5  { left:  8.5%;  width: 14px; height:  85px; background: linear-gradient(to top, #083018, #126038); animation-duration: 5.3s; animation-delay: -0.4s; opacity: 0.39; }
.sw6  { left: 11%;    width: 10px; height:  60px; background: linear-gradient(to top, #0d5030, #20905c); animation-duration: 4.4s; animation-delay: -1.1s; opacity: 0.28; }
.sw7  { right:  1%;   width: 15px; height: 108px; background: linear-gradient(to top, #0a3d22, #17704a); animation-duration: 5.8s; animation-delay: -0.5s; opacity: 0.36; }
.sw8  { right:  3%;   width: 20px; height: 150px; background: linear-gradient(to top, #083018, #126038); animation-duration: 7.0s; animation-delay: -1.9s; opacity: 0.33; }
.sw9  { right:  5%;   width: 12px; height:  78px; background: linear-gradient(to top, #0d5030, #20905c); animation-duration: 4.9s; animation-delay: -0.7s; opacity: 0.30; }
.sw10 { right:  7.5%; width: 17px; height: 125px; background: linear-gradient(to top, #0a3d22, #17704a); animation-duration: 6.3s; animation-delay: -2.5s; opacity: 0.37; }
.sw11 { right: 10%;   width: 11px; height:  65px; background: linear-gradient(to top, #083018, #126038); animation-duration: 5.1s; animation-delay: -1.3s; opacity: 0.29; }
.sw12 { right: 13%;   width: 14px; height:  90px; background: linear-gradient(to top, #0d5030, #20905c); animation-duration: 5.6s; animation-delay: -3.0s; opacity: 0.33; }

/* ── Bubbles ─────────────────────────────────────────────── */
.bbl {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, rgba(200, 236, 255, 0.50), rgba(100, 180, 255, 0.06));
    border: 1px solid rgba(160, 218, 255, 0.28);
    animation: bubble-rise linear infinite;
}

@keyframes bubble-rise {
    0%   { transform: translateY(0)       translateX(0);   opacity: 0;    }
    5%   { opacity: 0.18; }
    25%  { opacity: 0.10; }
    45%  { opacity: 0; }
    100% { transform: translateY(-102vh) translateX(12px); opacity: 0;    }
}

.bbl1  { left:  6%; bottom: 12%; width:  8px; height:  8px; animation-duration:  12.8s; animation-delay:   0.0s; }
.bbl2  { left: 14%; bottom:  5%; width:  5px; height:  5px; animation-duration:  16.8s; animation-delay:  -3.2s; }
.bbl3  { left: 22%; bottom: 28%; width: 13px; height: 13px; animation-duration:  38.0s; animation-delay:   0.0s; }
.bbl4  { left: 31%; bottom:  8%; width:  6px; height:  6px; animation-duration:  20.1s; animation-delay:  -1.5s; }
.bbl5  { left: 40%; bottom: 18%; width:  9px; height:  9px; animation-duration:  45.0s; animation-delay: -18.0s; }
.bbl6  { left: 48%; bottom: 32%; width:  4px; height:  4px; animation-duration:  15.9s; animation-delay:  -8.2s; }
.bbl7  { left: 57%; bottom: 10%; width: 15px; height: 15px; animation-duration:  52.0s; animation-delay: -30.0s; }
.bbl8  { left: 64%; bottom: 20%; width:  7px; height:  7px; animation-duration:  13.4s; animation-delay:  -5.5s; }
.bbl9  { left: 73%; bottom: 14%; width: 11px; height: 11px; animation-duration:  14.5s; animation-delay:  -7.4s; }
.bbl10 { left: 82%; bottom: 24%; width:  5px; height:  5px; animation-duration:  17.7s; animation-delay:  -3.8s; }
.bbl11 { left: 90%; bottom:  7%; width:  8px; height:  8px; animation-duration:  60.0s; animation-delay: -10.0s; }
.bbl12 { left: 52%; bottom: 40%; width:  6px; height:  6px; animation-duration:  15.5s; animation-delay:  -1.2s; }
.bbl13 { left: 28%; bottom: 45%; width:  4px; height:  4px; animation-duration:  22.5s; animation-delay:  -6.8s; }
.bbl14 { left: 18%; bottom: 55%; width:  7px; height:  7px; animation-duration:  42.0s; animation-delay: -25.0s; }
.bbl15 { left: 76%; bottom: 48%; width:  5px; height:  5px; animation-duration:  20.7s; animation-delay:  -2.6s; }