/* ========================================
   Ocean & Sky Logistics Animation Background
   ======================================== */

.ocean-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #0b1628 0%,
        #0f1f3a 12%,
        #152d4f 25%,
        #1b3d63 38%,
        #1f5276 50%,
        #2471a3 65%,
        #2980b9 78%,
        #1a6fa0 100%
    );
}

.login-wrapper {
    position: relative;
    z-index: 10;
}

/* ==================== STARS ==================== */
.stars { position: absolute; top: 0; left: 0; width: 100%; height: 45%; z-index: 0; }
.star {
    position: absolute; width: 2px; height: 2px;
    background: #fff; border-radius: 50%; opacity: 0;
    animation: twinkle 4s ease-in-out infinite;
}
.star:nth-child(1)  { top:4%;  left:10%; animation-delay:0s; }
.star:nth-child(2)  { top:7%;  left:25%; animation-delay:1.2s; width:1.5px;height:1.5px; }
.star:nth-child(3)  { top:2%;  left:42%; animation-delay:2.5s; }
.star:nth-child(4)  { top:11%; left:58%; animation-delay:0.8s; width:1px;height:1px; }
.star:nth-child(5)  { top:5%;  left:75%; animation-delay:3.1s; }
.star:nth-child(6)  { top:14%; left:88%; animation-delay:1.7s; width:1.5px;height:1.5px; }
.star:nth-child(7)  { top:1%;  left:52%; animation-delay:0.3s; width:1px;height:1px; }
.star:nth-child(8)  { top:17%; left:33%; animation-delay:2.1s; }
.star:nth-child(9)  { top:9%;  left:4%;  animation-delay:3.8s; width:1px;height:1px; }
.star:nth-child(10) { top:6%;  left:82%; animation-delay:1.0s; }
.star:nth-child(11) { top:19%; left:18%; animation-delay:2.8s; width:1.5px;height:1.5px; }
.star:nth-child(12) { top:13%; left:48%; animation-delay:0.5s; }
.star:nth-child(13) { top:0.5%;left:68%; animation-delay:1.5s; }
.star:nth-child(14) { top:21%; left:7%;  animation-delay:3.3s; width:1px;height:1px; }
.star:nth-child(15) { top:3%;  left:93%; animation-delay:0.7s; width:1.5px;height:1.5px; }
.star:nth-child(16) { top:15%; left:40%; animation-delay:2.9s; }

@keyframes twinkle { 0%,100%{opacity:0.1} 50%{opacity:0.85} }

/* ==================== MOON ==================== */
.moon {
    position: absolute; top: 5%; right: 10%;
    width: 55px; height: 55px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffeebb, #ffd866);
    box-shadow: 0 0 20px 5px rgba(255,220,100,0.3), 0 0 60px 15px rgba(255,220,100,0.12);
    z-index: 0;
}

/* ==================== CLOUDS ==================== */
.cloud { position: absolute; z-index: 1; opacity: 0.12; filter: blur(1px); }
.cloud svg { fill: #a0c4e8; }
.cloud-1 { top:8%;  animation: drift-cloud 80s linear infinite; }
.cloud-2 { top:16%; animation: drift-cloud 110s linear infinite; animation-delay:-40s; opacity:0.08; transform:scale(0.7); }
.cloud-3 { top:22%; animation: drift-cloud 95s linear infinite; animation-delay:-65s; opacity:0.1; transform:scale(0.85); }
.cloud-4 { top:30%; animation: drift-cloud 100s linear infinite; animation-delay:-20s; opacity:0.06; transform:scale(0.6); }
@keyframes drift-cloud { 0%{left:-20%} 100%{left:110%} }

/* (airplane removed) */

/* ==================== CARGO SHIP ==================== */
.ship-container {
    position: absolute; bottom: 10%; z-index: 5;
    animation: ship-sail 50s linear infinite;
}
@keyframes ship-sail { 0%{left:-45%} 100%{left:115%} }

.ship-bob { animation: ship-bob 5s ease-in-out infinite; }
@keyframes ship-bob {
    0%,100% { transform: translateY(0) rotate(-0.5deg); }
    25%     { transform: translateY(-3px) rotate(0.15deg); }
    50%     { transform: translateY(2px) rotate(0.5deg); }
    75%     { transform: translateY(-2px) rotate(-0.15deg); }
}

/* ==================== OCEAN (smooth gradient, no hard edges) ==================== */
.ocean-surface {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 30%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(10,30,48,0.15) 10%,
        rgba(10,30,48,0.35) 25%,
        rgba(10,30,48,0.55) 40%,
        rgba(10,30,48,0.75) 60%,
        rgba(8,22,38,0.9) 80%,
        #081626 100%
    );
    pointer-events: none;
}

/* Animated wave lines (thin, subtle, smooth) */
.wave-line {
    position: absolute;
    width: 200%;
    left: -50%;
    z-index: 3;
    height: 2px;
    pointer-events: none;
}

