/* Custom styles for House of Determination */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display {
    font-family: 'Playfair Display', serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f3e8ff;
}
::-webkit-scrollbar-thumb {
    background: #7e22ce;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b21a8;
}

/* Mobile menu animation */
#menuBtn.active #bar1 {
    transform: rotate(45deg) translate(5px, 5px);
}
#menuBtn.active #bar2 {
    opacity: 0;
}
#menuBtn.active #bar3 {
    width: 24px;
    margin-left: 0;
}

/* Scroll reveal animations - progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s 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; }
    .reveal-delay-5 { transition-delay: 0.5s; }
}

/* Navbar scroll effect */
.navbar-scrolled {
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.1);
}

/* Geometric shape animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}
@keyframes float-reverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(20px) rotate(-5deg); }
}
.hero-shape-1 { animation: float 6s ease-in-out infinite; }
.hero-shape-2 { animation: float-reverse 8s ease-in-out infinite; }
.hero-shape-3 { animation: float 7s ease-in-out infinite; }

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #7e22ce, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover effects */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
}

/* Button pulse effect */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(251, 191, 36, 0); }
}
.btn-pulse:hover {
    animation: pulse-glow 1.5s infinite;
}

/* Image gallery hover */
.gallery-item {
    overflow: hidden;
}
.gallery-item img {
    transition: transform 0.7s ease;
}
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Counter animation */
.counter {
    display: inline-block;
}
</style>

<sm-file path="script.js">
// House of Determination - Interactive Scripts

document.addEventListener('DOMContentLoaded', function() {
    // Mobile menu toggle
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = mobileMenu.querySelectorAll('a');
    
    menuBtn.addEventListener('click', function() {
        menuBtn.classList.toggle('active');
        mobileMenu.style.maxHeight = mobileMenu.style.maxHeight === '0px' || mobileMenu.style.maxHeight === '' ? '400px' : '0px';
    });
    
    // Close mobile menu when clicking a link
    mobileLinks.forEach(link => {
        link.addEventListener('click', () => {
            menuBtn.classList.remove('active');
            mobileMenu.style.maxHeight = '0px';
        });
    });
    
    // Navbar scroll effect
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;
    
    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
        
        lastScroll = currentScroll;
    });
    
    // 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'
                });
            }
        });
    });
    
    // Scroll reveal animations (progressive enhancement)
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
    
    if (prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.reveal');
        
        const observerOptions = {
            root: null,
            rootMargin: '0px 0px -100px 0px',
            threshold: 0.1
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        revealElements.forEach(el => observer.observe(el));
    }
    
    // Contact form handling
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(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');
            }, 1500);
        });
    }
    
    // Counter animation for stats
    const counters = document.querySelectorAll('.font-display.text-4xl');
    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const counter = entry.target;
                const target = parseInt(counter.textContent);
                const suffix = counter.textContent.replace(/[0-9]/g, '');
                let current = 0;
                const increment = target / 50;
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        counter.textContent = target + suffix;
                        clearInterval(timer);
                    } else {
                        counter.textContent = Math.floor(current) + suffix;
                    }
                }, 30);
                counterObserver.unobserve(counter);
            }
        });
    }, { threshold: 0.5 });
    
    counters.forEach(counter => counterObserver.observe(counter));
    
    // Add reveal class to elements
    document.querySelectorAll('section > div > div, .service-card, .gallery-item').forEach((el, i) => {
        el.classList.add('reveal');
        el.classList.add(`reveal-delay-${(i % 3) + 1}`);
    });
});