/* ═══════════════════════════════════════════════════
   NavalStrike – Animated Ocean Water
   ═══════════════════════════════════════════════════ */

.ocean-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(180deg,
        #020c1b 0%,
        #0a1628 30%,
        #0d2137 60%,
        #112d4e 100%
    );
}

/* Animated wave layers */
.ocean-bg::before,
.ocean-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 40%;
    opacity: 0.08;
}

.ocean-bg::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 229, 255, 0.3) 0%, transparent 70%);
    animation: waveShift 8s ease-in-out infinite alternate;
}

.ocean-bg::after {
    background:
        radial-gradient(ellipse 60% 40% at 30% 100%, rgba(0, 150, 255, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 70% 100%, rgba(0, 200, 255, 0.15) 0%, transparent 60%);
    animation: waveShift 12s ease-in-out infinite alternate-reverse;
}

@keyframes waveShift {
    0% { transform: translateX(-5%) translateY(0); }
    100% { transform: translateX(5%) translateY(-10px); }
}

/* Animated wave SVG overlay */
.wave-container {
    position: fixed;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 0;
    pointer-events: none;
}

.wave {
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 100%;
    border-radius: 1000px 1000px 0 0;
}

.wave--1 {
    background: rgba(0, 229, 255, 0.04);
    animation: waveFloat1 7s ease-in-out infinite;
}

.wave--2 {
    background: rgba(0, 150, 255, 0.03);
    animation: waveFloat2 11s ease-in-out infinite;
    height: 70%;
}

@keyframes waveFloat1 {
    0%, 100% {
        border-radius: 1000px 1000px 0 0;
        transform: translateX(0) scaleY(1);
    }
    25% {
        border-radius: 800px 1200px 0 0;
        transform: translateX(2%) scaleY(1.15);
    }
    50% {
        border-radius: 1200px 800px 0 0;
        transform: translateX(-1%) scaleY(0.9);
    }
    75% {
        border-radius: 900px 1100px 0 0;
        transform: translateX(1%) scaleY(1.1);
    }
}

@keyframes waveFloat2 {
    0%, 100% {
        border-radius: 900px 1100px 0 0;
        transform: translateX(0) scaleY(1);
    }
    33% {
        border-radius: 1200px 700px 0 0;
        transform: translateX(-2%) scaleY(1.2);
    }
    66% {
        border-radius: 700px 1200px 0 0;
        transform: translateX(2%) scaleY(0.85);
    }
}

/* Floating particles (stars/bubbles) */
.particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(0, 229, 255, 0.4);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Sonar / radar scan effect (for start screen) */
.radar-sweep {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.radar-sweep::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(0, 229, 255, 0.12) 30deg,
        transparent 60deg
    );
    animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
    to { transform: rotate(360deg); }
}

.radar-sweep .ring {
    position: absolute;
    border: 1px solid rgba(0, 229, 255, 0.08);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radar-sweep .ring--1 { width: 33%; height: 33%; }
.radar-sweep .ring--2 { width: 66%; height: 66%; }
.radar-sweep .ring--3 { width: 100%; height: 100%; }