.marine-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(238, 248, 255, 0.72), rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 22% 12%, rgba(128, 215, 244, 0.24), transparent 18rem);
}

.marine-hero > .container {
    position: relative;
    z-index: 2;
}

.marine-hero::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.84;
    transform: translate3d(0, 0, 0);
}

.marine-hero::before {
    inset: -8% -12% auto;
    height: min(48rem, 82vh);
    background:
        radial-gradient(circle at 18% 18%, rgba(128, 215, 244, 0.26), transparent 19rem),
        radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.72), transparent 16rem),
        linear-gradient(135deg, rgba(238, 248, 255, 0.82), rgba(128, 215, 244, 0.18) 52%, rgba(255, 255, 255, 0));
    animation: marineDrift 18s ease-in-out infinite alternate;
}

.marine-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.marine-fish,
.turtle-1,
.ray-1,
.bubble {
    position: absolute;
    pointer-events: none;
    color: rgba(13, 66, 101, 0.28);
    opacity: 0.74;
    will-change: transform, opacity;
}

.marine-fish svg,
.turtle-1 svg,
.ray-1 svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.marine-fish {
    width: clamp(4rem, 8vw, 7.4rem);
    animation: fishGlide 24s linear infinite;
}

.fish-1 {
    top: 16%;
    left: 2%;
    color: rgba(22, 122, 169, 0.42);
    animation-duration: 24s;
}

.fish-2 {
    top: 60%;
    left: 62%;
    width: clamp(3.2rem, 6.4vw, 5.8rem);
    color: rgba(13, 66, 101, 0.34);
    animation-name: fishGlideReverse;
    animation-duration: 29s;
}

.turtle-1 {
    top: 32%;
    left: 70%;
    width: clamp(5.2rem, 10vw, 8.8rem);
    color: rgba(29, 142, 98, 0.28);
    animation: turtleFloat 22s ease-in-out infinite;
}

.ray-1 {
    top: 72%;
    left: 12%;
    width: clamp(6rem, 12vw, 10.5rem);
    color: rgba(13, 66, 101, 0.25);
    animation: rayDrift 30s ease-in-out infinite;
}

.bubble {
    width: var(--bubble-size, 0.52rem);
    height: var(--bubble-size, 0.52rem);
    border: 1px solid rgba(128, 215, 244, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0.45rem rgba(255, 255, 255, 0.35);
    animation: bubbleRise var(--bubble-duration, 18s) ease-in infinite;
    animation-delay: var(--bubble-delay, 0s);
}

.marine-ambient-static .bubble-1 {
    left: 11%;
    top: 74%;
    --bubble-size: 0.78rem;
    --bubble-duration: 14s;
    --bubble-delay: -3s;
}

.marine-ambient-static .bubble-2 {
    left: 28%;
    top: 64%;
    --bubble-size: 0.54rem;
    --bubble-duration: 17s;
    --bubble-delay: -8s;
}

.marine-ambient-static .bubble-3 {
    left: 68%;
    top: 76%;
    --bubble-size: 0.74rem;
    --bubble-duration: 16s;
    --bubble-delay: -5s;
}

.marine-ambient-static .bubble-4 {
    left: 86%;
    top: 52%;
    --bubble-size: 0.5rem;
    --bubble-duration: 19s;
    --bubble-delay: -11s;
}

.floating-card {
    animation: floatingCard 7s ease-in-out infinite;
    will-change: transform;
}

.floating-card:nth-of-type(2) {
    animation-delay: -2.2s;
}

@keyframes marineDrift {
    from {
        transform: translate3d(-1.5rem, -0.6rem, 0) scale(1);
        opacity: 0.6;
    }
    to {
        transform: translate3d(1.3rem, 0.8rem, 0) scale(1.03);
        opacity: 0.82;
    }
}

@keyframes fishGlide {
    0% {
        transform: translate3d(-12vw, 0, 0) rotate(0deg);
        opacity: 0;
    }
    12%,
    82% {
        opacity: 0.72;
    }
    100% {
        transform: translate3d(108vw, -4vh, 0) rotate(-2deg);
        opacity: 0;
    }
}

@keyframes fishGlideReverse {
    0% {
        transform: translate3d(28vw, 0, 0) scaleX(-1);
        opacity: 0;
    }
    16%,
    78% {
        opacity: 0.62;
    }
    100% {
        transform: translate3d(-78vw, -3vh, 0) scaleX(-1);
        opacity: 0;
    }
}

@keyframes turtleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
        opacity: 0.18;
    }
    50% {
        transform: translate3d(-7vw, 2vh, 0) rotate(3deg);
        opacity: 0.36;
    }
}

@keyframes rayDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(4deg);
        opacity: 0.16;
    }
    50% {
        transform: translate3d(12vw, -3vh, 0) rotate(-2deg);
        opacity: 0.3;
    }
}

@keyframes bubbleRise {
    0% {
        transform: translate3d(0, 7rem, 0) scale(0.78);
        opacity: 0;
    }
    16%,
    76% {
        opacity: 0.58;
    }
    100% {
        transform: translate3d(0.8rem, -18rem, 0) scale(1.08);
        opacity: 0;
    }
}

@keyframes floatingCard {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -0.42rem, 0);
    }
}

@media (max-width: 767.98px) {
    .marine-hero::before {
        height: 26rem;
        opacity: 0.68;
    }

    .fish-2,
    .ray-1 {
        display: none;
    }

    .fish-1 {
        top: 22%;
        width: 4.2rem;
        opacity: 0.44;
    }

    .turtle-1 {
        top: 58%;
        left: 66%;
        width: 4.2rem;
        opacity: 0.24;
    }

    .bubble:nth-of-type(n + 8) {
        display: none;
    }

    .floating-card {
        animation-duration: 9s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marine-hero::before,
    .marine-fish,
    .turtle-1,
    .ray-1,
    .bubble,
    .floating-card {
        animation: none !important;
    }

    .marine-fish,
    .turtle-1,
    .ray-1,
    .bubble {
        opacity: 0.14;
    }
}