/* Custom styles for Ocean Terrace */

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

/* Navbar scroll state */
nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(88, 28, 135, 0.08);
}

nav.scrolled .nav-logo-text {
    color: #3b0764;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #faf5ff;
}
::-webkit-scrollbar-thumb {
    background: #d8b4fe;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c084fc;
}

/* Selection color */
::selection {
    background: #e9d5ff;
    color: #3b0764;
}

/* Image loading placeholder */
img {
    background: linear-gradient(135deg, #f3e8ff 0%, #fef3c7 100%);
}

/* Subtle gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, #9333ea 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero image gradient overlay */
.hero-img-overlay {
    position: relative;
}
.hero-img-overlay::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(59, 7, 100, 0.3), transparent);
    border-radius: 0 0 1.5rem 1.5rem;
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.float-anim {
    animation: float 6s ease-in-out infinite;
}
.float-anim-delay {
    animation: float 6s ease-in-out 3s infinite;
}

/* Pulse for accent dots */
@keyframes softPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}
.animate-soft-pulse {
    animation: softPulse 3s ease-in-out infinite;
}

/* Button magnetic hover effect area */
.btn-magnetic {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Card tilt on hover */
.card-tilt {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-tilt:hover {
    transform: translateY(-4px);
}
</style>
<sm-file path="script.js">
// Ocean Terrace — Interactive Script

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

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

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

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

    // ── Mobile menu ──
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = mobileMenu.querySelectorAll('a');

    mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
        const isOpen = !mobileMenu.classList.contains('hidden');
        mobileMenuBtn.innerHTML = isOpen
            ? '<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>'
            : '<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="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>';
    });

    mobileLinks.forEach(link => {
        link.addEventListener('click', () => {
            mobileMenu.classList.add('hidden');
            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="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>';
        });
    });

    // ── Scroll reveal (progressive enhancement) ──
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');

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

        revealElements.forEach(el => revealObserver.observe(el));
    } else {
        // For reduced motion: show everything immediately
        document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach(el => {
            el.classList.add('visible');
        });
    }

    // ── Contact form ──
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');

    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();

        // Simulate form submission
        const submitBtn = contactForm.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        submitBtn.textContent = 'Sending...';
        submitBtn.disabled = true;

        setTimeout(() => {
            contactForm.style.display = 'none';
            formSuccess.classList.remove('hidden');
            formSuccess.classList.add('reveal', 'visible');
        }, 1200);
    });

    // ── Smooth anchor scrolling with offset ──
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const offset = 80;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ── Parallax on hero decorative blobs ──
    const heroSection = document.getElementById('hero');
    const blobs = heroSection.querySelectorAll('.absolute.rounded-full');

    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const rate = scrolled * 0.15;
            blobs.forEach((blob, i) => {
                const speed = (i + 1) * 0.5;
                blob.style.transform = `translateY(${scrolled * speed * 0.1}px)`;
            });
        }, { passive: true });
    }
});
</script>