{"id":8,"date":"2026-03-15T17:10:38","date_gmt":"2026-03-15T17:10:38","guid":{"rendered":"https:\/\/hughraccoon.site\/?page_id=8"},"modified":"2026-03-20T06:33:20","modified_gmt":"2026-03-20T06:33:20","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/hughraccoon.site\/","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-b3fac6d e-con-full e-flex e-con e-parent\" data-id=\"b3fac6d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-132660a elementor-widget elementor-widget-html\" data-id=\"132660a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&family=Inter:wght@400;600;700&display=swap');\r\n\r\n  .hugh-main-container {\r\n    font-family: 'Jua', sans-serif;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    \r\n    \/* Background putih dengan dot pattern kecil *\/\r\n    background-color: #FFFFFF;\r\n    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);\r\n    background-size: 24px 24px; \r\n    \r\n    border-radius: 40px;\r\n    padding: 40px;\r\n    border: 4px solid #111;\r\n    box-shadow: 8px 12px 0px rgba(17, 17, 17, 0.1); \r\n    overflow: hidden; \/* Biar animasi masuknya rapi *\/\r\n  }\r\n\r\n  \/* --- ANIMATION CLASSES --- *\/\r\n  .anim-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n  \r\n  .anim-pop-in {\r\n    opacity: 0;\r\n    transform: scale(0.5) rotate(-10deg);\r\n    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n\r\n  .anim-fade-in {\r\n    opacity: 0;\r\n    transition: opacity 1s ease-out;\r\n  }\r\n\r\n  \/* Class aktif yang dipanggil oleh Javascript *\/\r\n  .is-visible.anim-fade-up {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  .is-visible.anim-pop-in {\r\n    opacity: 1;\r\n    transform: scale(1) rotate(-3deg); \/* Kembali ke rotasi awal badge *\/\r\n  }\r\n\r\n  .is-visible.anim-fade-in {\r\n    opacity: 1;\r\n  }\r\n\r\n  \/* Delay untuk efek beruntun (stagger) *\/\r\n  .delay-1 { transition-delay: 0.1s; }\r\n  .delay-2 { transition-delay: 0.3s; }\r\n  .delay-3 { transition-delay: 0.5s; }\r\n  \/* ------------------------- *\/\r\n\r\n  \/* Navbar *\/\r\n  .hugh-nav {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .hugh-logo {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 28px;\r\n    color: #111;\r\n    letter-spacing: 1px;\r\n    background: #FFF;\r\n    padding: 0 10px;\r\n    border-radius: 8px;\r\n  }\r\n\r\n  .btn-community {\r\n    background-color: #1A1C20;\r\n    color: #FFFFFF;\r\n    border: 2px solid #111;\r\n    border-radius: 30px;\r\n    padding: 12px 28px;\r\n    font-weight: 600;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 2px 4px 0px #111;\r\n  }\r\n\r\n  .btn-community:hover {\r\n    background-color: #333;\r\n    transform: translateY(-2px);\r\n    box-shadow: 4px 6px 0px #111;\r\n  }\r\n\r\n  \/* Hero Content *\/\r\n  .hugh-hero-content {\r\n    text-align: center;\r\n    margin-bottom: 70px;\r\n    position: relative;\r\n  }\r\n\r\n  .hugh-badge {\r\n    display: inline-block;\r\n    background: #FFFFFF;\r\n    border: 2px solid #111;\r\n    border-radius: 20px;\r\n    padding: 6px 16px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    color: #111;\r\n    margin-bottom: 24px;\r\n    box-shadow: 2px 2px 0px #111;\r\n  }\r\n\r\n  .hugh-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 72px;\r\n    line-height: 1.1;\r\n    color: #111;\r\n    margin: 0 auto 30px auto;\r\n    max-width: 800px;\r\n    text-shadow: 2px 2px 0px #FFF, -2px -2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF;\r\n  }\r\n\r\n  \/* Copy CA Button *\/\r\n  .ca-button-wrapper {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    background-color: #D1F876;\r\n    border: 2px solid #111;\r\n    border-radius: 50px;\r\n    padding: 10px 14px 10px 24px;\r\n    box-shadow: 4px 6px 0px #111; \r\n    transition: all 0.2s ease, opacity 0.8s ease-out, transform 0.8s ease-out; \/* Gabungin sama transisi hover *\/\r\n    position: relative;\r\n  }\r\n\r\n  .ca-button-wrapper:active {\r\n    transform: translate(2px, 4px) !important;\r\n    box-shadow: 2px 2px 0px #111;\r\n  }\r\n\r\n  .ca-text {\r\n    font-weight: 700;\r\n    font-size: 16px;\r\n    color: #111;\r\n    margin-right: 16px;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .btn-copy-icon {\r\n    background: #FFFFFF;\r\n    border: 2px solid #111;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    transition: background 0.2s ease;\r\n    box-shadow: 2px 2px 0px #111;\r\n  }\r\n  \r\n  .btn-copy-icon:hover {\r\n    background: #f0f0f0;\r\n  }\r\n\r\n  .btn-copy-icon svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    stroke: #111;\r\n  }\r\n\r\n  \/* Video Cards Grid *\/\r\n  .hugh-videos-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 24px;\r\n  }\r\n\r\n  .video-card {\r\n    border-radius: 24px;\r\n    padding: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    border: 2px solid #111;\r\n    box-shadow: 4px 6px 0px rgba(17, 17, 17, 0.1);\r\n  }\r\n\r\n  .card-dark { background-color: #1A1C20; }\r\n  .card-light { background-color: #F0F0F0; }\r\n  .card-green { background-color: #D1F876; }\r\n\r\n  .video-card video {\r\n    width: 100%;\r\n    border-radius: 16px;\r\n    object-fit: cover;\r\n    aspect-ratio: 1\/1; \r\n    border: 2px solid #111;\r\n  }\r\n\r\n  \/* Responsive untuk Mobile *\/\r\n  @media (max-width: 992px) {\r\n    .hugh-title { font-size: 56px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hugh-main-container { padding: 24px; border-width: 2px; }\r\n    .hugh-title { font-size: 40px; }\r\n    .hugh-videos-grid { grid-template-columns: 1fr; }\r\n    .ca-button-wrapper { flex-direction: column; padding: 16px; border-radius: 24px; }\r\n    .ca-text { margin-right: 0; margin-bottom: 12px; font-size: 14px; word-break: break-all; text-align: center;}\r\n    \r\n    \/* Matiin delay di mobile biar ngga kelamaan nungguin scroll *\/\r\n    .delay-2 { transition-delay: 0.1s; }\r\n    .delay-3 { transition-delay: 0.2s; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"hugh-main-container\">\r\n  <nav class=\"hugh-nav anim-fade-in\">\r\n    <div class=\"hugh-logo\">HUGH<\/div>\r\n    <a href=\"https:\/\/t.me\/hugh_raccoon\"><button class=\"btn-community\">Community<\/button><\/a>\r\n  <\/nav>\r\n\r\n  <main class=\"hugh-hero-content\">\r\n    <div class=\"hugh-badge anim-pop-in\">Meet Hugh<\/div>\r\n    <h1 class=\"hugh-title anim-fade-up\">The Dancing Raccoon<\/h1>\r\n\r\n    <div class=\"ca-button-wrapper anim-fade-up delay-1\">\r\n      <span class=\"ca-text\" id=\"hughContractAddress\">2njfeqUXyqBu5wFfuYvFCpcwERNXf1iqrkfmMNgHpump<\/span>\r\n      \r\n      <button class=\"btn-copy-icon\" onclick=\"copyToClipboard()\" title=\"Copy CA\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75\" \/>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n  <\/main>\r\n\r\n  <div class=\"hugh-videos-grid\">\r\n    <div class=\"video-card card-dark anim-fade-up delay-1\">\r\n      <video autoplay loop muted playsinline>\r\n        <source src=\"http:\/\/hughraccoon.site\/wp-content\/uploads\/2026\/03\/hugh1.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n    <\/div>\r\n    \r\n    <div class=\"video-card card-light anim-fade-up delay-2\">\r\n      <video autoplay loop muted playsinline>\r\n        <source src=\"http:\/\/hughraccoon.site\/wp-content\/uploads\/2026\/03\/hugh2.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n    <\/div>\r\n\r\n    <div class=\"video-card card-green anim-fade-up delay-3\">\r\n      <video autoplay loop muted playsinline>\r\n        <source src=\"http:\/\/hughraccoon.site\/wp-content\/uploads\/2026\/03\/hugh3.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ Fungsi Copy CA\r\n  function copyToClipboard() {\r\n    var caText = document.getElementById(\"hughContractAddress\").innerText;\r\n    navigator.clipboard.writeText(caText).then(function() {\r\n      alert(\"Contract Address Copied: \" + caText);\r\n    }).catch(function(err) {\r\n      console.error('Could not copy text: ', err);\r\n    });\r\n  }\r\n\r\n  \/\/ Fungsi Scroll Animation (Intersection Observer)\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const observerOptions = {\r\n      root: null,\r\n      rootMargin: \"0px\",\r\n      threshold: 0.15 \/\/ Animasi mulai saat 15% elemen terlihat di layar\r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries, observer) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-visible');\r\n          \/\/ Optional: Hentikan observasi jika ingin animasi hanya jalan sekali\r\n          observer.unobserve(entry.target); \r\n        }\r\n      });\r\n    }, observerOptions);\r\n\r\n    \/\/ Ambil semua elemen yang punya class animasi\r\n    const animatedElements = document.querySelectorAll('.anim-fade-up, .anim-pop-in, .anim-fade-in');\r\n    \r\n    animatedElements.forEach(el => {\r\n      observer.observe(el);\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<div class=\"elementor-element elementor-element-5a85d5e e-con-full e-flex e-con e-parent\" data-id=\"5a85d5e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ecd669c elementor-widget elementor-widget-html\" data-id=\"ecd669c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700&display=swap');\r\n\r\n  \/* Container utama dengan BG putih & dot pattern *\/\r\n  .hugh-about-container {\r\n    font-family: 'Jua', sans-serif;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    \r\n    background-color: #FFFFFF;\r\n    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);\r\n    background-size: 24px 24px; \r\n    \r\n    border-radius: 40px;\r\n    padding: 100px;\r\n    border: 4px solid #111;\r\n    box-shadow: 8px 12px 0px rgba(17, 17, 17, 0.1); \r\n    margin-top: 40px; \r\n    overflow: hidden;\r\n  }\r\n\r\n  .hugh-about-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 40px;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* Left Column: Video Container *\/\r\n  .about-video-wrapper {\r\n    background-color: #1A1C20;\r\n    border: 4px solid #111;\r\n    border-radius: 32px;\r\n    padding: 16px;\r\n    box-shadow: 8px 10px 0px #111;\r\n    transform: rotate(-1.5deg); \r\n    transition: transform 0.3s ease;\r\n    \r\n    \/* Batasin ukuran biar gak kegedean dan posisinya di tengah kolom kiri *\/\r\n    max-width: 400px;\r\n    margin: 0 auto;\r\n    width: 100%;\r\n  }\r\n\r\n  .about-video-wrapper:hover {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  .about-video-wrapper video {\r\n    width: 100%;\r\n    height: auto;\r\n    border-radius: 16px;\r\n    border: 2px solid #111;\r\n    display: block;\r\n    object-fit: cover;\r\n    aspect-ratio: 1\/1; \/* Diubah jadi rasio kotak (1:1) *\/\r\n  }\r\n\r\n  \/* Right Column: Card Content *\/\r\n  .about-content-card {\r\n    background-color: #FFFFFF;\r\n    border: 4px solid #111;\r\n    border-radius: 32px;\r\n    padding: 48px 40px;\r\n    box-shadow: 8px 10px 0px #111; \r\n    position: relative;\r\n  }\r\n\r\n  .about-badge {\r\n    display: inline-block;\r\n    background-color: #D1F876;\r\n    border: 2px solid #111;\r\n    border-radius: 20px;\r\n    padding: 6px 16px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    color: #111;\r\n    margin-bottom: 24px;\r\n    box-shadow: 2px 2px 0px #111;\r\n  }\r\n\r\n  .about-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 48px;\r\n    line-height: 1.1;\r\n    color: #111;\r\n    margin-top: 0;\r\n    margin-bottom: 24px;\r\n    text-shadow: 2px 2px 0px #FFF, -2px -2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF;\r\n  }\r\n\r\n  .about-desc {\r\n    font-size: 18px;\r\n    line-height: 1.7;\r\n    color: #333;\r\n    font-weight: 600; \r\n    margin: 0;\r\n  }\r\n\r\n  \/* --- ANIMATION CLASSES --- *\/\r\n  .about-anim-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n\r\n  .about-anim-fade-left {\r\n    opacity: 0;\r\n    transform: translateX(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n\r\n  .is-visible.about-anim-fade-up {\r\n    opacity: 1;\r\n    transform: translateY(0) rotate(-1.5deg); \r\n  }\r\n\r\n  .is-visible.about-anim-fade-left {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n  \/* ------------------------- *\/\r\n\r\n  \/* Responsive untuk Mobile & Tablet *\/\r\n  @media (max-width: 992px) {\r\n    .about-title { font-size: 40px; }\r\n    .about-desc { font-size: 16px; }\r\n    .about-content-card { padding: 32px 24px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hugh-about-container { padding: 24px; border-width: 2px; margin-top: 24px; }\r\n    .hugh-about-grid { grid-template-columns: 1fr; gap: 32px; }\r\n    .about-video-wrapper { transform: rotate(0deg); max-width: 300px; } \/* Di HP dibikin lebih kecil lagi *\/\r\n    .is-visible.about-anim-fade-up { transform: translateY(0) rotate(0deg); }\r\n    .about-anim-fade-left { transform: translateY(40px); }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"hugh-about-container\">\r\n  <div class=\"hugh-about-grid\">\r\n    \r\n    <div class=\"about-video-wrapper about-anim-fade-up hugh-observe-me\">\r\n      <video autoplay loop muted playsinline>\r\n        <source src=\"http:\/\/hughraccoon.site\/wp-content\/uploads\/2026\/03\/hugh4.mp4\" type=\"video\/mp4\">\r\n      <\/video>\r\n    <\/div>\r\n\r\n    <div class=\"about-content-card about-anim-fade-left hugh-observe-me\">\r\n      <div class=\"about-badge\">About<\/div>\r\n      <h2 class=\"about-title\">Who Is Hugh?<\/h2>\r\n      <p class=\"about-desc\">\r\n        Hugh is a tiny raccoon with a big rhythm. He travels across the world discovering new places, new friends, and new dance moves. Whether it's breakdance, shuffle, moonwalk, or something completely chaotic \u2014 Hugh is always ready to groove. He doesn\u2019t talk much. He just dances. And somehow\u2026 everyone dances with him.\r\n      <\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const aboutObserverOptions = {\r\n      root: null,\r\n      rootMargin: \"0px\",\r\n      threshold: 0.15 \r\n    };\r\n\r\n    const aboutObserver = new IntersectionObserver((entries, observer) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-visible');\r\n          observer.unobserve(entry.target); \r\n        }\r\n      });\r\n    }, aboutObserverOptions);\r\n\r\n    const aboutAnimatedElements = document.querySelectorAll('.hugh-observe-me');\r\n    \r\n    aboutAnimatedElements.forEach(el => {\r\n      aboutObserver.observe(el);\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<div class=\"elementor-element elementor-element-82e47b3 e-con-full e-flex e-con e-parent\" data-id=\"82e47b3\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd2f82e elementor-widget elementor-widget-html\" data-id=\"fd2f82e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700&display=swap');\r\n\r\n  \/* Container utama dengan BG putih & dot pattern *\/\r\n  .hugh-gallery-container {\r\n    font-family: 'Jua', sans-serif;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    \r\n    background-color: #FFFFFF;\r\n    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);\r\n    background-size: 24px 24px; \r\n    \r\n    border-radius: 40px;\r\n    padding: 60px 40px;\r\n    border: 4px solid #111;\r\n    box-shadow: 8px 12px 0px rgba(17, 17, 17, 0.1); \r\n    margin-top: 40px; \r\n    overflow: hidden;\r\n    text-align: center;\r\n  }\r\n\r\n  \/* Badge Gallery *\/\r\n  .gallery-badge {\r\n    display: inline-block;\r\n    background-color: #D1F876;\r\n    border: 2px solid #111;\r\n    border-radius: 20px;\r\n    padding: 6px 16px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    color: #111;\r\n    margin-bottom: 24px;\r\n    box-shadow: 2px 2px 0px #111;\r\n    transform: rotate(2deg);\r\n  }\r\n\r\n  \/* Judul Gallery *\/\r\n  .gallery-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 48px;\r\n    line-height: 1.1;\r\n    color: #111;\r\n    margin-top: 0;\r\n    margin-bottom: 50px;\r\n    text-shadow: 2px 2px 0px #FFF, -2px -2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF;\r\n  }\r\n\r\n  \/* Grid untuk Video TikTok *\/\r\n  .hugh-gallery-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 32px;\r\n  }\r\n\r\n  \/* Styling khusus untuk format embed video-item lu *\/\r\n  .video-item {\r\n    background-color: #1A1C20;\r\n    border: 4px solid #111;\r\n    border-radius: 24px;\r\n    box-shadow: 6px 8px 0px #111;\r\n    overflow: hidden; \r\n    position: relative;\r\n    aspect-ratio: 9\/16; \/* Menjaga rasio potret bawaan Tiktok *\/\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n\r\n  .video-item:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 8px 14px 0px #111;\r\n  }\r\n\r\n  .video-item iframe {\r\n    width: 100%;\r\n    height: 100%;\r\n    border: none;\r\n    display: block;\r\n  }\r\n\r\n  \/* --- ANIMATION CLASSES --- *\/\r\n  .gallery-anim-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n\r\n  .is-visible.gallery-anim-fade-up {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  \/* Delay stagger untuk grid gallery *\/\r\n  .g-delay-1 { transition-delay: 0.1s; }\r\n  .g-delay-2 { transition-delay: 0.2s; }\r\n  .g-delay-3 { transition-delay: 0.3s; }\r\n  .g-delay-4 { transition-delay: 0.4s; }\r\n  .g-delay-5 { transition-delay: 0.5s; }\r\n  .g-delay-6 { transition-delay: 0.6s; }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 992px) {\r\n    .hugh-gallery-grid { grid-template-columns: repeat(2, 1fr); }\r\n    .gallery-title { font-size: 40px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hugh-gallery-container { padding: 40px 24px; border-width: 2px; }\r\n    .hugh-gallery-grid { grid-template-columns: 1fr; gap: 24px; }\r\n    .gallery-title { font-size: 32px; margin-bottom: 30px; }\r\n    \r\n    \/* Reset delay di mobile biar cepet muncul *\/\r\n    .g-delay-1, .g-delay-2, .g-delay-3, .g-delay-4, .g-delay-5, .g-delay-6 { transition-delay: 0.1s; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"hugh-gallery-container\">\r\n  \r\n  <div class=\"gallery-badge gallery-anim-fade-up hugh-gallery-observe\">Watch Him Go<\/div>\r\n  <h2 class=\"gallery-title gallery-anim-fade-up hugh-gallery-observe\">Hugh\u2019s Dance Gallery<\/h2>\r\n\r\n  <div class=\"hugh-gallery-grid\">\r\n    \r\n    <div class=\"video-item gallery-anim-fade-up g-delay-1 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7617080691401952532\"><\/iframe>\r\n    <\/div>\r\n\r\n    <div class=\"video-item gallery-anim-fade-up g-delay-2 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7615967392925240596\"><\/iframe>\r\n    <\/div>\r\n\r\n    <div class=\"video-item gallery-anim-fade-up g-delay-3 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7615596798815571221\"><\/iframe>\r\n    <\/div>\r\n\r\n    <div class=\"video-item gallery-anim-fade-up g-delay-4 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7615225566161079573\"><\/iframe>\r\n    <\/div>\r\n\r\n    <div class=\"video-item gallery-anim-fade-up g-delay-5 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7612257214287334677\"><\/iframe>\r\n    <\/div>\r\n\r\n    <div class=\"video-item gallery-anim-fade-up g-delay-6 hugh-gallery-observe\">\r\n      <iframe src=\"https:\/\/www.tiktok.com\/player\/v1\/7611890747071089940\"><\/iframe>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const galleryObserverOptions = {\r\n      root: null,\r\n      rootMargin: \"0px\",\r\n      threshold: 0.1\r\n    };\r\n\r\n    const galleryObserver = new IntersectionObserver((entries, observer) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-visible');\r\n          observer.unobserve(entry.target); \r\n        }\r\n      });\r\n    }, galleryObserverOptions);\r\n\r\n    const galleryAnimatedElements = document.querySelectorAll('.hugh-gallery-observe');\r\n    \r\n    galleryAnimatedElements.forEach(el => {\r\n      galleryObserver.observe(el);\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<div class=\"elementor-element elementor-element-e3efcd9 e-con-full e-flex e-con e-parent\" data-id=\"e3efcd9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f0be66 elementor-widget elementor-widget-html\" data-id=\"9f0be66\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700&display=swap');\r\n\r\n  \/* Container utama dengan BG putih & dot pattern *\/\r\n  .hugh-htb-container {\r\n    font-family: 'Jua', sans-serif;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    \r\n    background-color: #FFFFFF;\r\n    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);\r\n    background-size: 24px 24px; \r\n    \r\n    border-radius: 40px;\r\n    padding: 60px 40px;\r\n    border: 4px solid #111;\r\n    box-shadow: 8px 12px 0px rgba(17, 17, 17, 0.1); \r\n    margin-top: 40px; \r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Header Section *\/\r\n  .htb-header {\r\n    text-align: center;\r\n    margin-bottom: 50px;\r\n  }\r\n\r\n  .htb-badge {\r\n    display: inline-block;\r\n    background-color: #D1F876;\r\n    border: 2px solid #111;\r\n    border-radius: 20px;\r\n    padding: 6px 16px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    color: #111;\r\n    margin-bottom: 24px;\r\n    box-shadow: 2px 2px 0px #111;\r\n    transform: rotate(-2deg);\r\n  }\r\n\r\n  .htb-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 48px;\r\n    line-height: 1.1;\r\n    color: #111;\r\n    margin-top: 0;\r\n    margin-bottom: 20px;\r\n    text-shadow: 2px 2px 0px #FFF, -2px -2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF;\r\n  }\r\n\r\n  .htb-subtitle {\r\n    font-size: 18px;\r\n    color: #333;\r\n    font-weight: 600;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n    line-height: 1.6;\r\n    background: #FFF; \/* Biar gampang dibaca di atas dot pattern *\/\r\n    padding: 10px 20px;\r\n    border-radius: 16px;\r\n    border: 2px solid #111;\r\n    box-shadow: 4px 4px 0px rgba(17,17,17,0.1);\r\n  }\r\n\r\n  \/* Grid Layout 2x2 *\/\r\n  .htb-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 32px;\r\n  }\r\n\r\n  \/* Card Step Styling *\/\r\n  .htb-card {\r\n    background-color: #FFFFFF;\r\n    border: 4px solid #111;\r\n    border-radius: 32px;\r\n    padding: 40px 32px;\r\n    box-shadow: 6px 8px 0px #111;\r\n    position: relative;\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n\r\n  .htb-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 8px 12px 0px #111;\r\n  }\r\n\r\n  \/* Card ke-4 dikasih warna hijau biar spesial *\/\r\n  .htb-card.final-step {\r\n    background-color: #D1F876;\r\n  }\r\n\r\n  \/* Angka Step *\/\r\n  .htb-step-num {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background-color: #1A1C20;\r\n    color: #FFFFFF;\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 24px;\r\n    width: 48px;\r\n    height: 48px;\r\n    border-radius: 16px;\r\n    border: 3px solid #111;\r\n    margin-bottom: 24px;\r\n    transform: rotate(-5deg);\r\n    box-shadow: 4px 4px 0px rgba(17,17,17,0.3);\r\n  }\r\n\r\n  .htb-card-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 24px;\r\n    color: #111;\r\n    margin-top: 0;\r\n    margin-bottom: 16px;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .htb-card-desc {\r\n    font-size: 16px;\r\n    color: #333;\r\n    line-height: 1.6;\r\n    font-weight: 500;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* --- ANIMATION CLASSES --- *\/\r\n  .htb-anim-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n\r\n  .is-visible.htb-anim-fade-up {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  \/* Delay stagger untuk grid *\/\r\n  .h-delay-1 { transition-delay: 0.1s; }\r\n  .h-delay-2 { transition-delay: 0.2s; }\r\n  .h-delay-3 { transition-delay: 0.3s; }\r\n  .h-delay-4 { transition-delay: 0.4s; }\r\n\r\n  \/* Responsive Mobile & Tablet *\/\r\n  @media (max-width: 992px) {\r\n    .htb-title { font-size: 40px; }\r\n    .htb-subtitle { font-size: 16px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hugh-htb-container { padding: 40px 24px; border-width: 2px; }\r\n    .htb-grid { grid-template-columns: 1fr; gap: 24px; } \/* Berubah jadi 1 kolom di HP *\/\r\n    .htb-title { font-size: 32px; }\r\n    .htb-card { padding: 32px 24px; }\r\n    \r\n    \/* Reset delay di mobile biar cepet muncul *\/\r\n    .h-delay-1, .h-delay-2, .h-delay-3, .h-delay-4 { transition-delay: 0.1s; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"hugh-htb-container\">\r\n  \r\n  <div class=\"htb-header\">\r\n    <div class=\"htb-badge htb-anim-fade-up hugh-htb-observe\">Tutorial<\/div>\r\n    <h2 class=\"htb-title htb-anim-fade-up hugh-htb-observe\">How to Buy $HUGH<\/h2>\r\n    <p class=\"htb-subtitle htb-anim-fade-up hugh-htb-observe\">\r\n      Getting your paws on $HUGH is easy.<br>\r\n      Just follow these simple steps and join the dance. \ud83e\udd9d\ud83d\udc83\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"htb-grid\">\r\n    \r\n    <div class=\"htb-card htb-anim-fade-up h-delay-1 hugh-htb-observe\">\r\n      <div class=\"htb-step-num\">1<\/div>\r\n      <h3 class=\"htb-card-title\">Create a Wallet<\/h3>\r\n      <p class=\"htb-card-desc\">\r\n        Download and set up a crypto wallet such as Phantom or Solflare. Make sure to securely store your seed phrase \u2014 this gives you full control of your wallet.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"htb-card htb-anim-fade-up h-delay-2 hugh-htb-observe\">\r\n      <div class=\"htb-step-num\">2<\/div>\r\n      <h3 class=\"htb-card-title\">Get Some SOL<\/h3>\r\n      <p class=\"htb-card-desc\">\r\n        Buy SOL from a crypto exchange like Binance, Coinbase, or Bybit. Then send the SOL to your wallet address.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"htb-card htb-anim-fade-up h-delay-3 hugh-htb-observe\">\r\n      <div class=\"htb-step-num\">3<\/div>\r\n      <h3 class=\"htb-card-title\">Go to a DEX<\/h3>\r\n      <p class=\"htb-card-desc\">\r\n        Visit a decentralized exchange like Jupiter or Raydium. Connect your wallet and get ready to swap.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"htb-card final-step htb-anim-fade-up h-delay-4 hugh-htb-observe\">\r\n      <div class=\"htb-step-num\">4<\/div>\r\n      <h3 class=\"htb-card-title\">Swap SOL for $HUGH<\/h3>\r\n      <p class=\"htb-card-desc\">\r\n        Paste the official $HUGH contract address, select the amount of SOL you want to swap, and confirm the transaction.\r\n      <\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const htbObserverOptions = {\r\n      root: null,\r\n      rootMargin: \"0px\",\r\n      threshold: 0.15\r\n    };\r\n\r\n    const htbObserver = new IntersectionObserver((entries, observer) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-visible');\r\n          observer.unobserve(entry.target); \r\n        }\r\n      });\r\n    }, htbObserverOptions);\r\n\r\n    const htbAnimatedElements = document.querySelectorAll('.hugh-htb-observe');\r\n    \r\n    htbAnimatedElements.forEach(el => {\r\n      htbObserver.observe(el);\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<div class=\"elementor-element elementor-element-390cb29 e-con-full e-flex e-con e-parent\" data-id=\"390cb29\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-724e57f elementor-widget elementor-widget-html\" data-id=\"724e57f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&family=Inter:wght@400;500;600;700;800&display=swap');\r\n\r\n  \/* Container utama dengan BG putih & dot pattern *\/\r\n  .hugh-join-container {\r\n    font-family: 'Inter', sans-serif;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    \r\n    background-color: #FFFFFF;\r\n    background-image: radial-gradient(#000000 1.5px, transparent 1.5px);\r\n    background-size: 24px 24px; \r\n    \r\n    border-radius: 40px;\r\n    padding: 80px 40px; \r\n    border: 4px solid #111;\r\n    box-shadow: 8px 12px 0px rgba(17, 17, 17, 0.1); \r\n    margin-top: 40px; \r\n    margin-bottom: 40px; \r\n    overflow: hidden;\r\n    text-align: center;\r\n  }\r\n\r\n  .join-badge {\r\n    display: inline-block;\r\n    background-color: #D1F876;\r\n    border: 2px solid #111;\r\n    border-radius: 20px;\r\n    padding: 6px 16px;\r\n    font-weight: 800;\r\n    font-size: 14px;\r\n    color: #111;\r\n    margin-bottom: 24px;\r\n    box-shadow: 2px 2px 0px #111;\r\n    transform: rotate(3deg);\r\n  }\r\n\r\n  .join-title {\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 64px; \r\n    line-height: 1.1;\r\n    color: #111;\r\n    margin-top: 0;\r\n    margin-bottom: 30px;\r\n    text-shadow: 3px 3px 0px #FFF, -3px -3px 0px #FFF, 3px -3px 0px #FFF, -3px 3px 0px #FFF;\r\n  }\r\n\r\n  .join-desc {\r\n    font-size: 20px;\r\n    color: #111;\r\n    font-weight: 600;\r\n    max-width: 750px;\r\n    margin: 0 auto 40px auto;\r\n    line-height: 1.6;\r\n    background: #FFF; \r\n    padding: 20px 30px;\r\n    border-radius: 24px;\r\n    border: 3px solid #111;\r\n    box-shadow: 6px 6px 0px rgba(17,17,17,0.1);\r\n  }\r\n\r\n  \/* Kumpulan Tombol *\/\r\n  .join-btn-group {\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n  }\r\n\r\n  \/* Style Dasar Tombol *\/\r\n  .join-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-decoration: none;\r\n    font-family: 'Bowlby One', cursive;\r\n    font-size: 16px;\r\n    padding: 16px 32px;\r\n    border: 3px solid #111;\r\n    border-radius: 40px;\r\n    color: #111;\r\n    transition: all 0.2s ease;\r\n    box-shadow: 4px 6px 0px #111;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .join-btn:active {\r\n    transform: translate(2px, 4px);\r\n    box-shadow: 2px 2px 0px #111;\r\n  }\r\n\r\n  .join-btn svg {\r\n    width: 20px;\r\n    height: 20px;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  \/* Varian Warna Tombol *\/\r\n  .btn-twitter { background-color: #1A1C20; color: #FFFFFF; }\r\n  .btn-twitter svg { fill: #FFFFFF; }\r\n  \r\n  .btn-chart { background-color: #FFFFFF; }\r\n  \r\n  .btn-swap { background-color: #D1F876; }\r\n\r\n  .btn-email { background-color: #FFFFFF; }\r\n\r\n  .btn-twitter:hover { background-color: #333; }\r\n  .btn-chart:hover { background-color: #f0f0f0; }\r\n  .btn-swap:hover { background-color: #bfe85c; }\r\n  .btn-email:hover { background-color: #f0f0f0; }\r\n\r\n  \/* --- ANIMATION CLASSES --- *\/\r\n  .join-anim-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: opacity 0.8s ease-out, transform 0.8s ease-out;\r\n  }\r\n\r\n  .join-anim-pop {\r\n    opacity: 0;\r\n    transform: scale(0.5) rotate(10deg);\r\n    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n\r\n  .is-visible.join-anim-fade-up { opacity: 1; transform: translateY(0); }\r\n  .is-visible.join-anim-pop { opacity: 1; transform: scale(1) rotate(3deg); }\r\n\r\n  .j-delay-1 { transition-delay: 0.2s; }\r\n  .j-delay-2 { transition-delay: 0.4s; }\r\n\r\n  @media (max-width: 992px) {\r\n    .join-title { font-size: 48px; }\r\n    .join-desc { font-size: 18px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .hugh-join-container { padding: 40px 24px; border-width: 2px; }\r\n    .join-title { font-size: 40px; }\r\n    .join-desc { font-size: 16px; padding: 16px 20px; }\r\n    .join-btn-group { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; }\r\n    .join-btn { width: 100%; justify-content: center; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"hugh-join-container\">\r\n  \r\n  <div class=\"join-badge join-anim-pop hugh-join-observe\">Community<\/div>\r\n  \r\n  <h2 class=\"join-title join-anim-fade-up hugh-join-observe\">Join The Dance<\/h2>\r\n  \r\n  <p class=\"join-desc join-anim-fade-up j-delay-1 hugh-join-observe\">\r\n    The world is big. The dance floor is bigger. Follow Hugh\u2019s journey, join the community, and let the groove take over. Because the question isn\u2019t: \"What is Hugh doing?\" The real question is: <strong>\u201cWhy aren\u2019t you dancing yet?\u201d<\/strong>\r\n  <\/p>\r\n\r\n  <div class=\"join-btn-group join-anim-fade-up j-delay-2 hugh-join-observe\">\r\n    \r\n    <a href=\"https:\/\/x.com\/raccoonhugh\" target=\"_blank\" class=\"join-btn btn-twitter\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\">\r\n        <path d=\"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z\"\/>\r\n      <\/svg>\r\n      Twitter\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/dexscreener.com\/solana\/2njfeqUXyqBu5wFfuYvFCpcwERNXf1iqrkfmMNgHpump\" target=\"_blank\" class=\"join-btn btn-chart\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z\" \/>\r\n      <\/svg>\r\n      Live Chart\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=2njfeqUXyqBu5wFfuYvFCpcwERNXf1iqrkfmMNgHpump\" target=\"_blank\" class=\"join-btn btn-swap\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5\" \/>\r\n      <\/svg>\r\n      Swap Now\r\n    <\/a>\r\n\r\n    <a href=\"mailto:hughraccoon@mail.com\" class=\"join-btn btn-email\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\" stroke=\"currentColor\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75\" \/>\r\n      <\/svg>\r\n      Email\r\n    <\/a>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", function() {\r\n    const joinObserverOptions = {\r\n      root: null,\r\n      rootMargin: \"0px\",\r\n      threshold: 0.15\r\n    };\r\n\r\n    const joinObserver = new IntersectionObserver((entries, observer) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('is-visible');\r\n          observer.unobserve(entry.target); \r\n        }\r\n      });\r\n    }, joinObserverOptions);\r\n\r\n    const joinAnimatedElements = document.querySelectorAll('.hugh-join-observe');\r\n    \r\n    joinAnimatedElements.forEach(el => {\r\n      joinObserver.observe(el);\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<div class=\"elementor-element elementor-element-6138358 e-flex e-con-boxed e-con e-parent\" data-id=\"6138358\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bda4b1b elementor-widget elementor-widget-heading\" data-id=\"bda4b1b\" data-element_type=\"widget\" data-widget_type=\"heading.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-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">&copy 2026. HUGH<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>HUGH Community Meet Hugh The Dancing Raccoon 2njfeqUXyqBu5wFfuYvFCpcwERNXf1iqrkfmMNgHpump About Who Is Hugh? Hugh is a tiny raccoon with a big rhythm. He travels across the world discovering new places, new friends, and new dance moves. Whether it&#8217;s breakdance, shuffle, moonwalk, or something completely chaotic \u2014 Hugh is always ready to groove. He doesn\u2019t talk much. [&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:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":67,"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":90,"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/90"}],"wp:attachment":[{"href":"https:\/\/hughraccoon.site\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}