{"id":8,"date":"2026-04-09T18:26:10","date_gmt":"2026-04-09T18:26:10","guid":{"rendered":"https:\/\/attackontitan.fun\/?page_id=8"},"modified":"2026-04-09T19:38:09","modified_gmt":"2026-04-09T19:38:09","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/attackontitan.fun\/","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-2fdc7b9 e-con-full e-flex e-con e-parent\" data-id=\"2fdc7b9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13f58fe elementor-widget elementor-widget-html\" data-id=\"13f58fe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* =========================================\r\n       $AOT ULTRA-PREMIUM GLASS MORPHISM\r\n       ========================================= *\/\r\n    :root {\r\n        --gold-light: #f3dfb3;\r\n        --gold-main: #dfc288;\r\n        --gold-dark: #b88a44;\r\n        --scout-green: rgba(43, 62, 43, 0.8);\r\n        --glass-bg: rgba(10, 12, 10, 0.45);\r\n        --glass-border: rgba(223, 194, 136, 0.25);\r\n        --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.8);\r\n    }\r\n\r\n    #aot-glass-wrapper {\r\n        font-family: 'Rajdhani', sans-serif;\r\n        background-color: #030303;\r\n        color: #e0e0e0;\r\n        margin: 0;\r\n        padding: 0;\r\n        overflow-x: hidden;\r\n        line-height: 1.6;\r\n        font-size: 18px;\r\n        position: relative;\r\n        scroll-behavior: smooth;\r\n    }\r\n\r\n    \/* Ambient Glow Backgrounds *\/\r\n    #aot-glass-wrapper::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 20%; left: -10%; width: 50vw; height: 50vw;\r\n        background: radial-gradient(circle, rgba(223,194,136,0.05) 0%, transparent 70%);\r\n        z-index: 0; pointer-events: none;\r\n        overflow: hidden;\r\n    }\r\n    #aot-glass-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 10%; right: -10%; width: 60vw; height: 60vw;\r\n        background: radial-gradient(circle, rgba(43,62,43,0.15) 0%, transparent 70%);\r\n        z-index: 0; pointer-events: none;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* Fire Particles Canvas (FIXED) *\/\r\n    #aot-particles {\r\n        position: fixed; \/* Berubah jadi fixed agar selalu ngikutin layar *\/\r\n        top: 0; left: 0; width: 100vw; height: 100vh;\r\n        z-index: 1; \/* Di atas video, di bawah konten kaca *\/\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* Cinematic Vignette on Videos *\/\r\n    .video-vignette {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.8) 100%);\r\n        z-index: 1; pointer-events: none;\r\n    }\r\n\r\n    #aot-glass-wrapper h1, #aot-glass-wrapper h2, \r\n    #aot-glass-wrapper h3, #aot-glass-wrapper h4, \r\n    #aot-glass-wrapper .aot-logo-text {\r\n        font-family: 'Bebas Neue', sans-serif;\r\n        text-transform: uppercase;\r\n        margin: 0;\r\n        letter-spacing: 2px;\r\n        font-weight: normal;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    \/* Animated Gold Gradient Headings *\/\r\n    #aot-glass-wrapper h1, #aot-glass-wrapper h2 {\r\n        background: linear-gradient(to right, var(--gold-dark), var(--gold-light), var(--gold-dark));\r\n        background-size: 200% auto;\r\n        color: var(--gold-main);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: shine 5s linear infinite;\r\n        filter: drop-shadow(0px 4px 15px rgba(223,194,136,0.2));\r\n    }\r\n\r\n    @keyframes shine {\r\n        to { background-position: 200% center; }\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 120px 20px;\r\n        position: relative;\r\n        z-index: 3;\r\n    }\r\n\r\n    \/* Advanced Glassmorphism *\/\r\n    .glass-panel {\r\n        background: var(--glass-bg);\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border: 1px solid var(--glass-border);\r\n        border-top: 1px solid rgba(255,255,255,0.15);\r\n        border-left: 1px solid rgba(255,255,255,0.05);\r\n        border-radius: 20px;\r\n        box-shadow: var(--glass-shadow);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    \/* Inner Glass Glare *\/\r\n    .glass-panel::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 50%; height: 100%;\r\n        background: linear-gradient(to right, transparent, rgba(255,255,255,0.03), transparent);\r\n        transform: skewX(-20deg);\r\n        transition: 0.7s;\r\n        pointer-events: none;\r\n    }\r\n    .glass-panel:hover::before {\r\n        left: 150%;\r\n    }\r\n\r\n    \/* --- Buttons --- *\/\r\n    #aot-glass-wrapper .glass-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 14px 36px;\r\n        background: linear-gradient(135deg, rgba(62,89,62,0.8), rgba(43,62,43,0.9));\r\n        color: #fff;\r\n        text-decoration: none;\r\n        font-family: 'Rajdhani', sans-serif;\r\n        font-weight: 700;\r\n        font-size: 1.15rem;\r\n        letter-spacing: 2px;\r\n        border: 1px solid rgba(223, 194, 136, 0.4);\r\n        border-radius: 50px;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        cursor: pointer;\r\n        text-transform: uppercase;\r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.5);\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #aot-glass-wrapper .glass-btn:hover {\r\n        transform: translateY(-4px) scale(1.02);\r\n        box-shadow: 0 10px 25px rgba(223, 194, 136, 0.4), inset 0 0 10px rgba(255,255,255,0.2);\r\n        border-color: var(--gold-light);\r\n        color: var(--gold-light);\r\n    }\r\n\r\n    #aot-glass-wrapper .glass-btn.outline {\r\n        background: rgba(10, 10, 10, 0.6);\r\n        border: 1px solid var(--gold-dark);\r\n        color: var(--gold-main);\r\n    }\r\n\r\n    #aot-glass-wrapper .glass-btn.outline:hover {\r\n        background: rgba(223, 194, 136, 0.15);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* --- Navbar & Mobile Menu --- *\/\r\n    #aot-glass-wrapper .aot-navbar {\r\n        position: fixed;\r\n        top: 30px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 90%;\r\n        max-width: 900px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        padding: 8px 25px;\r\n        z-index: 9999;\r\n        border-radius: 50px;\r\n        background: rgba(5, 5, 5, 0.5);\r\n        border-top: 1px solid rgba(223, 194, 136, 0.3);\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-logo-text {\r\n        font-size: 1.8rem;\r\n        color: var(--gold-main);\r\n        text-shadow: 0 0 20px rgba(223, 194, 136, 0.4);\r\n        z-index: 10001;\r\n    }\r\n\r\n    #aot-glass-wrapper .nav-links {\r\n        display: flex;\r\n        gap: 15px;\r\n    }\r\n\r\n    #aot-glass-wrapper .nav-links .glass-btn {\r\n        padding: 8px 28px;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    \/* Hamburger Icon (Hidden on Desktop) *\/\r\n    #aot-glass-wrapper .hamburger {\r\n        display: none;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n        cursor: pointer;\r\n        z-index: 10001;\r\n        padding: 10px;\r\n    }\r\n\r\n    #aot-glass-wrapper .hamburger span {\r\n        display: block;\r\n        width: 30px;\r\n        height: 2px;\r\n        background-color: var(--gold-main);\r\n        border-radius: 2px;\r\n        transition: all 0.3s ease-in-out;\r\n        box-shadow: 0 0 10px rgba(223, 194, 136, 0.5);\r\n    }\r\n\r\n    \/* --- Hero Section --- *\/\r\n    #aot-glass-wrapper .aot-hero {\r\n        position: relative;\r\n        height: 100vh;\r\n        min-height: 800px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: flex-start;\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-video-bg {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        object-fit: cover;\r\n        z-index: 0;\r\n        filter: contrast(1.1) brightness(0.8);\r\n    }\r\n\r\n    #aot-glass-wrapper .hero-overlay {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,1) 100%);\r\n        z-index: 1;\r\n    }\r\n\r\n    #aot-glass-wrapper .hero-content {\r\n        width: 100%;\r\n        max-width: 750px;\r\n        margin-left: 5%;\r\n        z-index: 3;\r\n        text-align: left;\r\n    }\r\n\r\n    #aot-glass-wrapper .hero-content h1 {\r\n        font-size: 6.5rem;\r\n        line-height: 0.95;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    #aot-glass-wrapper .hero-content p {\r\n        font-size: 1.2rem;\r\n        color: #d1d5db;\r\n        margin-bottom: 45px;\r\n        font-weight: 500;\r\n        text-shadow: 0px 4px 15px rgba(0,0,0,1);\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    #aot-glass-wrapper .ca-box {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 8px 8px 8px 30px;\r\n        border-radius: 50px;\r\n        gap: 25px;\r\n        background: rgba(0,0,0,0.6);\r\n        border-color: rgba(223, 194, 136, 0.4);\r\n    }\r\n\r\n    #aot-glass-wrapper .ca-box span {\r\n        font-family: 'Rajdhani', monospace;\r\n        font-weight: 700;\r\n        color: var(--gold-light);\r\n        font-size: 1.1rem;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    #aot-glass-wrapper .ca-btn {\r\n        font-size: 1rem;\r\n        padding: 12px 28px;\r\n        background: rgba(223, 194, 136, 0.15);\r\n    }\r\n\r\n    \/* --- About Section --- *\/\r\n    #aot-glass-wrapper .aot-about {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 80px;\r\n        padding-top: 80px;\r\n        padding-bottom: 120px;\r\n    }\r\n\r\n    #aot-glass-wrapper .about-img {\r\n        flex: 1;\r\n        position: relative;\r\n    }\r\n\r\n    #aot-glass-wrapper .about-img img {\r\n        width: 100%;\r\n        max-width: 500px;\r\n        display: block;\r\n        border-radius: 20px;\r\n        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));\r\n        transition: transform 0.5s ease;\r\n    }\r\n    \r\n    #aot-glass-wrapper .about-img img:hover {\r\n        transform: scale(1.03) translateY(-10px);\r\n    }\r\n\r\n    #aot-glass-wrapper .about-text {\r\n        flex: 1.2;\r\n    }\r\n\r\n    #aot-glass-wrapper .about-text h2 {\r\n        font-size: 4.5rem;\r\n        margin-bottom: 25px;\r\n        line-height: 1;\r\n    }\r\n\r\n    #aot-glass-wrapper .about-text p {\r\n        font-size: 1.2rem;\r\n        color: #9ca3af;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    \/* --- Live Chart & Tokenomics --- *\/\r\n    #aot-glass-wrapper .aot-chart-section {\r\n        padding: 100px 20px;\r\n        position: relative;\r\n    }\r\n\r\n    #aot-glass-wrapper .dex-container {\r\n        width: 100%;\r\n        height: 650px;\r\n        border-radius: 24px;\r\n        overflow: hidden;\r\n        margin-bottom: 80px;\r\n        padding: 6px;\r\n        background: rgba(20, 20, 20, 0.6);\r\n        box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(223, 194, 136, 0.2);\r\n    }\r\n\r\n    #aot-glass-wrapper .dex-container iframe {\r\n        width: 100%;\r\n        height: 100%;\r\n        border: none;\r\n        border-radius: 18px;\r\n    }\r\n\r\n    #aot-glass-wrapper .tokenomics-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 40px;\r\n    }\r\n\r\n    #aot-glass-wrapper .tk-card {\r\n        padding: 50px 30px;\r\n        text-align: center;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        cursor: default;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #aot-glass-wrapper .tk-card:hover {\r\n        transform: translateY(-10px);\r\n        background: rgba(30, 35, 30, 0.6);\r\n        box-shadow: 0 25px 50px rgba(0,0,0,0.9), inset 0 0 30px rgba(223, 194, 136, 0.15);\r\n        border-color: var(--gold-main);\r\n        overflow: hidden;\r\n    }\r\n\r\n    #aot-glass-wrapper .tk-card h3 {\r\n        font-size: 1.8rem;\r\n        color: #9ca3af;\r\n        margin-bottom: 15px;\r\n        letter-spacing: 4px;\r\n    }\r\n\r\n    #aot-glass-wrapper .tk-card p {\r\n        font-size: 3rem;\r\n        font-family: 'Bebas Neue', sans-serif;\r\n        color: var(--gold-main);\r\n        margin: 0;\r\n        text-shadow: 0 0 20px rgba(223, 194, 136, 0.4);\r\n    }\r\n\r\n    \/* --- How To Buy Section --- *\/\r\n    #aot-glass-wrapper .aot-htb-section {\r\n        text-align: center;\r\n        padding-top: 80px;\r\n        padding-bottom: 150px;\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-htb-section h2 {\r\n        font-size: 5rem;\r\n        margin-bottom: 80px;\r\n    }\r\n\r\n    #aot-glass-wrapper .htb-layout {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 50px;\r\n    }\r\n\r\n    #aot-glass-wrapper .htb-col {\r\n        flex: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 35px;\r\n    }\r\n\r\n    #aot-glass-wrapper .htb-center {\r\n        flex: 1.4;\r\n        position: relative;\r\n    }\r\n\r\n    #aot-glass-wrapper .htb-center::before {\r\n        content: ''; position: absolute;\r\n        top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n        width: 80%; height: 80%;\r\n        background: var(--gold-main);\r\n        filter: blur(100px); opacity: 0.15; z-index: -1;\r\n    }\r\n\r\n    #aot-glass-wrapper .htb-center img {\r\n        width: 100%;\r\n        max-width: 450px;\r\n        border-radius: 20px;\r\n        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));\r\n        transition: transform 0.5s ease;\r\n    }\r\n    #aot-glass-wrapper .htb-center img:hover {\r\n        transform: scale(1.05) translateY(-10px);\r\n    }\r\n\r\n    #aot-glass-wrapper .step-card {\r\n        padding: 35px 30px;\r\n        text-align: left;\r\n        position: relative;\r\n        transition: all 0.3s ease;\r\n        overflow: hidden;\r\n    }\r\n    #aot-glass-wrapper .step-card:hover {\r\n        background: rgba(43, 62, 43, 0.3);\r\n        transform: translateX(10px);\r\n        border-color: var(--gold-main);\r\n        overflow: hidden;\r\n    }\r\n\r\n    #aot-glass-wrapper .step-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: linear-gradient(to bottom, var(--gold-main), transparent);\r\n    }\r\n\r\n    #aot-glass-wrapper .step-card h4 {\r\n        color: var(--gold-main);\r\n        font-size: 1.6rem;\r\n        margin-bottom: 8px;\r\n        letter-spacing: 2px;\r\n    }\r\n\r\n    #aot-glass-wrapper .step-card p {\r\n        font-size: 1.4rem;\r\n        font-weight: 600;\r\n        color: #fff;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* --- Join Community Section --- *\/\r\n    #aot-glass-wrapper .aot-community {\r\n        position: relative;\r\n        height: 100vh;\r\n        min-height: 850px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n        align-items: center;\r\n        padding: 0;\r\n    }\r\n\r\n    #aot-glass-wrapper .community-overlay {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.9) 100%);\r\n        z-index: 1;\r\n    }\r\n\r\n    #aot-glass-wrapper .community-content {\r\n        position: relative;\r\n        z-index: 3;\r\n        max-width: 850px;\r\n        text-align: center;\r\n        padding: 60px 50px;\r\n        margin-bottom: 100px;\r\n        background: rgba(5, 5, 5, 0.15);\r\n        border-radius: 30px;\r\n        box-shadow: 0 30px 60px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.1);\r\n        border: 1px solid rgba(223, 194, 136, 0.2);\r\n        backdrop-filter: blur(5px);\r\n    }\r\n\r\n    #aot-glass-wrapper .community-content h2 {\r\n        font-size: 6rem;\r\n        margin-bottom: 20px;\r\n        line-height: 0.9;\r\n    }\r\n\r\n    #aot-glass-wrapper .community-content p {\r\n        font-size: 1.2rem;\r\n        color: #d1d5db;\r\n        margin-bottom: 45px;\r\n        text-shadow: 0 4px 15px #000;\r\n    }\r\n\r\n    #aot-glass-wrapper .btn-group {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 25px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    \/* --- Footer --- *\/\r\n    #aot-glass-wrapper .aot-footer {\r\n        background: #020202;\r\n        padding: 60px 20px;\r\n        text-align: center;\r\n        position: relative;\r\n        z-index: 3;\r\n        border-top: 1px solid rgba(223, 194, 136, 0.1);\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-footer-logo {\r\n        font-size: 3rem;\r\n        margin-bottom: 15px;\r\n        opacity: 0.5;\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-footer p {\r\n        color: #6b7280;\r\n        font-size: 1.1rem;\r\n        margin: 0 0 15px 0;\r\n    }\r\n\r\n    #aot-glass-wrapper .aot-footer .disclaimer {\r\n        font-size: 0.9rem;\r\n        color: #4b5563;\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    \/* --- Scroll Reveal Animation Classes --- *\/\r\n    .reveal {\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n        transition: all 1s cubic-bezier(0.5, 0, 0, 1);\r\n    }\r\n    .reveal.active {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    \/* --- Responsive (Mobile Adjustments) --- *\/\r\n    @media (max-width: 992px) {\r\n        #aot-glass-wrapper .aot-about, \r\n        #aot-glass-wrapper .htb-layout {\r\n            flex-direction: column;\r\n        }\r\n        #aot-glass-wrapper .hero-content h1 {\r\n            font-size: 5rem;\r\n        }\r\n        #aot-glass-wrapper .tokenomics-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        \/* Navbar Mobile Menu Styles *\/\r\n        #aot-glass-wrapper .aot-navbar {\r\n            padding: 10px 20px;\r\n            border-radius: 25px;\r\n        }\r\n        \r\n        #aot-glass-wrapper .hamburger {\r\n            display: flex;\r\n        }\r\n        \r\n        \/* Dropdown Menu Glassmorphism *\/\r\n        #aot-glass-wrapper .nav-links {\r\n            position: absolute;\r\n            top: 120%; \/* Meluncur ke bawah navbar *\/\r\n            left: 0;\r\n            width: 100%;\r\n            flex-direction: column;\r\n            background: rgba(10, 12, 10, 0.85);\r\n            backdrop-filter: blur(20px);\r\n            -webkit-backdrop-filter: blur(20px);\r\n            border: 1px solid var(--glass-border);\r\n            border-radius: 20px;\r\n            padding: 20px;\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.8);\r\n            opacity: 0;\r\n            transform: translateY(-20px);\r\n            pointer-events: none;\r\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        }\r\n\r\n        #aot-glass-wrapper .nav-links.active {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n            pointer-events: all;\r\n        }\r\n\r\n        #aot-glass-wrapper .nav-links .glass-btn {\r\n            width: 100%;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* Hamburger Animation to X *\/\r\n        #aot-glass-wrapper .hamburger.active span:nth-child(1) {\r\n            transform: translateY(8px) rotate(45deg);\r\n        }\r\n        #aot-glass-wrapper .hamburger.active span:nth-child(2) {\r\n            opacity: 0;\r\n        }\r\n        #aot-glass-wrapper .hamburger.active span:nth-child(3) {\r\n            transform: translateY(-8px) rotate(-45deg);\r\n        }\r\n\r\n        \/* Other Mobile Fixes *\/\r\n        #aot-glass-wrapper .hero-content {\r\n            margin-left: 0;\r\n            text-align: center;\r\n            padding: 0 20px;\r\n        }\r\n        #aot-glass-wrapper .hero-content h1 {\r\n            font-size: 4rem;\r\n        }\r\n        #aot-glass-wrapper .ca-box {\r\n            flex-direction: column;\r\n            border-radius: 20px;\r\n            padding: 20px;\r\n            gap: 15px;\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n        }\r\n        #aot-glass-wrapper .ca-box span {\r\n            word-break: break-all;\r\n            text-align: center;\r\n        }\r\n        #aot-glass-wrapper .ca-btn {\r\n            width: 100%;\r\n        }\r\n        #aot-glass-wrapper .community-content h2 {\r\n            font-size: 4rem;\r\n        }\r\n        #aot-glass-wrapper .community-content {\r\n            padding: 40px 20px;\r\n            margin-bottom: 50px;\r\n            width: 90%;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"aot-glass-wrapper\">\r\n\r\n    <canvas id=\"aot-particles\"><\/canvas>\r\n\r\n    <nav class=\"aot-navbar glass-panel reveal active\">\r\n        <div class=\"aot-logo-text\">$AOT<\/div>\r\n        \r\n        <div class=\"hamburger\" id=\"mobile-menu-btn\">\r\n            <span><\/span>\r\n            <span><\/span>\r\n            <span><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"nav-links\" id=\"nav-links-menu\">\r\n            <a href=\"#chart\" class=\"glass-btn outline\">Swap<\/a>\r\n            <a href=\"https:\/\/twitter.com\" target=\"_blank\" class=\"glass-btn\">Twitter<\/a>\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <section class=\"aot-hero\">\r\n        <video autoplay muted loop playsinline class=\"aot-video-bg\">\r\n            <source src=\"http:\/\/attackontitan.fun\/wp-content\/uploads\/2026\/04\/AOT-BG2.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"video-vignette\"><\/div>\r\n        <div class=\"hero-overlay\"><\/div>\r\n        <div class=\"aot-container hero-content reveal active\">\r\n            <h1>MAKE PARADIS <br>GREAT AGAIN<\/h1>\r\n            <p>The walls are tremendous. Beautiful walls. But the Titans? They\u2019re not sending their best. It\u2019s time for a very, very big Rumble. The biggest you\u2019ve ever seen.<\/p>\r\n            \r\n            <div class=\"ca-box glass-panel\">\r\n                <span id=\"ca-text\">CA : NULL<\/span>\r\n                <button class=\"glass-btn ca-btn\" onclick=\"copyContractAddress()\" id=\"copyBtn\">Copy CA<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"aot-container aot-about reveal\">\r\n        <div class=\"about-img\">\r\n            <img decoding=\"async\" src=\"http:\/\/attackontitan.fun\/wp-content\/uploads\/2026\/04\/Asset-5.png\" alt=\"AOT Trump Commander\">\r\n        <\/div>\r\n        <div class=\"about-text\">\r\n            <h2>A LEADER LIKE YOU\u2019VE NEVER SEEN BEFORE<\/h2>\r\n            <p>For years, we had Wall Maria, Wall Rose, and Wall Sina. Beautiful walls. The best walls in the history of walls, frankly. But then the Colossal Titan came\u2014a total disaster. Very unfair! They breached our borders, brought total chaos, and frankly, the previous leadership did a terrible job. Sad!<\/p>\r\n            <p>Enter our new Commander. He has the drive of Eren Yeager, but with a face that exudes pure, unadulterated, tremendous winning. We are going to keep moving forward. We are going to do a Rumble. And let me tell you, it\u2019s going to be a perfect Rumble.<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"chart\" class=\"aot-chart-section reveal\">\r\n        <div class=\"aot-container\">\r\n            <div class=\"dex-container glass-panel\">\r\n                <style>#dexscreener-embed{position:relative;width:100%;height:100%;}@media(min-width:1400px){#dexscreener-embed{padding-bottom:65%;}}#dexscreener-embed iframe{position:absolute;width:100%;height:100%;top:0;left:0;border:0;}<\/style>\r\n                <div id=\"dexscreener-embed\"><iframe src=\"https:\/\/dexscreener.com\/solana?embed=1&theme=dark&info=0\"><\/iframe><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tokenomics-grid\">\r\n                <div class=\"tk-card glass-panel\">\r\n                    <h3>Network<\/h3>\r\n                    <p>Solana Chain<\/p>\r\n                <\/div>\r\n                <div class=\"tk-card glass-panel\">\r\n                    <h3>Liquidity<\/h3>\r\n                    <p>Burned LP<\/p>\r\n                <\/div>\r\n                <div class=\"tk-card glass-panel\">\r\n                    <h3>Total Supply<\/h3>\r\n                    <p>1 Billion<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"aot-container aot-htb-section reveal\">\r\n        <h2>HOW TO JOIN THE REGIMENT<\/h2>\r\n        <div class=\"htb-layout\">\r\n            <div class=\"htb-col left\">\r\n                <div class=\"step-card glass-panel\">\r\n                    <h4>Step 1<\/h4>\r\n                    <p>Get Phantom Wallet<\/p>\r\n                <\/div>\r\n                <div class=\"step-card glass-panel\">\r\n                    <h4>Step 2<\/h4>\r\n                    <p>Fund Wallet with $SOL<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"htb-center\">\r\n                <img decoding=\"async\" src=\"http:\/\/attackontitan.fun\/wp-content\/uploads\/2026\/04\/Asset-6.png\" alt=\"AOT Regiment Gear\">\r\n            <\/div>\r\n            \r\n            <div class=\"htb-col right\">\r\n                <div class=\"step-card glass-panel\">\r\n                    <h4>Step 3<\/h4>\r\n                    <p>Go to Pump.Swap<\/p>\r\n                <\/div>\r\n                <div class=\"step-card glass-panel\">\r\n                    <h4>Step 4<\/h4>\r\n                    <p>Swap $SOL for $AOT<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"aot-community reveal\">\r\n        <video autoplay muted loop playsinline class=\"aot-video-bg\">\r\n            <source src=\"http:\/\/attackontitan.fun\/wp-content\/uploads\/2026\/04\/AOT-BG1.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"video-vignette\"><\/div>\r\n        <div class=\"community-overlay\"><\/div>\r\n        <div class=\"community-content glass-panel\">\r\n            <h2>STAND WITH HUMANITY<\/h2>\r\n            <p>The enemies across the sea are panicking. They\u2019ve never seen a force like this. Are you going to sit inside the walls, or are you going to dedicate your heart to the greatest movement in history?<\/p>\r\n            <div class=\"btn-group\">\r\n                <a href=\"https:\/\/twitter.com\" target=\"_blank\" class=\"glass-btn outline\">X \/ Twitter<\/a>\r\n                <a href=\"https:\/\/telegram.org\" target=\"_blank\" class=\"glass-btn outline\">Telegram<\/a>\r\n                <a href=\"#chart\" class=\"glass-btn\">Buy Now<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <footer class=\"aot-footer\">\r\n        <div class=\"aot-logo-text aot-footer-logo\">$AOT<\/div>\r\n        <p>&copy; 2026 $AOT Regiment. Make Paradis Great Again.<\/p>\r\n        <p class=\"disclaimer\">Disclaimer: This is a parody project. Not affiliated with Attack on Titan, Hajime Isayama, or the US Government. The information on this website does not constitute investment advice. Do your own research.<\/p>\r\n    <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ --- 0. Mobile Hamburger Menu Toggle ---\r\n    const mobileBtn = document.getElementById('mobile-menu-btn');\r\n    const navMenu = document.getElementById('nav-links-menu');\r\n\r\n    mobileBtn.addEventListener('click', () => {\r\n        mobileBtn.classList.toggle('active');\r\n        navMenu.classList.toggle('active');\r\n    });\r\n\r\n    \/\/ Close menu when a link is clicked\r\n    navMenu.querySelectorAll('a').forEach(link => {\r\n        link.addEventListener('click', () => {\r\n            mobileBtn.classList.remove('active');\r\n            navMenu.classList.remove('active');\r\n        });\r\n    });\r\n\r\n    \/\/ --- 1. Copy CA Function ---\r\n    function copyContractAddress() {\r\n        const caText = document.getElementById(\"ca-text\").innerText;\r\n        \r\n        navigator.clipboard.writeText(caText).then(() => {\r\n            const btn = document.getElementById(\"copyBtn\");\r\n            const originalText = btn.innerText;\r\n            \r\n            btn.innerText = \"COPIED!\";\r\n            btn.style.background = \"#dfc288\";\r\n            btn.style.color = \"#000\";\r\n            btn.style.boxShadow = \"0 0 30px rgba(223, 194, 136, 0.8)\";\r\n            btn.style.transform = \"scale(1.05)\";\r\n            \r\n            setTimeout(() => {\r\n                btn.innerText = originalText;\r\n                btn.style.background = \"\";\r\n                btn.style.color = \"\";\r\n                btn.style.boxShadow = \"\";\r\n                btn.style.transform = \"\";\r\n            }, 2000);\r\n        }).catch(err => {\r\n            console.error('Failed to copy CA: ', err);\r\n            const tempInput = document.createElement(\"input\");\r\n            tempInput.value = caText;\r\n            document.body.appendChild(tempInput);\r\n            tempInput.select();\r\n            document.execCommand(\"copy\");\r\n            document.body.removeChild(tempInput);\r\n            \r\n            const btn = document.getElementById(\"copyBtn\");\r\n            btn.innerText = \"COPIED!\";\r\n            setTimeout(() => btn.innerText = \"Copy CA\", 2000);\r\n        });\r\n    }\r\n\r\n    \/\/ --- 2. Scroll Reveal Observer ---\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const reveals = document.querySelectorAll('.reveal');\r\n        \r\n        const revealOptions = {\r\n            threshold: 0.15,\r\n            rootMargin: \"0px 0px -50px 0px\"\r\n        };\r\n\r\n        const revealOnScroll = new IntersectionObserver(function(entries, observer) {\r\n            entries.forEach(entry => {\r\n                if (!entry.isIntersecting) {\r\n                    return;\r\n                } else {\r\n                    entry.target.classList.add('active');\r\n                    observer.unobserve(entry.target); \/\/ Hanya trigger sekali\r\n                }\r\n            });\r\n        }, revealOptions);\r\n\r\n        reveals.forEach(reveal => {\r\n            revealOnScroll.observe(reveal);\r\n        });\r\n    });\r\n\r\n    \/\/ --- 3. Fire Particles (FIXED: Viewport-based & Initial Scatter) ---\r\n    const canvas = document.getElementById('aot-particles');\r\n    const ctx = canvas.getContext('2d');\r\n\r\n    let canvasWidth, canvasHeight;\r\n    let particlesArray = [];\r\n\r\n    function setCanvasSize() {\r\n        \/\/ Menggunakan ukuran layar viewport, bukan tinggi keseluruhan scroll web\r\n        canvasWidth = window.innerWidth;\r\n        canvasHeight = window.innerHeight; \r\n        canvas.width = canvasWidth;\r\n        canvas.height = canvasHeight;\r\n    }\r\n\r\n    class Particle {\r\n        \/\/ Parameter isInitial menentukan apakah ini partikel pas web baru dibuka\r\n        constructor(isInitial = false) {\r\n            this.init(isInitial);\r\n        }\r\n        init(isInitial = false) {\r\n            this.x = Math.random() * canvasWidth;\r\n            \r\n            \/\/ Jika initial (web baru buka), sebar partikel di seluruh layar (dari atas ke bawah)\r\n            \/\/ Jika respawn (partikel yg udah mati), mulai munculkan dari bawah layar\r\n            this.y = isInitial \r\n                ? Math.random() * canvasHeight \r\n                : canvasHeight + Math.random() * 100;\r\n            \r\n            this.size = Math.random() * 2 + 0.5;\r\n            this.speedY = -(Math.random() * 1.5 + 0.5); \r\n            this.speedX = Math.random() * 1 - 0.5; \r\n            \r\n            const colors = ['#dfc288', '#ff7518', '#ffbf00', '#ffffff'];\r\n            this.color = colors[Math.floor(Math.random() * colors.length)];\r\n            \r\n            this.opacity = Math.random() * 0.7 + 0.1;\r\n            this.fadeRate = Math.random() * 0.003 + 0.001; \r\n        }\r\n        draw() {\r\n            ctx.globalAlpha = this.opacity;\r\n            ctx.fillStyle = this.color;\r\n            ctx.beginPath();\r\n            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n            ctx.fill();\r\n            \r\n            ctx.shadowBlur = 10;\r\n            ctx.shadowColor = this.color;\r\n        }\r\n        update() {\r\n            this.y += this.speedY;\r\n            this.x += this.speedX;\r\n            this.opacity -= this.fadeRate;\r\n\r\n            \/\/ Jika partikel lewat batas atas layar atau sudah tak terlihat, respawn dari bawah\r\n            if (this.y < -10 || this.opacity <= 0) {\r\n                this.init(false); \/\/ False = respawn dari bawah\r\n            }\r\n        }\r\n    }\r\n\r\n    function initParticles() {\r\n        particlesArray = [];\r\n        for (let i = 0; i < 75; i++) {\r\n            \/\/ True = sebar partikel di seluruh layar saat pertama kali diinisiasi\r\n            particlesArray.push(new Particle(true));\r\n        }\r\n    }\r\n\r\n    function animateParticles() {\r\n        ctx.clearRect(0, 0, canvasWidth, canvasHeight);\r\n        for (let i = 0; i < particlesArray.length; i++) {\r\n            particlesArray[i].update();\r\n            particlesArray[i].draw();\r\n        }\r\n        requestAnimationFrame(animateParticles);\r\n    }\r\n\r\n    \/\/ Inisiasi saat halaman diload\r\n    window.addEventListener('load', () => {\r\n        setCanvasSize();\r\n        initParticles();\r\n        animateParticles();\r\n    });\r\n\r\n    \/\/ Sesuaikan ulang partikel saat ukuran layar berubah (misal HP diputar ke landscape)\r\n    window.addEventListener('resize', () => {\r\n        setCanvasSize();\r\n        initParticles(); \r\n    });\r\n\r\n<\/script>\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>$AOT Swap Twitter MAKE PARADIS GREAT AGAIN The walls are tremendous. Beautiful walls. But the Titans? They\u2019re not sending their best. It\u2019s time for a very, very big Rumble. The biggest you\u2019ve ever seen. CA : NULL Copy CA A LEADER LIKE YOU\u2019VE NEVER SEEN BEFORE For years, we had Wall Maria, Wall Rose, and [&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:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":40,"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/attackontitan.fun\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}