/* Custom styles for Yakiniku Koryowon */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Marquee animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Navbar scroll effect */
.navbar-scrolled {
    background: rgba(8, 14, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Scroll reveal animations (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
}

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

::-webkit-scrollbar-track {
    background: #080e1a;
}

::-webkit-scrollbar-thumb {
    background: #14b8a6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2dd4bf;
}

/* Selection color */
::selection {
    background: rgba(20, 184, 166, 0.3);
    color: #f0fdfa;
}

/* Focus styles */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile menu transition */
#mobileMenu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero card float animation */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(var(--rotate, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--rotate, 0deg)); }
}

.floating-card-1 {
    animation: float 4s ease-in-out infinite;
    --rotate: -3deg;
}

.floating-card-2 {
    animation: float 5s ease-in-out infinite;
    --rotate: 3deg;
}

.floating-card-3 {
    animation: float 4.5s ease-in-out infinite;
    --rotate: 6deg;
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Geometric pattern overlay */
.geo-pattern {
    background-image:
        linear-gradient(45deg, rgba(20, 184, 166, 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(20, 184, 166, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(20, 184, 166, 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(20, 184, 166, 0.03) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
}
</style>

<sm-file path="script.js">
// Yakiniku Koryowon — Interactive Scripts

document.addEventListener('DOMContentLoaded', () => {

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

    function handleNavbarScroll() {
        const currentScroll = window.pageYOffset;

        if (currentScroll > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }

        lastScroll = currentScroll;
    }

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

    // ── Mobile menu ──
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuIcon = document.getElementById('menuIcon');
    const closeIcon = document.getElementById('closeIcon');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function toggleMobileMenu() {
        const isOpen = !mobileMenu.classList.contains('hidden');

        if (isOpen) {
            mobileMenu.classList.add('hidden');
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
            document.body.style.overflow = '';
        } else {
            mobileMenu.classList.remove('hidden');
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
    }

    mobileMenuBtn.addEventListener('click', toggleMobileMenu);

    mobileLinks.forEach(link => {
        link.addEventListener('click', () => {
            if (!mobileMenu.classList.contains('hidden')) {
                toggleMobileMenu();
            }
        });
    });

    // ── Scroll reveal (progressive enhancement) ──
    // Only enable if user hasn't requested reduced motion
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.reveal');

        const revealObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        revealElements.forEach(el => revealObserver.observe(el));
    }

    // ── Floating cards animation classes ──
    const floatingCards = document.querySelectorAll('.floating-card-1, .floating-card-2, .floating-card-3');
    floatingCards.forEach(card => {
        card.classList.add('floating-card-1');
    });

    // ── Smooth scroll for anchor links ──
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const offsetTop = target.offsetTop - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ── Active nav link highlighting ──
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('nav a[href^="#"]');

    function highlightNav() {
        const scrollPos = window.pageYOffset + 150;

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');

            if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
                navLinks.forEach(link => {
                    link.classList.remove('text-teal-400');
                    if (link.getAttribute('href') === `#${sectionId}`) {
                        link.classList.add('text-teal-400');
                    }
                });
            }
        });
    }

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

});