/* Custom styles for Sweet Crush Shaved Ice */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0a0f1e;
}

/* Scroll reveal animations - progressive enhancement, content visible by default */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .reveal.revealed {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* Navbar scroll state */
.navbar-scrolled {
    background: rgba(10, 15, 30, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

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

::-webkit-scrollbar-track {
    background: #0a0f1e;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #c9a84c, #a8872e);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #d4b960, #c9a84c);
}

/* Selection color */
::selection {
    background: rgba(201, 168, 76, 0.3);
    color: #ffffff;
}

/* Mobile menu transitions */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobileMenu.open {
    max-height: 400px;
}

/* Smooth image loading */
img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Gold shimmer effect for special text */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.gold-shimmer {
    background: linear-gradient(
        90deg,
        #d4b960 0%,
        #e0ca78 25%,
        #d4b960 50%,
        #c9a84c 75%,
        #d4b960 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

/* Subtle floating animation for accent cards */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* Pulse animation for status dot */
@keyframes pulse-gold {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212, 185, 96, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(212, 185, 96, 0); }
}

.animate-pulse-gold {
    animation: pulse-gold 2s ease-in-out infinite;
}
</style>

<sm-file path="script.js">
(function() {
    'use strict';

    // Navbar scroll behavior
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleScroll() {
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
        
        lastScroll = currentScroll;
    }

    window.addEventListener('scroll', handleScroll, { passive: true });

    // Mobile menu
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = document.querySelectorAll('.mobile-link');
    let menuOpen = false;

    function toggleMenu() {
        menuOpen = !menuOpen;
        mobileMenu.classList.toggle('open', menuOpen);
        
        // Update button icon
        if (menuOpen) {
            mobileMenuBtn.innerHTML = `
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            `;
        } else {
            mobileMenuBtn.innerHTML = `
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="3" y1="6" x2="21" y2="6"/>
                    <line x1="3" y1="12" x2="21" y2="12"/>
                    <line x1="3" y1="18" x2="21" y2="18"/>
                </svg>
            `;
        }
    }

    mobileMenuBtn.addEventListener('click', toggleMenu);

    // Close mobile menu when clicking a link
    mobileLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            if (menuOpen) {
                toggleMenu();
            }
        });
    });

    // Close mobile menu when clicking outside
    document.addEventListener('click', function(e) {
        if (menuOpen && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
            toggleMenu();
        }
    });

    // Scroll reveal animations (progressive enhancement)
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    
    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        const revealElements = document.querySelectorAll('.reveal');
        
        // Set initial state via JS for progressive enhancement
        revealElements.forEach(function(el) {
            el.classList.add('revealed');
        });
        
        const revealObserver = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    // Stagger the animation slightly based on element position
                    const delay = Array.from(revealElements).indexOf(entry.target) % 3 * 100;
                    setTimeout(function() {
                        entry.target.classList.remove('revealed');
                    }, delay);
                    revealObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });
        
        revealElements.forEach(function(el) {
            revealObserver.observe(el);
        });
    }

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const navHeight = navbar.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Parallax effect for hero image (subtle)
    const heroImg = document.querySelector('#hero img');
    if (heroImg && !prefersReducedMotion) {
        window.addEventListener('scroll', function() {
            const scrolled = window.pageYOffset;
            const rate = scrolled * 0.3;
            if (scrolled < window.innerHeight) {
                heroImg.style.transform = 'translateY(' + rate + 'px) scale(1.05)';
            }
        }, { passive: true });
    }
})();
</script>