{"id":8,"date":"2026-07-25T07:29:37","date_gmt":"2026-07-25T07:29:37","guid":{"rendered":"https:\/\/twerkingdog.fun\/?page_id=8"},"modified":"2026-07-25T08:30:10","modified_gmt":"2026-07-25T08:30:10","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/twerkingdog.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-544fef6 e-con-full e-flex e-con e-parent\" data-id=\"544fef6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5378d2e elementor-widget elementor-widget-html\" data-id=\"5378d2e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- GSAP & ScrollTrigger Libraries -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<div id=\"twd-root\">\r\n<style>\r\n  \/* ---------- Reset \/ scope ---------- *\/\r\n  #twd-root, #twd-root *, #twd-root *::before, #twd-root *::after { box-sizing: border-box; }\r\n\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');\r\n\r\n  #twd-root {\r\n    --bg: #EFDBC7;\r\n    --bg-2: #E8CFB3;\r\n    --bg-3: #F6E8D8;\r\n    --ink: #1a1512;\r\n    --ink-soft: #4a3d34;\r\n    --ink-mute: #8a7563;\r\n    --line: rgba(26,21,18,.14);\r\n    --line-strong: rgba(26,21,18,.3);\r\n    --card: #f7ecdf;\r\n    --accent: #1a1512;\r\n    --accent-ink: #F0DFCF;\r\n    --hot: #FF5B2E;\r\n    --lime: #C6FF3D;\r\n    --radius: 24px;\r\n    --radius-lg: 32px;\r\n    --shadow-sm: 0 1px 0 rgba(26,21,18,.06), 0 8px 24px -12px rgba(26,21,18,.18);\r\n    --shadow-md: 0 20px 50px -22px rgba(26,21,18,.4);\r\n    --shadow-lg: 0 40px 100px -30px rgba(26,21,18,.55);\r\n    background: var(--bg);\r\n    color: var(--ink);\r\n    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;\r\n    font-feature-settings: \"ss01\",\"cv11\";\r\n    -webkit-font-smoothing: antialiased;\r\n    line-height: 1.5;\r\n    overflow-x: clip;\r\n    position: relative;\r\n  }\r\n  #twd-root .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }\r\n  #twd-root .serif { font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-style: italic; font-weight: 400; }\r\n\r\n  \/* ---------- Global textured background ---------- *\/\r\n  #twd-root::before {\r\n    content: \"\"; position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n    background:\r\n      radial-gradient(60% 50% at 15% 8%,  rgba(255,91,46,.18), transparent 60%),\r\n      radial-gradient(45% 40% at 90% 22%, rgba(198,255,61,.16), transparent 65%),\r\n      radial-gradient(50% 45% at 80% 78%, rgba(255,91,46,.14), transparent 60%),\r\n      radial-gradient(55% 45% at 10% 65%, rgba(26,21,18,.08),  transparent 60%);\r\n  }\r\n  #twd-root::after {\r\n    content:\"\"; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;\r\n    background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.22 0'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n  }\r\n  #twd-root > * { position: relative; z-index: 1; }\r\n\r\n  #twd-root .twd-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }\r\n\r\n  \/* ---------- Marquee ticker ---------- *\/\r\n  #twd-root .twd-ticker {\r\n    background: var(--ink); color: var(--accent-ink);\r\n    padding: 12px 0; overflow: hidden; border-bottom: 1px solid var(--ink);\r\n    position: relative;\r\n  }\r\n  #twd-root .twd-ticker-track {\r\n    display: inline-flex; gap: 48px; white-space: nowrap;\r\n    animation: twd-marquee 40s linear infinite;\r\n    padding-left: 48px;\r\n  }\r\n  #twd-root .twd-ticker span {\r\n    font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;\r\n    display: inline-flex; align-items:center; gap: 14px;\r\n  }\r\n  #twd-root .twd-ticker span::after {\r\n    content: \"\u2726\"; color: var(--hot); font-size: 10px;\r\n  }\r\n  @keyframes twd-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }\r\n\r\n  \/* ---------- Navbar ---------- *\/\r\n  #twd-root .twd-nav-wrap { position: fixed; top: 18px; left: 0; width: 100%; z-index: 999; padding: 0 16px; pointer-events: none; }\r\n  #twd-root .twd-nav {\r\n    pointer-events: auto;\r\n    max-width: 1180px; margin: 0 auto;\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    padding: 10px 12px 10px 22px;\r\n    background: rgba(247,236,223,.7);\r\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n    backdrop-filter: saturate(180%) blur(20px);\r\n    border: 1px solid rgba(26,21,18,.1);\r\n    border-radius: 999px;\r\n    box-shadow: var(--shadow-md);\r\n  }\r\n  #twd-root .twd-logo { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; display:flex; align-items:center; gap:10px;}\r\n  #twd-root .twd-logo .dot {\r\n    width:10px; height:10px; border-radius:50%; background: var(--hot);\r\n    box-shadow: 0 0 0 3px rgba(255,91,46,.2), 0 0 12px var(--hot);\r\n    animation: twd-pulse 2s ease-in-out infinite;\r\n  }\r\n  @keyframes twd-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }\r\n  \r\n  \/* Navbar CA Block *\/\r\n  #twd-root .twd-nav-ca {\r\n    display: flex; align-items: center; gap: 10px;\r\n    background: rgba(255,255,255,0.45); padding: 5px 5px 5px 16px;\r\n    border-radius: 999px; border: 1px solid rgba(26,21,18,.08);\r\n  }\r\n  #twd-root .twd-nav-ca span { font-size: 12px; color: var(--ink-soft); }\r\n\r\n  #twd-root .twd-nav-actions { display:flex; align-items:center; gap:8px; }\r\n  #twd-root .twd-icon-btn {\r\n    width: 38px; height:38px; display:inline-flex; align-items:center; justify-content:center;\r\n    border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.5);\r\n    color: var(--ink); transition: all .25s ease; text-decoration:none;\r\n  }\r\n  #twd-root .twd-icon-btn:hover { background: var(--ink); color: var(--accent-ink); transform: translateY(-2px) rotate(-6deg); border-color: var(--ink); }\r\n  #twd-root .twd-icon-btn svg { width: 15px; height: 15px; }\r\n  #twd-root .twd-btn {\r\n    display: inline-flex; align-items:center; gap:8px;\r\n    padding: 11px 20px; border-radius: 999px;\r\n    background: var(--ink); color: var(--accent-ink);\r\n    font-size: 13px; font-weight: 600; letter-spacing: -0.01em;\r\n    border: 1px solid var(--ink); cursor: pointer;\r\n    text-decoration:none; transition: transform .25s ease, background .25s ease, color .25s ease;\r\n    position: relative; overflow: hidden;\r\n  }\r\n  #twd-root .twd-btn:hover { transform: translateY(-2px); background: var(--hot); border-color: var(--hot); color:#fff; }\r\n  #twd-root .twd-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }\r\n  #twd-root .twd-btn.ghost:hover { background: var(--ink); color: var(--accent-ink); border-color: var(--ink); }\r\n  #twd-root .twd-btn.sm { padding: 9px 16px; font-size: 12px; }\r\n  #twd-root .twd-btn.hot { background: var(--hot); border-color: var(--hot); color: #fff; }\r\n  #twd-root .twd-btn.hot:hover { background: var(--ink); border-color: var(--ink); }\r\n  #twd-root .twd-btn .arr { transition: transform .25s ease; }\r\n  #twd-root .twd-btn:hover .arr { transform: translateX(4px); }\r\n  #twd-root .twd-btn.block { width: 100%; justify-content: center; }\r\n\r\n  \/* ---------- Hero (Scroll-to-play & Sticky) ---------- *\/\r\n  #twd-root #twd-hero-track {\r\n    position: relative;\r\n    height: 400vh; \/* Ruang scroll yang sangat panjang untuk playback video *\/\r\n    margin-top: 24px; \r\n    padding: 0 16px;\r\n    z-index: 10;\r\n  }\r\n  #twd-root .twd-hero-inner {\r\n    position: sticky;\r\n    top: 18px; \/* Menempel di bawah navbar *\/\r\n    height: calc(100vh - 36px);\r\n    min-height: 640px;\r\n    overflow: hidden;\r\n    border-radius: 40px; border: 1px solid rgba(26,21,18,.15);\r\n    display:flex;\r\n    background: #1a1210;\r\n    box-shadow: var(--shadow-lg);\r\n  }\r\n  #twd-root .twd-hero-inner video {\r\n    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;\r\n    filter: saturate(1.05) contrast(1.05);\r\n  }\r\n  #twd-root .twd-hero-overlay {\r\n    position:absolute; inset:0; z-index:1; pointer-events:none;\r\n  }\r\n  #twd-root .twd-hero-grain {\r\n    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.15; mix-blend-mode:overlay;\r\n    background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n  }\r\n  \r\n  #twd-root .twd-hero-top {\r\n    position: absolute; top: 32px; left: 56px; right: 56px; z-index: 3;\r\n    display:flex; justify-content: space-between; align-items:center; gap: 16px;\r\n  }\r\n  #twd-root .twd-hero-tag {\r\n    display:inline-flex; align-items:center; gap:10px;\r\n    padding: 8px 14px; border-radius: 999px;\r\n    background: rgba(26,18,16,.4); border: 1px solid rgba(255,255,255,.2);\r\n    color:#fff; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight: 500;\r\n    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);\r\n  }\r\n  #twd-root .twd-hero-tag .live { width:7px; height:7px; border-radius:50%; background:#7CFF9E; box-shadow:0 0 12px #7CFF9E; animation: twd-pulse 1.5s ease-in-out infinite;}\r\n  #twd-root .twd-hero-meta {\r\n    display:flex; gap: 24px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;\r\n  }\r\n  #twd-root .twd-hero-meta span { display:inline-flex; align-items:center; gap:8px; }\r\n  #twd-root .twd-hero-meta span::before { content:\"\"; width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,.6); }\r\n\r\n  \/* Hero orbit sticker *\/\r\n  #twd-root .twd-hero-sticker {\r\n    position: absolute; z-index: 4; right: 40px; top: 40%; width: 130px; height: 130px;\r\n    animation: twd-spin 18s linear infinite;\r\n    pointer-events:none;\r\n  }\r\n  #twd-root .twd-hero-sticker svg { width:100%; height:100%; }\r\n  @keyframes twd-spin { to { transform: rotate(360deg); } }\r\n\r\n  #twd-root .twd-hero-content {\r\n    position: relative; z-index: 3; width: 100%; height: 100%;\r\n    display:grid; grid-template-columns: 1fr 1fr; gap: 48px;\r\n    align-items: end; padding: 48px 56px 64px;\r\n  }\r\n\r\n  \/* Kiri: Judul dan Deskripsi *\/\r\n  #twd-root #twd-hero-left h1 {\r\n    font-size: clamp(72px, 11vw, 180px);\r\n    line-height: .82; letter-spacing: -0.055em; margin: 0;\r\n    font-weight: 700; color: #fff;\r\n    text-shadow: 0 2px 30px rgba(0,0,0,.35);\r\n    position: relative;\r\n  }\r\n  #twd-root #twd-hero-left h1 .dollar {\r\n    color: var(--hot); display: inline-block;\r\n    animation: twd-wiggle 4s ease-in-out infinite;\r\n  }\r\n  #twd-root #twd-hero-left h1 .serif { display:block; font-size: .28em; letter-spacing: -0.01em; color: rgba(255,255,255,.85); margin-top: 10px; padding-left: 6px; }\r\n  @keyframes twd-wiggle { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-6px)} }\r\n  #twd-root #twd-hero-left p.mono {\r\n    max-width: 480px; margin-top: 26px; font-size: 13px;\r\n    color: rgba(255,255,255,.85); line-height: 1.75;\r\n  }\r\n  #twd-root .twd-hero-cta { display:flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }\r\n\r\n  \/* Kanan: Stack Live Chart *\/\r\n  #twd-root #twd-hero-right {\r\n    opacity: 0; visibility: hidden; \/* Disembunyikan di awal untuk sequence GSAP *\/\r\n    position: relative; min-height: 260px; justify-self: end; width: 100%; max-width: 460px; margin-bottom: 12px;\r\n  }\r\n  #twd-root .twd-ca-card {\r\n    position: absolute; inset: 0;\r\n    background: rgba(247,236,223,.9);\r\n    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);\r\n    border: 1px solid rgba(255,255,255,.6);\r\n    border-radius: 28px; padding: 24px;\r\n    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);\r\n    opacity: 0; transform: translateY(12px) scale(.98);\r\n    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);\r\n  }\r\n  #twd-root .twd-ca-card.active { opacity: 1; transform: translateY(0) scale(1); }\r\n  #twd-root .twd-ca-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 12px;}\r\n  #twd-root .twd-ca-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600;}\r\n  #twd-root .twd-ca-badge { font-size: 10px; padding: 4px 10px; border-radius:999px; background: var(--lime); color: var(--ink); font-weight:600; letter-spacing:.1em; text-transform: uppercase;}\r\n  \r\n  #twd-root .twd-chart-card { text-align:left; padding: 26px; }\r\n  #twd-root .twd-chart-card h3 { margin: 6px 0 8px; font-size: 26px; letter-spacing:-.02em; line-height: 1.05;}\r\n  #twd-root .twd-chart-card p { margin: 0 0 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.6;}\r\n  #twd-root .twd-chart-viz {\r\n    height: 60px; margin-bottom: 18px; position: relative;\r\n    background: linear-gradient(180deg, transparent, rgba(198,255,61,.15));\r\n    border-radius: 10px; overflow: hidden;\r\n  }\r\n  #twd-root .twd-chart-viz svg { width: 100%; height: 100%; }\r\n\r\n  \/* ---------- Section base ---------- *\/\r\n  #twd-root section { padding: 120px 0; position: relative; z-index: 20;}\r\n  #twd-root .twd-eyebrow {\r\n    display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.22em; text-transform:uppercase;\r\n    color: var(--ink); padding: 8px 14px; border: 1px solid var(--ink); border-radius:999px;\r\n    background: transparent; font-weight: 500;\r\n  }\r\n  #twd-root .twd-eyebrow::before { content:\"\"; width: 6px; height:6px; border-radius:50%; background: var(--hot); }\r\n  #twd-root h2 {\r\n    font-size: clamp(44px, 6vw, 84px);\r\n    line-height: .95; letter-spacing: -0.04em; margin: 20px 0 0;\r\n    font-weight: 700;\r\n  }\r\n  #twd-root h2 .serif { color: var(--hot); }\r\n  #twd-root .twd-lead { font-size: 15px; line-height: 1.75; color: var(--ink-soft); }\r\n  #twd-root .twd-lead + .twd-lead { margin-top: 16px; }\r\n\r\n  \/* ---------- About ---------- *\/\r\n  #twd-root .twd-about-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; }\r\n  #twd-root .twd-about-video-wrap { position: relative; }\r\n  #twd-root .twd-about-video {\r\n    position: relative; border-radius: 32px; overflow: hidden;\r\n    border: 1px solid var(--line); box-shadow: var(--shadow-lg);\r\n    aspect-ratio: 4\/5; background: #2a1e17;\r\n  }\r\n  #twd-root .twd-about-video video { width: 100%; height: 100%; object-fit: cover; display:block; }\r\n  #twd-root .twd-about-stamp {\r\n    position: absolute; bottom: -30px; right: -30px;\r\n    width: 140px; height: 140px; border-radius: 50%;\r\n    background: var(--hot); color: #fff;\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-align:center;\r\n    box-shadow: 0 20px 40px -12px rgba(255,91,46,.5);\r\n    animation: twd-spin 12s linear infinite;\r\n    border: 3px solid var(--bg);\r\n  }\r\n  #twd-root .twd-about-stamp svg { width:100%; height:100%; position:absolute; inset:0; }\r\n  #twd-root .twd-facts { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }\r\n  #twd-root .twd-fact {\r\n    padding: 20px; border-radius: 20px; background: rgba(255,255,255,.4);\r\n    border: 1px solid var(--line);\r\n  }\r\n  #twd-root .twd-fact-num { font-size: 32px; font-weight: 700; letter-spacing:-.03em; line-height: 1;}\r\n  #twd-root .twd-fact-label { font-size: 11px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; font-family: 'JetBrains Mono', monospace;}\r\n\r\n  \/* ---------- Gallery ---------- *\/\r\n  #twd-root .twd-gallery-head {\r\n    display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px;\r\n  }\r\n  #twd-root .twd-gallery-head .twd-lead { max-width: 520px; margin-top: 20px;}\r\n  #twd-root .twd-gallery-grid {\r\n    display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;\r\n  }\r\n  #twd-root .twd-gallery-item {\r\n    position: relative; border-radius: 24px; overflow: hidden;\r\n    border: 1px solid var(--line); background: #2a1e17;\r\n    aspect-ratio: 9\/16; box-shadow: var(--shadow-sm);\r\n    transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;\r\n  }\r\n  #twd-root .twd-gallery-item:nth-child(even) { transform: translateY(28px); }\r\n  #twd-root .twd-gallery-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }\r\n  #twd-root .twd-gallery-item:nth-child(even):hover { transform: translateY(20px); }\r\n  #twd-root .twd-gallery-item video { width:100%; height:100%; object-fit:cover; display:block; }\r\n  #twd-root .twd-gallery-item::after {\r\n    content:\"\"; position:absolute; inset:auto 0 0 0; height:45%;\r\n    background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));\r\n    pointer-events:none;\r\n  }\r\n  #twd-root .twd-gallery-item .twd-gi-num {\r\n    position:absolute; top: 14px; left: 14px; z-index:2;\r\n    font-family: 'JetBrains Mono', monospace; font-size: 11px; color:#fff;\r\n    padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.35);\r\n    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);\r\n    letter-spacing:.1em;\r\n  }\r\n\r\n  \/* ---------- How to buy ---------- *\/\r\n  #twd-root .twd-how { text-align:center; position: relative; }\r\n  #twd-root .twd-how-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2;}\r\n  #twd-root .twd-steps {\r\n    display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; text-align: left;\r\n  }\r\n  #twd-root .twd-step {\r\n    padding: 24px; border-radius: 24px; background: rgba(255,255,255,.5);\r\n    border: 1px solid var(--line); position: relative; overflow: hidden;\r\n    transition: transform .3s ease, background .3s ease;\r\n  }\r\n  #twd-root .twd-step:hover { transform: translateY(-4px); background: #fff; }\r\n  #twd-root .twd-step-num {\r\n    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--hot); font-weight: 600; letter-spacing:.15em;\r\n  }\r\n  #twd-root .twd-step h4 { margin: 12px 0 8px; font-size: 20px; letter-spacing:-.02em; line-height: 1.1; }\r\n  #twd-root .twd-step p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55;}\r\n\r\n  #twd-root .twd-disclaimer {\r\n    margin: 48px auto 0; padding: 20px 24px; border: 1px dashed var(--line-strong);\r\n    border-radius: 20px; background: rgba(255,255,255,.4);\r\n    font-size: 12px; color: var(--ink-soft); max-width: 680px;\r\n  }\r\n  #twd-root .twd-float {\r\n    position: absolute; pointer-events: none; z-index: 1;\r\n    filter: drop-shadow(0 15px 35px rgba(0,0,0,.2));\r\n  }\r\n  #twd-root .twd-float img { width: 100%; height: auto; display:block; }\r\n  #twd-root .twd-float.f1 { width: 140px; top: 60px;  left: 3%;  transform: rotate(-14deg); animation: twd-float 6s ease-in-out infinite; }\r\n  #twd-root .twd-float.f2 { width: 100px; top: 18%;  right: 5%; transform: rotate(18deg);  animation: twd-float 7s ease-in-out infinite reverse;}\r\n  #twd-root .twd-float.f3 { width: 120px; bottom: 22%;left: 6%;  transform: rotate(10deg);  animation: twd-float 8s ease-in-out infinite; }\r\n  #twd-root .twd-float.f4 { width: 90px;  bottom: 10%;right: 8%; transform: rotate(-22deg); animation: twd-float 5.5s ease-in-out infinite reverse;}\r\n  #twd-root .twd-float.f5 { width: 70px;  top: 45%;  left: 45%; transform: rotate(6deg);   animation: twd-float 9s ease-in-out infinite; opacity:.6;}\r\n  @keyframes twd-float {\r\n    0%,100% { translate: 0 0; }\r\n    50%     { translate: 0 -18px; }\r\n  }\r\n\r\n  \/* ---------- Big word band ---------- *\/\r\n  #twd-root .twd-band {\r\n    padding: 40px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);\r\n    background: rgba(26,21,18,.03);\r\n  }\r\n  #twd-root .twd-band-track {\r\n    display: inline-flex; gap: 64px; white-space: nowrap;\r\n    animation: twd-marquee 30s linear infinite;\r\n    padding-left: 64px;\r\n    font-size: clamp(50px, 8vw, 110px);\r\n    font-weight: 700; letter-spacing: -0.04em; line-height: 1;\r\n  }\r\n  #twd-root .twd-band-track span { display:inline-flex; align-items:center; gap: 44px; }\r\n  #twd-root .twd-band-track .serif { color: var(--hot); }\r\n  #twd-root .twd-band-track em { font-style: normal; -webkit-text-stroke: 1.5px var(--ink); color: transparent; }\r\n  #twd-root .twd-band-track .star { font-size: .6em; color: var(--hot); }\r\n\r\n  \/* ---------- Footer ---------- *\/\r\n  #twd-root .twd-footer-wrap { padding: 0 16px 20px; }\r\n  #twd-root .twd-footer {\r\n    background: var(--ink); color: var(--bg);\r\n    border-radius: 40px; padding: 80px 56px 36px;\r\n    position: relative; overflow: hidden;\r\n  }\r\n  #twd-root .twd-footer::before{\r\n    content:\"\"; position:absolute; inset:0; z-index:0;\r\n    background:\r\n      radial-gradient(70% 60% at 90% 0%,  rgba(255,91,46,.25), transparent 60%),\r\n      radial-gradient(60% 60% at 10% 100%, rgba(198,255,61,.12), transparent 60%);\r\n  }\r\n  #twd-root .twd-footer::after {\r\n    content:\"\"; position:absolute; inset:0; z-index:0; opacity:.15; mix-blend-mode:overlay;\r\n    background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n  }\r\n  #twd-root .twd-footer-inner { position: relative; z-index:1; }\r\n  #twd-root .twd-footer-top { display:grid; grid-template-columns: 1.4fr .8fr; gap: 48px; align-items:end; }\r\n  #twd-root .twd-footer h3 {\r\n    font-size: clamp(64px, 11vw, 168px);\r\n    line-height: .85; letter-spacing: -0.05em; margin: 20px 0 0; font-weight: 700;\r\n  }\r\n  #twd-root .twd-footer h3 .serif { color: var(--hot); }\r\n  #twd-root .twd-footer .twd-eyebrow { color: var(--bg); border-color: rgba(240,223,207,.3); background: transparent; }\r\n  #twd-root .twd-footer .twd-eyebrow::before { background: var(--lime); }\r\n  #twd-root .twd-footer-cta { display:flex; flex-direction:column; gap: 12px; align-items: flex-start; }\r\n  #twd-root .twd-footer-cta p { margin: 0 0 8px; font-size: 14px; color: rgba(240,223,207,.75); line-height: 1.6; max-width: 320px;}\r\n  #twd-root .twd-footer-cta .twd-btn { background: var(--hot); color: #fff; border-color: var(--hot); }\r\n  #twd-root .twd-footer-cta .twd-btn.ghost { background: transparent; color: var(--bg); border-color: rgba(240,223,207,.3); }\r\n  #twd-root .twd-footer-cta .twd-btn.ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg);}\r\n  #twd-root .twd-footer-cta .twd-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--bg);}\r\n  #twd-root .twd-footer-cols { display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 80px; padding-top: 40px; border-top: 1px solid rgba(240,223,207,.15);}\r\n  #twd-root .twd-fc h5 { margin: 0 0 16px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,223,207,.5); font-weight: 500;}\r\n  #twd-root .twd-fc a, #twd-root .twd-fc div { display:block; color: var(--bg); text-decoration:none; font-size: 14px; padding: 4px 0; opacity: .9; transition: opacity .2s ease, transform .2s ease;}\r\n  #twd-root .twd-fc a:hover { opacity: 1; transform: translateX(4px); color: var(--hot); }\r\n  #twd-root .twd-footer-bottom {\r\n    margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(240,223,207,.15);\r\n    display:flex; justify-content:space-between; gap: 16px; flex-wrap: wrap;\r\n    font-size: 12px; color: rgba(240,223,207,.6);\r\n  }\r\n\r\n  \/* ---------- Reveal animation ---------- *\/\r\n  #twd-root .twd-reveal { opacity:0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }\r\n  #twd-root .twd-reveal.in { opacity:1; transform: translateY(0); }\r\n  #twd-root .twd-reveal.d1 { transition-delay: .1s; }\r\n  #twd-root .twd-reveal.d2 { transition-delay: .2s; }\r\n  #twd-root .twd-reveal.d3 { transition-delay: .3s; }\r\n  #twd-root .twd-reveal.d4 { transition-delay: .4s; }\r\n\r\n  \/* ---------- Responsive ---------- *\/\r\n  @media (max-width: 1024px) {\r\n    #twd-root .twd-hero-content { grid-template-columns: 1fr; padding: 100px 32px 56px; gap: 0; align-items: end;}\r\n    #twd-root #twd-hero-right { position: absolute; bottom: 56px; left: 32px; width: calc(100% - 64px); justify-self: center; }\r\n    #twd-root .twd-hero-top { left: 32px; right: 32px; }\r\n    #twd-root .twd-ca-stack { max-width: 100%; }\r\n    #twd-root .twd-about-grid { grid-template-columns: 1fr; gap: 40px; }\r\n    #twd-root .twd-gallery-grid { grid-template-columns: repeat(2, 1fr); }\r\n    #twd-root .twd-steps { grid-template-columns: repeat(2, 1fr); }\r\n    #twd-root .twd-footer { padding: 56px 32px 32px; }\r\n    #twd-root .twd-footer-top { grid-template-columns: 1fr; gap: 32px; }\r\n    #twd-root .twd-footer-cols { grid-template-columns: repeat(2, 1fr); }\r\n    #twd-root section { padding: 80px 0; }\r\n    #twd-root .twd-nav { padding: 8px 8px 8px 18px; }\r\n    #twd-root .twd-hero-sticker { display: none; }\r\n    #twd-root .twd-gallery-head { grid-template-columns: 1fr; }\r\n  }\r\n  @media (max-width: 768px) {\r\n    #twd-root .twd-nav-ca span { display: none; } \/* Hide the CA text on small screens *\/\r\n    #twd-root .twd-nav-ca { padding: 0; border: none; background: transparent; }\r\n  }\r\n  @media (max-width: 560px) {\r\n    #twd-root .twd-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }\r\n    #twd-root .twd-hero-inner { min-height: 640px; border-radius: 28px; }\r\n    #twd-root .twd-hero-content { padding: 90px 24px 40px; }\r\n    #twd-root #twd-hero-right { bottom: 40px; left: 24px; width: calc(100% - 48px); }\r\n    #twd-root .twd-hero-top { top: 20px; left: 24px; right: 24px; }\r\n    #twd-root .twd-hero-meta { display: none; }\r\n    #twd-root .twd-footer h3 { font-size: 56px; }\r\n    #twd-root .twd-facts { grid-template-columns: 1fr; }\r\n    #twd-root .twd-steps { grid-template-columns: 1fr; }\r\n    #twd-root .twd-about-stamp { width: 100px; height: 100px; bottom: -20px; right: -10px; font-size: 10px;}\r\n    #twd-root .twd-float.f1 { width: 80px; }\r\n    #twd-root .twd-float.f2 { width: 60px; }\r\n    #twd-root .twd-float.f3 { width: 70px; }\r\n    #twd-root .twd-float.f4 { width: 55px; }\r\n    #twd-root .twd-float.f5 { display: none; }\r\n  }\r\n<\/style>\r\n\r\n<!-- ================= TICKER ================= -->\r\n<div class=\"twd-ticker\">\r\n  <div class=\"twd-ticker-track\">\r\n    <span>$SYDNEY<\/span><span>Certified Twerk Origin<\/span><span>Powered By Hip Game<\/span><span>Diamond Paws Not Hands<\/span><span>The Twerk Squad<\/span><span>Chaos &amp; Vibes<\/span>\r\n    <span>$SYDNEY<\/span><span>Certified Twerk Origin<\/span><span>Powered By Hip Game<\/span><span>Diamond Paws Not Hands<\/span><span>The Twerk Squad<\/span><span>Chaos &amp; Vibes<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ================= NAVBAR ================= -->\r\n<div class=\"twd-nav-wrap\">\r\n  <nav class=\"twd-nav\">\r\n    <div class=\"twd-logo\"><span class=\"dot\"><\/span> Twerking Dog<\/div>\r\n    \r\n    <!-- Navbar CA (Replaces Links) -->\r\n    <div class=\"twd-nav-ca\">\r\n      <span class=\"mono\">CA: SydN3yTw3rk...1111<\/span>\r\n      <button class=\"twd-btn sm twd-copy-btn\" style=\"padding: 6px 12px;\">Copy<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"twd-nav-actions\">\r\n      <a class=\"twd-icon-btn\" href=\"#\" aria-label=\"Twitter\" target=\"_blank\" rel=\"noopener\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\r\n      <\/a>\r\n      <a class=\"twd-icon-btn\" href=\"#\" aria-label=\"Telegram\" target=\"_blank\" rel=\"noopener\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9.78 18.65 10.06 14.42 17.74 7.5c.34-.31-.07-.46-.52-.19L7.74 13.5 3.64 12.2c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-2.02 1.97c-.23.23-.42.42-.8.42z\"\/><\/svg>\r\n      <\/a>\r\n      <a class=\"twd-btn hot sm\" href=\"#buy\">Buy $SYDNEY <span class=\"arr\">\u2192<\/span><\/a>\r\n    <\/div>\r\n  <\/nav>\r\n<\/div>\r\n\r\n<!-- ================= HERO ================= -->\r\n<div id=\"twd-hero-track\">\r\n  <div class=\"twd-hero-inner\">\r\n    <video id=\"twd-hero-video\" muted playsinline preload=\"auto\">\r\n      <source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/TWERKING-DOG-BG1.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <div class=\"twd-hero-overlay\"><\/div>\r\n    <div class=\"twd-hero-grain\"><\/div>\r\n\r\n    <div class=\"twd-hero-top\">\r\n      <span class=\"twd-hero-tag\"><span class=\"live\"><\/span> Live \u00b7 Certified twerk origin<\/span>\r\n      <div class=\"twd-hero-meta\">\r\n        <span>Solana<\/span><span>Community owned<\/span><span>Est. 2026<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Rotating sticker -->\r\n    <div class=\"twd-hero-sticker\" id=\"twd-hero-sticker\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 200 200\">\r\n        <defs>\r\n          <path id=\"twd-circle\" d=\"M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0\"\/>\r\n        <\/defs>\r\n        <circle cx=\"100\" cy=\"100\" r=\"98\" fill=\"none\" stroke=\"rgba(255,255,255,.35)\" stroke-dasharray=\"2 6\"\/>\r\n        <text font-family=\"JetBrains Mono\" font-size=\"14\" font-weight=\"500\" fill=\"#fff\" letter-spacing=\"4\">\r\n          <textPath href=\"#twd-circle\">TWERK \u00b7 SQUAT \u00b7 BOUNCE \u00b7 REPEAT \u00b7 $SYDNEY \u00b7 <\/textPath>\r\n        <\/text>\r\n        <text x=\"100\" y=\"108\" text-anchor=\"middle\" font-family=\"Instrument Serif\" font-style=\"italic\" font-size=\"30\" fill=\"#FF5B2E\">move.<\/text>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"twd-hero-content\">\r\n      <!-- Konten Kiri (Awal) -->\r\n      <div id=\"twd-hero-left\">\r\n        <h1>\r\n          <span class=\"dollar\">$<\/span>SYDNEY\r\n          <span class=\"serif\">the dog that twerked her way in.<\/span>\r\n        <\/h1>\r\n        <p class=\"mono\">She didn't ask for fame. She just twerked. $SYDNEY is the coin powered by one dog's unstoppable hip game, chaotic and impossible to ignore.<\/p>\r\n        <div class=\"twd-hero-cta\">\r\n          <a class=\"twd-btn hot\" href=\"#buy\">Buy $SYDNEY <span class=\"arr\">\u2192<\/span><\/a>\r\n          <a class=\"twd-btn ghost\" style=\"color:#fff; border-color: rgba(255,255,255,.35);\" href=\"#gallery\">Watch the move<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Konten Kanan (Muncul Setelah Di-scroll) -->\r\n      <div id=\"twd-hero-right\" class=\"twd-ca-stack\">\r\n        <!-- Live Chart Card (Hanya ini yang tampil sekarang) -->\r\n        <div class=\"twd-ca-card twd-chart-card active\" data-idx=\"0\">\r\n          <div class=\"twd-ca-head\">\r\n            <div class=\"twd-ca-label\">Live Chart<\/div>\r\n            <div class=\"twd-ca-badge\">Realtime<\/div>\r\n          <\/div>\r\n          <h3>Every squat.<br>Every bounce.<\/h3>\r\n          <div class=\"twd-chart-viz\">\r\n            <svg viewBox=\"0 0 400 60\" preserveAspectRatio=\"none\">\r\n              <polyline points=\"0,45 20,40 40,42 60,30 80,35 100,20 120,28 140,15 160,22 180,10 200,18 220,8 240,20 260,12 280,25 300,10 320,18 340,5 360,15 380,8 400,12\"\r\n                fill=\"none\" stroke=\"#1a1512\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n              <polyline points=\"0,45 20,40 40,42 60,30 80,35 100,20 120,28 140,15 160,22 180,10 200,18 220,8 240,20 260,12 280,25 300,10 320,18 340,5 360,15 380,8 400,12 400,60 0,60\"\r\n                fill=\"rgba(198,255,61,.4)\" stroke=\"none\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <a class=\"twd-btn hot block\" href=\"#\" target=\"_blank\" rel=\"noopener\">Open Live Chart <span class=\"arr\">\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ================= MARQUEE BAND ================= -->\r\n<div class=\"twd-band\">\r\n  <div class=\"twd-band-track\">\r\n    <span>TWERK <span class=\"serif\">it.<\/span> <span class=\"star\">\u2726<\/span> BOUNCE <em>hard.<\/em> <span class=\"star\">\u2726<\/span> HOLD <span class=\"serif\">forever.<\/span> <span class=\"star\">\u2726<\/span><\/span>\r\n    <span>TWERK <span class=\"serif\">it.<\/span> <span class=\"star\">\u2726<\/span> BOUNCE <em>hard.<\/em> <span class=\"star\">\u2726<\/span> HOLD <span class=\"serif\">forever.<\/span> <span class=\"star\">\u2726<\/span><\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- ================= ABOUT ================= -->\r\n<section id=\"about\">\r\n  <div class=\"twd-container\">\r\n    <div class=\"twd-about-grid\">\r\n      <div class=\"twd-about-video-wrap twd-reveal\">\r\n        <div class=\"twd-about-video\">\r\n          <video muted loop playsinline preload=\"metadata\" data-scroll-video>\r\n            <source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/snaptik_7493752391112641822_v3.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n        <\/div>\r\n        <div class=\"twd-about-stamp\">\r\n          <svg viewBox=\"0 0 140 140\" aria-hidden=\"true\">\r\n            <defs><path id=\"twd-stamp\" d=\"M70,70 m-52,0 a52,52 0 1,1 104,0 a52,52 0 1,1 -104,0\"\/><\/defs>\r\n            <text font-family=\"JetBrains Mono\" font-size=\"10\" font-weight=\"600\" fill=\"#fff\" letter-spacing=\"3\">\r\n              <textPath href=\"#twd-stamp\">100% REAL DOG \u00b7 CERTIFIED TWERK \u00b7 <\/textPath>\r\n            <\/text>\r\n          <\/svg>\r\n          <span style=\"position:relative; z-index:1;\">REAL<br>DOG<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"twd-reveal d1\">\r\n        <span class=\"twd-eyebrow\">About Sydney<\/span>\r\n        <h2>Meet Sydney,<br>the dog with <span class=\"serif\">rhythm.<\/span><\/h2>\r\n        <p class=\"twd-lead\" style=\"margin-top:28px;\">Sydney is a speckled, freckled, fully-loaded rescue mutt with zero chill and even less self-awareness, in the best way possible. One ordinary afternoon on a living room rug, she discovered her true calling: the twerk. No warm-up, no hesitation, just pure unfiltered hip-thrusting joy that turned a random house dog into a full-blown internet icon.<\/p>\r\n        <p class=\"twd-lead\">$SYDNEY isn't here to reinvent finance. It's here to make you laugh, bring a community together, and remind everyone that sometimes the best moves are the ones nobody expected \u2014 dog or otherwise. Built on vibes, chaos, and one dog's unshakable confidence in her own rhythm.<\/p>\r\n\r\n        <div class=\"twd-facts\">\r\n          <div class=\"twd-fact\">\r\n            <div class=\"twd-fact-num\">1<\/div>\r\n            <div class=\"twd-fact-label\">Real rescue dog<\/div>\r\n          <\/div>\r\n          <div class=\"twd-fact\">\r\n            <div class=\"twd-fact-num\">0<\/div>\r\n            <div class=\"twd-fact-label\">Warm-ups needed<\/div>\r\n          <\/div>\r\n          <div class=\"twd-fact\">\r\n            <div class=\"twd-fact-num\">\u221e<\/div>\r\n            <div class=\"twd-fact-label\">Hip game<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ================= GALLERY ================= -->\r\n<section id=\"gallery\">\r\n  <div class=\"twd-container\">\r\n    <div class=\"twd-gallery-head\">\r\n      <div class=\"twd-reveal\">\r\n        <span class=\"twd-eyebrow\">Gallery<\/span>\r\n        <h2>The move that <span class=\"serif\">started<\/span> it all.<\/h2>\r\n      <\/div>\r\n      <p class=\"twd-lead twd-reveal d1\">It started with a video. Just a dog, a rug, and a move nobody saw coming. Within hours the clip was everywhere \u2014 shared, remixed, and memed. People weren't just laughing, they were inspired. $SYDNEY was born from that energy: chaotic, joyful, a little unhinged, and impossible to ignore.<\/p>\r\n    <\/div>\r\n    <div class=\"twd-gallery-grid\">\r\n      <div class=\"twd-gallery-item twd-reveal\"><span class=\"twd-gi-num\">01 \/ TWERK<\/span><video muted loop playsinline preload=\"metadata\" data-scroll-video><source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/td1.mp4\" type=\"video\/mp4\"><\/video><\/div>\r\n      <div class=\"twd-gallery-item twd-reveal d1\"><span class=\"twd-gi-num\">02 \/ SQUAT<\/span><video muted loop playsinline preload=\"metadata\" data-scroll-video><source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/td2.mp4\" type=\"video\/mp4\"><\/video><\/div>\r\n      <div class=\"twd-gallery-item twd-reveal d2\"><span class=\"twd-gi-num\">03 \/ BOUNCE<\/span><video muted loop playsinline preload=\"metadata\" data-scroll-video><source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/td3.mp4\" type=\"video\/mp4\"><\/video><\/div>\r\n      <div class=\"twd-gallery-item twd-reveal d3\"><span class=\"twd-gi-num\">04 \/ REPEAT<\/span><video muted loop playsinline preload=\"metadata\" data-scroll-video><source src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/td4.mp4\" type=\"video\/mp4\"><\/video><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ================= HOW TO BUY ================= -->\r\n<section id=\"buy\" class=\"twd-how\">\r\n  <div class=\"twd-float f1\"><img decoding=\"async\" src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/Asset-4.png\" alt=\"\"><\/div>\r\n  <div class=\"twd-float f2\"><img decoding=\"async\" src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/Asset-4.png\" alt=\"\"><\/div>\r\n  <div class=\"twd-float f3\"><img decoding=\"async\" src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/Asset-4.png\" alt=\"\"><\/div>\r\n  <div class=\"twd-float f4\"><img decoding=\"async\" src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/Asset-4.png\" alt=\"\"><\/div>\r\n  <div class=\"twd-float f5\"><img decoding=\"async\" src=\"https:\/\/twerkingdog.fun\/wp-content\/uploads\/2026\/07\/Asset-4.png\" alt=\"\"><\/div>\r\n\r\n  <div class=\"twd-container twd-how-inner\">\r\n    <div class=\"twd-reveal\" style=\"text-align:center;\">\r\n      <span class=\"twd-eyebrow\">How to buy<\/span>\r\n      <h2>Get in on the <span class=\"serif\">bounce.<\/span><\/h2>\r\n      <p class=\"twd-lead\" style=\"margin: 24px auto 0; max-width: 560px;\">Four moves and you're in. Anyone can twerk with Sydney \u2014 you just need a wallet, some SOL, and zero shame.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"twd-steps\">\r\n      <div class=\"twd-step twd-reveal\">\r\n        <div class=\"twd-step-num\">STEP 01<\/div>\r\n        <h4>Get a wallet<\/h4>\r\n        <p>Download Phantom or any Solana wallet. Fund it with a bit of SOL.<\/p>\r\n      <\/div>\r\n      <div class=\"twd-step twd-reveal d1\">\r\n        <div class=\"twd-step-num\">STEP 02<\/div>\r\n        <h4>Copy the CA<\/h4>\r\n        <p>Grab the $SYDNEY contract address from the top of this page.<\/p>\r\n      <\/div>\r\n      <div class=\"twd-step twd-reveal d2\">\r\n        <div class=\"twd-step-num\">STEP 03<\/div>\r\n        <h4>Swap for $SYDNEY<\/h4>\r\n        <p>Paste the CA into your swap platform : SOL for $SYDNEY.<\/p>\r\n      <\/div>\r\n      <div class=\"twd-step twd-reveal d3\">\r\n        <div class=\"twd-step-num\">STEP 04<\/div>\r\n        <h4>Join the Squad<\/h4>\r\n        <p>Hop into Telegram, post memes, and start twerking with the pack.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"twd-disclaimer mono\">$SYDNEY is a meme coin created for entertainment purposes. It is not financial advice, and anyone considering buying should always do their own research first.<\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ================= FOOTER ================= -->\r\n<div class=\"twd-footer-wrap\" id=\"community\">\r\n<footer class=\"twd-footer\">\r\n  <div class=\"twd-footer-inner\">\r\n    <div class=\"twd-footer-top\">\r\n      <div>\r\n        <span class=\"twd-eyebrow\">Welcome to the Twerk Squad<\/span>\r\n        <h3>Twerk<br>with <span class=\"serif\">us.<\/span><\/h3>\r\n      <\/div>\r\n      <div class=\"twd-footer-cta\">\r\n        <p>Holders of $SYDNEY aren't investors \u2014 they're the Twerk Squad. Every dip is just Sydney squatting lower before the next big bounce.<\/p>\r\n        <a class=\"twd-btn\" href=\"#buy\">Buy $SYDNEY <span class=\"arr\">\u2192<\/span><\/a>\r\n        <a class=\"twd-btn ghost\" href=\"#\" target=\"_blank\" rel=\"noopener\">Join Telegram <span class=\"arr\">\u2192<\/span><\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"twd-footer-cols\">\r\n      <div class=\"twd-fc\">\r\n        <h5>Links<\/h5>\r\n        <a href=\"#about\">About Sydney<\/a>\r\n        <a href=\"#gallery\">Gallery<\/a>\r\n        <a href=\"#buy\">How to buy<\/a>\r\n        <a href=\"#community\">Community<\/a>\r\n      <\/div>\r\n      <div class=\"twd-fc\">\r\n        <h5>Trade<\/h5>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Jupiter<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Raydium<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">DexScreener<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Birdeye<\/a>\r\n      <\/div>\r\n      <div class=\"twd-fc\">\r\n        <h5>Social<\/h5>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Twitter \/ X<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Telegram<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\r\n      <\/div>\r\n      <div class=\"twd-fc\">\r\n        <h5>Certified by<\/h5>\r\n        <div>1 real rescue dog<\/div>\r\n        <div>0 focus groups<\/div>\r\n        <div>\u221e good vibes<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"twd-footer-bottom\">\r\n      <div class=\"mono\">\u00a9 2026 Twerking Dog \u00b7 $SYDNEY \u00b7 Not financial advice.<\/div>\r\n      <div class=\"mono\">Built on vibes, chaos &amp; one dog's unshakable rhythm.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/footer>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById('twd-root');\r\n  if (!root) return;\r\n\r\n  \/* ---------- Copy CA (Works for Navbar) ---------- *\/\r\n  const caText = \"SydN3yTw3rkS0Con7ract4ddress1111111111111111\"; \/\/ Ganti dengan CA asli\r\n  const copyBtns = root.querySelectorAll('.twd-copy-btn');\r\n  \r\n  copyBtns.forEach(btn => {\r\n    btn.addEventListener('click', function(){\r\n      const done = () => {\r\n        const old = btn.textContent;\r\n        btn.textContent = 'Copied \u2713';\r\n        setTimeout(()=> btn.textContent = old, 1400);\r\n      };\r\n      if (navigator.clipboard && navigator.clipboard.writeText) {\r\n        navigator.clipboard.writeText(caText).then(done).catch(()=>{\r\n          const ta = document.createElement('textarea'); ta.value = caText; document.body.appendChild(ta); ta.select();\r\n          try{document.execCommand('copy');}catch(e){} ta.remove(); done();\r\n        });\r\n      } else {\r\n        const ta = document.createElement('textarea'); ta.value = caText; document.body.appendChild(ta); ta.select();\r\n        try{document.execCommand('copy');}catch(e){} ta.remove(); done();\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* ---------- Play\/Pause Observer for Normal Videos ---------- *\/\r\n  const scrollVideos = root.querySelectorAll('[data-scroll-video]');\r\n  const io = new IntersectionObserver((entries)=>{\r\n    entries.forEach(e=>{\r\n      const v = e.target;\r\n      if (e.isIntersecting && e.intersectionRatio > 0.35) {\r\n        const p = v.play(); if (p && p.catch) p.catch(()=>{});\r\n      } else {\r\n        v.pause();\r\n      }\r\n    });\r\n  }, { threshold:[0, .35, .6, 1] });\r\n  scrollVideos.forEach(v => io.observe(v));\r\n\r\n  \/* ---------- Reveal on scroll ---------- *\/\r\n  const revealEls = root.querySelectorAll('.twd-reveal');\r\n  const rio = new IntersectionObserver((entries)=>{\r\n    entries.forEach(e=>{\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('in');\r\n        rio.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });\r\n  revealEls.forEach(el => rio.observe(el));\r\n\r\n  \/* ---------- Subtle parallax on floating icons ---------- *\/\r\n  const floats = root.querySelectorAll('.twd-float');\r\n  if (floats.length && window.matchMedia('(min-width: 768px)').matches) {\r\n    let raf = null;\r\n    window.addEventListener('scroll', ()=>{\r\n      if (raf) return;\r\n      raf = requestAnimationFrame(()=>{\r\n        const y = window.scrollY;\r\n        floats.forEach((f,i)=>{\r\n          const speed = (i%2===0 ? -1 : 1) * (0.05 + i*0.02);\r\n          f.style.setProperty('--py', (y*speed) + 'px');\r\n          const cur = f.style.transform.replace(\/translate3d[^)]*\\)\/,'').trim();\r\n          f.style.transform = cur + ` translate3d(0, ${y*speed}px, 0)`;\r\n        });\r\n        raf = null;\r\n      });\r\n    }, { passive:true });\r\n  }\r\n\r\n  \/* ========================================================\r\n     GSAP ScrollTrigger: Video Scrubbing + UI Sequence\r\n     ======================================================== *\/\r\n  if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const heroVideo = root.querySelector('#twd-hero-video');\r\n    const heroTrack = root.querySelector('#twd-hero-track');\r\n\r\n    if (heroVideo && heroTrack) {\r\n      \r\n      \/\/ Memisahkan logika scrubbing video \r\n      ScrollTrigger.create({\r\n        trigger: heroTrack,\r\n        start: \"top top\",\r\n        end: \"bottom bottom\",\r\n        scrub: 0.5,\r\n        onUpdate: (self) => {\r\n          if (heroVideo.duration) {\r\n             heroVideo.currentTime = self.progress * heroVideo.duration;\r\n          }\r\n        }\r\n      });\r\n\r\n      \/\/ Logika animasi sequence elemen UI\r\n      const uiTl = gsap.timeline({\r\n        scrollTrigger: {\r\n          trigger: heroTrack,\r\n          start: \"top top\",\r\n          end: \"bottom bottom\",\r\n          scrub: true\r\n        }\r\n      });\r\n\r\n      \/\/ 1. Teks Kiri & Sticker menghilang saat scroll ke bawah\r\n      uiTl.to([\"#twd-hero-left\", \"#twd-hero-sticker\"], { \r\n        opacity: 0, y: -40, duration: 0.2, ease: \"power1.inOut\" \r\n      }, 0); \r\n\r\n      \/\/ 2. Konten Kanan (Chart Card) muncul\r\n      uiTl.fromTo(\"#twd-hero-right\", \r\n        { autoAlpha: 0, y: 40 },\r\n        { autoAlpha: 1, y: 0, duration: 0.2, ease: \"power1.out\" }, \r\n        0.25 \r\n      );\r\n\r\n      \/\/ Tween kosong untuk merentangkan timeline\r\n      uiTl.to({}, {duration: 0.55}, 0.45);\r\n\r\n\r\n      \/\/ Blob fetch agar video di-load langsung ke memori (no lag)\r\n      const videoSrc = heroVideo.querySelector('source').src;\r\n      fetch(videoSrc)\r\n        .then(res => res.blob())\r\n        .then(blob => {\r\n          const blobURL = URL.createObjectURL(blob);\r\n          heroVideo.setAttribute(\"src\", blobURL);\r\n          heroVideo.load();\r\n          \r\n          const once = (el, event, fn) => {\r\n            const onceFn = function () {\r\n              el.removeEventListener(event, onceFn);\r\n              fn.apply(this, arguments);\r\n            };\r\n            el.addEventListener(event, onceFn, { once: true });\r\n          };\r\n          once(document.documentElement, \"touchstart\", () => {\r\n            heroVideo.play().then(() => heroVideo.pause()).catch(()=>{});\r\n          });\r\n        })\r\n        .catch(err => console.log('Blob fetch gagal, mode normal digunakan.', err));\r\n    }\r\n  }\r\n})();\r\n<\/script>\r\n<\/div>\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>$SYDNEYCertified Twerk OriginPowered By Hip GameDiamond Paws Not HandsThe Twerk SquadChaos &amp; Vibes $SYDNEYCertified Twerk OriginPowered By Hip GameDiamond Paws Not HandsThe Twerk SquadChaos &amp; Vibes Twerking Dog CA: SydN3yTw3rk&#8230;1111 Copy Buy $SYDNEY \u2192 Live \u00b7 Certified twerk origin SolanaCommunity ownedEst. 2026 TWERK \u00b7 SQUAT \u00b7 BOUNCE \u00b7 REPEAT \u00b7 $SYDNEY \u00b7 move. $SYDNEY the [&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:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":28,"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/twerkingdog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}