/* TFG SHIP WAKE V2
 *
 * Sistem koordinat mockup:
 * - halu = Y negatif / atas
 * - buritan = Y positif / bawah
 *
 * Wake dimulai dari buritan dan memanjang ke belakang kapal.
 * Seluruh marker kemudian diputar oleh heading kapal.
 */

.tfg-frigate-marker-visual,
.tfg-ship-marker-visual {
    position: relative;
    flex: 0 0 auto;
    overflow: visible;
    transform-origin: center center;
    pointer-events: none;
}

.tfg-frigate-map-ship {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(
        0 1px 2px rgba(0, 0, 0, .45)
    );
}


/*
 * Wake bermula di buritan:
 *
 *               HALU
 *                ^
 *              KAPAL
 *                |
 *             BURITAN
 *                |
 *               \|/
 *               WAKE
 */

/*
 * =========================================================
 * TFG STERN WAKE V1
 * =========================================================
 *
 * Wake buritan sederhana dan semi-realistis:
 * - turbulensi pendek dekat buritan;
 * - dua jejak propeler;
 * - memudar lembut ke belakang;
 * - berada di bawah kapal.
 */

.tfg-stern-wake {
    position: absolute;
    z-index: 1;

    left: 50%;
    top: calc(100% - 1px);

    width: calc(
        var(--tfg-propeller-offset, 2px) * 4.8
    );

    height: var(
        --tfg-stern-length,
        18px
    );

    transform: translateX(-50%);
    transform-origin: center top;

    opacity: var(
        --tfg-stern-opacity,
        .26
    );

    overflow: visible;
    pointer-events: none;
}

.tfg-stern-turbulence,
.tfg-stern-propeller,
.tfg-stern-bubbles {
    position: absolute;
    display: block;
    pointer-events: none;
}

.tfg-stern-turbulence {
    left: 50%;
    top: -1px;

    width: var(
        --tfg-turbulence-width,
        6px
    );

    height: var(
        --tfg-turbulence-height,
        3px
    );

    transform: translateX(-50%);
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.55) 0%,
            rgba(231,244,251,.24) 45%,
            rgba(208,229,239,0) 100%
        );

    filter: blur(.45px);

    animation:
        tfgSternFoamPulse
        var(--tfg-stern-duration,1.4s)
        ease-in-out
        infinite;
}

.tfg-stern-propeller {
    top: 1px;

    width: var(
        --tfg-propeller-width,
        1.6px
    );

    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(241,249,255,.36) 0%,
            rgba(214,231,240,.18) 36%,
            rgba(192,217,229,.08) 64%,
            rgba(192,217,229,0) 100%
        );

    filter: blur(.65px);
    transform-origin: center top;

    animation:
        tfgSternTrailPulse
        var(--tfg-stern-duration,1.4s)
        ease-in-out
        infinite;
}

.tfg-stern-propeller-port {
    left: calc(
        50% - var(--tfg-propeller-offset, 2px)
    );

    transform:
        translateX(-50%)
        rotate(3deg);

    animation-delay: -.10s;
}

.tfg-stern-propeller-starboard {
    left: calc(
        50% + var(--tfg-propeller-offset, 2px)
    );

    transform:
        translateX(-50%)
        rotate(-3deg);

    animation-delay: -.24s;
}

.tfg-stern-bubbles {
    top: 2px;

    width: calc(
        var(--tfg-bubble-size, 2px) * 3.2
    );

    height: var(
        --tfg-bubble-length,
        10px
    );

    opacity: var(
        --tfg-bubble-opacity,
        .14
    );

    border-radius: 999px;

    background:
        radial-gradient(
            circle at 50% 7%,
            rgba(255,255,255,.48) 0 12%,
            transparent 30%
        ),
        radial-gradient(
            circle at 36% 24%,
            rgba(240,249,255,.32) 0 10%,
            transparent 26%
        ),
        radial-gradient(
            circle at 67% 43%,
            rgba(236,248,255,.28) 0 9%,
            transparent 24%
        ),
        radial-gradient(
            circle at 41% 64%,
            rgba(231,245,252,.24) 0 8%,
            transparent 22%
        ),
        radial-gradient(
            circle at 61% 84%,
            rgba(228,243,251,.20) 0 7%,
            transparent 20%
        );

    background-size: 100% 12px;
    background-repeat: repeat-y;

    filter: blur(.22px);

    animation:
        tfgSternBubblesDrift
        var(--tfg-stern-duration,1.4s)
        linear
        infinite;
}

