{"id":9,"date":"2026-07-13T13:47:11","date_gmt":"2026-07-13T13:47:11","guid":{"rendered":"https:\/\/cashfrog.fun\/?page_id=9"},"modified":"2026-07-13T14:43:40","modified_gmt":"2026-07-13T14:43:40","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/cashfrog.fun\/","title":{"rendered":"Elementor #9"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCashFrog \u2014 He doesn't know how. He just knows how much.<\/title>\r\n<meta name=\"description\" content=\"CashFrog ($CFROG) \u2014 the meme coin of a Pepe who made it. He doesn't know how. He just knows how much.\" \/>\r\n<link rel=\"icon\" href=\"wp-content\/uploads\/assets\/logo-cashfrog.webp\" \/>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@500;600;700&family=Bagel+Fat+One&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n :root {\r\n --cf-green-900: #0e2a12;\r\n --cf-green-800: #14401a;\r\n --cf-green-700: #1a5f22;\r\n --cf-green-500: #2fa53a;\r\n --cf-green-400: #58c85e;\r\n --cf-lime: #b6ff5b;\r\n --cf-cream: #fff7e2;\r\n --cf-paper: #f6ecd0;\r\n --cf-orange: #ff7a1a;\r\n --cf-orange-2: #ff9a3c;\r\n --cf-ink: #0b1f0e;\r\n --cf-shadow: 0 10px 0 #0b1f0e;\r\n }\r\n\r\n * { box-sizing: border-box; }\r\n\r\n \/* ============ FULL-WIDTH \/ ZOOM-SAFE ROOT ============\r\n 100vw includes the vertical scrollbar's width on many desktop browsers,\r\n which is exactly what causes a thin gap on the right (or a horizontal\r\n scrollbar) at certain zoom levels. Locking html\/body to 100% + hidden\r\n x-overflow removes that gap permanently, at any zoom level or device size. *\/\r\n html {\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n .cf-app {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n background: var(--cf-paper);\r\n color: var(--cf-ink);\r\n font-family: 'Space Grotesk', system-ui, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n position: relative;\r\n overflow-x: hidden;\r\n background-image:\r\n radial-gradient(1200px 500px at 10% -10%, rgba(255,154,60,0.18), transparent 60%),\r\n radial-gradient(1000px 500px at 110% 10%, rgba(88,200,94,0.20), transparent 60%);\r\n }\r\n \/* Full-bleed: force every section to span the full viewport width even when\r\n the parent container (Elementor \/ WordPress theme) has a max-width, padding,\r\n or offset. This is pure CSS (percentages + vw units), so it is recalculated\r\n live by the browser on resize AND on browser zoom in\/out \u2014 no JS needed and\r\n nothing to go stale. It intentionally uses margins (not transform), because\r\n a transformed ancestor would break `position: fixed` on the pinned hero stage. *\/\r\n .cf-app > .cf-hero,\r\n .cf-app > section,\r\n .cf-app > .cf-marquee,\r\n .cf-app > .cf-community,\r\n .cf-app > footer {\r\n width: 100vw;\r\n max-width: 100vw;\r\n margin-left: calc(50% - 50vw);\r\n margin-right: calc(50% - 50vw);\r\n box-sizing: border-box;\r\n }\r\n .cf-app > .cf-hero { position: relative; }\r\n .cf-app *, .cf-app *::before, .cf-app *::after { box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n .cf-app ::selection { background: var(--cf-lime); color: var(--cf-ink); }\r\n\r\n \/* ============ NAVBAR ============ *\/\r\n .cf-nav {\r\n position: fixed; inset: 12px 12px auto 12px; z-index: 60;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 10px 14px 10px 16px;\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 999px;\r\n box-shadow: var(--cf-shadow);\r\n transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease;\r\n will-change: transform;\r\n }\r\n .cf-nav.scrolled {\r\n background: var(--cf-cream);\r\n transform: translateY(2px) scale(.985);\r\n }\r\n .cf-nav.hop { animation: navHop .55s cubic-bezier(.34,1.56,.64,1); }\r\n @keyframes navHop {\r\n 0% { transform: translateY(0) rotate(0) scale(1); }\r\n 30% { transform: translateY(-14px) rotate(-2deg) scale(1.02, .96); }\r\n 55% { transform: translateY(-4px) rotate(1.5deg) scale(.98, 1.03); }\r\n 80% { transform: translateY(-1px) rotate(-.5deg) scale(1.01, .99); }\r\n 100% { transform: translateY(0) rotate(0) scale(1); }\r\n }\r\n\r\n .cf-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }\r\n .cf-brand img { height: 40px; display: block; transform-origin: 60% 60%; }\r\n .cf-brand:hover img { animation: brandJiggle 700ms cubic-bezier(.34,1.56,.64,1); }\r\n @keyframes brandJiggle {\r\n 0%,100% { transform: rotate(0) scale(1); }\r\n 30% { transform: rotate(-6deg) scale(1.06); }\r\n 60% { transform: rotate(5deg) scale(1.03); }\r\n 80% { transform: rotate(-2deg) scale(1.01); }\r\n }\r\n\r\n .cf-nav-links {\r\n display: flex; align-items: center; gap: 6px;\r\n list-style: none; margin: 0; padding: 0;\r\n }\r\n .cf-nav-links a {\r\n display: inline-block;\r\n padding: 8px 14px;\r\n font-family: 'Fredoka', sans-serif;\r\n font-weight: 600;\r\n color: var(--cf-ink);\r\n text-decoration: none;\r\n border-radius: 999px;\r\n letter-spacing: .01em;\r\n transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;\r\n }\r\n .cf-nav-links a:hover {\r\n background: var(--cf-lime);\r\n transform: translateY(-3px) rotate(-2deg);\r\n }\r\n .cf-nav-cta {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 10px 16px;\r\n background: var(--cf-orange);\r\n color: #fff !important;\r\n border: 2px solid var(--cf-ink);\r\n border-radius: 999px;\r\n font-family: 'Fredoka', sans-serif; font-weight: 700;\r\n text-decoration: none;\r\n box-shadow: 0 4px 0 var(--cf-ink);\r\n transition: transform .15s ease, box-shadow .15s ease;\r\n }\r\n .cf-nav-cta:hover { transform: translate(0, -2px); box-shadow: 0 6px 0 var(--cf-ink); }\r\n .cf-nav-cta:active{ transform: translate(0, 2px); box-shadow: 0 2px 0 var(--cf-ink); }\r\n\r\n .cf-burger { display: none; background: transparent; border: 0; font-size: 22px; padding: 4px 8px; }\r\n @media (max-width: 860px) {\r\n .cf-nav-links { display: none; }\r\n .cf-burger { display: inline-block; }\r\n .cf-nav.open .cf-nav-links {\r\n display: flex; flex-direction: column;\r\n position: absolute; top: 62px; right: 8px; left: 8px;\r\n padding: 10px;\r\n background: #fff; border: 3px solid var(--cf-ink);\r\n border-radius: 22px; box-shadow: var(--cf-shadow);\r\n }\r\n }\r\n\r\n \/* ============ HERO \/ SEQUENCE ============ *\/\r\n .cf-hero {\r\n position: relative;\r\n height: 360vh; \/* scroll length that drives the sequence *\/\r\n }\r\n .cf-hero-stage {\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 100vh; width: 100%;\r\n overflow: hidden;\r\n background: #0b1f0e;\r\n }\r\n .cf-hero.is-pinned .cf-hero-stage {\r\n position: fixed; top: 0; left: 0; right: 0;\r\n }\r\n .cf-hero.is-past .cf-hero-stage {\r\n position: absolute; top: auto; bottom: 0;\r\n }\r\n .cf-hero-canvas {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n display: block;\r\n }\r\n .cf-hero-vignette {\r\n position: absolute; inset: 0;\r\n background:\r\n linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,0) 55%),\r\n radial-gradient(120% 90% at 50% 40%, transparent 65%, rgba(0,0,0,.35) 100%);\r\n pointer-events: none;\r\n }\r\n .cf-hero-overlay {\r\n position: absolute; inset: 0;\r\n display: flex; align-items: center; justify-content: flex-start;\r\n padding: 110px 6vw 40px;\r\n pointer-events: none;\r\n will-change: opacity, transform;\r\n }\r\n .cf-hero-inner {\r\n max-width: 560px; width: 100%; text-align: left; color: #fff;\r\n will-change: opacity, transform;\r\n }\r\n @media (max-width: 780px) {\r\n .cf-hero-overlay { justify-content: center; padding: 100px 22px 40px; align-items: flex-end; }\r\n .cf-hero-inner { text-align: left; max-width: 100%; }\r\n }\r\n .cf-eyebrow {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 8px 16px;\r\n background: rgba(255,255,255,.08);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,.25);\r\n border-radius: 999px;\r\n color: #eaffe0;\r\n font-family: 'Space Grotesk', sans-serif; font-weight: 600;\r\n font-size: 13px; letter-spacing: .18em; text-transform: uppercase;\r\n }\r\n .cf-eyebrow i { color: var(--cf-orange-2); }\r\n\r\n .cf-headline {\r\n margin: 18px 0 0;\r\n font-family: 'Bagel Fat One', 'Fredoka', sans-serif;\r\n font-weight: 400;\r\n line-height: .95;\r\n font-size: clamp(30px, 3.6vw, 54px);\r\n letter-spacing: -0.01em;\r\n color: #fff;\r\n text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 22px rgba(0,0,0,.35);\r\n }\r\n .cf-headline .h-1 { display: block; }\r\n .cf-headline .h-2 {\r\n display: block;\r\n color: var(--cf-lime);\r\n text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 26px rgba(182,255,91,.25);\r\n }\r\n .cf-headline .h-3 { display: block; color: var(--cf-orange-2); text-shadow: 0 3px 0 rgba(0,0,0,.5); }\r\n\r\n .cf-sub {\r\n margin: 16px 0 0; max-width: 460px;\r\n font-size: clamp(13px, 1.05vw, 15px);\r\n color: #f2f7ea; opacity: .88;\r\n line-height: 1.55;\r\n }\r\n .cf-hero-cta {\r\n margin-top: 22px;\r\n display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start;\r\n pointer-events: auto;\r\n }\r\n .cf-btn {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 11px 18px;\r\n border-radius: 999px;\r\n font-family: 'Fredoka', sans-serif; font-weight: 700;\r\n font-size: 14px;\r\n text-decoration: none; letter-spacing: .01em;\r\n border: 3px solid var(--cf-ink);\r\n box-shadow: 0 5px 0 var(--cf-ink);\r\n transition: transform .15s ease, box-shadow .15s ease, background .2s;\r\n cursor: pointer;\r\n }\r\n .cf-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--cf-ink); }\r\n .cf-btn:active{ transform: translateY(3px); box-shadow: 0 3px 0 var(--cf-ink); }\r\n .cf-btn-primary { background: var(--cf-orange); color: #fff; }\r\n .cf-btn-ghost { background: #fff; color: var(--cf-ink); }\r\n\r\n .cf-scroll-hint {\r\n position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);\r\n color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 600;\r\n letter-spacing: .2em; font-size: 12px; text-transform: uppercase;\r\n display: flex; flex-direction: column; align-items: center; gap: 6px;\r\n opacity: .8;\r\n animation: bob 2.4s ease-in-out infinite;\r\n }\r\n @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }\r\n\r\n \/* progress fill for scroll frame *\/\r\n .cf-progress {\r\n position: fixed; left: 0; right: 0; top: 0; height: 4px;\r\n background: transparent; z-index: 80; pointer-events: none;\r\n }\r\n .cf-progress > div {\r\n height: 100%; width: 0%;\r\n background: linear-gradient(90deg, var(--cf-lime), var(--cf-orange));\r\n }\r\n\r\n \/* ============ MARQUEE ============ *\/\r\n .cf-marquee {\r\n background: var(--cf-ink); color: var(--cf-lime);\r\n border-top: 3px solid var(--cf-ink); border-bottom: 3px solid var(--cf-ink);\r\n overflow: hidden; padding: 14px 0;\r\n font-family: 'Bagel Fat One', 'Fredoka', sans-serif;\r\n letter-spacing: .04em;\r\n }\r\n .cf-marquee-track { display: inline-flex; gap: 48px; white-space: nowrap; animation: marquee 28s linear infinite; }\r\n .cf-marquee span { font-size: clamp(20px, 2.6vw, 32px); }\r\n .cf-marquee i { color: var(--cf-orange-2); margin: 0 6px; }\r\n @keyframes marquee { to { transform: translateX(-50%); } }\r\n\r\n \/* ============ SECTIONS ============ *\/\r\n section.cf-section { padding: 110px 22px; position: relative; }\r\n .cf-container { max-width: 1180px; width: 100%; margin: 0 auto; }\r\n\r\n .cf-kicker {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n padding: 6px 14px;\r\n background: var(--cf-ink); color: var(--cf-lime);\r\n border-radius: 999px;\r\n font-family: 'Fredoka', sans-serif; font-weight: 700;\r\n font-size: 12px; letter-spacing: .22em; text-transform: uppercase;\r\n }\r\n .cf-title {\r\n font-family: 'Bagel Fat One', 'Fredoka', sans-serif;\r\n font-weight: 400;\r\n font-size: clamp(38px, 6vw, 78px);\r\n line-height: .95; margin: 18px 0 14px;\r\n color: var(--cf-ink);\r\n }\r\n .cf-title span.hl { color: var(--cf-green-700); }\r\n .cf-lead {\r\n max-width: 640px;\r\n font-size: clamp(15px, 1.4vw, 18px);\r\n line-height: 1.6; color: #2a3a2d;\r\n }\r\n\r\n \/* ABOUT *\/\r\n .about-grid {\r\n display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;\r\n }\r\n @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } }\r\n .about-card {\r\n position: relative;\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 28px;\r\n padding: 24px;\r\n box-shadow: var(--cf-shadow);\r\n transform: rotate(-2deg);\r\n overflow: hidden;\r\n }\r\n .about-card::before {\r\n content: \"\"; position: absolute; inset: 0;\r\n background:\r\n radial-gradient(600px 300px at -10% 0%, rgba(88,200,94,.25), transparent 60%),\r\n radial-gradient(500px 300px at 120% 100%, rgba(255,122,26,.18), transparent 60%);\r\n pointer-events: none;\r\n }\r\n .about-image {\r\n width: 100%; aspect-ratio: 4\/3;\r\n background:\r\n url('wp-content\/uploads\/assets\/sequence\/ezgif-frame-018.jpg') center\/cover no-repeat;\r\n border-radius: 18px;\r\n border: 3px solid var(--cf-ink);\r\n filter: saturate(1.05) contrast(1.03);\r\n }\r\n .about-stamp {\r\n position: absolute; right: -18px; top: -18px;\r\n width: 110px; height: 110px; border-radius: 50%;\r\n background: var(--cf-orange); color: #fff;\r\n display: grid; place-items: center; text-align: center;\r\n font-family: 'Bagel Fat One', sans-serif; font-size: 14px;\r\n border: 3px solid var(--cf-ink);\r\n box-shadow: 0 6px 0 var(--cf-ink);\r\n transform: rotate(12deg);\r\n line-height: 1;\r\n padding: 8px;\r\n }\r\n .about-list { padding: 0; margin: 22px 0 0; list-style: none; }\r\n .about-list li {\r\n display: flex; gap: 12px; padding: 10px 0;\r\n font-size: 16px; color: #223125;\r\n }\r\n .about-list li i {\r\n flex: none;\r\n width: 28px; height: 28px; border-radius: 50%;\r\n background: var(--cf-lime); color: var(--cf-ink);\r\n display: grid; place-items: center; font-size: 12px;\r\n border: 2px solid var(--cf-ink);\r\n }\r\n\r\n \/* TOKENOMICS *\/\r\n .tokenomics {\r\n background:\r\n linear-gradient(180deg, transparent, rgba(20,64,26,.06) 40%, transparent),\r\n radial-gradient(800px 300px at 90% 20%, rgba(255,122,26,.16), transparent 60%);\r\n }\r\n .stats-grid {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px;\r\n }\r\n @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }\r\n .stat {\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 22px;\r\n padding: 22px;\r\n box-shadow: var(--cf-shadow);\r\n transition: transform .25s cubic-bezier(.34,1.56,.64,1);\r\n }\r\n .stat:hover { transform: translateY(-6px) rotate(-1deg); }\r\n .stat .lbl { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #5a6b5d; }\r\n .stat .val { font-family: 'Bagel Fat One', sans-serif; font-size: 32px; color: var(--cf-ink); margin-top: 8px; line-height: 1; word-break: break-word; }\r\n .stat .sub { font-size: 13px; color: #556; margin-top: 8px; }\r\n\r\n .tokenomics-split {\r\n margin-top: 44px;\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch;\r\n }\r\n @media (max-width: 900px) { .tokenomics-split { grid-template-columns: 1fr; } }\r\n .allocation {\r\n background: var(--cf-ink); color: #eaffe0;\r\n border-radius: 26px;\r\n padding: 28px;\r\n border: 3px solid var(--cf-ink);\r\n box-shadow: var(--cf-shadow);\r\n }\r\n .allocation h4 {\r\n font-family: 'Bagel Fat One', sans-serif; font-weight: 400;\r\n font-size: 26px; color: #fff; margin: 0 0 18px;\r\n }\r\n .bar { margin: 14px 0; }\r\n .bar .row { display: flex; justify-content: space-between; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px; }\r\n .bar .track { height: 14px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-top: 6px; border: 1px solid rgba(255,255,255,.15); }\r\n .bar .fill { height: 100%; width: 0; border-radius: 999px; transition: width 1.2s cubic-bezier(.34,1.56,.64,1); }\r\n .fill-a { background: linear-gradient(90deg, var(--cf-lime), var(--cf-green-400)); }\r\n .fill-b { background: linear-gradient(90deg, var(--cf-orange-2), var(--cf-orange)); }\r\n .fill-c { background: linear-gradient(90deg, #7bd389, #2fa53a); }\r\n .fill-d { background: linear-gradient(90deg, #ffd166, #ff9a3c); }\r\n\r\n .ca-card {\r\n background: var(--cf-cream);\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 26px;\r\n padding: 28px;\r\n box-shadow: var(--cf-shadow);\r\n display: flex; flex-direction: column; justify-content: space-between; gap: 20px;\r\n }\r\n .ca-card h4 { margin: 0; font-family: 'Bagel Fat One', sans-serif; font-size: 26px; }\r\n .ca-line { display: flex; align-items: center; gap: 10px; }\r\n .ca-box {\r\n flex: 1; padding: 12px 14px;\r\n background: #fff; border: 2px dashed var(--cf-ink);\r\n border-radius: 14px;\r\n font-family: 'Space Grotesk', monospace;\r\n font-size: 14px;\r\n color: #223;\r\n word-break: break-all;\r\n }\r\n .ca-copy {\r\n padding: 12px 14px;\r\n background: var(--cf-ink); color: var(--cf-lime);\r\n border: 2px solid var(--cf-ink);\r\n border-radius: 14px; cursor: pointer;\r\n font-family: 'Fredoka', sans-serif; font-weight: 700;\r\n }\r\n .ca-copy:hover { background: var(--cf-green-700); color: #fff; }\r\n\r\n \/* HOW TO BUY *\/\r\n .steps {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px;\r\n }\r\n @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }\r\n .step {\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 22px;\r\n padding: 22px 20px 24px;\r\n position: relative;\r\n box-shadow: var(--cf-shadow);\r\n transition: transform .25s cubic-bezier(.34,1.56,.64,1);\r\n }\r\n .step:hover { transform: translateY(-6px) rotate(1deg); }\r\n .step .num {\r\n position: absolute; top: -18px; left: -18px;\r\n width: 46px; height: 46px; border-radius: 50%;\r\n display: grid; place-items: center;\r\n background: var(--cf-orange); color: #fff;\r\n font-family: 'Bagel Fat One', sans-serif; font-size: 22px;\r\n border: 3px solid var(--cf-ink);\r\n box-shadow: 0 4px 0 var(--cf-ink);\r\n }\r\n .step h5 {\r\n margin: 4px 0 8px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px;\r\n }\r\n .step p { margin: 0; font-size: 14.5px; color: #334; line-height: 1.55; }\r\n\r\n \/* ROADMAP *\/\r\n .roadmap {\r\n background: linear-gradient(180deg, transparent, rgba(20,64,26,.05));\r\n }\r\n .rm-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }\r\n @media (max-width: 1000px) { .rm-grid { grid-template-columns: repeat(2, 1fr); } }\r\n @media (max-width: 560px) { .rm-grid { grid-template-columns: 1fr; } }\r\n .rm-card {\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n border-radius: 22px;\r\n padding: 22px;\r\n box-shadow: var(--cf-shadow);\r\n position: relative;\r\n }\r\n .rm-card .phase {\r\n font-family: 'Fredoka', sans-serif; font-weight: 700;\r\n font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #567;\r\n }\r\n .rm-card h5 {\r\n font-family: 'Bagel Fat One', sans-serif; font-size: 24px; margin: 6px 0 12px;\r\n }\r\n .rm-card ul { padding: 0; margin: 0; list-style: none; }\r\n .rm-card li { display: flex; gap: 10px; padding: 6px 0; font-size: 14.5px; color: #223; }\r\n .rm-card li i { color: var(--cf-green-700); }\r\n .rm-card.done { background: var(--cf-lime); }\r\n .rm-card.now { background: var(--cf-cream); }\r\n .rm-card .badge {\r\n position: absolute; top: -14px; right: 14px;\r\n padding: 4px 10px; border-radius: 999px;\r\n font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;\r\n background: var(--cf-ink); color: var(--cf-lime);\r\n letter-spacing: .18em; text-transform: uppercase;\r\n border: 2px solid var(--cf-ink);\r\n }\r\n .rm-card.done .badge { background: var(--cf-green-700); color: #fff; }\r\n .rm-card.now .badge { background: var(--cf-orange); color: #fff; }\r\n\r\n \/* COMMUNITY \/ FOOTER *\/\r\n .cf-community {\r\n padding: 100px 22px 40px;\r\n background:\r\n radial-gradient(700px 300px at 20% 0%, rgba(255,122,26,.2), transparent 60%),\r\n radial-gradient(700px 300px at 80% 100%, rgba(88,200,94,.2), transparent 60%),\r\n var(--cf-cream);\r\n border-top: 3px solid var(--cf-ink);\r\n text-align: center;\r\n }\r\n .cf-community .cf-title { margin-top: 12px; }\r\n .socials {\r\n display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px;\r\n }\r\n .social {\r\n width: 62px; height: 62px; border-radius: 50%;\r\n background: #fff;\r\n border: 3px solid var(--cf-ink);\r\n display: grid; place-items: center;\r\n color: var(--cf-ink); font-size: 22px;\r\n text-decoration: none;\r\n box-shadow: var(--cf-shadow);\r\n transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;\r\n }\r\n .social:hover { transform: translateY(-4px) rotate(-6deg); background: var(--cf-lime); }\r\n .social.tg:hover { background: #6ec6ff; color: #fff; }\r\n .social.x:hover { background: #111; color: #fff; }\r\n .social.dex:hover{ background: var(--cf-orange); color: #fff; }\r\n\r\n footer {\r\n padding: 30px 22px 40px; text-align: center; color: #334; font-size: 13px;\r\n display: flex; flex-direction: column; align-items: center; gap: 8px;\r\n background: var(--cf-cream);\r\n }\r\n footer .disclaimer { max-width: 640px; opacity: .7; line-height: 1.5; }\r\n\r\n \/* reveal *\/\r\n .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }\r\n .reveal.in { opacity: 1; transform: none; }\r\n\r\n \/* floating tears *\/\r\n .tear {\r\n position: absolute; width: 18px; height: 26px;\r\n background: radial-gradient(circle at 50% 30%, #cfefff, #7ec8f5);\r\n border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\r\n box-shadow: inset -2px -2px 4px rgba(0,0,0,.15);\r\n animation: tearFall linear infinite;\r\n opacity: .8;\r\n }\r\n @keyframes tearFall {\r\n 0% { transform: translateY(-20px) rotate(0); opacity: 0; }\r\n 10% { opacity: .9; }\r\n 100% { transform: translateY(110vh) rotate(6deg); opacity: 0; }\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"cf-app\">\r\n\r\n<!-- Progress bar -->\r\n<div class=\"cf-progress\" data-testid=\"scroll-progress\"><div id=\"cfProgress\"><\/div><\/div>\r\n\r\n<!-- Navbar -->\r\n<nav class=\"cf-nav\" id=\"cfNav\" data-testid=\"cf-navbar\">\r\n <a href=\"#top\" class=\"cf-brand\" data-testid=\"cf-brand-link\">\r\n <img decoding=\"async\" src=\"wp-content\/uploads\/assets\/logo-cashfrog.webp\" alt=\"CashFrog logo\" \/>\r\n <\/a>\r\n\r\n <ul class=\"cf-nav-links\" id=\"cfNavLinks\">\r\n <li><a href=\"#about\" data-testid=\"nav-link-about\">About<\/a><\/li>\r\n <li><a href=\"#tokenomics\" data-testid=\"nav-link-tokenomics\">Tokenomics<\/a><\/li>\r\n <li><a href=\"#howtobuy\" data-testid=\"nav-link-howtobuy\">How to Buy<\/a><\/li>\r\n <li><a href=\"#roadmap\" data-testid=\"nav-link-roadmap\">Roadmap<\/a><\/li>\r\n <li><a href=\"#community\" data-testid=\"nav-link-community\">Community<\/a><\/li>\r\n <li><a href=\"#\" class=\"cf-nav-cta\" data-testid=\"nav-cta-buy\"><i class=\"fa-solid fa-sack-dollar\"><\/i> Buy $CFROG<\/a><\/li>\r\n <\/ul>\r\n\r\n <button class=\"cf-burger\" id=\"cfBurger\" aria-label=\"menu\" data-testid=\"cf-burger\">\r\n <i class=\"fa-solid fa-bars\"><\/i>\r\n <\/button>\r\n<\/nav>\r\n\r\n<!-- HERO with scroll-driven sequence -->\r\n<header id=\"top\" class=\"cf-hero\" data-testid=\"cf-hero\">\r\n <div class=\"cf-hero-stage\">\r\n <canvas class=\"cf-hero-canvas\" id=\"cfCanvas\"><\/canvas>\r\n <div class=\"cf-hero-vignette\"><\/div>\r\n\r\n <!-- floating tears -->\r\n <div class=\"tear\" style=\"left:12%; top:-20px; animation-duration:9s; animation-delay:0s;\"><\/div>\r\n <div class=\"tear\" style=\"left:28%; top:-40px; animation-duration:11s; animation-delay:2s;\"><\/div>\r\n <div class=\"tear\" style=\"left:74%; top:-30px; animation-duration:10s; animation-delay:1s;\"><\/div>\r\n <div class=\"tear\" style=\"left:88%; top:-60px; animation-duration:13s; animation-delay:4s;\"><\/div>\r\n\r\n <div class=\"cf-hero-overlay\">\r\n <div class=\"cf-hero-inner\">\r\n <div class=\"cf-eyebrow\"><i class=\"fa-solid fa-sparkles\"><\/i> $CFROG \u00b7 The Frog Who Made It<\/div>\r\n <h1 class=\"cf-headline\">\r\n <span class=\"h-1\">HE DOESN'T KNOW HOW.<\/span>\r\n <span class=\"h-2\">HE JUST KNOWS<\/span>\r\n <span class=\"h-3\">HOW MUCH.<\/span>\r\n <\/h1>\r\n <p class=\"cf-sub\">\r\n Pepe stares into the void of his own bank balance. He can't explain it, he doesn't understand it — but the tears? They're happy ones. Welcome to <strong>CashFrog<\/strong>.\r\n <\/p>\r\n <div class=\"cf-hero-cta\">\r\n <a href=\"#howtobuy\" class=\"cf-btn cf-btn-primary\" data-testid=\"hero-cta-buy\">\r\n <i class=\"fa-solid fa-frog\"><\/i> Buy $CFROG\r\n <\/a>\r\n <a href=\"#about\" class=\"cf-btn cf-btn-ghost\" data-testid=\"hero-cta-about\">\r\n <i class=\"fa-solid fa-book-open\"><\/i> Read the Legend\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cf-scroll-hint\" data-testid=\"scroll-hint\">\r\n <span>Scroll to feel it<\/span>\r\n <i class=\"fa-solid fa-arrow-down\"><\/i>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<!-- Marquee -->\r\n<div class=\"cf-marquee\" aria-hidden=\"true\">\r\n <div class=\"cf-marquee-track\">\r\n <span>HE DOESN'T KNOW HOW <i class=\"fa-solid fa-frog\"><\/i><\/span>\r\n <span>HE JUST KNOWS HOW MUCH <i class=\"fa-solid fa-sack-dollar\"><\/i><\/span>\r\n <span>$CFROG <i class=\"fa-solid fa-heart\"><\/i><\/span>\r\n <span>RIBBIT TO THE MOON <i class=\"fa-solid fa-rocket\"><\/i><\/span>\r\n <span>HE DOESN'T KNOW HOW <i class=\"fa-solid fa-frog\"><\/i><\/span>\r\n <span>HE JUST KNOWS HOW MUCH <i class=\"fa-solid fa-sack-dollar\"><\/i><\/span>\r\n <span>$CFROG <i class=\"fa-solid fa-heart\"><\/i><\/span>\r\n <span>RIBBIT TO THE MOON <i class=\"fa-solid fa-rocket\"><\/i><\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ABOUT PEPE -->\r\n<section id=\"about\" class=\"cf-section\" data-testid=\"section-about\">\r\n <div class=\"cf-container about-grid\">\r\n <div class=\"reveal\">\r\n <span class=\"cf-kicker\"><i class=\"fa-solid fa-book\"><\/i> The Legend<\/span>\r\n <h2 class=\"cf-title\">A frog who made it. <span class=\"hl\">A soul that can't believe it.<\/span><\/h2>\r\n <p class=\"cf-lead\">\r\n Once a broke swamp dweller, Pepe woke up one day and everything had changed. The room is still green. The walls are still bare. But the numbers on the screen? Absolutely obscene. He sits, quiet, tears streaming — not because he's sad, but because he still doesn't understand <em>how<\/em>. He only knows <em>how much<\/em>.\r\n <\/p>\r\n <ul class=\"about-list\">\r\n <li><i class=\"fa-solid fa-check\"><\/i> Born from the deepest lore of internet royalty.<\/li>\r\n <li><i class=\"fa-solid fa-check\"><\/i> 100% fair launch, 0% seriousness, \u221e% feelings.<\/li>\r\n <li><i class=\"fa-solid fa-check\"><\/i> Every holder gets a permanent seat in the Emotional Millionaire Club.<\/li>\r\n <li><i class=\"fa-solid fa-check\"><\/i> No promises. No roadmap to Mars. Just numbers going up.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n <div class=\"about-card\">\r\n <div class=\"about-image\" role=\"img\" aria-label=\"Pepe crying tears of joy\"><\/div>\r\n <div class=\"about-stamp\">CERTIFIED<br>EMOTIONAL<br>WEALTH<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TOKENOMICS -->\r\n<section id=\"tokenomics\" class=\"cf-section tokenomics\" data-testid=\"section-tokenomics\">\r\n <div class=\"cf-container\">\r\n <div class=\"reveal\">\r\n <span class=\"cf-kicker\"><i class=\"fa-solid fa-coins\"><\/i> Tokenomics<\/span>\r\n <h2 class=\"cf-title\">The numbers behind <span class=\"hl\">the tears.<\/span><\/h2>\r\n <p class=\"cf-lead\">Simple. Symmetrical. Slightly emotional. No taxes, no traps — just a frog and a supply.<\/p>\r\n <\/div>\r\n\r\n <div class=\"stats-grid reveal\">\r\n <div class=\"stat\">\r\n <div class=\"lbl\">Ticker<\/div>\r\n <div class=\"val\">$CFROG<\/div>\r\n <div class=\"sub\">The one and only.<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"lbl\">Total Supply<\/div>\r\n <div class=\"val\">1,000,000,000<\/div>\r\n <div class=\"sub\">One billion happy tears.<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"lbl\">Tax<\/div>\r\n <div class=\"val\">0 \/ 0<\/div>\r\n <div class=\"sub\">Buy & sell, no strings.<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"lbl\">Chain<\/div>\r\n <div class=\"val\">TBA<\/div>\r\n <div class=\"sub\">Announced with a ribbit.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tokenomics-split\">\r\n <div class=\"allocation reveal\">\r\n <h4><i class=\"fa-solid fa-chart-pie\"><\/i> Allocation<\/h4>\r\n\r\n <div class=\"bar\" data-fill=\"70\">\r\n <div class=\"row\"><span>Liquidity Pool<\/span><span>70%<\/span><\/div>\r\n <div class=\"track\"><div class=\"fill fill-a\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"bar\" data-fill=\"15\">\r\n <div class=\"row\"><span>Community & Airdrops<\/span><span>15%<\/span><\/div>\r\n <div class=\"track\"><div class=\"fill fill-b\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"bar\" data-fill=\"10\">\r\n <div class=\"row\"><span>Marketing & Memes<\/span><span>10%<\/span><\/div>\r\n <div class=\"track\"><div class=\"fill fill-c\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"bar\" data-fill=\"5\">\r\n <div class=\"row\"><span>CEX Reserves<\/span><span>5%<\/span><\/div>\r\n <div class=\"track\"><div class=\"fill fill-d\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ca-card reveal\">\r\n <div>\r\n <h4><i class=\"fa-solid fa-fingerprint\"><\/i> Contract Address<\/h4>\r\n <p style=\"margin: 10px 0 0; color:#334;\">Freshly launched. Verify twice, ape once.<\/p>\r\n <\/div>\r\n <div class=\"ca-line\">\r\n <div class=\"ca-box\" id=\"caText\" data-testid=\"ca-text\">TBA \u2014 Announced at launch<\/div>\r\n <button class=\"ca-copy\" id=\"caCopy\" data-testid=\"ca-copy\"><i class=\"fa-solid fa-copy\"><\/i><\/button>\r\n <\/div>\r\n <div style=\"display:flex; gap:10px; flex-wrap:wrap;\">\r\n <a href=\"#\" class=\"cf-btn cf-btn-primary\" data-testid=\"ca-chart\"><i class=\"fa-solid fa-chart-line\"><\/i> View Chart<\/a>\r\n <a href=\"#\" class=\"cf-btn cf-btn-ghost\" data-testid=\"ca-scan\"><i class=\"fa-solid fa-magnifying-glass\"><\/i> Explorer<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- HOW TO BUY -->\r\n<section id=\"howtobuy\" class=\"cf-section\" data-testid=\"section-howtobuy\">\r\n <div class=\"cf-container\">\r\n <div class=\"reveal\">\r\n <span class=\"cf-kicker\"><i class=\"fa-solid fa-basket-shopping\"><\/i> How to Buy<\/span>\r\n <h2 class=\"cf-title\">Four hops to <span class=\"hl\">emotional wealth.<\/span><\/h2>\r\n <p class=\"cf-lead\">Even a frog can do it. Especially a frog. Follow along.<\/p>\r\n <\/div>\r\n\r\n <div class=\"steps reveal\">\r\n <div class=\"step\">\r\n <div class=\"num\">1<\/div>\r\n <h5>Create a Wallet<\/h5>\r\n <p>Download <strong>Phantom<\/strong> or <strong>MetaMask<\/strong>. Store your seed phrase like it's the meaning of life. Because it is.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"num\">2<\/div>\r\n <h5>Fund It<\/h5>\r\n <p>Send some SOL or ETH into your fresh wallet from your favorite exchange. Bonus points if you send it with a tear.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"num\">3<\/div>\r\n <h5>Swap for $CFROG<\/h5>\r\n <p>Head to the DEX, paste the contract address, and swap. Adjust slippage a bit. Ribbit and confirm.<\/p>\r\n <\/div>\r\n <div class=\"step\">\r\n <div class=\"num\">4<\/div>\r\n <h5>Feel Everything<\/h5>\r\n <p>Watch the chart, hold the bag, cry a little. Congrats — you are now emotionally invested. Literally.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ROADMAP -->\r\n<section id=\"roadmap\" class=\"cf-section roadmap\" data-testid=\"section-roadmap\">\r\n <div class=\"cf-container\">\r\n <div class=\"reveal\">\r\n <span class=\"cf-kicker\"><i class=\"fa-solid fa-map\"><\/i> Roadmap<\/span>\r\n <h2 class=\"cf-title\">The Frog's <span class=\"hl\">Journey.<\/span><\/h2>\r\n <p class=\"cf-lead\">He didn't plan it. It just... happened. Then he made a slide about it.<\/p>\r\n <\/div>\r\n\r\n <div class=\"rm-grid reveal\">\r\n <div class=\"rm-card done\">\r\n <span class=\"badge\">Done<\/span>\r\n <div class=\"phase\">Phase 01 \u00b7 The Tear<\/div>\r\n <h5>The Awakening<\/h5>\r\n <ul>\r\n <li><i class=\"fa-solid fa-check\"><\/i> Meme is born<\/li>\r\n <li><i class=\"fa-solid fa-check\"><\/i> Community forms<\/li>\r\n <li><i class=\"fa-solid fa-check\"><\/i> First 1000 frogs<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"rm-card now\">\r\n <span class=\"badge\">Now<\/span>\r\n <div class=\"phase\">Phase 02 \u00b7 The Realization<\/div>\r\n <h5>Fair Launch<\/h5>\r\n <ul>\r\n <li><i class=\"fa-solid fa-fire\"><\/i> Liquidity locked<\/li>\r\n <li><i class=\"fa-solid fa-fire\"><\/i> DEX listing live<\/li>\r\n <li><i class=\"fa-solid fa-fire\"><\/i> CoinGecko \/ CMC apply<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"rm-card\">\r\n <span class=\"badge\">Soon<\/span>\r\n <div class=\"phase\">Phase 03 \u00b7 The Overflow<\/div>\r\n <h5>Meme Machine<\/h5>\r\n <ul>\r\n <li><i class=\"fa-solid fa-star\"><\/i> Influencer wave<\/li>\r\n <li><i class=\"fa-solid fa-star\"><\/i> Airdrops for early frogs<\/li>\r\n <li><i class=\"fa-solid fa-star\"><\/i> CEX listing #1<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"rm-card\">\r\n <span class=\"badge\">Later<\/span>\r\n <div class=\"phase\">Phase 04 \u00b7 The How Much<\/div>\r\n <h5>Cross-Chain Ribbit<\/h5>\r\n <ul>\r\n <li><i class=\"fa-solid fa-crown\"><\/i> Multi-chain bridge<\/li>\r\n <li><i class=\"fa-solid fa-crown\"><\/i> Merch drop<\/li>\r\n <li><i class=\"fa-solid fa-crown\"><\/i> Tier-1 CEX listing<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- COMMUNITY -->\r\n<section id=\"community\" class=\"cf-community\" data-testid=\"section-community\">\r\n <div class=\"cf-container\">\r\n <div class=\"reveal\">\r\n <span class=\"cf-kicker\"><i class=\"fa-solid fa-users\"><\/i> Community<\/span>\r\n <h2 class=\"cf-title\">Join the frogs. <span class=\"hl\">Feel the feels.<\/span><\/h2>\r\n <p class=\"cf-lead\" style=\"margin: 0 auto;\">\r\n The chart goes up. The tears go down. Everyone's crying together, and honestly it's beautiful.\r\n <\/p>\r\n\r\n <div class=\"socials\">\r\n <a class=\"social x\" href=\"#\" aria-label=\"X \/ Twitter\" data-testid=\"social-x\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\r\n <a class=\"social tg\" href=\"#\" aria-label=\"Telegram\" data-testid=\"social-tg\"><i class=\"fa-brands fa-telegram\"><\/i><\/a>\r\n <a class=\"social dex\" href=\"#\" aria-label=\"DEX\" data-testid=\"social-dex\"><i class=\"fa-solid fa-chart-line\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <img decoding=\"async\" src=\"wp-content\/uploads\/assets\/logo-cashfrog.webp\" alt=\"CashFrog\" style=\"height:44px\" \/>\r\n <div>\u00a9 <span id=\"cfYear\"><\/span> CashFrog. He still doesn't know how.<\/div>\r\n <div class=\"disclaimer\">\r\n $CFROG is a meme coin with no intrinsic value or expectation of financial return. There is no formal team or roadmap. It is completely useless and for entertainment purposes only. DYOR — do your own ribbit.\r\n <\/div>\r\n<\/footer>\r\n\r\n<\/div><!-- \/.cf-app -->\r\n\r\n<script>\r\n(function () {\r\n \/* ============ SCROLL-DRIVEN CANVAS SEQUENCE ============ *\/\r\n const FRAMES = 51;\r\n const framePath = i => `wp-content\/uploads\/assets\/sequence\/ezgif-frame-${String(i).padStart(3,'0')}.jpg`;\r\n const canvas = document.getElementById('cfCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const hero = document.querySelector('.cf-hero');\r\n const images = [];\r\n let loaded = 0;\r\n let currentFrame = 1;\r\n let targetFrame = 1;\r\n\r\n function resizeCanvas() {\r\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n canvas.width = Math.floor(canvas.clientWidth * dpr);\r\n canvas.height = Math.floor(canvas.clientHeight * dpr);\r\n drawFrame(currentFrame);\r\n }\r\n\r\n function drawFrame(n) {\r\n const img = images[n - 1];\r\n if (!img || !img.complete || !img.naturalWidth) return;\r\n const cw = canvas.width, ch = canvas.height;\r\n ctx.fillStyle = '#0b1f0e';\r\n ctx.fillRect(0, 0, cw, ch);\r\n \/\/ cover\r\n const ir = img.naturalWidth \/ img.naturalHeight;\r\n const cr = cw \/ ch;\r\n let dw, dh, dx, dy;\r\n if (cr > ir) {\r\n dw = cw; dh = cw \/ ir;\r\n dx = 0; dy = (ch - dh) \/ 2;\r\n } else {\r\n dh = ch; dw = ch * ir;\r\n dy = 0; dx = (cw - dw) \/ 2;\r\n }\r\n ctx.drawImage(img, dx, dy, dw, dh);\r\n }\r\n\r\n \/\/ preload\r\n for (let i = 1; i <= FRAMES; i++) {\r\n const img = new Image();\r\n img.decoding = 'async';\r\n img.src = framePath(i);\r\n img.onload = () => {\r\n loaded++;\r\n if (i === 1) { resizeCanvas(); drawFrame(1); }\r\n };\r\n images.push(img);\r\n }\r\n\r\n \/\/ smooth interpolation for frame updates\r\n function tick() {\r\n if (currentFrame !== targetFrame) {\r\n const diff = targetFrame - currentFrame;\r\n \/\/ lerp toward target for smoothness\r\n if (Math.abs(diff) < 0.25) currentFrame = targetFrame;\r\n else currentFrame += diff * 0.25;\r\n drawFrame(Math.round(currentFrame));\r\n }\r\n requestAnimationFrame(tick);\r\n }\r\n tick();\r\n\r\n function updateScrollFrame() {\r\n const rect = hero.getBoundingClientRect();\r\n const total = hero.offsetHeight - window.innerHeight;\r\n const scrolled = Math.min(Math.max(-rect.top, 0), total);\r\n const p = total > 0 ? scrolled \/ total : 0;\r\n targetFrame = 1 + p * (FRAMES - 1);\r\n\r\n \/\/ Pin\/unpin the stage manually \u2014 bulletproof across CMS contexts (Elementor, etc.)\r\n if (rect.top >= 0) {\r\n hero.classList.remove('is-pinned', 'is-past');\r\n } else if (rect.bottom <= window.innerHeight) {\r\n hero.classList.remove('is-pinned');\r\n hero.classList.add('is-past');\r\n } else {\r\n hero.classList.remove('is-past');\r\n hero.classList.add('is-pinned');\r\n }\r\n\r\n \/\/ Fade + slide the hero text as user scrolls (finishes within first ~1 viewport of scroll)\r\n const fadeEnd = Math.min(1, window.innerHeight \/ Math.max(total, 1)); \/\/ ~1 scroll length\r\n const fp = Math.min(1, p \/ (fadeEnd * 0.9)); \/\/ 0 -> 1 within one scroll\r\n const overlay = document.querySelector('.cf-hero-inner');\r\n const hint = document.querySelector('.cf-scroll-hint');\r\n if (overlay) {\r\n overlay.style.opacity = String(1 - fp);\r\n overlay.style.transform = `translateY(${fp * 80}px)`;\r\n }\r\n if (hint) {\r\n hint.style.opacity = String(Math.max(0, 0.8 - fp * 1.4));\r\n }\r\n\r\n \/\/ progress bar overall\r\n const docH = document.documentElement.scrollHeight - window.innerHeight;\r\n const gp = Math.min(Math.max(window.scrollY \/ docH, 0), 1);\r\n document.getElementById('cfProgress').style.width = (gp * 100) + '%';\r\n }\r\n window.addEventListener('scroll', updateScrollFrame, { passive: true });\r\n window.addEventListener('resize', () => { resizeCanvas(); updateScrollFrame(); });\r\n updateScrollFrame();\r\n\r\n \/* ============ NAVBAR EFFECTS ============ *\/\r\n const nav = document.getElementById('cfNav');\r\n let lastY = 0;\r\n window.addEventListener('scroll', () => {\r\n const y = window.scrollY;\r\n nav.classList.toggle('scrolled', y > 20);\r\n if (Math.abs(y - lastY) > 500) {\r\n nav.classList.add('hop');\r\n setTimeout(() => nav.classList.remove('hop'), 600);\r\n lastY = y;\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ random hop every 12s (playful)\r\n setInterval(() => {\r\n if (document.hidden) return;\r\n nav.classList.add('hop');\r\n setTimeout(() => nav.classList.remove('hop'), 600);\r\n }, 12000);\r\n\r\n \/\/ burger\r\n const burger = document.getElementById('cfBurger');\r\n burger && burger.addEventListener('click', () => nav.classList.toggle('open'));\r\n document.querySelectorAll('#cfNavLinks a').forEach(a => {\r\n a.addEventListener('click', () => nav.classList.remove('open'));\r\n });\r\n\r\n \/* ============ REVEAL ON SCROLL ============ *\/\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(e => {\r\n if (e.isIntersecting) {\r\n e.target.classList.add('in');\r\n \/\/ trigger allocation bars\r\n if (e.target.classList.contains('allocation')) {\r\n e.target.querySelectorAll('.bar').forEach(bar => {\r\n const fill = bar.querySelector('.fill');\r\n const pct = bar.dataset.fill || '50';\r\n fill.style.width = pct + '%';\r\n });\r\n }\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n document.querySelectorAll('.reveal').forEach(el => io.observe(el));\r\n\r\n \/* ============ COPY CA ============ *\/\r\n const caCopy = document.getElementById('caCopy');\r\n const caText = document.getElementById('caText');\r\n caCopy && caCopy.addEventListener('click', async () => {\r\n try {\r\n await navigator.clipboard.writeText(caText.textContent.trim());\r\n const original = caCopy.innerHTML;\r\n caCopy.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n setTimeout(() => { caCopy.innerHTML = original; }, 1400);\r\n } catch(_) {}\r\n });\r\n\r\n document.getElementById('cfYear').textContent = new Date().getFullYear();\r\n\r\n \/\/ resize canvas on init\r\n resizeCanvas();\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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>CashFrog \u2014 He doesn’t know how. He just knows how much. About Tokenomics How to Buy Roadmap Community Buy $CFROG $CFROG \u00b7 The Frog Who Made It HE DOESN’T KNOW HOW. HE JUST KNOWS HOW MUCH. Pepe stares into the void of his own bank balance. He can’t explain it, he doesn’t understand it — […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashfrog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":34,"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/cashfrog.fun\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/cashfrog.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}