{"id":8,"date":"2026-07-29T02:03:24","date_gmt":"2026-07-29T02:03:24","guid":{"rendered":"https:\/\/humpingcat.lol\/?page_id=8"},"modified":"2026-07-29T03:53:59","modified_gmt":"2026-07-29T03:53:59","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/humpingcat.lol\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n \n \n $HUMPCAT \u2014 Headset On. Full Send.<\/title>\n <meta name=\"description\" content=\"A meme token inspired by peak unhinged internet energy. No fear, no shame, no second thoughts.\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --white: #ffffff;\n --off: #f5f4f0;\n --paper: #faf9f6;\n --ink: #0f0e0c;\n --ink2: #2a2925;\n --muted: #8a8880;\n --border: #e2e0da;\n --red: #e63328;\n --orange: #f07832;\n --yellow: #f5c842;\n --blue: #1a3fe4;\n --font-head: 'Syne', sans-serif;\n --font-mono: 'Space Mono', monospace;\n \/* Dark outline stroke for white text over background image *\/\n --txt-shadow:\n 0 1px 0 rgba(0,0,0,0.95),\n 0 -1px 0 rgba(0,0,0,0.95),\n 1px 0 0 rgba(0,0,0,0.95),\n -1px 0 0 rgba(0,0,0,0.95),\n 2px 2px 0 rgba(0,0,0,0.95),\n -2px -2px 0 rgba(0,0,0,0.95),\n 2px -2px 0 rgba(0,0,0,0.95),\n -2px 2px 0 rgba(0,0,0,0.95),\n 0 4px 16px rgba(0,0,0,0.55);\n }\n\n html { scroll-behavior: auto; }\n body {\n background-color: var(--white);\n background-image: url('http:\/\/humpingcat.lol\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-29-Jul-2026-10.33.56.png');\n background-attachment: fixed;\n background-size: cover;\n background-position: center;\n color: var(--ink);\n font-family: var(--font-head);\n overflow-x: hidden;\n }\n\n ::-webkit-scrollbar { width: 3px; }\n ::-webkit-scrollbar-thumb { background: var(--red); }\n\n \/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 200;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 48px;\n mix-blend-mode: normal;\n transition: background 0.3s, border-color 0.3s;\n }\n\n nav.solid {\n background: rgba(255,255,255,0.92);\n border-bottom: 1px solid var(--border);\n backdrop-filter: blur(16px);\n }\n\n .nav-logo {\n font-family: var(--font-mono);\n font-size: 1rem;\n font-weight: 700;\n letter-spacing: -0.01em;\n color: var(--ink);\n text-decoration: none;\n }\n .nav-logo .dot { color: var(--red); }\n\n .nav-links {\n display: flex; align-items: center; gap: 36px; list-style: none;\n }\n .nav-links a {\n font-size: 0.78rem; font-weight: 600;\n letter-spacing: 0.1em; text-transform: uppercase;\n color: #000; text-decoration: none;\n transition: color 0.2s;\n }\n .nav-links a:hover { color: var(--ink); }\n .nav-pill {\n background: var(--ink) !important;\n color: var(--white) !important;\n padding: 9px 20px; border-radius: 100px;\n transition: background 0.2s !important;\n }\n .nav-pill:hover { background: var(--red) !important; color: var(--white) !important; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION 1 \u2014 HERO + ZOOM PIN\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #hero-pin {\n position: relative;\n \/* Tall enough for the zoom animation to feel natural *\/\n height: 300vh;\n }\n\n #hero-sticky {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: transparent;\n }\n\n \/* Decorative corner marks *\/\n .corner-mark {\n position: absolute;\n width: 20px; height: 20px;\n border-color: var(--white);\n border-style: solid;\n opacity: 0.6;\n }\n .corner-mark.tl { top:24px; left:24px; border-width: 1px 0 0 1px; }\n .corner-mark.tr { top:24px; right:24px; border-width: 1px 1px 0 0; }\n .corner-mark.bl { bottom:24px; left:24px; border-width: 0 0 1px 1px; }\n .corner-mark.br { bottom:24px; right:24px; border-width: 0 1px 1px 0; }\n\n .hero-ticker-strip {\n position: absolute;\n top: 88px;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n border-top: 1px solid rgba(255,255,255,0.35);\n border-bottom: 1px solid rgba(255,255,255,0.35);\n padding: 10px 0;\n font-family: var(--font-mono);\n font-size: 0.7rem;\n letter-spacing: 0.12em;\n color: var(--white);\n text-transform: uppercase;\n text-shadow: var(--txt-shadow);\n }\n .ticker-inner {\n display: inline-block;\n animation: ticker-scroll 18s linear infinite;\n }\n @keyframes ticker-scroll {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n\n .hero-layout {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n gap: 60px;\n width: 100%;\n max-width: 1280px;\n padding: 0 60px;\n position: relative;\n z-index: 2;\n }\n\n .hero-left {\n display: flex;\n flex-direction: column;\n gap: 28px;\n }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--yellow);\n color: var(--ink);\n padding: 6px 14px;\n border-radius: 100px;\n font-size: 0.7rem;\n font-weight: 700;\n font-family: var(--font-mono);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n width: fit-content;\n }\n .hero-badge span { background: var(--ink); color: var(--yellow); border-radius: 100px; padding: 2px 8px; }\n\n .hero-h1 {\n font-size: clamp(3.5rem, 5.5vw, 6.5rem);\n font-weight: 800;\n letter-spacing: -0.05em;\n line-height: 0.9;\n text-transform: uppercase;\n color: var(--white);\n text-shadow: var(--txt-shadow);\n }\n .hero-h1 .stroke {\n -webkit-text-fill-color: transparent;\n -webkit-text-stroke: 2px var(--white);\n text-shadow: none;\n }\n .hero-h1 .red {\n color: var(--red);\n -webkit-text-fill-color: var(--red);\n text-shadow: var(--txt-shadow);\n }\n\n .hero-desc {\n font-size: 0.95rem;\n line-height: 1.65;\n color: var(--white);\n max-width: 340px;\n font-weight: 700;\n text-shadow: var(--txt-shadow);\n }\n\n .hero-right {\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: flex-end;\n }\n\n .hero-right .stat-pill {\n background: rgba(255,255,255,0.15);\n border: 1.5px solid rgba(255,255,255,0.5);\n border-radius: 100px;\n padding: 10px 22px;\n font-family: var(--font-mono);\n font-size: 0.78rem;\n color: var(--white);\n display: flex;\n align-items: center;\n gap: 10px;\n text-shadow: var(--txt-shadow);\n }\n .stat-pill .val { font-weight: 700; color: var(--white); font-size: 1rem; }\n\n \/* The hero GIF \u2014 stays in DOM always, scales up on scroll *\/\n #hero-gif-container {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 5;\n }\n\n #hero-gif-img {\n margin-left: 640px;\n width: 340px;\n height: 340px;\n object-fit: cover;\n border-radius: 0;\n border: none;\n will-change: transform;\n transform-origin: center center;\n display: block;\n pointer-events: none;\n }\n\n \/* CA strip at bottom of hero *\/\n .hero-ca-strip {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0;\n border: 1.5px solid var(--ink);\n border-radius: 100px;\n overflow: hidden;\n background: var(--white);\n z-index: 10;\n }\n .hero-ca-addr {\n font-family: var(--font-mono);\n font-size: 0.72rem;\n color: var(--muted);\n padding: 11px 20px;\n letter-spacing: 0.04em;\n }\n .ca-copy-btn {\n background: var(--ink);\n color: var(--white);\n border: none;\n padding: 11px 20px;\n font-family: var(--font-mono);\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background 0.2s;\n display: flex;\n align-items: center;\n gap: 7px;\n white-space: nowrap;\n }\n .ca-copy-btn:hover { background: var(--red); }\n .ca-copy-btn.copied { background: #16a34a; }\n\n .hero-scroll-indicator {\n position: absolute;\n bottom: 100px;\n right: 48px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n opacity: 0.7;\n font-family: var(--font-mono);\n font-size: 0.6rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--white);\n writing-mode: vertical-lr;\n animation: fade-up 2s infinite;\n z-index: 10;\n text-shadow: var(--txt-shadow);\n }\n @keyframes fade-up {\n 0%,100% { opacity:0.3; transform: translateY(0); }\n 50% { opacity:0.5; transform: translateY(-6px); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION 2 \u2014 VIDEO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #section2 {\n position: relative;\n height: 100vh;\n overflow: hidden;\n }\n\n #s2-video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n .s2-caption {\n position: absolute;\n bottom: 60px;\n left: 60px;\n z-index: 3;\n max-width: 480px;\n }\n\n \/* White card wrapper for section 2 text *\/\n .s2-card {\n background: var(--white);\n padding: 36px 40px 40px;\n display: inline-flex;\n flex-direction: column;\n gap: 0;\n }\n\n .pill-label {\n display: inline-block;\n background: var(--red);\n color: var(--white);\n font-family: var(--font-mono);\n font-size: 0.65rem;\n font-weight: 700;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: 100px;\n margin-bottom: 20px;\n width: fit-content;\n }\n\n .s2-title {\n font-size: clamp(2.4rem, 4.5vw, 4.2rem);\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 0.95;\n color: var(--ink);\n }\n .s2-title em {\n font-style: italic;\n color: var(--red);\n }\n\n .s2-stats-row {\n display: flex;\n gap: 0;\n margin-top: 28px;\n border-top: 1.5px solid var(--border);\n }\n .s2-stat {\n flex: 1;\n padding: 16px 12px 0;\n text-align: left;\n }\n .s2-stat + .s2-stat {\n border-left: 1.5px solid var(--border);\n padding-left: 20px;\n }\n .s2-stat-val {\n display: block;\n font-family: var(--font-mono);\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--ink);\n }\n .s2-stat-label {\n font-size: 0.65rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n }\n\n \/* \u2500\u2500 Marquee strips \u2500\u2500 *\/\n .marquee-strip {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n align-items: center;\n border-top: 1.5px solid var(--ink);\n border-bottom: 1.5px solid var(--ink);\n background: var(--ink);\n padding: 12px 0;\n position: relative;\n z-index: 10;\n }\n .marquee-strip.light {\n background: var(--yellow);\n border-color: var(--ink);\n }\n .marquee-track {\n display: inline-flex;\n align-items: center;\n gap: 0;\n animation: marq 14s linear infinite;\n will-change: transform;\n }\n .marquee-strip.rev .marquee-track {\n animation-direction: reverse;\n }\n @keyframes marq {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n .marquee-item {\n font-family: var(--font-mono);\n font-size: 0.78rem;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding: 0 28px;\n color: var(--white);\n display: inline-flex;\n align-items: center;\n gap: 14px;\n flex-shrink: 0;\n }\n .marquee-strip.light .marquee-item {\n color: var(--ink);\n }\n .marquee-dot {\n width: 5px; height: 5px;\n border-radius: 50%;\n background: var(--red);\n flex-shrink: 0;\n }\n .marquee-strip.light .marquee-dot {\n background: var(--ink);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION 3 \u2014 GALLERY (circle)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #section3 {\n background: transparent;\n padding: 120px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .s3-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-bottom: 80px;\n border-bottom: 1.5px solid rgba(255,255,255,0.4);\n padding-bottom: 32px;\n }\n\n .s3-num {\n font-family: var(--font-mono);\n font-size: 0.7rem;\n letter-spacing: 0.15em;\n color: var(--white);\n text-transform: uppercase;\n font-weight: 700;\n text-shadow: var(--txt-shadow);\n }\n\n .s3-title {\n font-size: clamp(3rem, 6vw, 6.5rem);\n font-weight: 800;\n letter-spacing: -0.05em;\n line-height: 0.9;\n text-transform: uppercase;\n color: var(--white);\n text-shadow: var(--txt-shadow);\n }\n .s3-title .stroke3 {\n -webkit-text-fill-color: transparent;\n -webkit-text-stroke: 2px var(--white);\n text-shadow: none;\n }\n\n .s3-tagline {\n font-size: 0.9rem;\n color: var(--white);\n max-width: 220px;\n line-height: 1.5;\n text-align: right;\n font-weight: 700;\n text-shadow: var(--txt-shadow);\n }\n\n \/* Circle gallery \u2014 two rows, staggered *\/\n .gallery-circles {\n display: flex;\n flex-wrap: wrap;\n gap: 24px;\n justify-content: center;\n }\n\n .gallery-circ {\n width: 220px;\n height: 220px;\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n border: 3px solid var(--white);\n box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s;\n flex-shrink: 0;\n }\n\n .gallery-circ:nth-child(2n) { margin-top: 40px; }\n .gallery-circ:nth-child(3n) { margin-top: -20px; }\n\n .gallery-circ:hover {\n transform: scale(1.06) translateY(-8px);\n box-shadow: 0 20px 60px rgba(0,0,0,0.18);\n border-color: var(--red);\n }\n\n .gallery-circ img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);\n display: block;\n }\n\n .gallery-circ:hover img { transform: scale(1.12); }\n\n \/* Lightbox *\/\n #lightbox {\n position: fixed; inset: 0; z-index: 500;\n background: rgba(15,14,12,0.92);\n display: none; align-items: center; justify-content: center;\n backdrop-filter: blur(24px);\n }\n #lightbox.active { display: flex; }\n #lightbox img {\n max-width: 80vw; max-height: 80vh;\n border-radius: 50%;\n border: 4px solid var(--white);\n object-fit: cover;\n animation: lb-in 0.35s cubic-bezier(0.16,1,0.3,1);\n }\n @keyframes lb-in { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }\n #lb-close {\n position: absolute; top:28px; right:28px;\n width:44px; height:44px; border-radius:50%;\n background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);\n color:#fff; font-size:1.3rem; cursor:pointer;\n display:flex; align-items:center; justify-content:center;\n transition: background 0.2s;\n }\n #lb-close:hover { background: rgba(230,51,40,0.6); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION 4 \u2014 MANIFESTO \/ CATS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #section4 {\n background: transparent;\n padding: 120px 60px;\n position: relative;\n overflow: hidden;\n }\n\n .s4-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .s4-text-col {\n display: flex;\n flex-direction: column;\n gap: 28px;\n }\n\n .s4-label {\n font-family: var(--font-mono);\n font-size: 0.7rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--white);\n display: flex;\n align-items: center;\n gap: 10px;\n text-shadow: var(--txt-shadow);\n }\n .s4-label::before { content:''; width:28px; height:1.5px; background:var(--white); }\n\n .s4-title {\n font-size: clamp(2.5rem, 4.5vw, 5rem);\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 0.95;\n text-transform: uppercase;\n color: var(--white);\n text-shadow: var(--txt-shadow);\n }\n .s4-title .highlight {\n background: var(--yellow);\n color: var(--ink);\n padding: 0 8px;\n display: inline;\n text-shadow: none;\n }\n\n .s4-body {\n font-size: 1.05rem;\n line-height: 1.72;\n color: var(--white);\n max-width: 440px;\n font-weight: 700;\n text-shadow: var(--txt-shadow);\n }\n\n .s4-cats-col {\n position: relative;\n height: 480px;\n }\n\n .scattered-cat {\n position: absolute;\n border-radius: 50%;\n overflow: hidden;\n border: 3px solid var(--ink);\n will-change: transform;\n }\n\n .scattered-cat img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION 5 \u2014 CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #section5 {\n background: var(--ink);\n color: var(--white);\n padding: 160px 60px 120px;\n position: relative;\n overflow: hidden;\n text-align: center;\n }\n\n \/* Grid bg *\/\n #section5::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);\n background-size: 50px 50px;\n pointer-events: none;\n }\n\n .s5-decor-circle {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n }\n .s5-dc1 {\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(230,51,40,0.2) 0%, transparent 65%);\n top: -200px; right: -100px;\n }\n .s5-dc2 {\n width: 400px; height: 400px;\n background: radial-gradient(circle, rgba(26,63,228,0.2) 0%, transparent 65%);\n bottom: -100px; left: 0;\n }\n\n .s5-content {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 40px;\n max-width: 800px;\n margin: 0 auto;\n }\n\n .s5-eyebrow {\n font-family: var(--font-mono);\n font-size: 0.7rem;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.4);\n }\n\n .s5-title {\n font-size: clamp(4rem, 10vw, 10rem);\n font-weight: 800;\n letter-spacing: -0.05em;\n line-height: 0.85;\n text-transform: uppercase;\n }\n .s5-title .s5-red { color: var(--red); }\n .s5-title .s5-stroke {\n -webkit-text-fill-color: transparent;\n -webkit-text-stroke: 2px rgba(255,255,255,0.5);\n }\n\n .s5-sub {\n font-size: 1.05rem;\n line-height: 1.7;\n color: rgba(255,255,255,0.55);\n max-width: 520px;\n }\n\n .s5-ca-wrap {\n display: flex;\n align-items: center;\n gap: 0;\n border: 1.5px solid rgba(255,255,255,0.15);\n border-radius: 100px;\n overflow: hidden;\n background: rgba(255,255,255,0.05);\n backdrop-filter: blur(10px);\n }\n .s5-ca-addr {\n font-family: var(--font-mono);\n font-size: 0.78rem;\n color: rgba(255,255,255,0.5);\n padding: 15px 28px;\n letter-spacing: 0.04em;\n }\n .s5-ca-btn {\n background: var(--red);\n color: var(--white);\n border: none;\n padding: 15px 28px;\n font-family: var(--font-mono);\n font-size: 0.78rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background 0.2s;\n display: flex; align-items: center; gap: 8px;\n }\n .s5-ca-btn:hover { background: #c0271d; }\n .s5-ca-btn.copied { background: #16a34a; }\n\n .socials {\n display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;\n }\n .soc-btn {\n display: flex; align-items: center; gap: 8px;\n padding: 12px 24px;\n border: 1.5px solid rgba(255,255,255,0.12);\n border-radius: 100px;\n color: rgba(255,255,255,0.55);\n text-decoration: none;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n transition: all 0.2s;\n }\n .soc-btn:hover {\n border-color: rgba(255,255,255,0.35);\n color: var(--white);\n transform: translateY(-2px);\n }\n\n .s5-disclaimer {\n font-size: 0.68rem;\n color: rgba(255,255,255,0.2);\n max-width: 480px;\n line-height: 1.6;\n }\n\n \/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n footer {\n background: var(--ink);\n border-top: 1px solid rgba(255,255,255,0.06);\n padding: 28px 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-mono);\n font-size: 0.68rem;\n color: rgba(255,255,255,0.25);\n }\n footer .f-ticker { color: var(--red); font-weight: 700; }\n\n \/* \u2500\u2500\u2500 COPY TOAST \u2500\u2500\u2500 *\/\n #copy-toast {\n position: fixed;\n bottom: 36px; left: 50%;\n transform: translateX(-50%) translateY(16px);\n background: #16a34a;\n color: #fff;\n font-family: var(--font-mono);\n font-size: 0.75rem;\n font-weight: 700;\n padding: 12px 24px;\n border-radius: 100px;\n z-index: 999;\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n pointer-events: none;\n letter-spacing: 0.06em;\n }\n #copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n \/* \u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500 *\/\n .reveal {\n opacity: 0; transform: translateY(32px);\n transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);\n }\n .reveal.in { opacity:1; transform:translateY(0); }\n .d1 { transition-delay:0.08s; }\n .d2 { transition-delay:0.18s; }\n .d3 { transition-delay:0.3s; }\n .d4 { transition-delay:0.45s; }\n\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n @media(max-width:900px){\n nav { padding: 16px 24px; }\n .nav-links { display: none; }\n .hero-layout { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; }\n .hero-right { display: none; }\n #hero-gif-img { width: 220px; height: 220px; }\n .s2-caption { left: 24px; bottom: 40px; }\n #section3 { padding: 80px 24px; }\n .s3-header { flex-direction: column; align-items: flex-start; gap: 16px; }\n .s3-tagline { text-align: left; }\n .gallery-circles { gap: 16px; }\n .gallery-circ { width: 150px; height: 150px; }\n .gallery-circ:nth-child(2n),\n .gallery-circ:nth-child(3n) { margin-top: 0; }\n #section4 { padding: 80px 24px; }\n .s4-grid { grid-template-columns: 1fr; gap: 48px; }\n .s4-cats-col { height: 340px; }\n #section5 { padding: 100px 24px 80px; }\n footer { flex-direction: column; gap: 8px; text-align: center; padding: 24px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"copy-toast\">\u2713 Copied to clipboard<\/div>\n\n<!-- LIGHTBOX -->\n<div id=\"lightbox\" role=\"dialog\">\n <button id=\"lb-close\">\u00d7<\/button>\n <img decoding=\"async\" id=\"lb-img\" src=\"\" alt=\"\" \/>\n<\/div>\n\n<!-- NAV -->\n<nav id=\"navbar\">\n <a class=\"nav-logo\" href=\"#\">HUMP<span class=\"dot\">\u25cf<\/span>CAT<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#section2\">Origin<\/a><\/li>\n <li><a href=\"#section3\">Gallery<\/a><\/li>\n <li><a href=\"#section4\">Manifesto<\/a><\/li>\n <li><a href=\"#section5\" class=\"nav-pill\">Buy $HUMPCAT<\/a><\/li>\n <\/ul>\n<\/nav>\n\n<!-- \u2550\u2550\u2550 S1: HERO + PINNED ZOOM \u2550\u2550\u2550 -->\n<div id=\"hero-pin\">\n <div id=\"hero-sticky\">\n <!-- Corner marks -->\n <div class=\"corner-mark tl\"><\/div>\n <div class=\"corner-mark tr\"><\/div>\n <div class=\"corner-mark bl\"><\/div>\n <div class=\"corner-mark br\"><\/div>\n\n <!-- Ticker strip -->\n <div class=\"hero-ticker-strip\">\n <div class=\"ticker-inner\">\n $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR  \u00b7  NO SHAME  \u00b7  $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR  \u00b7  NO SHAME  \u00b7  $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR  \u00b7  NO SHAME  \u00b7 \n <\/div>\n <\/div>\n\n <!-- Text layout (fades out as gif zooms) -->\n <div class=\"hero-layout\" id=\"hero-text-layout\">\n <div class=\"hero-left\">\n <div class=\"hero-badge\">\n Live  <span>Solana<\/span>\n <\/div>\n <h1 class=\"hero-h1\">\n <span class=\"red\">Hump<\/span>ing<br\/>\n <span class=\"stroke\">Cat.<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n A cat in full VR immersion, recklessly committed with zero hesitation.\n That unhinged energy \u2014 that's the token.\n <\/p>\n <\/div>\n\n <div style=\"width:340px;height:340px;\"><\/div><!-- spacer where gif sits -->\n\n <div class=\"hero-right\">\n <div class=\"stat-pill\"><span class=\"val\">0%<\/span> Tax<\/div>\n <div class=\"stat-pill\"><span class=\"val\">1B<\/span> Supply<\/div>\n <div class=\"stat-pill\"><span class=\"val\">\u221e<\/span> Vibes<\/div>\n <\/div>\n <\/div>\n\n <!-- THE GIF \u2014 absolutely centered, always visible, scales up -->\n <div id=\"hero-gif-container\">\n <img decoding=\"async\"\n id=\"hero-gif-img\"\n src=\"http:\/\/humpingcat.lol\/wp-content\/uploads\/2026\/07\/mainimage.gif\"\n alt=\"Humping Cat\"\n \/>\n <\/div>\n\n <!-- CA copy strip -->\n <div class=\"hero-ca-strip\" id=\"hero-ca-strip\">\n <div class=\"hero-ca-addr\" id=\"ca-display\">0xHUMPCAT...1337<\/div>\n <button class=\"ca-copy-btn\" onclick=\"copyCA(this)\">\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg>\n Copy CA\n <\/button>\n <\/div>\n\n <div class=\"hero-scroll-indicator\">Scroll \u2193<\/div>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 MARQUEE TOP \u2550\u2550\u2550 -->\n<div class=\"marquee-strip\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">$HUMPCAT<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Headset On<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Full Send<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">No Fear<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">No Shame<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Zero Hesitation<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Built on Solana<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">$HUMPCAT<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Headset On<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Full Send<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">No Fear<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">No Shame<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Zero Hesitation<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Built on Solana<span class=\"marquee-dot\"><\/span><\/span>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 S2: VIDEO \u2550\u2550\u2550 -->\n<section id=\"section2\">\n <video id=\"s2-video\" autoplay muted loop playsinline>\n <source src=\"http:\/\/humpingcat.lol\/wp-content\/uploads\/2026\/07\/section2bg.mp4\" type=\"video\/mp4\" \/>\n <\/video>\n\n <div class=\"s2-caption\">\n <div class=\"s2-card\">\n <div class=\"pill-label\">The Origin Story<\/div>\n <h2 class=\"s2-title\">\n All-in.<br\/>\n No <em>regrets.<\/em>\n <\/h2>\n <div class=\"s2-stats-row\">\n <div class=\"s2-stat\"><span class=\"s2-stat-val\">0%<\/span><span class=\"s2-stat-label\">Tax<\/span><\/div>\n <div class=\"s2-stat\"><span class=\"s2-stat-val\">1B<\/span><span class=\"s2-stat-label\">Supply<\/span><\/div>\n <div class=\"s2-stat\"><span class=\"s2-stat-val\">100\u00d7<\/span><span class=\"s2-stat-label\">Conviction<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550 MARQUEE BOTTOM \u2550\u2550\u2550 -->\n<div class=\"marquee-strip light rev\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">Meme Token<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Reckless Conviction<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">VR Cat<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">0% Tax<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">1B Supply<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Community Driven<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Peak Internet Energy<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Meme Token<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Reckless Conviction<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">VR Cat<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">0% Tax<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">1B Supply<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Community Driven<span class=\"marquee-dot\"><\/span><\/span>\n <span class=\"marquee-item\">Peak Internet Energy<span class=\"marquee-dot\"><\/span><\/span>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 S3: GALLERY \u2550\u2550\u2550 -->\n<section id=\"section3\">\n <div class=\"s3-header reveal\">\n <div class=\"s3-num\">03 \u2014 Gallery<\/div>\n <h2 class=\"s3-title\">\n Caught<br\/>\n <span class=\"stroke3\">In Act.<\/span>\n <\/h2>\n <p class=\"s3-tagline\">Eight moments of unfiltered commitment. Click to enlarge.<\/p>\n <\/div>\n\n <div class=\"gallery-circles reveal d2\" id=\"gallery-circles\">\n <!-- injected by JS -->\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550 S4: MANIFESTO + SCATTERED CATS \u2550\u2550\u2550 -->\n<section id=\"section4\">\n <div class=\"s4-grid\">\n <div class=\"s4-text-col\">\n <div class=\"s4-label reveal\">Why $HUMPCAT<\/div>\n <h2 class=\"s4-title reveal d1\">\n We're all<br\/>\n <span class=\"highlight\">that cat.<\/span>\n <\/h2>\n <p class=\"s4-body reveal d2\">\n Fully committed. Zero self-awareness. Headset on, world off.\n $HUMPCAT distills the internet's reckless spirit into a single meme token.\n No roadmap. No whitepaper. Just send it.\n <\/p>\n <div class=\"reveal d3\" style=\"display:flex;gap:12px;flex-wrap:wrap;\">\n <button\n style=\"display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--white);border:none;border-radius:100px;padding:13px 26px;font-family:var(--font-mono);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;\"\n onmouseover=\"this.style.background='var(--red)'\"\n onmouseout=\"this.style.background='var(--ink)'\"\n onclick=\"copyCA(this)\">\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg>\n Copy CA\n <\/button>\n <a href=\"#section5\"\n style=\"display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--border);color:var(--ink);border-radius:100px;padding:12px 26px;font-family:var(--font-mono);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:border-color 0.2s;\"\n onmouseover=\"this.style.borderColor='var(--ink)'\"\n onmouseout=\"this.style.borderColor='var(--border)'\">\n Join Community \u2192\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Scattered cat images \u2014 FRESH instances, not the hero one -->\n <div class=\"s4-cats-col reveal d2\" id=\"s4-cats-col\">\n <!-- injected by JS -->\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550 S5: CTA \u2550\u2550\u2550 -->\n<section id=\"section5\">\n <div class=\"s5-decor-circle s5-dc1\"><\/div>\n <div class=\"s5-decor-circle s5-dc2\"><\/div>\n\n <div class=\"s5-content\">\n <div class=\"s5-eyebrow reveal\">Join the community<\/div>\n\n <h2 class=\"s5-title reveal d1\">\n Strap<br\/>\n <span class=\"s5-red\">in.<\/span><br\/>\n <span class=\"s5-stroke\">Send.<\/span>\n <\/h2>\n\n <p class=\"s5-sub reveal d2\">\n $HUMPCAT is the token of peak internet chaos. No roadmap.\n No whitepaper. Just a cat, a headset, and zero hesitation.\n <\/p>\n\n <div class=\"s5-ca-wrap reveal d3\">\n <div class=\"s5-ca-addr\" id=\"s5-ca-display\">0xHUMPCAT...1337<\/div>\n <button class=\"s5-ca-btn\" onclick=\"copyCA(this)\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg>\n Copy Contract Address\n <\/button>\n <\/div>\n\n <div class=\"socials reveal d3\">\n <a href=\"https:\/\/twitter.com\" target=\"_blank\" class=\"soc-btn\" rel=\"noopener\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.741l7.73-8.835L1.254 2.25H8.08l4.259 5.631L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\n Twitter \/ X\n <\/a>\n <a href=\"https:\/\/t.me\" target=\"_blank\" class=\"soc-btn\" rel=\"noopener\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M11.944 0A12 12 0 1 0 24 12 12.013 12.013 0 0 0 11.944 0zm3.952 7.6-2.026 9.547c-.144.674-.537.838-1.087.522l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.2-.657-.643.136-.953l11.561-4.458c.537-.194 1.006.131.901.657z\"\/><\/svg>\n Telegram\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/reel\/DbB_IPwsfb9\/\" target=\"_blank\" class=\"soc-btn\" rel=\"noopener\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162S8.597 18.163 12 18.163s6.162-2.759 6.162-6.162S15.403 5.838 12 5.838zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\n Instagram\n <\/a>\n <a href=\"https:\/\/dexscreener.com\" target=\"_blank\" class=\"soc-btn\" rel=\"noopener\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"\/><polyline points=\"16 7 22 7 22 13\"\/><\/svg>\n Chart\n <\/a>\n <\/div>\n\n <p class=\"s5-disclaimer reveal d4\">\n $HUMPCAT is a meme token with no intrinsic value or financial return expectation.\n Not financial advice. Always DYOR.\n <\/p>\n <\/div>\n<\/section>\n\n<footer>\n <span>\u00a9 2026 <span class=\"f-ticker\">$HUMPCAT<\/span><\/span>\n <span>Headset on. Full send. No regrets.<\/span>\n <span>Built on Solana<\/span>\n<\/footer>\n\n<script>\n \/* \u2500\u2500 CONFIG \u2500\u2500 *\/\n const CA = '0xHUMPCAT1337DeAdbEef0000FuLLSenD00001337'; \/\/ \u2190 replace with real CA\n const GIF_URL = 'http:\/\/humpingcat.lol\/wp-content\/uploads\/2026\/07\/mainimage.gif';\n const GAL_BASE = 'http:\/\/humpingcat.lol\/wp-content\/uploads\/2026\/07\/';\n\n \/* \u2500\u2500 CA DISPLAY \u2500\u2500 *\/\n const short = CA.slice(0,6) + '...' + CA.slice(-6);\n document.querySelectorAll('#ca-display, #s5-ca-display').forEach(el => el.textContent = short);\n\n \/* \u2500\u2500 COPY CA \u2500\u2500 *\/\n function copyCA(btn) {\n navigator.clipboard.writeText(CA).catch(()=>{\n const ta = document.createElement('textarea');\n ta.value = CA; document.body.appendChild(ta); ta.select();\n document.execCommand('copy'); ta.remove();\n });\n document.querySelectorAll('.ca-copy-btn, .s5-ca-btn').forEach(b => {\n b.classList.add('copied');\n setTimeout(() => b.classList.remove('copied'), 2000);\n });\n const t = document.getElementById('copy-toast');\n t.classList.add('show');\n setTimeout(() => t.classList.remove('show'), 2400);\n }\n\n \/* \u2500\u2500 NAV SOLID ON SCROLL \u2500\u2500 *\/\n const navbar = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n navbar.classList.toggle('solid', window.scrollY > 40);\n }, { passive: true });\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n HERO PINNED ZOOM\n The section is 300vh tall.\n Sticky child stays in view while we\n scroll through the extra 200vh.\n Progress 0\u21921 over that extra 200vh.\n GIF: circle 340px \u2192 fills screen.\n Text + CA strip: fade out over first 40%.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n const heroPin = document.getElementById('hero-pin');\n const gifImg = document.getElementById('hero-gif-img');\n const heroText = document.getElementById('hero-text-layout');\n const heroCAStrip = document.getElementById('hero-ca-strip');\n const scrollHint = document.querySelector('.hero-scroll-indicator');\n\n function lerp(a, b, t) { return a + (b - a) * t; }\n function clamp(v, lo, hi) { return Math.min(hi, Math.max(lo, v)); }\n function ease(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; }\n\n function updateHeroZoom() {\n const pinTop = heroPin.offsetTop;\n const pinH = heroPin.offsetHeight; \/\/ 300vh\n const vh = window.innerHeight;\n const scrolled = window.scrollY;\n const pinZone = pinH - vh; \/\/ the extra 200vh of scroll\n const rawProgress = (scrolled - pinTop) \/ pinZone;\n const p = clamp(rawProgress, 0, 1);\n const e = ease(p);\n\n \/* --- GIF SIZE --- *\/\n \/\/ Start: circle 340px, fully rounded (50%)\n \/\/ End: rectangle covering full viewport, border-radius 0\n const startW = 340, startH = 340;\n\n \/\/ Compute scale so image fills the viewport at p=1\n const endW = window.innerWidth;\n const endH = window.innerHeight;\n const scaleX = endW \/ startW;\n const scaleY = endH \/ startH;\n const maxScale = Math.max(scaleX, scaleY);\n\n const scale = lerp(1, maxScale, e);\n\n gifImg.style.transform = `scale(${scale})`;\n gifImg.style.opacity = '1'; \/\/ always visible\n\n \/* --- TEXT + CA FADE --- *\/\n const textFade = clamp(1 - p * 2.5, 0, 1);\n heroText.style.opacity = textFade;\n heroCAStrip.style.opacity = textFade;\n scrollHint.style.opacity = textFade * 0.3;\n\n \/* --- Prevent body scroll consuming events when zoom is fully in --- *\/\n \/\/ (pure CSS sticky handles the pin, nothing extra needed)\n }\n\n window.addEventListener('scroll', updateHeroZoom, { passive: true });\n updateHeroZoom();\n\n \/* \u2500\u2500 GALLERY CIRCLES \u2500\u2500 *\/\n const galWrap = document.getElementById('gallery-circles');\n for (let i = 1; i <= 8; i++) {\n const div = document.createElement('div');\n div.className = 'gallery-circ';\n div.innerHTML = `<img decoding=\"async\" src=\"${GAL_BASE}humpingcatgal${i}.png\" alt=\"Gallery ${i}\" loading=\"lazy\" \/>`;\n const src = `${GAL_BASE}humpingcatgal${i}.png`;\n div.addEventListener('click', () => { openLB(src); });\n galWrap.appendChild(div);\n }\n\n \/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n const lb = document.getElementById('lightbox');\n const lbImg = document.getElementById('lb-img');\n const lbClose = document.getElementById('lb-close');\n\n function openLB(src) {\n lbImg.src = src; lb.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n function closeLB() { lb.classList.remove('active'); document.body.style.overflow = ''; }\n lbClose.addEventListener('click', closeLB);\n lb.addEventListener('click', e => { if (e.target === lb) closeLB(); });\n document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLB(); });\n\n \/* \u2500\u2500 SECTION 4: SCATTERED CATS (fresh imgs, not hero) \u2500\u2500 *\/\n const catsCol = document.getElementById('s4-cats-col');\n const catDefs = [\n { size: 130, top: '5%', left: '10%', rot: -18 },\n { size: 95, top: '8%', left: '58%', rot: 12 },\n { size: 160, top: '28%', left: '30%', rot: -5 },\n { size: 80, top: '55%', left: '5%', rot: 22 },\n { size: 110, top: '60%', left: '55%', rot: -14 },\n { size: 70, top: '78%', left: '22%', rot: 8 },\n ];\n\n catDefs.forEach((def, i) => {\n const wrap = document.createElement('div');\n wrap.className = 'scattered-cat';\n wrap.style.cssText = `\n width:${def.size}px; height:${def.size}px;\n top:${def.top}; left:${def.left};\n transform: rotate(${def.rot}deg);\n animation: float-${i} ${3 + i*0.4}s ease-in-out infinite alternate;\n `;\n \/\/ Add individual keyframes\n const style = document.createElement('style');\n style.textContent = `\n @keyframes float-${i} {\n from { transform: rotate(${def.rot}deg) translateY(0px); }\n to { transform: rotate(${def.rot}deg) translateY(${-8 - i*2}px); }\n }\n `;\n document.head.appendChild(style);\n\n wrap.innerHTML = `<img decoding=\"async\" src=\"${GIF_URL}\" alt=\"HumpCat\" loading=\"lazy\" \/>`;\n catsCol.appendChild(wrap);\n });\n\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n const revEls = document.querySelectorAll('.reveal');\n const ro = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('in'); ro.unobserve(e.target); }\n });\n }, { threshold: 0.1 });\n revEls.forEach(el => ro.observe(el));\n\n \/* \u2500\u2500 GALLERY STAGGER ON ENTER \u2500\u2500 *\/\n const galItems = document.querySelectorAll('.gallery-circ');\n galItems.forEach((el, i) => {\n el.style.opacity = '0';\n el.style.transform = 'scale(0.8)';\n el.style.transition = `opacity 0.55s ${i * 0.06}s ease, transform 0.55s ${i * 0.06}s ease`;\n });\n const galObs = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.style.opacity = '1';\n e.target.style.transform = 'scale(1)';\n galObs.unobserve(e.target);\n }\n });\n }, { threshold: 0.1 });\n galItems.forEach(el => galObs.observe(el));\n<\/script>\n<\/body>\n<\/html>\n\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>$HUMPCAT \u2014 Headset On. Full Send. \u2713 Copied to clipboard \u00d7 HUMP\u25cfCAT Origin Gallery Manifesto Buy $HUMPCAT $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR  \u00b7  NO SHAME  \u00b7  $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR  \u00b7  NO SHAME  \u00b7  $HUMPCAT  \u00b7  HEADSET ON  \u00b7  FULL SEND  \u00b7  NO FEAR […]<\/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:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/humpingcat.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":49,"href":"https:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/humpingcat.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/humpingcat.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}