/*
 * Animated Wave Background
 * Source: https://codepen.io/goodkatz/pen/LYPGxQz
 */
:root {
    --sky-color-top: rgba(84, 58, 183, 1);
    --sky-color-bottom: rgba(0, 172, 193, 1);
    --celestial-body-color: radial-gradient(circle, rgba(255,255,224,1) 0%, rgba(255,204,0,0.8) 40%, rgba(251,176,59,0) 70%);
    --celestial-body-shadow: 0 0 100px 50px rgba(255, 255, 224, 0.3), 0 0 150px 80px rgba(255, 204, 0, 0.2);
    --stars-opacity: 0;
}

.login-logo img {
    max-width: 120px;
    height: auto;
}

.login-page .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, var(--sky-color-top) 0%, var(--sky-color-bottom) 100%);
    z-index: -1; /* Place it behind the login box */
    animation: day-to-night-cycle 120s linear infinite;
    transition: background 4s linear; /* Transisi halus untuk warna langit */
}

/* Sun */
.sun {
    position: absolute;
    top: 15%; /* Initial vertical position */
    left: -25%; /* Start off-screen */
    width: 400px;
    height: 400px;
    background: var(--celestial-body-color);
    border-radius: 50%;
    z-index: 0; /* Below clouds, above background */
    animation: sun-rotate 120s linear infinite, celestial-path 120s linear infinite;
    box-shadow: var(--celestial-body-shadow);
    transition: background 4s linear, box-shadow 4s linear; /* Transisi halus untuk matahari/bulan */
}

/* Stars */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    opacity: var(--stars-opacity);
    transition: opacity 2s ease-in-out;
}
.star {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    animation: tail 3s ease-in-out infinite, shooting 3s ease-in-out infinite;
}
.star:nth-child(2) { top: 60%; animation-delay: 0.5s; }
.star:nth-child(3) { top: 30%; animation-delay: 1.2s; }

