/* ------------------------------------------------------------
MASTER STYLES (Consolidated and Debugged)
------------------------------------------------------------ */

/* BASE STYLES */
body {
box-sizing: border-box;
font-family: 'Inter', sans-serif;
background-color: #0D0D0D;
color: #E0E0E0;
}
.font-serif { font-family: 'Playfair Display', serif; }
.silver-text { color: #c0c0c0; }
.silver-bg { background-color: #c0c0c0; }

/* HERO SECTION BACKGROUND */
.hero-bg {
background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://cdn.shopify.com/s/files/1/0595/3573/5047/files/IBM-P03-Black-1.jpg?v=1717145831&width=1800');
background-size: cover;
background-position: center;
background-attachment: fixed;
will-change: transform;
}
.parallax-bg {
background-attachment: fixed;
background-size: cover;
background-position: center;
will-change: transform;
}
.parallax-element {
will-change: transform;
transition: transform 0.1s ease-out;
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}

/* BUTTONS */
.btn-primary {
display: inline-block;
background-color: #c0c0c0;
color: #1f2937;
font-weight: bold;
padding: 16px 40px;
border-radius: 12px;
font-size: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
text-decoration: none;
box-shadow: 0 10px 30px rgba(192, 192, 192, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 20px 40px rgba(192, 192, 192, 0.4);
}
.btn-secondary {
display: inline-block;
background: transparent;
color: #c0c0c0;
border: 2px solid #c0c0c0;
font-weight: bold;
padding: 14px 38px;
border-radius: 12px;
font-size: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
.btn-secondary:hover {
background-color: #c0c0c0;
color: #1f2937;
transform: translateY(-2px);
}

/* TYPOGRAPHY & STRUCTURE */
.section-title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.section-title {
font-size: 3.75rem;
}
}
.section-subtitle {
font-size: 18px;
color: #9ca3af;
max-width: 42rem;
margin: 0 auto;
}

/* CARDS & FORMS */
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(192,192,192,0.4);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Form Styling */
.booking-form {
background: linear-gradient(135deg, rgba(192,192,192,0.1), rgba(192,192,192,0.05));
backdrop-filter: blur(20px);
border: 2px solid rgba(192,192,192,0.2);
}
.form-input {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #E0E0E0;
padding: 12px 16px;
border-radius: 8px;
width: 100%;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #c0c0c0;
background: rgba(255,255,255,0.15);
}
.form-input::placeholder {
color: #9ca3af;
}
select.form-input option {
background-color: #000000 !important;
color: #ffffff !important;
}
select.form-input optgroup {
background-color: #000000 !important;
color: #c0c0c0 !important;
font-weight: bold;
}

/* URGENCY BANNER */
.urgency-banner {
background: linear-gradient(90deg, #ef4444, #dc2626);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.benefit-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}

/* CAROUSEL & SCROLLBAR */
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-slide {
min-width: 300px;
margin-right: 2rem;
flex-shrink: 0;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(192, 192, 192, 0.9);
color: #1f2937;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.carousel-btn:hover {
background: #c0c0c0;
transform: translateY(-50%) scale(1.1);
}
.carousel-btn.prev {
left: -25px;
}
.carousel-btn.next {
right: -25px;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}

/* ------------------------------------------------------------
IMAGE INTEGRATION STYLES (WebP/Fallback)
------------------------------------------------------------ */

/* Common styling for cards using custom backgrounds */
.feature-card-with-bg-custom {
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
color: white;
}
.feature-card-with-bg-custom::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* This creates the transparent, darkening overlay */
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
z-index: 1;
}
.feature-card-with-bg-custom > * {
position: relative;
z-index: 2;
}

/* FALLBACK: Standard image for non-WebP browsers (using the provided .jpg) */
.bg-zero-gravity-support {
background-image: url('assets/images/Zero gravity positioning.jpg');
}

/* WEBP SUPPORT: Uses the superior WebP file if the browser supports it */
@supports (background-image: url('assets/images/Zero gravity positioning.webp')) {
.bg-zero-gravity-support {
background-image: url('assets/images/Zero gravity positioning.webp');
}
}

/* BOOKING PAGE: TIME SLOTS */
.time-slot-btn {
border: 1px solid #4b5563; /* gray-600 */
padding: 10px;
border-radius: 8px;
transition: all 0.2s ease;
}

.time-slot-btn:hover {
border-color: #fbbf24; /* yellow-400 */
color: #fbbf24;
}

/* --- SCROLLED NAV STYLES --- */
#navbar.scrolled-nav {
    /* Make the background less transparent/more solid black */
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Add a subtle bottom line for separation */
    border-bottom: 1px solid rgba(192, 192, 192, 0.2); 
    /* Slightly reduce vertical padding to save screen space */
    padding-top: 10px; 
    padding-bottom: 10px;
}

/* --- NEW ADDITION: MAILCHIMP OVERRIDES --- */
#mc_embed_signup {
    /* Overrides Mailchimp's default white background */
    background: transparent !important;
    font-family: inherit !important;
}

#mc_embed_signup h2 {
    /* Hides Mailchimp's redundant H2 title */
    display: none !important;
}

#mc_embed_signup .mc-field-group {
    /* Remove default Mailchimp margins and float */
    margin: 0 !important;
    float: none !important;
}

