/* Start custom CSS */<!-- Fonts & Material Icons -->
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">

<!-- Tailwind CSS & Config -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                colors: {
                    "surface-container-lowest": "#0a0a0a",
                    "tertiary": "#d4a547",
                    "tertiary-fixed-dim": "#d4a547",
                    "tertiary-fixed": "#eacb88",
                    "surface-container-high": "#1a1a1a",
                    "surface-container-highest": "#222222",
                    "surface": "#0a0a0a",
                    "on-surface": "#e5e2e1",
                    "on-surface-variant": "#c4c7c7",
                    "on-tertiary": "#412d00",
                    "outline-variant": "#444748"
                },
                fontFamily: {
                    "headline-lg": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "body-md": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "body-lg": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "label-caps": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "headline-md": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "display-lg-mobile": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"],
                    "display-lg": ["Vazirmatn", "Be Vietnam Pro", "sans-serif"]
                },
                boxShadow: {
                    'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
                    'gold-glow': '0 0 40px rgba(212, 165, 71, 0.3)'
                }
            }
        }
    }
</script>

<!-- Custom CSS -->
<style>
    body { overflow-x: hidden; cursor: none; background-color: #0a0a0a; color: #e5e2e1; }
    .glass-panel { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }
    #custom-cursor { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid #d4a547; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s; display: flex; align-items: center; justify-content: center; font-family: "Vazirmatn", sans-serif; font-size: 10px; font-weight: 700; color: transparent; text-transform: uppercase; box-shadow: 0 0 15px rgba(212, 165, 71, 0.5); mix-blend-mode: difference; }
    #custom-cursor.hover-mode { width: 80px; height: 80px; background-color: #d4a547; border-color: #d4a547; color: #0a0a0a; mix-blend-mode: normal; }
    .perspective-container { perspective: 1000px; }
    .tilt-card { transform-style: preserve-3d; transition: transform 0.1s ease-out; will-change: transform; }
    .tilt-inner { transform: translatez(50px); }
    .ambient-glow { position: absolute; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(212, 165, 71, 0.15) 0%, rgba(0, 0, 0, 0) 70%); border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(60px); }
    .magnetic-btn { position: relative; display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .magnetic-btn-inner { display: flex; align-items: center; justify-content: center; padding: 1rem 2rem; background-color: #d4a547; color: #0a0a0a; border-radius: 9999px; font-weight: 700; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
    .marquee-container { overflow: hidden; white-space: nowrap; position: relative; display: flex; }
    .marquee-content { display: flex; animation: marquee 20s linear infinite; }
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
</style>

<!-- GSAP Core & ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<!-- Content -->
<div dir="rtl" class="dark scroll-smooth text-right antialiased selection:bg-tertiary selection:text-black">
    <div id="custom-cursor"></div>
    
    <nav class="fixed top-0 left-0 w-full z-[100] bg-surface-container-lowest/80 backdrop-blur-xl border-b border-white/10 shadow-2xl transition-transform duration-300" id="main-nav">
        <div class="flex justify-between items-center px-6 md:px-20 py-6 w-full max-w-[1440px] mx-auto rtl">
            <a class="hover:scale-105 transition-transform duration-300" data-cursor-text="ZAHIR" href="#">
                <img alt="Zahir Agency" class="h-12 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbmaB6DWc-qEyJLU-r5atUV8Gfh0j7rzs8VNOXgdruHtquhceFp4Pe7_8qAnuEusY-fvYPznAlEj19CQO3v7m3Cy5Jte7rSd77tpH-ISH3iYsaxuWIvNgY7vSiPJV4P3zpwbiLtGahQciVLDwN_LLO7VZfKE1dTUCZJkhg7KZihieWCdTIPGV1RPWlKHRmOm6lfwRP3HKCQL3egrK_cAGaX_ySmID-XcJ4qE0zrF1cQVdqMmhL-Dxqr8JRz46r2kTWLBw">
            </a>
            <div class="hidden md:flex items-center gap-8">
                <a class="font-body-lg text-lg text-on-surface-variant hover:text-tertiary transition-colors" href="#services">خدمات</a>
                <a class="font-body-lg text-lg text-on-surface-variant hover:text-tertiary transition-colors" href="#team">تیم ما</a>
                <a class="font-body-lg text-lg text-on-surface-variant hover:text-tertiary transition-colors" href="#insights">مقالات</a>
            </div>
            <div class="hidden md:block magnetic-btn" data-cursor-text="شروع">
                <button class="magnetic-btn-inner">شروع پروژه</button>
            </div>
        </div>
    </nav>

    <main class="relative z-10 w-full flex flex-col items-center">
        <!-- Hero Section -->
        <section class="relative w-full min-h-screen flex items-center justify-center pt-24 px-6 md:px-20 perspective-container overflow-hidden">
            <div class="ambient-glow top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
            <div class="absolute inset-0 z-0 opacity-30">
                <div class="w-full h-full bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD86qM9D46CjA6uv4_hayjMrCO6izs2DDzNZHt-5JKdQyFaPpdBzIzzNWRSgTbx96dwJl2buAe97mkrQ1OPo9miR7VruCDpuwOSAXb9O1L-fnM0UpHJHGpHXCjv7HGc824AXAC1DmjqygTI9uRAt4l9UUIvBKJ-uq4whU7uXTKx0ds4A5dJvRoFUe9SqH8-fNqtoqCtlKjCHsOiPNZjgfboGCKm_KhsyoHdx3cRVNz0Na7qmBLprrglJA')"></div>
            </div>
            <div class="relative z-10 w-full max-w-5xl glass-panel rounded-xl p-8 md:p-16 tilt-card flex flex-col items-center text-center">
                <div class="tilt-inner w-full flex flex-col items-center">
                    <span class="text-xs text-tertiary mb-4 tracking-widest uppercase font-bold">سلطنت دیجیتال</span>
                    <h1 class="text-5xl md:text-7xl text-on-surface font-black mb-6 leading-tight text-tertiary">
                        آژانس تبلیغاتی ظهیر؛ <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#d4a547] to-[#eacb88]">معماری سلطنت دیجیتال</span>
                    </h1>
                    <p class="text-lg text-on-surface-variant max-w-2xl mb-10">
                        طراحی، اجرا و مدیریت کمپین‌های تبلیغاتی با رویکردی مهندسی شده و زیبایی‌شناسی سینمایی. ما برند شما را برای تسخیر بازار آماده می‌کنیم.
                    </p>
                    <div class="magnetic-btn" data-cursor-text="برو">
                        <a class="magnetic-btn-inner bg-tertiary text-on-tertiary hover:bg-tertiary-fixed transition-colors" href="#contact">مشاوره و شروع کمپین</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Marquee Section -->
        <section class="w-full py-24 bg-surface border-y border-white/5 overflow-hidden">
            <div class="marquee-container">
                <div class="marquee-content gap-16 items-center">
                    <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">کترینگ خاقان</h3>
                    <span class="text-tertiary/30 text-2xl">●</span>
                    <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">تشریفات باغ آریایی</h3>
                    <span class="text-tertiary/30 text-2xl">●</span>
                    <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">پخش من</h3>
                    <span class="text-tertiary/30 text-2xl">●</span>
                     <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">کترینگ خاقان</h3>
                    <span class="text-tertiary/30 text-2xl">●</span>
                    <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">تشریفات باغ آریایی</h3>
                    <span class="text-tertiary/30 text-2xl">●</span>
                    <h3 class="text-4xl md:text-5xl font-black text-surface-container-highest hover:text-tertiary hover:shadow-gold-glow transition-all duration-300">پخش من</h3>
                </div>
            </div>
        </section>
    </main>
</div>

<!-- Interactive Scripts -->
<script>
    setTimeout(() => {
        const cursor = document.getElementById('custom-cursor');
        const hoverElements = document.querySelectorAll('[data-cursor-text]');

        document.addEventListener('mousemove', (e) => {
            if(cursor) cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
        });

        hoverElements.forEach(el => {
            el.addEventListener('mouseenter', () => {
                const text = el.getAttribute('data-cursor-text');
                cursor.classList.add('hover-mode');
                cursor.textContent = text;
            });
            el.addEventListener('mouseleave', () => {
                cursor.classList.remove('hover-mode');
                cursor.textContent = '';
            });
        });

        const magneticBtns = document.querySelectorAll('.magnetic-btn');
        magneticBtns.forEach(btn => {
            btn.addEventListener('mousemove', (e) => {
                const rect = btn.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;
                const inner = btn.querySelector('.magnetic-btn-inner');
                if(inner) inner.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
            });
            btn.addEventListener('mouseleave', () => {
                const inner = btn.querySelector('.magnetic-btn-inner');
                if(inner) inner.style.transform = `translate(0px, 0px)`;
            });
        });

        const tiltCards = document.querySelectorAll('.tilt-card');
        tiltCards.forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                const rotateX = ((y - centerY) / centerY) * -10; 
                const rotateY = ((x - centerX) / centerX) * 10;
                card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
            });
            card.addEventListener('mouseleave', () => {
                card.style.transform = `rotateX(0deg) rotateY(0deg)`;
            });
        });
    }, 500);
</script>/* End custom CSS */