/* =====================================
   SUMMER UNDERWATER EFFECTS FOR IN-GAME ITEMS SECTION
   ===================================== */

/* Underwater Background for In-Game Items Section */
.underwater-section {
    background: linear-gradient(
        180deg,
        rgba(4, 20, 42, 0.95) 0%,     /* Very dark blue at top (connecting to waves) */
        rgba(6, 28, 58, 0.98) 20%,    /* Darker blue */
        rgba(8, 35, 70, 1) 40%,       /* Deep blue */
        rgba(5, 25, 55, 1) 60%,       /* Even deeper blue */
        rgba(3, 15, 35, 1) 80%,       /* Very deep blue */
        rgba(1, 8, 20, 1) 100%        /* Almost black at bottom */
    );
    position: relative;
    overflow: hidden;
}

/* Additional depth layer for extreme darkness */
.underwater-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 5, 15, 0.1) 30%,
        rgba(0, 3, 10, 0.3) 60%,
        rgba(0, 1, 5, 0.5) 90%,
        rgba(0, 0, 0, 0.7) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Underwater overlay for depth effect */
.underwater-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center top,
        rgba(25, 80, 140, 0.08) 0%,    /* Very subtle light at top */
        rgba(15, 55, 100, 0.12) 20%,   /* Slight illumination */
        rgba(10, 35, 70, 0.18) 50%,    /* Mid-depth darkness */
        rgba(5, 20, 45, 0.25) 80%,     /* Deep darkness */
        rgba(0, 8, 20, 0.35) 100%      /* Abyss darkness */
    );
    pointer-events: none;
    z-index: 1;
}

/* Underwater particle container */
.underwater-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

/* Bubble particles */
.bubble {
    position: absolute;
    background: radial-gradient(circle, rgba(200, 230, 255, 0.6) 0%, rgba(150, 200, 240, 0.3) 70%, transparent 100%);
    border-radius: 50%;
    animation: bubble-float 6s linear infinite;
    opacity: 0;
}

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

/* Different bubble sizes */
.bubble.small {
    width: 4px;
    height: 4px;
    animation-duration: 4s;
}

.bubble.medium {
    width: 8px;
    height: 8px;
    animation-duration: 6s;
}

.bubble.large {
    width: 12px;
    height: 12px;
    animation-duration: 8s;
}

/* Floating particles (plankton-like) */
.float-particle {
    position: absolute;
    background: radial-gradient(circle, rgba(80, 150, 200, 0.4) 0%, rgba(100, 170, 220, 0.2) 50%, transparent 100%);
    border-radius: 50%;
    animation: float-drift 12s ease-in-out infinite;
    opacity: 0;
}

@keyframes float-drift {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    25% {
        transform: translateX(30px) translateY(-20px) rotate(90deg);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-20px) translateY(-40px) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateX(-40px) translateY(-20px) rotate(270deg);
        opacity: 0.6;
    }
}

/* Different particle sizes */
.float-particle.tiny {
    width: 2px;
    height: 2px;
    animation-duration: 8s;
}

.float-particle.small {
    width: 3px;
    height: 3px;
    animation-duration: 12s;
}

.float-particle.medium {
    width: 4px;
    height: 4px;
    animation-duration: 16s;
}

/* Light rays effect */
.underwater-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(25, 80, 140, 0.06) 25%,
        transparent 50%,
        rgba(25, 80, 140, 0.06) 75%,
        transparent 100%
    );
    background-size: 200px 200px;
    animation: underwater-rays 20s linear infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;
}

@keyframes underwater-rays {
    0% {
        transform: translateX(-100px) translateY(-100px);
    }
    100% {
        transform: translateX(100px) translateY(100px);
    }
}

/* Adjust text colors for underwater theme */
.underwater-section h2 {
    text-shadow: 0 0 20px rgba(25, 80, 140, 0.8), 0 0 40px rgba(25, 80, 140, 0.4);
}

.underwater-section .text-purple-500 {
    color: #60a5fa !important; /* Light blue instead of purple */
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
}

.underwater-section .text-orange-400 {
    color: #fbbf24 !important; /* Keep orange but add glow */
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
}

/* Underwater cards with depth effect */
.underwater-section .bg-gradient-to-br {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 25px rgba(25, 80, 140, 0.3);
    border: 1px solid rgba(25, 80, 140, 0.4);
}

.underwater-section .bg-gradient-to-br:hover {
    box-shadow: 
        0 16px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 35px rgba(25, 80, 140, 0.5);
}

/* Underwater info box */
.underwater-section .bg-gray-800 {
    background: linear-gradient(135deg, rgba(15, 45, 80, 0.9) 0%, rgba(8, 25, 50, 0.95) 100%) !important;
    border: 1px solid rgba(25, 80, 140, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(25, 80, 140, 0.3);
}

/* Content should be above all effects */
.underwater-section > .max-w-7xl {
    position: relative;
    z-index: 15;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bubble {
        animation-duration: 3s;
    }
    
    .float-particle {
        animation-duration: 8s;
    }
    
    .underwater-rays {
        opacity: 0.2;
        animation-duration: 15s;
    }
}