.tfg-stern-bubbles-port {
    left: calc(
        50% - var(--tfg-propeller-offset, 2px)
    );

    transform:
        translateX(-58%)
        rotate(2deg);

    animation-delay: -.06s;
}

.tfg-stern-bubbles-starboard {
    left: calc(
        50% + var(--tfg-propeller-offset, 2px)
    );

    transform:
        translateX(-42%)
        rotate(-2deg);

    animation-delay: -.18s;
}

@keyframes tfgSternTrailPulse {
    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: 1;
    }
}

@keyframes tfgSternFoamPulse {
    0%,
    100% {
        opacity: .58;
        transform:
            translateX(-50%)
            scale(.96);
    }

    50% {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1.04);
    }
}

@keyframes tfgSternBubblesDrift {
    0% {
        opacity: .72;
        background-position: center 0;
    }

    100% {
        opacity: 1;
        background-position: center 12px;
    }
}




/*
 * =========================================================
 * TFG BOW WAVE V1
 * =========================================================
 *
 * Riak haluan sederhana:
 * - busa kecil di ujung haluan
 * - dua jejak tipis di sisi kiri/kanan
 * - ringan, tidak terlalu ramai
 * - berada di bawah kapal
 */
.tfg-bow-wave {
    position: absolute;
    z-index: 1;

    left: 50%;

    /*
     * Mulai sedikit di belakang ujung haluan.
     */
    top:
        var(
            --tfg-bow-start-offset,
            4px
        );

    width:
        calc(
            var(
                --tfg-bow-shoulder-offset,
                2px
            ) * 4
        );

    height:
        var(
            --tfg-bow-shoulder-length,
            8px
        );

    transform:
        translateX(-50%);

    transform-origin:
        center top;

    opacity:
        var(
            --tfg-bow-opacity,
            .18
        );

    overflow: visible;
    pointer-events: none;
}


/*
 * Busa kecil di masing-masing bahu haluan.
 * Tidak ada busa besar tepat di depan kapal.
 */
.tfg-bow-foam,
.tfg-bow-shoulder {
    position: absolute;
    display: block;
    pointer-events: none;
}


.tfg-bow-foam {
    top: 0;

    width:
        var(
            --tfg-bow-foam-size,
            2px
        );

    height:
        var(
            --tfg-bow-foam-size,
            2px
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.52) 0%,
            rgba(232,246,252,.24) 44%,
            rgba(210,236,248,0) 100%
        );

    filter:
        blur(.20px);
}


.tfg-bow-foam-port {
    left:
        calc(
            50% -
            var(
                --tfg-bow-shoulder-offset,
                2px
            )
        );

    transform:
        translateX(-50%);
}


.tfg-bow-foam-starboard {
    left:
        calc(
            50% +
            var(
                --tfg-bow-shoulder-offset,
                2px
            )
        );

    transform:
        translateX(-50%);
}


/*
 * Shoulder wave kiri dan kanan.
 * Tipis di depan, kemudian membuka sedikit
 * sepanjang sisi depan lambung.
 */
.tfg-bow-shoulder {
    top: 1px;

    width:
        var(
            --tfg-bow-shoulder-width,
            1.4px
        );

    height:
        var(
            --tfg-bow-shoulder-length,
            8px
        );

    transform-origin:
        center top;

    border-radius:
        999px;

    background:
        linear-gradient(
            to bottom,
            rgba(246,252,255,.40) 0%,
            rgba(225,243,251,.20) 34%,
            rgba(208,235,247,.08) 66%,
            rgba(200,230,244,0) 100%
        );

    filter:
        blur(.28px);
}


.tfg-bow-shoulder-port {
    left:
        calc(
            50% -
            var(
                --tfg-bow-shoulder-offset,
                2px
            )
        );

    transform:
        translateX(-50%)
        rotate(-9deg);
}


.tfg-bow-shoulder-starboard {
    left:
        calc(
            50% +
            var(
                --tfg-bow-shoulder-offset,
                2px
            )
        );

    transform:
        translateX(-50%)
        rotate(9deg);
}


/*
 * Kapal tetap berada di atas efek air.
 */
.tfg-class-mockup-svg {
    z-index: 2;
}