{"id":8,"date":"2026-05-18T16:35:13","date_gmt":"2026-05-18T16:35:13","guid":{"rendered":"https:\/\/wearefriends.xyz\/?page_id=8"},"modified":"2026-05-19T03:33:49","modified_gmt":"2026-05-19T03:33:49","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/wearefriends.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d930d9 e-con-full e-flex e-con e-parent\" data-id=\"4d930d9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-478b82f elementor-widget elementor-widget-html\" data-id=\"478b82f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Outfit:wght@300;400;600;800&display=swap');\n\n    :root {\n        --c-bg: #030305;\n        --c-text: #f4f4f5;\n        --c-accent-1: #ff2a5f;\n        --c-accent-2: #00f0ff;\n        --font-display: 'Anton', sans-serif;\n        --font-body: 'Outfit', sans-serif;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n\n    ::selection { background: var(--c-accent-1); color: #fff; }\n    ::-webkit-scrollbar { width: 8px; }\n    ::-webkit-scrollbar-track { background: var(--c-bg); }\n    ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }\n\n    \/* Background Video & Reduced Overlays *\/\n    .bg-video {\n        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n        object-fit: cover; z-index: -10; opacity: 0.9;\n    }\n    .cinematic-overlay {\n        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n        background: radial-gradient(circle at center, transparent 0%, rgba(3,3,5,0.5) 100%),\n                    linear-gradient(to bottom, rgba(3,3,5,0.1) 0%, rgba(3,3,5,0.1) 100%);\n        z-index: -9;\n    }\n\n    \/* Blur Blobs & Particles *\/\n    .blob {\n        position: fixed; border-radius: 50%; filter: blur(140px); z-index: -8;\n        animation: breathe 15s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);\n        mix-blend-mode: screen;\n    }\n    .blob.pink { width: 45vw; height: 45vw; top: -10%; left: -10%; background: rgba(255, 42, 95, 0.3); }\n    .blob.blue { width: 50vw; height: 50vw; bottom: -15%; right: -10%; background: rgba(0, 240, 255, 0.2); animation-delay: -7s; }\n    \n    @keyframes breathe {\n        0% { transform: scale(1) translate(0, 0); }\n        100% { transform: scale(1.3) translate(5%, -5%); }\n    }\n\n    \/* Floating Image Assets - NO BLUR, WITH BORDER RADIUS *\/\n    .floating-layer {\n        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n        pointer-events: none; z-index: -1; overflow: hidden;\n    }\n    .float-asset {\n        \n        position: absolute; will-change: transform;\n        filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));\n        border-radius: 16px !important; \/* Added border radius *\/\n    }\n    .asset-1 { width: 30vw; max-width: 450px; top: 5%; left: -5%; animation: float1 18s ease-in-out infinite;  }\n    .asset-2 { width: 22vw; max-width: 350px; bottom: 10%; right: -2%; animation: float2 22s ease-in-out infinite reverse; }\n    .asset-3 { width: 18vw; max-width: 280px; top: 30%; right: 15%; animation: float3 15s ease-in-out infinite; z-index: 5; }\n    .asset-4 { width: 25vw; max-width: 400px; bottom: 15%; left: 8%; animation: float1 20s ease-in-out infinite 2s; }\n    \/* Removed blur from asset-5 *\/\n    .asset-5 { width: 35vw; max-width: 500px; top: 40%; left: 35%; opacity: 0.15; z-index: -5; animation: float2 30s linear infinite; }\n\n    @keyframes float1 { 0%, 100% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(30px, -40px) rotate(3deg); } }\n    @keyframes float2 { 0%, 100% { transform: translate(0,0) rotate(8deg); } 50% { transform: translate(-20px, 50px) rotate(-4deg); } }\n    @keyframes float3 { 0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(15px, -20px) rotate(12deg) scale(1.05); } }\n\n    \/* Utility Classes *\/\n    .reveal { opacity: 0; transform: translateY(30px) scale(0.98); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }\n    .reveal.active { opacity: 1; transform: translateY(0) scale(1); }\n    .reveal-delay-1 { transition-delay: 0.1s; }\n    .reveal-delay-2 { transition-delay: 0.2s; }\n\n    \/* SECTION 1: HERO *\/\n    .hero-section {\n        position: relative; min-height: 100vh; display: flex; flex-direction: column;\n        justify-content: center; align-items: center; padding: 2rem; z-index: 10;\n        text-align: center; font-family: var(--font-body); color: var(--c-text);\n    }\n\n    .ticker-wrap {\n        position: absolute; top: 0; left: 0; width: 100%; height: 35px;\n        background: var(--c-accent-1); color: #fff; display: flex; align-items: center;\n        overflow: hidden; font-family: var(--font-display); font-size: 1rem; letter-spacing: 2px;\n        z-index: 20; transform: skewY(-1deg); transform-origin: top left;\n    }\n    .ticker { display: flex; white-space: nowrap; animation: ticker 20s linear infinite; }\n    .ticker span { padding: 0 2rem; }\n    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n\n    .hero-content { position: relative; max-width: 1000px; width: 100%; display: flex; flex-direction: column; align-items: center; }\n    \n    .hero-badge {\n        background: rgba(0,0,0,0.6); border: 1px solid var(--c-accent-2);\n        box-shadow: 0 0 10px rgba(0, 240, 255, 0.2), inset 0 0 5px rgba(0, 240, 255, 0.1);\n        padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600;\n        letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem;\n        display: inline-flex; align-items: center; gap: 8px; color: #fff;\n    }\n    .hero-badge::before { content:''; width: 6px; height: 6px; background: var(--c-accent-2); border-radius: 50%; box-shadow: 0 0 10px var(--c-accent-2); }\n\n    .hero-title {\n        font-family: var(--font-display); font-size: clamp(4rem, 12vw, 9rem);\n        line-height: 0.9; text-transform: uppercase; margin-bottom: 0.8rem;\n        background: linear-gradient(180deg, #fff 20%, #888 100%);\n        -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); letter-spacing: -0.02em;\n    }\n    \n    .hero-tagline {\n        font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 2.2rem);\n        color: var(--c-accent-2); margin-bottom: 1.5rem; letter-spacing: 1px;\n        text-shadow: 0 0 15px rgba(0,240,255,0.4);\n    }\n\n    .hero-desc {\n        font-size: clamp(0.95rem, 1.2vw, 1.1rem); max-width: 450px; color: #d0d0d5;\n        line-height: 1.6; margin-bottom: 2.5rem; font-weight: 400; text-shadow: 0 2px 5px rgba(0,0,0,0.8);\n    }\n\n    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 20; }\n    \n    .btn {\n        padding: 1rem 2rem; font-family: var(--font-display); font-size: 1.2rem;\n        text-transform: uppercase; letter-spacing: 2px; border-radius: 12px;\n        cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        display: inline-flex; align-items: center; justify-content: center;\n        border: none; outline: none; position: relative; overflow: hidden;\n    }\n    .btn-primary { background: var(--c-text); color: var(--c-bg); box-shadow: 0 10px 20px rgba(255,255,255,0.2); }\n    .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 30px rgba(255,255,255,0.4); }\n    .btn-secondary {\n        background: rgba(0,0,0,0.5); color: var(--c-text);\n        border: 1px solid rgba(255,255,255,0.5); \n    }\n    .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.2); }\n\n    .copied-msg {\n        position: absolute; top: -35px; left: 50%; transform: translateX(-50%) translateY(10px);\n        background: var(--c-accent-1); color: #fff; padding: 4px 10px; border-radius: 20px;\n        font-size: 0.75rem; opacity: 0; pointer-events: none; transition: all 0.3s ease;\n        font-family: var(--font-body); font-weight: 800; z-index: 50;\n    }\n    .copied-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n    \/* Mini Stat Cards *\/\n    .mini-stat {\n        position: absolute; background: rgba(0,0,0,0.6); \n        border: 1px solid var(--c-accent-2); padding: 0.8rem 1.2rem; border-radius: 16px;\n        display: flex; flex-direction: column; gap: 4px;\n        box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.1);\n    }\n    .ms-1 { top: 22%; left: 12%; transform: rotate(-5deg); animation: float1 10s infinite; }\n    .ms-2 { bottom: 25%; right: 12%; transform: rotate(5deg); animation: float2 12s infinite; }\n    .stat-val { font-family: var(--font-display); font-size: 1.6rem; color: var(--c-accent-2); line-height: 1; text-shadow: 0 0 10px rgba(0,240,255,0.5); }\n    .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #fff; font-weight: 600; }\n\n    \/* SECTION 2: CONTENT HUB - REDUCED SIZE *\/\n    .hub-section {\n        position: relative; z-index: 10; padding: 5rem 2rem;\n        max-width: 1100px; \/* Reduced content width *\/\n        margin: 0 auto; display: grid;\n        grid-template-columns: repeat(12, 1fr); gap: 1.5rem;\n        font-family: var(--font-body); color: var(--c-text);\n    }\n\n    .content-wrapper { display: flex; flex-direction: column; gap: 1rem; }\n    .card-about { grid-column: 1 \/ 7; justify-content: center; padding-right: 1.5rem; }\n    .card-stats { grid-column: 7 \/ 13; }\n    .card-legacy { grid-column: 1 \/ 6; justify-content: center; }\n    .card-roadmap { grid-column: 6 \/ 13; }\n    .card-faq { grid-column: 1 \/ 7; }\n    .card-quote { grid-column: 7 \/ 13; justify-content: center; align-items: center; text-align: center; }\n\n    @media (max-width: 992px) {\n        .card-about, .card-stats, .card-legacy, .card-roadmap, .card-faq, .card-quote { grid-column: 1 \/ -1; padding-right: 0; }\n        .ms-1, .ms-2 { display: none; }\n    }\n\n    .card-heading {\n        font-family: var(--font-display); font-size: 2rem; text-transform: uppercase;\n        color: #fff; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.8);\n    }\n    .card-text { font-size: 1rem; color: #e0e0e5; line-height: 1.5; font-weight: 400; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }\n    \n    \/* GLOW ITEM SYSTEM - WITH BLACK OPACITY BG *\/\n    .glow-item {\n        background: rgba(0, 0, 0, 0.65); \/* Opacity black background *\/\n        border: 1px solid var(--c-accent-2);\n        border-radius: 16px;\n        padding: 1.2rem;\n        box-shadow: 0 0 15px rgba(0, 240, 255, 0.15), inset 0 0 15px rgba(0, 240, 255, 0.05);\n        transition: all 0.3s ease;\n        position: relative;\n    }\n    .glow-item:hover {\n        box-shadow: 0 0 25px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(0, 240, 255, 0.15);\n        border-color: #fff;\n        transform: translateY(-3px);\n    }\n\n    \/* Token Grid Reduced *\/\n    .token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }\n    .token-item { padding: 1rem; }\n    .token-item h4 { font-family: var(--font-display); font-size: 2rem; color: var(--c-accent-1); margin-bottom: 0.2rem; text-shadow: 0 0 15px rgba(255, 42, 95, 0.4); }\n    .token-item p { font-size: 0.75rem; text-transform: uppercase; color: #fff; font-weight: 600; letter-spacing: 1px; }\n\n    .roadmap-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }\n    .rm-item { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; }\n    .rm-phase { font-family: var(--font-display); font-size: 1.2rem; color: var(--c-accent-2); width: 70px; flex-shrink: 0; text-shadow: 0 0 10px rgba(0,240,255,0.4); }\n    .rm-desc { font-size: 0.95rem; color: #fff; font-weight: 400; }\n\n    .quote-text { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; color: #fff; text-shadow: 0 4px 15px rgba(0,0,0,0.8); }\n    .quote-text span { color: var(--c-accent-1); text-shadow: 0 0 20px rgba(255, 42, 95, 0.4); }\n\n    .faq-list { display: flex; flex-direction: column; gap: 0.8rem; }\n    .faq-item { cursor: pointer; padding: 1rem 1.2rem; }\n    .faq-q { font-size: 1.1rem; font-weight: 600; display: flex; justify-content: space-between; color: #fff; }\n    .faq-a { font-size: 0.95rem; color: #ddd; margin-top: 0; max-height: 0; overflow: hidden; transition: all 0.4s ease; opacity: 0; }\n    .faq-item.active .faq-a { margin-top: 0.8rem; max-height: 150px; opacity: 1; }\n    .faq-icon { font-family: var(--font-display); color: var(--c-accent-2); transition: transform 0.3s ease; }\n    .faq-item.active .faq-icon { transform: rotate(45deg); }\n\n    .magnetic-wrap { display: inline-block; position: relative; }\n<\/style>\n\n<!-- BACKGROUND -->\n<video class=\"bg-video\" autoplay loop muted playsinline>\n    <source src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/herobg.mp4\" type=\"video\/mp4\">\n<\/video>\n<div class=\"cinematic-overlay\"><\/div>\n\n<!-- ATMOSPHERE -->\n<div class=\"blob pink\"><\/div>\n<div class=\"blob blue\"><\/div>\n\n<!-- FLOATING ASSETS -->\n<div class=\"floating-layer\" id=\"parallax-wrapper\">\n    <img decoding=\"async\" src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/item1.png\" alt=\"Friendship element\" class=\"float-asset asset-1\" data-speed=\"-2\">\n    <img decoding=\"async\" src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/item2.png\" alt=\"Football element\" class=\"float-asset asset-2\" data-speed=\"3\">\n    <img decoding=\"async\" src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/item3.png\" alt=\"Playful element\" class=\"float-asset asset-3\" data-speed=\"-1\">\n    <img decoding=\"async\" src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/item4.png\" alt=\"Modern element\" class=\"float-asset asset-4\" data-speed=\"2\">\n    <!--<img decoding=\"async\" src=\"http:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/item5.png\" alt=\"Cinematic element\" class=\"float-asset asset-5\" data-speed=\"-4\">-->\n<\/div>\n\n<!-- SECTION 1: HERO -->\n<section class=\"hero-section\">\n    <!--<div class=\"ticker-wrap\">-->\n    <!--    <div class=\"ticker\">-->\n    <!--        <span>WE ARE FRIENDS \/\/ BEYOND THE PITCH \/\/ NO RUGS JUST HUGS \/\/ FOOTBALL HERITAGE \/\/ TRUE BOND \/\/<\/span>-->\n    <!--        <span>WE ARE FRIENDS \/\/ BEYOND THE PITCH \/\/ NO RUGS JUST HUGS \/\/ FOOTBALL HERITAGE \/\/ TRUE BOND \/\/<\/span>-->\n    <!--    <\/div>-->\n    <!--<\/div>-->\n\n    <div class=\"mini-stat ms-1 parallax-el\" data-speed=\"1.5\">\n        <span class=\"stat-val\">10K+<\/span>\n        <span class=\"stat-label\">SQUAD MEMBERS<\/span>\n    <\/div>\n    <div class=\"mini-stat ms-2 parallax-el\" data-speed=\"-1.5\">\n        <span class=\"stat-val\">\u221e<\/span>\n        <span class=\"stat-label\">FRIENDSHIP<\/span>\n    <\/div>\n\n    <div class=\"hero-content reveal\">\n        <div class=\"hero-badge\">EST. 2026 ONLINE<\/div>\n        <h1 class=\"hero-title\">WE ARE FRIENDS<\/h1>\n        <h2 class=\"hero-tagline\">BEYOND THE PITCH. A LIFETIME BOND.<\/h2>\n        <p class=\"hero-desc\">Born from internet culture, forged in the spirit of the beautiful game. A premium collective celebrating loyalty, vibes, and legendary moments together.<\/p>\n        \n        <div class=\"hero-actions\">\n            <div class=\"magnetic-wrap\">\n                <span class=\"copied-msg\" id=\"copy-msg\">COPIED!<\/span>\n                <button class=\"btn btn-primary\" id=\"ca-btn\">5eewDqFix9qGeCHBFnUWtCa1JdS5EfUXkCVRfbQvpump<\/button>\n            <\/div>\n            <div class=\"magnetic-wrap\">\n                <a href=\"https:\/\/x.com\/we_arefriendz\" class=\"btn btn-secondary\">JOIN THE SQUAD<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- SECTION 2: CONTENT HUB -->\n<section class=\"hub-section\" id=\"hub\">\n\n    <!-- About Section Wrapper -->\n    <div class=\"content-wrapper card-about reveal reveal-delay-1\">\n        <h3 class=\"card-heading\">THE PHILOSOPHY<\/h3>\n        <div class=\"glow-item\">\n            <p class=\"card-text\">We aren't just an asset; we are an aesthetic. Combining the raw, unfiltered emotion of football culture with the playful degenerate energy of the modern internet. No clutter. Just pure artistic expression and community bonding.<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Stats Section Wrapper -->\n    <div class=\"content-wrapper card-stats reveal reveal-delay-2\">\n        <h3 class=\"card-heading\">TOKENOMICS<\/h3>\n        <div class=\"token-grid\">\n            <div class=\"glow-item token-item\">\n                <h4>0%<\/h4>\n                <p>TAX ON HUGS<\/p>\n            <\/div>\n            <div class=\"glow-item token-item\">\n                <h4>100%<\/h4>\n                <p>COMMUNITY<\/p>\n            <\/div>\n            <div class=\"glow-item token-item\">\n                <h4>BURN<\/h4>\n                <p>LIQUIDITY LOCKED<\/p>\n            <\/div>\n            <div class=\"glow-item token-item\">\n                <h4>\u221e<\/h4>\n                <p>VIBES MAXIMIZED<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Legacy Section Wrapper -->\n    <div class=\"content-wrapper card-legacy reveal\">\n        <h3 class=\"card-heading\">MATCH LEGACY<\/h3>\n        <div class=\"glow-item\">\n            <p class=\"card-text\">Honor the pitch. Remember the legendary plays that brought us together. The bonds built in the trenches last a lifetime.<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Roadmap Section Wrapper -->\n    <div class=\"content-wrapper card-roadmap reveal reveal-delay-1\">\n        <h3 class=\"card-heading\">ROADMAP TO GLORY<\/h3>\n        <ul class=\"roadmap-list\">\n            <li class=\"glow-item rm-item\">\n                <span class=\"rm-phase\">PHASE 1<\/span>\n                <span class=\"rm-desc\">Kickoff. Assemble the squad and establish the locker room vibes.<\/span>\n            <\/li>\n            <li class=\"glow-item rm-item\">\n                <span class=\"rm-phase\">PHASE 2<\/span>\n                <span class=\"rm-desc\">Internet Domination. Memes, art, and spreading the friendship meta.<\/span>\n            <\/li>\n            <li class=\"glow-item rm-item\" style=\"border-color: rgba(0, 240, 255, 0.3); box-shadow: none;\">\n                <span class=\"rm-phase\" style=\"color: #666; text-shadow: none;\">PHASE 3<\/span>\n                <span class=\"rm-desc\" style=\"color: #888;\">Championship. Redefining what a web3 community looks like. (Loading...)<\/span>\n            <\/li>\n        <\/ul>\n    <\/div>\n\n    <!-- FAQ Section Wrapper -->\n    <div class=\"content-wrapper card-faq reveal\">\n        <h3 class=\"card-heading\">LOCKER ROOM FAQ<\/h3>\n        <div class=\"faq-list\">\n            <div class=\"glow-item faq-item\" onclick=\"this.classList.toggle('active')\">\n                <div class=\"faq-q\">What is We Are Friends? <span class=\"faq-icon\">+<\/span><\/div>\n                <div class=\"faq-a\">A cultural movement bridging football passion with premium internet aesthetics.<\/div>\n            <\/div>\n            <div class=\"glow-item faq-item\" onclick=\"this.classList.toggle('active')\">\n                <div class=\"faq-q\">How do I join? <span class=\"faq-icon\">+<\/span><\/div>\n                <div class=\"faq-a\">Grab your gear, copy the CA, and jump into our socials. You're family now.<\/div>\n            <\/div>\n            <div class=\"glow-item faq-item\" onclick=\"this.classList.toggle('active')\">\n                <div class=\"faq-q\">Is there utility? <span class=\"faq-icon\">+<\/span><\/div>\n                <div class=\"faq-a\">Friendship is the highest utility known to humanity.<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Quote Section Wrapper -->\n    <div class=\"content-wrapper card-quote reveal reveal-delay-1\">\n        <div class=\"glow-item\" style=\"padding: 2.5rem;\">\n            <h2 class=\"quote-text\">\"FORM IS TEMPORARY, <span>FRIENDSHIP<\/span> IS PERMANENT.\"<\/h2>\n        <\/div>\n    <\/div>\n\n<\/section>\n\n<script>\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('active');\n            }\n        });\n    }, { threshold: 0.15 });\n    \n    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n    \n    setTimeout(() => {\n        const hero = document.querySelector('.hero-content.reveal');\n        if (hero) hero.classList.add('active');\n    }, 100);\n\n    document.addEventListener('mousemove', (e) => {\n        const x = (window.innerWidth - e.pageX * 2) \/ 90;\n        const y = (window.innerHeight - e.pageY * 2) \/ 90;\n        \n        document.querySelectorAll('.float-asset, .parallax-el').forEach(el => {\n            const speed = el.getAttribute('data-speed') || 1;\n            el.style.marginLeft = `${x * speed}px`;\n            el.style.marginTop = `${y * speed}px`;\n        });\n    });\n\n    const caBtn = document.getElementById('ca-btn');\n    const copyMsg = document.getElementById('copy-msg');\n    const dummyCA = \"0xFriendsForeverContractAddress2026\";\n\n    if (caBtn) {\n        caBtn.addEventListener('click', () => {\n            const textArea = document.createElement(\"textarea\");\n            textArea.value = dummyCA;\n            document.body.appendChild(textArea);\n            textArea.select();\n            \n            try {\n                document.execCommand('copy');\n                copyMsg.innerText = \"COPIED!\";\n                copyMsg.classList.add('show');\n                caBtn.style.background = \"#00f0ff\";\n                caBtn.style.color = \"#000\";\n            } catch (err) {\n                copyMsg.innerText = \"FAILED!\";\n                copyMsg.classList.add('show');\n            }\n            \n            document.body.removeChild(textArea);\n\n            setTimeout(() => {\n                copyMsg.classList.remove('show');\n                caBtn.style.background = \"\";\n                caBtn.style.color = \"\";\n            }, 2000);\n        });\n    }\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f273c1 elementor-widget elementor-widget-image\" data-id=\"3f273c1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"449\" height=\"327\" src=\"https:\/\/wearefriends.xyz\/wp-content\/uploads\/2026\/05\/e9de1e12d25f420c91668e088f446f8a-ezgif.com-crop-1.gif\" class=\"attachment-large size-large wp-image-62\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>10K+ SQUAD MEMBERS \u221e FRIENDSHIP EST. 2026 ONLINE WE ARE FRIENDS BEYOND THE PITCH. A LIFETIME BOND. Born from internet culture, forged in the spirit of the beautiful game. A premium collective celebrating loyalty, vibes, and legendary moments together. COPIED! 5eewDqFix9qGeCHBFnUWtCa1JdS5EfUXkCVRfbQvpump JOIN THE SQUAD THE PHILOSOPHY We aren&#8217;t just an asset; we are an aesthetic. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":58,"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/wearefriends.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}