#mc_embed_signup label, 
#mc_embed_signup .indicates-required,
#mc_embed_signup .small-meta {
    /* Ensures labels and metadata are visible against dark background */
    color: #c0c0c0 !important;
    font-size: 14px !important;
    text-align: left !important;
    display: none; /* We hide labels since placeholder text is used */
}

#mc_embed_signup .button {
    /* Overrides Mailchimp's default button styling */
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    /* Adopts primary button styling */
    background-color: #c0c0c0 !important;
    color: #1f2937 !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
}

// Serenity Lounge Master Scripts

// Ensure no scripts run until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {

    // --- 1. Smooth scrolling for navigation links ---
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // --- 2. Advanced parallax scrolling effects ---
    let ticking = false;
    
    function updateParallax() {
        const scrolled = window.pageYOffset;
        const rate = scrolled * -0.5;
        
        // Hero section parallax
        const heroSection = document.querySelector('#home');
        if (heroSection) {
            heroSection.style.transform = `translate3d(0, ${rate}px, 0)`;
        }
        
        // --- IMPROVEMENT: Navbar state on scroll ---
        const navbar = document.getElementById('navbar');
        if (navbar) {
            if (scrolled > 100) {
                // Add a class that can be targeted by CSS for visual changes
                navbar.classList.add('scrolled-nav'); 
            } else {
                // Remove the class when returning to the top
                navbar.classList.remove('scrolled-nav');
            }
        }
        
        ticking = false;
    }

    function requestTick() {
        if (!ticking) {
            requestAnimationFrame(updateParallax);
            ticking = true;
        }
    }

    // Optimized scroll listener
    window.addEventListener('scroll', requestTick);
    
    // Initialize on load
    window.addEventListener('load', updateParallax);


    // --- 3. AI Control Commands functionality (Wellness Programs) ---
    const wellnessPrograms = {
        // Low Intensity Programs
        'deep-sleep': {
            title: 'Deep Sleep Massage',
            description: 'Full body massage with swing function, soft massage helps to have a nice nap.',
            benefits: ['Promotes deep sleep', 'Gentle relaxation', 'Stress relief', 'Improved sleep quality'],
            features: ['Swing function', 'Soft massage rollers', 'Zero gravity positioning', 'Gentle airbag compression'],
            duration: '30-45 minutes',
            intensity: 'Low'
        },
        'soft-massage': {
            title: 'Soft Massage',
            description: 'Suitable for elderly, full body massage in the lightest way to relieve back pain and leg cramp.',
            benefits: ['Gentle on joints', 'Pain relief', 'Improved circulation', 'Muscle relaxation'],
            features: ['Ultra-soft rollers', 'Minimal pressure', 'Full body coverage', 'Comfort positioning'],
            duration: '20-30 minutes',
            intensity: 'Low'
        },
        'slim-massage': {
            title: 'Slim Massage',
            description: 'Soft massage focused on the waist and hip.',
            benefits: ['Targeted waist care', 'Hip flexibility', 'Core muscle relief', 'Posture improvement'],
            features: ['Focused massage zones', 'Waist targeting', 'Hip compression', 'Gentle intensity'],
            duration: '15-25 minutes',
            intensity: 'Low'
        },
        'wake-up': {
            title: 'Wake Up',
            description: 'Give a soothing, gentle massage all over your body to help open up the meridians and allow blood to flow freely.',
            benefits: ['Morning energy boost', 'Improved circulation', 'Meridian activation', 'Gentle awakening'],
            features: ['Full body massage', 'Circulation enhancement', 'Gentle stimulation', 'Energy activation'],
            duration: '10-20 minutes',
            intensity: 'Low'
        },
        'yoga': {
            title: 'Yoga',
            description: 'By the inter-working of back rollers and whole body airbags, integrate some YOGA stretching action on the body to stretch the leg, waist and arm.',
            benefits: ['Flexibility improvement', 'Muscle stretching', 'Joint mobility', 'Balance enhancement'],
            features: ['Yoga-inspired movements', 'Stretching sequences', 'Full body airbags', 'Coordinated rollers'],
            duration: '25-35 minutes',
            intensity: 'Low'
        },
        'noon-rest': {
            title: 'Noon Rest',
            description: 'Have a massage during your lunch break to relieve tension. With the swing function under zero gravity, you can better enter a relaxed state and relieve muscle tension.',
            benefits: ['Midday relaxation', 'Tension relief', 'Quick recharge', 'Stress reduction'],
            features: ['Zero gravity swing', 'Quick session', 'Tension targeting', 'Relaxation focus'],
            duration: '15-20 minutes',
            intensity: 'Low'
        },
        // Medium Intensity Programs
        'shiatsu': {
            title: 'Shiatsu Massage',
            description: 'Deep Shiatsu: Full body massage, focus on deep shiatsu massage, relax your full body.',
            benefits: ['Deep muscle relief', 'Traditional technique', 'Full body relaxation', 'Pressure point therapy'],
            features: ['Shiatsu technique', 'Deep pressure points', 'Traditional patterns', 'Full body coverage'],
            duration: '30-45 minutes',
            intensity: 'Medium'
        },
        'tcm-recuperating': {
            title: 'TCM Recuperating',
            description: 'Full body massage combines with Chinese medicine massage method.',
            benefits: ['Traditional healing', 'Energy balance', 'Holistic wellness', 'Meridian therapy'],
            features: ['TCM techniques', 'Meridian focus', 'Energy pathways', 'Traditional patterns'],
            duration: '40-50 minutes',
            intensity: 'Medium'
        },
        'lady-care': {
            title: 'Lady Care',
            description: 'Program customized for ladies. Massage from soft to deep on the whole body, help to relieve fatigue.',
            benefits: ['Female-focused care', 'Progressive intensity', 'Customized comfort'],
            features: ['Progressive intensity', 'Female ergonomics', 'Comfort optimization', 'Fatigue targeting'],
            duration: '35-45 minutes',
            intensity: 'Medium'
        },
        'spine-care': {
            title: 'Spine Care Massage',
            description: 'Massage focus on the spine area to relax the body.',
            benefits: ['Spinal alignment', 'Back pain relief', 'Posture improvement', 'Core stability'],
            features: ['Spine-focused rollers', 'Alignment therapy', 'Targeted pressure', 'Postural support'],
            duration: '25-35 minutes',
            intensity: 'Medium'
        },
        'relaxing': {
            title: 'Relaxing Massage',
            description: 'Full body massage, medium intensity of rollers and airbags massage.',
            benefits: ['Balanced relaxation', 'Moderate pressure', 'Full body relief', 'Stress reduction'],
            features: ['Medium intensity', 'Balanced pressure', 'Full body airbags', 'Comprehensive coverage'],
            duration: '30-40 minutes',
            intensity: 'Medium'
        },
        'waist-back': {
            title: 'Waist & Back Massage',
            description: 'Partial massage, focus on waist and back, help to relieve muscle soreness of waist and back.',
            benefits: ['Lower back relief', 'Waist tension release', 'Targeted therapy', 'Posture support'],
            features: ['Focused zones', 'Back targeting', 'Waist compression', 'Soreness relief'],
            duration: '20-30 minutes',
            intensity: 'Medium'
        },
        'neck-shoulder': {
            title: 'Neck & Shoulder Massage',
            description: 'Partial massage, focus on neck and shoulder, help to relieve muscle soreness of neck and shoulder.',
            benefits: ['Neck tension relief', 'Shoulder relaxation', 'Upper body focus', 'Headache prevention'],
            features: ['Upper body focus', 'Neck targeting', 'Shoulder compression', 'Tension relief'],
            duration: '15-25 minutes',
            intensity: 'Medium'
        },
        'sport-care': {
            title: 'Sport Care Massage',
            description: 'Full body massage, a program designed specifically for athletes and fitness person.',
            benefits: ['Athletic recovery', 'Performance enhancement', 'Muscle preparation', 'Injury prevention'],
            features: ['Sports-focused', 'Recovery optimization', 'Performance targeting', 'Athletic patterns'],
            duration: '35-45 minutes',
            intensity: 'Medium'
        },
        // High Intensity Programs
        'deep-stretch': {
            title: 'Deep Stretch Massage',
            description: 'Full body massage, stretch your leg and back to better relieve muscle soreness after sport or hard work.',
            benefits: ['Deep muscle relief', 'Post-workout recovery', 'Flexibility enhancement', 'Soreness reduction'],
            features: ['Deep stretching', 'Intensive pressure', 'Recovery focus', 'Muscle targeting'],
            duration: '40-50 minutes',
            intensity: 'High'
        },
        'master': {
            title: 'Master Massage',
            description: 'Full body massage, strong intensity of rollers and airbags massage.',
            benefits: ['Maximum intensity', 'Deep tissue work', 'Comprehensive relief', 'Professional level'],
            features: ['Maximum pressure', 'Intensive rollers', 'Strong airbags', 'Professional grade'],
            duration: '45-60 minutes',
            intensity: 'High'
        },
        'refreshing': {
            title: 'Refreshing Massage',
            description: 'Full body massage wake up the body, strong intensity for roller and airbag massage.',
            benefits: ['Energy activation', 'Body awakening', 'Circulation boost', 'Vitality enhancement'],
            features: ['High intensity', 'Energizing patterns', 'Strong stimulation', 'Activation focus'],
            duration: '30-40 minutes',
            intensity: 'High'
        },
        'gentleman-care': {
            title: 'Gentleman Care',
            description: 'Program customized for gentlemen. By the inter-working of rollers and airbags, massage from soft to deep on the neck, shoulder, waist, back and feet, relieve the fatigue of the whole body.',
            benefits: ['Male-focused care', 'Progressive intensity', 'Comprehensive relief', 'Fatigue elimination'],
            features: ['Male ergonomics', 'Progressive pressure', 'Multi-zone targeting', 'Comprehensive coverage'],
            duration: '40-50 minutes',
            intensity: 'High'
        }
    };

    let selectedProgram = null;

    const wellnessSelect = document.getElementById('wellnessProgram');
    if (wellnessSelect) {
        wellnessSelect.addEventListener('change', function() {
            const programKey = this.value;
            if (programKey) {
                selectedProgram = programKey;
                showProgramDetails();
            } else {
                document.getElementById('programDetails').classList.add('hidden');
            }
        });
    }

    function showProgramDetails() {
        const program = wellnessPrograms[selectedProgram];
        
        document.getElementById('programTitle').textContent = program.title;
        document.getElementById('programDescription').textContent = program.description;
        document.getElementById('programDuration').textContent = program.duration;
        document.getElementById('programIntensity').textContent = program.intensity;
        
        // Populate benefits
        const benefitsList = document.getElementById('programBenefits');
        benefitsList.innerHTML = '';
        program.benefits.forEach(benefit => {
            const li = document.createElement('li');
            li.textContent = '• ' + benefit;
            benefitsList.appendChild(li);
        });
        
        // Populate features
        const featuresList = document.getElementById('programFeatures');
        featuresList.innerHTML = '';
        program.features.forEach(feature => {
            const li = document.createElement('li');
            li.textContent = '• ' + feature;
            featuresList.appendChild(li);
        });
        
        document.getElementById('programDetails').classList.remove('hidden');
    }

    // --- 4. Carousel auto-scroll and animations ---
    const carousel = document.getElementById('featuresCarousel');
    let scrollPosition = 0;
    const cardWidth = 320; // 320px (w-80) + 24px gap
    
    function autoScroll() {
        if (carousel) {
            scrollPosition += cardWidth;
            if (scrollPosition >= carousel.scrollWidth - carousel.clientWidth) {
                scrollPosition = 0;
            }
            carousel.scrollTo({
                left: scrollPosition,
                behavior: 'smooth'
            });
        }
    }
    
    // Auto-scroll every 4 seconds
    setInterval(autoScroll, 4000);

    // Intersection Observer for fade-in animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe elements for fade-in effect
    const animatedElements = document.querySelectorAll('.glass-effect, .feature-card');
    animatedElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(30px)';
        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(element);
    });
});