/* Twinkling Stars */
.twinkling-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60%; /* Batasi tinggi area bintang */
    display: block;
    z-index: 0; /* Same level as shooting stars */
    opacity: var(--stars-opacity);
    transition: opacity 4s ease-in-out;
}
.twinkling-stars:before,
.twinkling-stars:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.twinkling-stars:before { /* Kelompok bintang pertama */
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff, transparent),
        radial-gradient(1px 1px at 80% 15%, #eee, transparent),
        radial-gradient(2px 2px at 50% 30%, #fff, transparent),
        radial-gradient(1px 1px at 30% 40%, #fff, transparent),
        radial-gradient(1px 1px at 75% 80%, #fff, transparent),
        radial-gradient(1px 1px at 90% 5%, #ddd, transparent),
        radial-gradient(2px 2px at 65% 55%, #eee, transparent);
    animation: twinkle 5s infinite ease-in-out;
}

.twinkling-stars:after { /* Kelompok bintang kedua */
    background-image:
        radial-gradient(1px 1px at 5% 50%, #fff, transparent),
        radial-gradient(1px 1px at 55% 10%, #fff, transparent),
        radial-gradient(1px 1px at 60% 85%, #ddd, transparent),
        radial-gradient(1px 1px at 25% 70%, #ddd, transparent),
        radial-gradient(2px 2px at 45% 90%, #eee, transparent),
        radial-gradient(1px 1px at 15% 95%, #fff, transparent),
        radial-gradient(1px 1px at 85% 65%, #ddd, transparent),
        radial-gradient(2px 2px at 5% 85%, #eee, transparent);
    animation: twinkle 7s infinite ease-in-out;
    animation-delay: 1s;
}

/* Animated Clouds */
/* Original source: https://codepen.io/JGallardo/pen/MvEPeP */
#background-wrap {
    bottom: 0;
    left: 0;
    padding-top: 50px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1; /* Above gradient, below waves/ships */
}

.cloud {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    height: 40px; /* Membuat awan lebih tipis */
    position: relative;
    width: 350px;
    opacity: 0.8;
}

.cloud:after, .cloud:before {
    background: #fff;
    content: '';
    position: absolute;
    z-index: -1;
}

.cloud:after {
    border-radius: 50px;
    height: 50px; /* Mengecilkan "gumpalan" awan */
    left: 50px;
    top: -25px; /* Menyesuaikan posisi vertikal */
    width: 120px;
}

.cloud:before {
    border-radius: 80px;
    width: 150px;
    height: 70px; /* Mengecilkan "gumpalan" awan */
    right: 50px;
    top: -35px; /* Menyesuaikan posisi vertikal */
}

.x1 {
    top: 55%; /* Turunkan awan pertama */
    /* Start off-screen */
    transform: translateX(-100%);
    animation: moveclouds 70s linear infinite;
    animation-delay: -5s;
}

.x2 {
    top: 85%; /* Turunkan awan kedua lebih rendah lagi */
    /* Start off-screen */
    transform: translateX(-100%) scale(0.6);
    animation: moveclouds 90s linear infinite;
    animation-delay: 0s;
}

.x3 {
    top: 10%; /* Posisikan awan ketiga lebih tinggi, dekat matahari */
    /* Start off-screen */
    transform: translateX(-100%) scale(0.8);
    animation: moveclouds 80s linear infinite;
    animation-delay: -10s;
}

.login-page .inner-header {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-page .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    min-height: 140px;
    max-height: 190px;
    z-index: 2; /* Pastikan ombak di atas background, tapi di bawah kapal */
}

/* Ships Styling */
.ships-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Area where ships will be visible */
    min-height: 120px;
    pointer-events: none; /* Ships are decorative */
    overflow: hidden;
    z-index: 3; /* Posisikan kapal di atas ombak */
}

.ship {
    position: absolute;
    bottom: 100px; /* Start above the waves */
    opacity: 0.9;
    animation-name: sail, bob;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ship-1 {
    width: 100px;
    left: -150px; /* Start off-screen to the left */
    animation-duration: 40s, 5s; /* sail duration, bob duration */
    animation-delay: 0s;
}

.ship-2 {
    width: 150px;
    right: -200px; /* Start off-screen to the right */
    animation-duration: 60s, 7s; /* sail duration, bob duration */
    animation-delay: 15s; /* Start later than the first ship */
    transform: scaleX(-1); /* Make it face left */
    /* This ship will only bob, not sail */
    animation-name: bob;
}

.ship-3 {
    width: 120px;
    left: 100vw; /* Posisi awal di luar layar kanan */
    animation-name: sail-reverse, bob;
    animation-duration: 55s, 6s;
    animation-delay: 5s;
}

.ship-4 {
    width: 80px;
    left: -150px; /* Posisi awal di luar layar kiri */
    animation-name: sail, bob;
    animation-duration: 25s, 4s;
    animation-delay: 20s;
}

.ships-container {
    /* Posisikan kapal sangat dekat dengan ombak di bawah */
    top: auto;
    bottom: -6vh; /* Nilai lebih kecil = lebih rendah. Coba 2vh jika ingin lebih mepet lagi */
}

/* Lighthouse and Pier Styling */
.lighthouse-pier {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 200px;
    z-index: 4; /* Di depan ombak dan kapal, di belakang login box */
    pointer-events: none;
    overflow: visible;
}

.lighthouse-pier .light-beam-container {
    /* Animasi bolak-balik dari kiri ke kanan */
    animation: sweep-light 8s ease-in-out infinite alternate;
    /* Titik pivot disesuaikan agar tepat di tengah lampu mercusuar */
    transform-origin: 175px 71.5px; 
}

.lighthouse-pier .light-beam {
    /* Tambahkan efek pendar (glow) pada sorotan lampu */
    filter: drop-shadow(0 0 15px rgba(255, 255, 100, 0.9));
}

@keyframes sweep-light {
    from {
        /* Posisi awal (kiri) */
        transform: rotate(-50deg);
    }
    to {
        /* Posisi akhir (kanan) */
        transform: rotate(5deg);
    }
}

.login-box {
    z-index: 10; /* Ensure login box is on top of the waves and ships */
}

.login-box .card {
    /* Override AdminLTE's default shadow and add a glowing animation */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    animation: pulse-shadow 5s infinite ease-in-out;
}

.login-logo img {
    border-radius: 50%;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    animation: pulse-logo-shadow 4s infinite ease-in-out;
}

/* Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes celestial-path {
    0% { /* Sunrise: Start from right */
        transform: translate(120vw, -28vh) rotate(0deg);
    }
    25% { /* Mid-day: Top of the arc */
        transform: translate(60vw, -40vh) rotate(90deg);
    }
    50% { /* Sunset: Disappear on the left */
        transform: translate(-20vw, -28vh) rotate(180deg);
    }
    50.01% { /* Moonrise: Start from right */
        transform: translate(120vw, -28vh) rotate(180deg);
    }
    75% { /* Mid-night: Top of the arc */
        transform: translate(60vw, -40vh) rotate(270deg);
    }
    100% { /* Moonset: Disappear on the left */
        transform: translate(-20vw, -28vh) rotate(360deg);
    }
}

@keyframes day-to-night-cycle {
    0% { /* Day */
        --sky-color-top: rgba(84, 58, 183, 1);
        --sky-color-bottom: rgba(0, 172, 193, 1);
        --celestial-body-color: radial-gradient(circle, rgba(255,255,224,1) 0%, rgba(255,204,0,0.8) 40%, rgba(251,176,59,0) 70%);
        --celestial-body-shadow: 0 0 100px 50px rgba(255, 255, 224, 0.3), 0 0 150px 80px rgba(255, 204, 0, 0.2);
        --stars-opacity: 0;
    }
    25% { /* Afternoon */
        --sky-color-top: #2e6a9e;
        --sky-color-bottom: #87ceeb;
    }
    50% { /* Sunset */
        --sky-color-top: #ff7e5f;
        --sky-color-bottom: #feb47b;
        --celestial-body-color: radial-gradient(circle, rgba(255,255,224,0.9) 0%, rgba(255,204,0,0.6) 40%, rgba(251,176,59,0) 70%);
        --celestial-body-shadow: 0 0 80px 40px rgba(255, 255, 224, 0.2), 0 0 120px 60px rgba(255, 204, 0, 0.15);
        --stars-opacity: 0;
    }
    65% { /* Twilight */
        --sky-color-top: #483d8b;
        --sky-color-bottom: #191970;
        --stars-opacity: 0.5;
    }
    75% { /* Night */
        --sky-color-top: #0f1a38;
        --sky-color-bottom: #212529;
        --celestial-body-color: /* Craters */
            radial-gradient(circle at 20% 25%, #c0c0c0 15px, transparent 16px),
            radial-gradient(circle at 55% 60%, #b0b0b0 25px, transparent 26px),
            radial-gradient(circle at 70% 30%, #a9a9a9 8px, transparent 9px),
            radial-gradient(circle at 35% 80%, #c0c0c0 12px, transparent 13px),
            /* Base Moon Surface */
            radial-gradient(circle, #f5f5f5 0%, #dcdcdc 60%, rgba(220,220,220,0) 100%);
        --celestial-body-shadow: 0 0 100px 20px rgba(255, 255, 255, 0.3);
        --stars-opacity: 1;
    }
    95% { /* Dawn */
        --sky-color-top: #483d8b;
        --sky-color-bottom: #ff7e5f;
        --stars-opacity: 0.5;
    }
    100% { /* Day */
        --sky-color-top: rgba(84, 58, 183, 1);
        --sky-color-bottom: rgba(0, 172, 193, 1);
        --celestial-body-color: radial-gradient(circle, rgba(255,255,224,1) 0%, rgba(255,204,0,0.8) 40%, rgba(251,176,59,0) 70%);
        --celestial-body-shadow: 0 0 100px 50px rgba(255, 255, 224, 0.3), 0 0 150px 80px rgba(255, 204, 0, 0.2);
        --stars-opacity: 0;
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.4;
    }
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,0.1);
    }
    50% {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,0.3);
    }
    100% {
        box-shadow: 0 5px 35px 0px rgba(0,0,0,0.1);
    }
}

@keyframes pulse-logo-shadow {
    0% {
        box-shadow: 0 0 20px 0px rgba(255,255,255,0.2);
    }
    50% {
        box-shadow: 0 0 35px 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 20px 0px rgba(255,255,255,0.2);
    }
}

@keyframes sun-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes tail {
    0% { width: 0; }
    30% { width: 100px; }
    100% { width: 0; }
}

@keyframes shooting {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

@keyframes moveclouds {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes sail {
    0% {
        left: -150px; /* Match initial position of ship-1 */
    }
    100% {
        left: 100vw; /* Move across the screen and off-screen to the right */
    }
}

@keyframes sail-reverse {
    0% {
        left: 100vw;
    }
    100% {
        left: -200px;
    }
}

@keyframes bob {
    0% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(-1deg);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .sun {
        width: 200px;
        height: 200px;
        top: -80px;
        right: -80px;
    }
    
    @keyframes celestial-path {
        /* Simplified path for mobile to reduce complexity */
        0% { transform: translateX(120vw); }
        100% { transform: translateX(-40vw); }
    }

    .waves {
        height: 25px;
        min-height: 25px;
    }

    .content {
        height: 30vh;
    }

    .cloud {
        width: 220px;
        height: 35px;
    }
    .cloud:before {
        width: 110px;
        height: 50px;
        top: -25px;
    }
    .cloud:after {
        width: 80px;
        height: 40px;
        top: -20px;
    }

    .ship {
        bottom: 50px; /* Adjust ship position for higher waves */
        transform: scale(0.8); /* Make ships slightly smaller */
    }
    .ship-2 {
        transform: scale(0.8) scaleX(-1); /* Combine transforms */
    }
}

/* Override AdminLTE's default login page background */
body.login-page {
    background-color: transparent !important;
    /* Cegah scroll di level body */
    height: 100vh;
    overflow: hidden;
}

.header {
    /* Pastikan header juga tidak menyebabkan scroll */
    overflow: hidden;
}