.wave-line-1 {
    bottom: 26%;
    opacity: 0.15;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.3) 10%, transparent 20%,
        rgba(255,255,255,0.2) 30%, transparent 40%,
        rgba(255,255,255,0.25) 50%, transparent 60%,
        rgba(255,255,255,0.15) 70%, transparent 80%,
        rgba(255,255,255,0.2) 90%, transparent 100%
    );
    animation: wave-drift 12s linear infinite;
}
.wave-line-2 {
    bottom: 22%;
    opacity: 0.12;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.2) 15%, transparent 25%,
        rgba(255,255,255,0.3) 35%, transparent 45%,
        rgba(255,255,255,0.15) 55%, transparent 65%,
        rgba(255,255,255,0.25) 75%, transparent 85%,
        rgba(255,255,255,0.1) 95%, transparent 100%
    );
    animation: wave-drift 9s linear infinite reverse;
}
.wave-line-3 {
    bottom: 18%;
    opacity: 0.1;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.15) 12%, transparent 22%,
        rgba(255,255,255,0.25) 38%, transparent 48%,
        rgba(255,255,255,0.2) 58%, transparent 68%,
        rgba(255,255,255,0.1) 82%, transparent 92%
    );
    animation: wave-drift 15s linear infinite;
}
.wave-line-4 {
    bottom: 14%;
    opacity: 0.08;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.2) 18%, transparent 28%,
        rgba(255,255,255,0.15) 42%, transparent 52%,
        rgba(255,255,255,0.25) 62%, transparent 72%,
        rgba(255,255,255,0.1) 88%, transparent 100%
    );
    animation: wave-drift 11s linear infinite reverse;
}
.wave-line-5 {
    bottom: 10%;
    opacity: 0.06;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,0.1) 20%, transparent 30%,
        rgba(255,255,255,0.2) 45%, transparent 55%,
        rgba(255,255,255,0.15) 70%, transparent 80%
    );
    animation: wave-drift 13s linear infinite;
}

@keyframes wave-drift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* Moon reflection */
.moon-reflection {
    position: absolute; bottom: 16%; right: 10%;
    width: 3px; height: 80px; z-index: 4;
    background: linear-gradient(180deg,
        rgba(255,220,100,0.25), rgba(255,220,100,0.05) 50%, transparent
    );
    filter: blur(4px);
    animation: reflection-shimmer 3s ease-in-out infinite;
}
@keyframes reflection-shimmer {
    0%,100% { opacity:0.5; transform:scaleX(1); }
    50%     { opacity:1;   transform:scaleX(3); }
}

/* Water sparkles */
.sparkle {
    position: absolute;
    width: 2px; height: 2px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    z-index: 4;
    animation: sparkle-blink 3s ease-in-out infinite;
}
.sparkle:nth-child(1) { bottom:22%; left:15%; animation-delay:0s; }
.sparkle:nth-child(2) { bottom:18%; left:35%; animation-delay:1.2s; }
.sparkle:nth-child(3) { bottom:25%; left:55%; animation-delay:0.6s; }
.sparkle:nth-child(4) { bottom:15%; left:72%; animation-delay:2.1s; }
.sparkle:nth-child(5) { bottom:20%; left:88%; animation-delay:1.8s; }
.sparkle:nth-child(6) { bottom:24%; left:45%; animation-delay:0.3s; }
.sparkle:nth-child(7) { bottom:12%; left:25%; animation-delay:2.5s; }
.sparkle:nth-child(8) { bottom:16%; left:62%; animation-delay:1.5s; }

@keyframes sparkle-blink {
    0%,100% { opacity:0; transform:scale(0.5); }
    50%     { opacity:0.6; transform:scale(1.2); }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .ship-container svg { width: 600px; height: auto; }
    .moon { width: 35px; height: 35px; top: 4%; right: 8%; }
}

/* ========================================
   DAY MODE (6:00 AM - 6:00 PM Beijing Time)
   ======================================== */

/* Sun (hidden by default, shown in day mode) */
.sun {
    position: absolute; top: 8%; right: 15%;
    width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #fff7e0, #ffd54f, #ffb300);
    box-shadow:
        0 0 30px 10px rgba(255,200,50,0.4),
        0 0 80px 30px rgba(255,180,0,0.15);
    z-index: 0;
    display: none;
}

.day-mode .ocean-bg {
    background: linear-gradient(
        180deg,
        #c9e6f7 0%,
        #b8ddf4 8%,
        #a4d4f0 18%,
        #8ec8eb 30%,
        #7bbde5 42%,
        #6bb3e0 55%,
        #5aa5d5 68%,
        #4a98ca 80%,
        #3a8abc 92%,
        #2d7aa8 100%
    ) !important;
}

/* Hide night elements */
.day-mode .stars { display: none; }
.day-mode .moon { display: none; }
.day-mode .moon-reflection { display: none; }

/* Show sun */
.day-mode .sun { display: block; }

/* Brighter clouds */
.day-mode .cloud { opacity: 0.35; filter: blur(0.5px); }
.day-mode .cloud svg { fill: #ffffff; }

/* Brighter ocean surface */
.day-mode .ocean-surface {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(20,80,140,0.1) 10%,
        rgba(20,80,140,0.25) 25%,
        rgba(15,70,130,0.4) 40%,
        rgba(10,60,120,0.55) 60%,
        rgba(8,50,100,0.7) 80%,
        rgba(5,40,85,0.85) 100%
    ) !important;
}

/* Brighter wave lines */
.day-mode .wave-line { opacity: 0.2 !important; }
.day-mode .wave-line-1 { opacity: 0.25 !important; }

/* Brighter sparkles (sun glints on water) */
.day-mode .sparkle {
    background: rgba(255,255,255,0.7);
    width: 3px; height: 3px;
}

/* Sun reflection on water */
.sun-reflection {
    position: absolute; bottom: 16%; right: 14%;
    width: 6px; height: 100px; z-index: 4;
    background: linear-gradient(180deg,
        rgba(255,220,80,0.4),
        rgba(255,200,50,0.15) 40%,
        transparent
    );
    filter: blur(5px);
    animation: reflection-shimmer 3s ease-in-out infinite;
    display: none;
}
.day-mode .sun-reflection { display: block; }

/* Login card slight adjustment for day */
.day-mode .login-header {
    background: linear-gradient(135deg, rgba(44,62,80,0.9) 0%, rgba(26,35,50,0.9) 100%) !important;
}