:root {
    /* Dark Mode (default) CSS variables */
    --deep-sea: #020d14;
    --dark-cyan: #062c3d;
    --mid-cyan: #0a5270;
    --neon-cyan: #00f0ff;
    --neon-green: #00ff9d;
    --text-muted: #8ab4f8;
    
    --text-white: #ffffff;
    --text-gray-200: #e5e7eb;
    --text-gray-300: #d1d5db;
    --text-gray-400: #9ca3af;
    --text-gray-500: #6b7280;

    --glass-bg: rgba(6, 44, 61, 0.4);
    --glass-border: rgba(0, 240, 255, 0.1);
    --hero-glow-bg: radial-gradient(circle at 50% 30%, #062c3d 0%, #020d14 70%);
    --footer-bg: #01080d;
}

body.light-mode {
    /* Light Mode CSS variables — high contrast, fully readable */
    --deep-sea: #e2e8f0;          /* Slate-200: bright, clean background */
    --dark-cyan: #cbd5e1;         /* Slate-300: section contrast bg */
    --mid-cyan: #94a3b8;          /* Slate-400: borders and subtle elements */
    --neon-cyan: #0369a1;         /* Sky-700: deep, bold cyan for text/accents */
    --neon-green: #15803d;        /* Green-700: deep, bold green for accents */
    --text-muted: #334155;        /* Slate-700: clearly readable muted text */
    
    --text-white: #0f172a;        /* Slate-900: maximum contrast for headings */
    --text-gray-200: #1e293b;     /* Slate-800 */
    --text-gray-300: #334155;     /* Slate-700 */
    --text-gray-400: #475569;     /* Slate-600 */
    --text-gray-500: #64748b;     /* Slate-500 */

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(3, 105, 161, 0.2);
    --hero-glow-bg: radial-gradient(circle at 50% 30%, #cbd5e1 0%, #e2e8f0 70%);
    --footer-bg: #1e293b;         /* Dark footer for contrast in light mode */
}

body {
    background-color: var(--deep-sea);
    color: var(--text-gray-200);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glowing background effect for Hero */
.hero-glow {
    background: var(--hero-glow-bg);
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

/* Subtle floating animation for elements */
.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Glassmorphism utility for dark theme */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Fade in animations */
.fade-in {
    animation: fadeIn 1s ease-in forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-1 {
    animation-delay: 0.2s;
}

.stagger-2 {
    animation-delay: 0.4s;
}

.stagger-3 {
    animation-delay: 0.6s;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--deep-sea);
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb {
    background: var(--mid-cyan);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan);
}

/* Subtle background texture/pattern */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300f0ff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* --- Form Fields Contrast / Visibility Styles --- */
#reportForm input, 
#reportForm select, 
#reportForm textarea {
    background-color: rgba(2, 13, 20, 0.7) !important;
    color: #ffffff !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
}

#reportForm select option {
    background-color: #020d14 !important;
    color: #ffffff !important;
}

/* Light Mode Overrides for Form Fields */
body.light-mode #reportForm input, 
body.light-mode #reportForm select, 
body.light-mode #reportForm textarea {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
    border-color: rgba(11, 122, 153, 0.3) !important;
}

body.light-mode #reportForm select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* --- Performance Rendering Optimizations --- */
#tentang, #dugong, #lamun, #distribusi, #program, #instagram-feed, #lapor, #kontak {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* --- Hero Background Image & Overlay Customizations --- */
.hero-bg-image {
    opacity: 0.98;
    mix-blend-mode: normal;
    filter: brightness(0.6) contrast(1.15) saturate(1.2);
    transition: filter 0.3s ease, opacity 0.3s ease;
    object-position: center 40%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-bg-overlay {
    background: transparent !important;
    transition: background 0.3s ease;
}

/* Mobile responsive hero image */
@media (max-width: 639px) {
    .hero-bg-image {
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        top: 0 !important;
        object-position: center top !important;
        opacity: 0.98;
        /* Smooth mask to fade the bottom of the square image so the full dugong is shown and blends into the background */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important;
    }
    
    .hero-bg-overlay {
        background: transparent !important;
    }
}

/* Tablet responsive */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero-bg-image {
        object-position: center 35%;
    }
}

body.light-mode .hero-bg-image {
    opacity: 0.98;
    mix-blend-mode: normal;
    filter: brightness(0.55) contrast(1.15) saturate(1.25);
}

body.light-mode .hero-bg-overlay {
    background: transparent !important;
}

body.light-mode .bubble {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(8, 145, 178, 0.08) 40%, rgba(8, 145, 178, 0.2) 80%, rgba(255, 255, 255, 0.7));
    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.15), inset 0 0 6px rgba(255, 255, 255, 0.7);
    border: 0.5px solid rgba(8, 145, 178, 0.15);
}

