/* =====================================
   SEA + SHIP ANIMATION
===================================== */

.sea {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}

/* =====================================
   SHIP
===================================== */

.sail {
    position: absolute;
    bottom: 46px;
    left: 0;
    width: 300px;

    animation: sail 54s linear infinite;
    animation-delay: -18s;

    will-change: transform;
}

.sail svg {
    display: block;
    width: 100%;
    height: auto;

    animation: bob 4.6s ease-in-out infinite;
    transform-origin: 50% 90%;
}

/* Ship Movement */

@keyframes sail {
    from {
        transform: translateX(-320px);
    }

    to {
        transform: translateX(100vw);
    }
}

/* Ship Floating */

@keyframes bob {
    0%, 100% {
        transform: translateY(0) rotate(-0.7deg);
    }

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

/* =====================================
   WATER WAVES
===================================== */

.wv {
    position: absolute;
    left: 0;
    bottom: 0;

    width: calc(100% + 140px);
    height: 62px;
}

/* Back Wave */

.wv.a {
    bottom: 38px;
    opacity: 0.6;

    animation: drift 12s linear infinite reverse;
}

/* Front Wave */

.wv.b {
    bottom: 0;

    animation: drift 8s linear infinite;
}

/* Wave Movement */

@keyframes drift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100px);
    }
}


/* =====================================
   TABLET RESPONSIVE
===================================== */




/* =====================================
   MOBILE RESPONSIVE
===================================== */




/* =====================================
   SMALL MOBILE RESPONSIVE
===================================== */




/* =====================================
   REDUCED MOTION
===================================== */



.dolphin-jump {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 85px;
    height: 55px;
    z-index: 4;
    pointer-events: none;
    will-change: transform, opacity;

    animation: dolphinJump 4s linear infinite;
}

.dolphin-jump img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* SMOOTH JUMP ANIMATION */
@keyframes dolphinJump {
    0% {
        transform: translate(var(--start-x), 35px) rotate(0deg);
        opacity: 0;
    }

    10% {
        transform: translate(calc(var(--start-x) + 15px), 15px) rotate(-8deg);
        opacity: 1;
    }

    25% {
        transform: translate(calc(var(--start-x) + 40px), -15px) rotate(-15deg);
        opacity: 1;
    }

    40% {
        transform: translate(calc(var(--start-x) + 65px), -38px) rotate(-5deg);
        opacity: 1;
    }

    55% {
        transform: translate(calc(var(--start-x) + 90px), -30px) rotate(8deg);
        opacity: 1;
    }

    70% {
        transform: translate(calc(var(--start-x) + 115px), 0px) rotate(18deg);
        opacity: 1;
    }

    82% {
        transform: translate(calc(var(--start-x) + 135px), 35px) rotate(5deg);
        opacity: 0;
    }

    100% {
        transform: translate(calc(var(--start-x) + 135px), 35px);
        opacity: 0;
    }
}





@media (max-width: 991px) {


    .sea {
        height: 140px;
    }

    .sail {
        width: 250px;
        bottom: 43px;
    }

    .wv {
        height: 58px;
    }

    .wv.a {
        bottom: 34px;
    }


}


@media (max-width: 767px) {


    .sea {
        height: 120px;
    }

    .sail {
        width: 190px;
        bottom: 38px;

        animation: sail 18s linear infinite;
        animation-delay: -5s;
    }

    .wv {
        height: 48px;
        width: calc(100% + 100px);
    }

    .wv.a {
        bottom: 28px;
    }

    .wv.b {
        bottom: 0;
    }

    @keyframes sail {
        from {
            transform: translateX(-210px);
        }

        to {
            transform: translateX(100vw);
        }
    }


    .dolphin-jump {
        width: 65px;
        height: 45px;
    }

}


@media (max-width: 480px) {


    .sea {
        height: 105px;
    }

    .sail {
        width: 150px;
        bottom: 32px;

        animation: sail 12s linear infinite;
        animation-delay: -3s;
    }

    .wv {
        height: 42px;
        width: calc(100% + 80px);
    }

    .wv.a {
        bottom: 24px;
    }

    .wv.b {
        bottom: 0;
    }

    @keyframes sail {
        from {
            transform: translateX(-170px);
        }

        to {
            transform: translateX(100vw);
        }
    }


    .dolphin-jump {
        width: 55px;
        height: 38px;
    }

}


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


    .sail,
    .sail svg,
    .wv {
        animation: none !important;
    }


}