<?php
/**
 * Template Name: Owl Baton LP
 * Description: Awwwards-style futuristic landing page for Owl Baton.
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Owl Baton | Future Social Innovation</title>
    
    <!-- Tailwind CSS (Play CDN for easy implementation. For production, use a build step) -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;700;900&family=Inter:wght@100;300;400;700;900&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #09090b; /* zinc-950 */
        }
        .font-serif {
            font-family: 'Noto Serif JP', serif;
        }
        .writing-vertical-rl {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
        
        /* Animation Classes */
        .fade-in-section {
            opacity: 0;
            transform: translateY(3rem); /* translate-y-12 */
            filter: blur(4px);
            transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
        
        /* Custom Keyframes */
        @keyframes spin-slow {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes spin-slow-reverse {
            from { transform: translate(-50%, -50%) rotate(360deg); }
            to { transform: translate(-50%, -50%) rotate(0deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 60s linear infinite;
        }
        .animate-spin-slow-reverse {
            animation: spin-slow-reverse 40s linear infinite;
        }
        
        /* Hide scrollbar for cleaner look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #09090b;
        }
        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #dc2626; /* red-600 */
        }
    </style>
    <?php wp_head(); ?>
</head>
<body class="bg-zinc-950 text-white overflow-x-hidden selection:bg-red-600 selection:text-white">

    <!-- Noise Texture Overlay -->
    <div class="fixed inset-0 pointer-events-none z-[100] mix-blend-screen opacity-[0.03]" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>

    <!-- Navigation -->
    <nav id="navbar" class="fixed top-0 w-full z-50 transition-all duration-700 py-8">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <!-- Logo -->
            <div class="flex items-center gap-3 group cursor-pointer">
                <div class="relative w-10 h-10 flex items-center justify-center">
                    <div class="absolute inset-0 bg-red-600 rounded-full blur opacity-20 group-hover:opacity-40 transition-opacity duration-500"></div>
                    <div class="relative w-full h-full border border-white/20 bg-white/5 backdrop-blur-sm rounded-full flex items-center justify-center group-hover:border-red-600/50 transition-colors">
                        <i data-lucide="feather" class="w-5 h-5 text-white"></i>
                    </div>
                </div>
                <div class="flex flex-col">
                    <span class="text-xl font-bold tracking-widest text-white leading-none">OWL BATON</span>
                    <span class="text-[10px] text-gray-400 tracking-[0.2em] uppercase mt-1 group-hover:text-red-500 transition-colors">General Incorporated Assoc.</span>
                </div>
            </div>

            <!-- Menu -->
            <div class="hidden md:flex items-center gap-12">
                <a href="#vision" class="relative text-xs font-bold text-gray-400 hover:text-white transition-colors tracking-[0.2em] uppercase group">
                    Vision
                    <span class="absolute -bottom-2 left-1/2 w-0 h-[1px] bg-red-600 group-hover:w-full transition-all duration-300 transform -translate-x-1/2"></span>
                </a>
                <a href="#projects" class="relative text-xs font-bold text-gray-400 hover:text-white transition-colors tracking-[0.2em] uppercase group">
                    Projects
                    <span class="absolute -bottom-2 left-1/2 w-0 h-[1px] bg-red-600 group-hover:w-full transition-all duration-300 transform -translate-x-1/2"></span>
                </a>
                <a href="#ambassador" class="relative text-xs font-bold text-gray-400 hover:text-white transition-colors tracking-[0.2em] uppercase group">
                    Ambassador
                    <span class="absolute -bottom-2 left-1/2 w-0 h-[1px] bg-red-600 group-hover:w-full transition-all duration-300 transform -translate-x-1/2"></span>
                </a>
                <a href="#partners" class="relative text-xs font-bold text-gray-400 hover:text-white transition-colors tracking-[0.2em] uppercase group">
                    Partners
                    <span class="absolute -bottom-2 left-1/2 w-0 h-[1px] bg-red-600 group-hover:w-full transition-all duration-300 transform -translate-x-1/2"></span>
                </a>
                <button class="relative overflow-hidden bg-white text-black px-8 py-3 rounded-sm font-bold text-xs tracking-widest hover:text-white transition-colors group border border-white">
                    <span class="relative z-10 group-hover:mix-blend-difference">CONTACT</span>
                    <div class="absolute inset-0 bg-red-600 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"></div>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div id="vision" class="relative min-h-screen w-full overflow-hidden flex items-center justify-center bg-zinc-950">
        <!-- Background Elements -->
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(255,0,0,0.08),transparent_60%)]"></div>
        <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('https://www.transparenttextures.com/patterns/japanese-asanoha-grey.png');"></div>
        
        <!-- Rotating Circles -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] border border-white/5 rounded-full animate-spin-slow"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[30vw] h-[30vw] border border-red-600/10 rounded-full animate-spin-slow-reverse"></div>

        <div class="container mx-auto px-6 relative z-10 grid grid-cols-12 h-full items-center">
            <!-- Left Vertical Text -->
            <div class="col-span-2 hidden md:flex flex-col justify-center h-full pt-32 fade-in-section" style="transition-delay: 800ms;">
                <div class="h-48 w-[1px] bg-gradient-to-b from-red-600 to-transparent mx-auto mb-8"></div>
                <div class="writing-vertical-rl text-white/60 text-sm mx-auto h-[300px] font-serif tracking-[0.2em]">未来へのバトンを繋ぐ</div>
            </div>

            <!-- Center Content -->
            <div class="col-span-12 md:col-span-8 text-center md:text-left pt-20">
                <div class="fade-in-section">
                    <div class="flex items-center gap-4 mb-8 justify-center md:justify-start">
                        <span class="px-3 py-1 border border-red-600/50 text-red-500 text-[10px] tracking-[0.2em] uppercase">Social Innovation</span>
                        <div class="h-[1px] w-12 bg-white/20"></div>
                    </div>
                </div>
                
                <div class="fade-in-section" style="transition-delay: 200ms;">
                    <h1 class="text-6xl md:text-8xl lg:text-9xl font-black text-white tracking-tighter leading-[0.85] mb-8 font-serif mix-blend-difference">
                        OWL<br />
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-400 to-gray-600">BATON</span>
                        <span class="block text-red-600 text-lg md:text-2xl font-sans tracking-[0.5em] mt-4 font-normal">.INC</span>
                    </h1>
                </div>

                <div class="fade-in-section" style="transition-delay: 400ms;">
                    <p class="text-gray-400 text-base md:text-lg max-w-xl font-light leading-loose mb-12 text-justify">
                        <span class="text-white font-medium">「捨てる」をなくせば、「未来」はもっと笑う。</span><br/>
                        環境・福祉・教育をつなぐ、関西発のソーシャル・エコシステム。<br/>
                        私たちは、知恵と希望のバトンを次世代へ渡します。
                    </p>
                </div>

                <div class="fade-in-section" style="transition-delay: 600ms;">
                    <button class="group relative px-10 py-5 bg-white text-black font-bold text-sm tracking-widest overflow-hidden">
                        <span class="relative z-10 flex items-center gap-4">
                            VIEW PROJECTS <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-2 transition-transform"></i>
                        </span>
                        <div class="absolute inset-0 bg-red-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-500 ease-out"></div>
                    </button>
                </div>
            </div>

            <!-- Right Vertical Text -->
            <div class="col-span-2 hidden md:flex flex-col justify-center h-full pt-32 items-end fade-in-section" style="transition-delay: 1000ms;">
                <div class="writing-vertical-rl text-white/20 text-xs mx-auto h-[400px] font-serif tracking-[0.2em]">GENERAL INCORPORATED ASSOCIATION</div>
                <div class="h-32 w-[1px] bg-gradient-to-t from-white/20 to-transparent mx-auto mt-8"></div>
            </div>
        </div>
    </div>

    <!-- Philosophy & Stats -->
    <section class="py-32 relative border-b border-white/5">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
                <div class="lg:col-span-4 fade-in-section">
                    <h2 class="text-xs font-bold text-red-600 tracking-[0.3em] mb-4 uppercase">Philosophy</h2>
                    <h3 class="text-3xl font-black text-white mb-6 font-serif leading-relaxed">
                        見えない価値を、<br/>
                        見える希望へ。
                    </h3>
                    <p class="text-gray-400 text-sm leading-loose">
                        私たちOwl Batonは、社会に埋もれた「不要」を「資源」と捉え直します。
                        最新のテクノロジーと、古き良き日本のおもてなしの心（配慮）を融合させ、
                        誰も置き去りにしない循環型社会を構築します。
                    </p>
                </div>
                <div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-3 gap-0">
                    <!-- Stat 1 -->
                    <div class="fade-in-section" style="transition-delay: 200ms;">
                        <div class="relative p-10 border-l border-white/10 hover:border-red-600/50 transition-colors duration-500 group bg-gradient-to-b from-white/5 to-transparent">
                            <div class="absolute top-0 right-0 p-4 opacity-0 group-hover:opacity-100 transition-opacity text-red-600">
                                <i data-lucide="zap" class="w-4 h-4"></i>
                            </div>
                            <p class="text-xs text-red-500 font-bold tracking-widest mb-4 uppercase">Suitcases</p>
                            <h3 class="text-5xl md:text-6xl font-black text-white mb-4 font-serif">2,400</h3>
                            <p class="text-gray-400 text-xs leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">廃棄予定の鞄を回収・再生</p>
                        </div>
                    </div>
                    <!-- Stat 2 -->
                    <div class="fade-in-section" style="transition-delay: 400ms;">
                         <div class="relative p-10 border-l border-white/10 hover:border-red-600/50 transition-colors duration-500 group bg-gradient-to-b from-white/5 to-transparent">
                            <p class="text-xs text-red-500 font-bold tracking-widest mb-4 uppercase">Debris</p>
                            <h3 class="text-5xl md:text-6xl font-black text-white mb-4 font-serif">150kg</h3>
                            <p class="text-gray-400 text-xs leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">水中ドローンによる回収量</p>
                        </div>
                    </div>
                    <!-- Stat 3 -->
                    <div class="fade-in-section" style="transition-delay: 600ms;">
                         <div class="relative p-10 border-l border-white/10 hover:border-red-600/50 transition-colors duration-500 group bg-gradient-to-b from-white/5 to-transparent">
                            <p class="text-xs text-red-500 font-bold tracking-widest mb-4 uppercase">Smiles</p>
                            <h3 class="text-5xl md:text-6xl font-black text-white mb-4 font-serif">850+</h3>
                            <p class="text-gray-400 text-xs leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">支援した学生の数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-40 relative">
        <div class="container mx-auto px-6">
            <div class="flex flex-col items-center mb-32 fade-in-section">
                <div class="w-[1px] h-20 bg-gradient-to-b from-transparent to-red-600 mx-auto mb-8"></div>
                <h2 class="text-5xl md:text-7xl font-black text-center font-serif tracking-tight">PROJECTS</h2>
                <p class="text-gray-500 text-xs tracking-[0.3em] mt-4 text-center uppercase">Creating Ripples of Hope</p>
            </div>

            <!-- Project 01 -->
            <div class="fade-in-section group relative w-full mb-32">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
                    <div class="col-span-12 md:col-span-7 relative overflow-hidden">
                        <div class="relative aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1565514020176-6c2235b8b3a9?auto=format&fit=crop&q=80&w=1000" class="w-full h-full object-cover transform scale-100 group-hover:scale-110 transition-transform duration-[1.5s] ease-out filter grayscale group-hover:grayscale-0" alt="Suitcase">
                            <div class="absolute inset-0 bg-zinc-950/20 group-hover:bg-transparent transition-colors duration-500"></div>
                            <div class="absolute top-4 left-4 z-10">
                                <span class="text-[10px] border border-white/30 bg-black/50 backdrop-blur px-2 py-1 text-white tracking-widest">PROJECT 01</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 md:col-span-5 relative z-10">
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="text-[10px] font-bold text-red-500 tracking-widest uppercase border border-red-900/30 px-2 py-1">Education</span>
                            <span class="text-[10px] font-bold text-red-500 tracking-widest uppercase border border-red-900/30 px-2 py-1">Welfare</span>
                        </div>
                        <h2 class="text-4xl md:text-5xl font-black text-white mb-2 font-serif leading-tight">SUITCASE REUSE</h2>
                        <p class="text-sm md:text-base text-gray-400 mb-8 font-light max-w-sm">教育と福祉をつなぐバトン</p>
                        <div class="h-[1px] w-12 bg-red-600 mb-8"></div>
                        <p class="text-gray-500 text-sm leading-loose mb-8">ホテルで廃棄されるはずだったスーツケースを回収。地域の就労支援施設と連携し、手作業で丁寧にリペア・清掃。生まれ変わった鞄は、修学旅行用品が必要な学生たちへ無償で貸し出されます。</p>
                        <button class="text-white text-xs font-bold tracking-[0.2em] group/btn flex items-center gap-2 hover:text-red-500 transition-colors">
                            VIEW DETAILS <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Project 02 (Reversed) -->
            <div class="fade-in-section group relative w-full mb-32">
                 <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
                    <div class="col-span-12 md:col-span-7 relative overflow-hidden md:order-2">
                         <div class="relative aspect-[16/9] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&q=80&w=1000" class="w-full h-full object-cover transform scale-100 group-hover:scale-110 transition-transform duration-[1.5s] ease-out filter grayscale group-hover:grayscale-0" alt="Drone">
                             <div class="absolute inset-0 bg-zinc-950/20 group-hover:bg-transparent transition-colors duration-500"></div>
                             <div class="absolute top-4 left-4 z-10">
                                <span class="text-[10px] border border-white/30 bg-black/50 backdrop-blur px-2 py-1 text-white tracking-widest">PROJECT 02</span>
                            </div>
                         </div>
                    </div>
                     <div class="col-span-12 md:col-span-5 relative z-10 md:order-1 md:text-right">
                         <div class="flex flex-wrap gap-2 mb-6 md:justify-end">
                            <span class="text-[10px] font-bold text-red-500 tracking-widest uppercase border border-red-900/30 px-2 py-1">Environment</span>
                            <span class="text-[10px] font-bold text-red-500 tracking-widest uppercase border border-red-900/30 px-2 py-1">Tech</span>
                        </div>
                        <h2 class="text-4xl md:text-5xl font-black text-white mb-2 font-serif leading-tight">OCEAN & DRONE</h2>
                        <p class="text-sm md:text-base text-gray-400 mb-8 font-light max-w-sm ml-auto">親子で挑む、海底探検</p>
                        <div class="h-[1px] w-12 bg-red-600 mb-8 ml-auto"></div>
                        <p class="text-gray-500 text-sm leading-loose mb-8">水中ドローンを駆使し、人の手が届かない海底ゴミを可視化。親子参加型のイベントを通じて、「海の中のリアル」を共有体験。最先端技術で、家族の会話と環境意識を育みます。</p>
                        <button class="text-white text-xs font-bold tracking-[0.2em] group/btn flex items-center gap-2 hover:text-red-500 transition-colors md:flex-row-reverse">
                            VIEW DETAILS <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/btn:-translate-x-1"></i>
                        </button>
                     </div>
                 </div>
            </div>
        </div>
    </section>

    <!-- Ambassador Section -->
    <section id="ambassador" class="py-32 bg-zinc-900 relative overflow-hidden">
        <div class="absolute inset-0 opacity-5" style="background-image: url('https://www.transparenttextures.com/patterns/shippo.png');"></div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-20">
                <div class="lg:w-1/2 order-2 lg:order-1 fade-in-section">
                    <div class="relative aspect-[3/4] md:aspect-square">
                        <div class="absolute inset-0 border border-white/10 transform translate-x-4 translate-y-4"></div>
                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=1000" class="w-full h-full object-cover filter grayscale contrast-125 hover:grayscale-0 transition-all duration-700" alt="Idol">
                        <div class="absolute -bottom-10 -right-10 text-8xl font-black text-transparent bg-clip-text bg-gradient-to-t from-red-600 to-transparent font-serif select-none pointer-events-none opacity-50 writing-vertical-rl">行動</div>
                    </div>
                </div>
                <div class="lg:w-1/2 order-1 lg:order-2 fade-in-section" style="transition-delay: 200ms;">
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-2 h-2 bg-red-600 rounded-full animate-pulse"></span>
                        <span class="text-xs font-bold tracking-[0.3em] text-gray-400 uppercase">Official Ambassador</span>
                    </div>
                    <h2 class="text-4xl md:text-6xl font-black text-white mb-8 font-serif">
                        SOCIAL<br />
                        ACTION<br />
                        <span class="text-red-600">ICONS.</span>
                    </h2>
                    <p class="text-xl font-bold text-white mb-6">「歌って、踊って、汗を流す。」</p>
                    <p class="text-gray-400 text-sm leading-loose mb-10 max-w-md">
                        彼女たちは単なるアイコンではありません。つなぎを着て現場でゴミを拾い、スーツケースを磨く「Owl Batonの理事」です。<br/><br/>
                        日本女性の凛とした強さと、社会貢献を掛け合わせた新しいカルチャーを発信します。
                    </p>
                    <button class="border border-white/20 px-8 py-3 text-xs font-bold tracking-[0.2em] hover:bg-white hover:text-black transition-all">
                        MEET MEMBERS
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section id="partners" class="py-32 relative">
        <div class="absolute inset-0 bg-gradient-to-b from-zinc-950 to-black"></div>
        <div class="container mx-auto px-6 relative z-10 text-center">
            <div class="fade-in-section">
                <div class="w-16 h-16 mx-auto bg-white/5 border border-white/10 rounded-full flex items-center justify-center mb-8">
                    <i data-lucide="globe" class="w-6 h-6 text-gray-400"></i>
                </div>
                <h2 class="text-3xl md:text-5xl font-black mb-6 font-serif">PARTNERSHIP</h2>
                <p class="text-gray-500 text-sm max-w-xl mx-auto mb-16 leading-loose">
                    御社のCSR・SDGs活動を、私たちと一緒に形にしませんか？<br/>
                    Owl Batonは、企業様との共創を求めています。
                </p>
                <div class="inline-block relative group">
                    <div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-blue-600 rounded blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
                    <button class="relative px-12 py-5 bg-zinc-900 ring-1 ring-white/10 leading-none flex items-center">
                        <span class="text-gray-200 text-sm font-bold tracking-widest group-hover:text-white transition-colors">お問い合わせ・資料請求</span>
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-4 text-red-600 group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-20 border-t border-white/10 relative overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-12">
                <div class="space-y-6">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 bg-red-600 flex items-center justify-center rounded-sm">
                            <i data-lucide="feather" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="text-2xl font-black tracking-widest font-serif">OWL BATON</span>
                    </div>
                    <p class="text-gray-600 text-xs leading-relaxed max-w-xs">
                        General Incorporated Association Owl Baton<br/>
                        Connecting Wisdom to the Future.<br/>
                        Based in Kansai, Japan.
                    </p>
                </div>
                <div class="flex gap-8">
                    <a href="#" class="text-gray-500 hover:text-white transition-colors text-sm font-bold tracking-widest">VISION</a>
                    <a href="#" class="text-gray-500 hover:text-white transition-colors text-sm font-bold tracking-widest">PROJECTS</a>
                    <a href="#" class="text-gray-500 hover:text-white transition-colors text-sm font-bold tracking-widest">CONTACT</a>
                </div>
            </div>
            <div class="mt-20 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center text-[10px] text-gray-700 uppercase tracking-widest">
                <p>&copy; <?php echo date("Y"); ?> OWL BATON INC. ALL RIGHTS RESERVED.</p>
                <div class="flex gap-6 mt-4 md:mt-0">
                    <span class="hover:text-gray-400 cursor-pointer">PRIVACY</span>
                    <span class="hover:text-gray-400 cursor-pointer">LEGAL</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // Initialize Lucide Icons
        lucide.createIcons();

        // Scroll Animation Logic (Intersection Observer)
        document.addEventListener('DOMContentLoaded', () => {
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            const fadeElements = document.querySelectorAll('.fade-in-section');
            fadeElements.forEach(el => observer.observe(el));

            // Navbar Scroll Effect
            const navbar = document.getElementById('navbar');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    navbar.classList.add('bg-black/90', 'backdrop-blur-xl', 'border-b', 'border-white/5', 'py-4');
                    navbar.classList.remove('bg-transparent', 'py-8');
                } else {
                    navbar.classList.remove('bg-black/90', 'backdrop-blur-xl', 'border-b', 'border-white/5', 'py-4');
                    navbar.classList.add('bg-transparent', 'py-8');
                }
            });
        });
    </script>
    <?php wp_footer(); ?>
</body>
</html>
