/* =====================================
   SAFE MINIMAL UNDERWATER EFFECTS
   NO INTERFERENCE WITH HERO/SEARCH
   ===================================== */

/* Realistic underwater bubbles - swimming upwards */
.underwater-bubble.minimal {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: underwaterBubbleFloat linear infinite;
    opacity: 0.8;
    z-index: 1;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(173, 216, 230, 0.6), transparent);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 0 10px rgba(173, 216, 230, 0.6),
        inset -2px -2px 6px rgba(255, 255, 255, 0.3);
}

.underwater-bubble.minimal.tiny {
    width: 4px;
    height: 4px;
}

.underwater-bubble.minimal.small {
    width: 8px;
    height: 8px;
}

.underwater-bubble.minimal.medium {
    width: 12px;
    height: 12px;
}

.underwater-bubble.minimal.large {
    width: 16px;
    height: 16px;
}

.underwater-bubble.minimal.extra-large {
    width: 20px;
    height: 20px;
}

/* Global bubbles - larger sizes and global animation */
.underwater-bubble.global {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: globalUnderwaterBubbleFloat linear infinite;
    opacity: 0.8;
    z-index: 1;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(173, 216, 230, 0.6), transparent);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 0 10px rgba(173, 216, 230, 0.6),
        inset -2px -2px 6px rgba(255, 255, 255, 0.3);
}

.underwater-bubble.global.tiny {
    width: 4px;
    height: 4px;
}

.underwater-bubble.global.small {
    width: 8px;
    height: 8px;
}

.underwater-bubble.global.medium {
    width: 12px;
    height: 12px;
}

.underwater-bubble.global.large {
    width: 18px;
    height: 18px;
}

.underwater-bubble.global.extra-large {
    width: 24px;
    height: 24px;
}

/* Realistic underwater bubble animation - floating upwards */
@keyframes underwaterBubbleFloat {
    0% {
        transform: translateY(calc(100vh + 20px)) translateX(0px) scale(0.3);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        transform: translateY(calc(100vh + 10px)) translateX(0px) scale(0.5);
    }
    25% {
        transform: translateY(75vh) translateX(-10px) scale(0.8);
        opacity: 0.9;
    }
    50% {
        transform: translateY(50vh) translateX(5px) scale(1);
        opacity: 1;
    }
    75% {
        transform: translateY(25vh) translateX(-8px) scale(1.1);
        opacity: 0.8;
    }
    95% {
        transform: translateY(5vh) translateX(3px) scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-10vh) translateX(0px) scale(1.3);
        opacity: 0;
    }
}

/* Enhanced bubble animation for global bubbles - longer journey */
@keyframes globalUnderwaterBubbleFloat {
    0% {
        transform: translateY(calc(100vh + 30px)) translateX(0px) scale(0.2);
        opacity: 0;
    }
    3% {
        opacity: 0.6;
        transform: translateY(calc(100vh + 20px)) translateX(0px) scale(0.4);
    }
    10% {
        opacity: 0.8;
        transform: translateY(90vh) translateX(-5px) scale(0.6);
    }
    25% {
        transform: translateY(75vh) translateX(-15px) scale(0.8);
        opacity: 0.9;
    }
    40% {
        transform: translateY(60vh) translateX(8px) scale(0.95);
        opacity: 1;
    }
    55% {
        transform: translateY(45vh) translateX(-12px) scale(1.05);
        opacity: 1;
    }
    70% {
        transform: translateY(30vh) translateX(6px) scale(1.15);
        opacity: 0.9;
    }
    85% {
        transform: translateY(15vh) translateX(-8px) scale(1.25);
        opacity: 0.6;
    }
    95% {
        transform: translateY(5vh) translateX(4px) scale(1.35);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-15vh) translateX(0px) scale(1.4);
        opacity: 0;
    }
}

/* Floating particle animation for underwater feeling */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-15px) translateX(5px) rotate(90deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-8px) translateX(-8px) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-20px) translateX(3px) rotate(270deg);
        opacity: 0.9;
    }
}

/* Enhanced caustic animation for better underwater effect */
@keyframes subtleCaustics {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.2;
    }
    33% {
        transform: scale(1.1) rotate(120deg);
        opacity: 0.4;
    }
    66% {
        transform: scale(0.9) rotate(240deg);
        opacity: 0.3;
    }
}

/* Underwater sections with light blue tint */
.platform-underwater-section {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.12) 0%,
        rgba(135, 206, 250, 0.18) 100%
    );
    backdrop-filter: blur(1px);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Add underwater ambient light effect */
.platform-underwater-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center top, rgba(173, 216, 230, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Platform-specific underwater colors with light blue tint */
.pc-underwater .platform-underwater-section {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.12) 0%,
        rgba(59, 130, 246, 0.15) 100%
    );
}

.xbox-underwater .platform-underwater-section {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.12) 0%,
        rgba(16, 185, 129, 0.15) 100%
    );
}

.ps-underwater .platform-underwater-section {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.12) 0%,
        rgba(59, 130, 246, 0.15) 100%
    );
}

.switch-underwater .platform-underwater-section {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.12) 0%,
        rgba(239, 68, 68, 0.15) 100%
    );
}

/* Light blue underwater body tint */
.underwater-body {
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}

.underwater-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.08) 0%,
        rgba(135, 206, 250, 0.12) 50%,
        rgba(70, 130, 180, 0.15) 100%
    );
    pointer-events: none;
    z-index: -50;
}

.pc-underwater-body::before {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.08) 0%,
        rgba(135, 206, 250, 0.12) 50%,
        rgba(59, 130, 246, 0.15) 100%
    );
}

.xbox-underwater-body::before {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.08) 0%,
        rgba(144, 238, 144, 0.12) 50%,
        rgba(16, 185, 129, 0.15) 100%
    );
}

.ps-underwater-body::before {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.08) 0%,
        rgba(135, 206, 250, 0.12) 50%,
        rgba(59, 130, 246, 0.15) 100%
    );
}

.switch-underwater-body::before {
    background: linear-gradient(
        180deg,
        rgba(173, 216, 230, 0.08) 0%,
        rgba(255, 182, 193, 0.12) 50%,
        rgba(239, 68, 68, 0.15) 100%
    );
}

/* Ensure no interference with critical sections */
.platform-underwater-particles.minimal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Safety overrides for hero and search areas */
.hero *,
.search *,
nav *,
.navbar *,
.text-4xl,
.text-5xl,
.text-6xl,
h1 {
    background: none !important;
    backdrop-filter: none !important;
}

/* Responsive safety */
@media (max-width: 768px) {
    .underwater-bubble.minimal {
        opacity: 0.2;
    }
    
    .platform-underwater-section {
        background: transparent;
    }
    
    .underwater-body {
        background: none;
    }
}