/* --- Animated Bubbles --- */
.bubble {
    position: absolute;
    bottom: -50px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(0, 240, 255, 0.08) 40%, rgba(0, 240, 255, 0.25) 80%, rgba(255, 255, 255, 0.5));
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 240, 255, 0.12), inset 0 0 6px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: bubble-rise 12s infinite linear;
    z-index: 1;
}

@keyframes bubble-rise {
    0% {
        bottom: -50px;
        transform: translateX(0) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        bottom: 110%;
        transform: translateX(80px) scale(1.1);
        opacity: 0;
    }
}

/* Bubble Specific Delay & Positions */
.bubble-1 { width: 30px; height: 30px; left: 8%; animation-duration: 14s; animation-delay: 0s; }
.bubble-2 { width: 16px; height: 16px; left: 24%; animation-duration: 9s; animation-delay: 2s; }
.bubble-3 { width: 22px; height: 22px; left: 38%; animation-duration: 12s; animation-delay: 4s; }
.bubble-4 { width: 42px; height: 42px; left: 52%; animation-duration: 16s; animation-delay: 1s; }
.bubble-5 { width: 14px; height: 14px; left: 68%; animation-duration: 8s; animation-delay: 5s; }
.bubble-6 { width: 28px; height: 28px; left: 82%; animation-duration: 13s; animation-delay: 3s; }
.bubble-7 { width: 20px; height: 20px; left: 30%; animation-duration: 11s; animation-delay: 7s; }
.bubble-8 { width: 36px; height: 36px; left: 76%; animation-duration: 15s; animation-delay: 6s; }

/* ======================================== */
/* --- Light Mode Comprehensive Overrides --- */
/* ======================================== */

/* Footer: dark background in light mode, so text must be light */
body.light-mode footer {
    color: #94a3b8;
}

body.light-mode footer h4,
body.light-mode footer .text-white,
body.light-mode footer span.text-white {
    color: #f1f5f9 !important;
}

body.light-mode footer .text-gray-400,
body.light-mode footer .text-gray-500,
body.light-mode footer .text-gray-600,
body.light-mode footer a:not(.hover\:text-neon-cyan):not([class*="bg-"]) {
    color: #94a3b8 !important;
}

body.light-mode footer a:hover {
    color: var(--neon-cyan) !important;
}

body.light-mode footer .text-mid-cyan {
    color: #475569 !important;
}

/* Footer social media icon circles: ensure visible on dark footer */
body.light-mode footer .bg-dark-cyan {
    background-color: #334155 !important;
}

/* Footer brand name */
body.light-mode footer .text-neon-cyan {
    color: #38bdf8 !important;
}

body.light-mode footer .border-mid-cyan\/20 {
    border-color: rgba(71, 85, 105, 0.3) !important;
}

/* Gradient text clips — use darker gradient in light mode */
body.light-mode .bg-gradient-to-r.from-neon-cyan.to-neon-green {
    --tw-gradient-from: #0369a1;
    --tw-gradient-to: #15803d;
}

/* Neon shadow effects — use subtler shadows in light mode */
body.light-mode .shadow-neon {
    box-shadow: 0 0 15px rgba(3, 105, 161, 0.2) !important;
}

body.light-mode .hover\:shadow-neon:hover {
    box-shadow: 0 0 15px rgba(3, 105, 161, 0.25) !important;
}

/* Glass panel borders — stronger in light mode for definition */
body.light-mode .glass-panel {
    border-color: rgba(3, 105, 161, 0.15);
}

/* Quick Stats & card sections: ensure icon glow is visible */
body.light-mode .drop-shadow-\[0_0_10px_rgba\(0\,240\,255\,0\.4\)\] {
    filter: drop-shadow(0 0 10px rgba(3, 105, 161, 0.3));
}

/* Buttons: ensure CTA buttons are visible and high-contrast */
body.light-mode .bg-neon-cyan {
    background-color: #0369a1 !important;
    color: #ffffff !important;
}

body.light-mode .bg-neon-cyan:hover {
    background-color: #075985 !important;
}

body.light-mode a.bg-neon-cyan,
body.light-mode button.bg-neon-cyan {
    color: #ffffff !important;
}

/* Section background card overrides for stronger contrast */
body.light-mode .bg-deep-sea\/80 {
    background-color: rgba(226, 232, 240, 0.9) !important;
}

body.light-mode .bg-dark-cyan\/20 {
    background-color: rgba(203, 213, 225, 0.4) !important;
}

/* Ensure placeholder text is visible in light mode */
body.light-mode ::placeholder {
    color: #94a3b8 !important;
}

/* Navigation: ensure mobile menu links readable */
body.light-mode #mobile-menu .text-gray-200 {
    color: #1e293b !important;
}

/* Camera modal stays dark always */
body.light-mode #camera-modal {
    background-color: rgba(2, 13, 20, 0.95) !important;
}

body.light-mode #camera-modal .text-white,
body.light-mode #camera-modal h3 {
    color: #ffffff !important;
}

body.light-mode #camera-modal .text-neon-cyan {
    color: #00f0ff !important;
}

/* ========================================================== */
/* --- Hero Section: Always style like dark mode --- */
/* ========================================================== */

#hero-section {
    --deep-sea: #020d14 !important;
    --dark-cyan: #062c3d !important;
    --mid-cyan: #0a5270 !important;
    --neon-cyan: #00f0ff !important;
    --neon-green: #00ff9d !important;
    --text-muted: #8ab4f8 !important;
    
    --text-white: #ffffff !important;
    --text-gray-200: #e5e7eb !important;
    --text-gray-300: #d1d5db !important;
    --text-gray-400: #9ca3af !important;
    --text-gray-500: #6b7280 !important;

    --glass-bg: rgba(6, 44, 61, 0.4) !important;
    --glass-border: rgba(0, 240, 255, 0.1) !important;
    --hero-glow-bg: radial-gradient(circle at 50% 30%, #062c3d 0%, #020d14 70%) !important;
}

#hero-section .bg-gradient-to-r.from-neon-cyan.to-neon-green {
    --tw-gradient-from: #00f0ff !important;
    --tw-gradient-to: #00ff9d !important;
}

#hero-section .bg-neon-cyan {
    background-color: #00f0ff !important;
    color: #020d14 !important;
}

#hero-section .bg-neon-cyan:hover {
    background-color: #ffffff !important;
    color: #020d14 !important;
}

#hero-section a.bg-neon-cyan {
    color: #020d14 !important;
}

#hero-section .shadow-neon {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3) !important;
}

#hero-section .hover\:shadow-neon-strong:hover {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.5) !important;
}

#hero-section .bubble {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(0, 240, 255, 0.08) 40%, rgba(0, 240, 255, 0.25) 80%, rgba(255, 255, 255, 0.5)) !important;
    box-shadow: 0 4px 10px rgba(0, 240, 255, 0.12), inset 0 0 6px rgba(255, 255, 255, 0.5) !important;
    border: none !important;
}

/* Ensure bottom fade transition in hero blends smoothly to the next section's background in both modes */
body.light-mode #hero-section .absolute.bottom-0 {
    --tw-gradient-from: #e2e8f0 !important;
}

/* In light mode, make the background behind the background image white */
body.light-mode #hero-section {
    background: #ffffff !important;
}

/* In light mode on mobile, the text and accents must be dark/high-contrast to be readable against the white background */
@media (max-width: 639px) {
    body.light-mode #hero-section {
        --text-white: #0f172a !important;
        --text-muted: #334155 !important;
        --text-gray-200: #1e293b !important;
        --text-gray-300: #334155 !important;
        --text-gray-400: #475569 !important;
        --text-gray-500: #64748b !important;
        --neon-cyan: #0369a1 !important;
        --neon-green: #15803d !important;
    }
}

/* Hero badge ('MISI KONSERVASI ACEH') always stays neon/light to look great over the dark background image */
#hero-section .hero-badge {
    border-color: rgba(0, 240, 255, 0.3) !important;
    background-color: rgba(0, 240, 255, 0.1) !important;
    color: #00f0ff !important;
}
#hero-section .hero-badge span {
    background-color: #00f0ff !important;
}