{"id":9,"date":"2026-07-31T03:55:20","date_gmt":"2026-07-31T03:55:20","guid":{"rendered":"https:\/\/spidermew.fun\/?page_id=9"},"modified":"2026-08-01T08:33:50","modified_gmt":"2026-08-01T08:33:50","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/spidermew.fun\/","title":{"rendered":"Elementor #9"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n\r\nSPIDERMEW \u2014 Spider Powers, Feline Charm<\/title>\r\n<\/head>\r\n<body style=\"margin:0\">\r\n\r\n<!-- ================== SPIDERMEW \u2014 SINGLE BLOCK (HTML + CSS + JS) ================== -->\r\n<div id=\"smew-root\">\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=Bowlby+One&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* ================= DESIGN TOKENS ================= *\/\r\n#smew-root{\r\n --blue-1:#132EA3;\r\n --blue-2:#0B2E84;\r\n --blue-deep:#071c56;\r\n --red:#A8120F;\r\n --red-dark:#7d0c0a;\r\n --ink:#050a1f;\r\n --paper:#ffffff;\r\n --muted:rgba(255,255,255,.72);\r\n --line:rgba(255,255,255,.16);\r\n --glass:rgba(255,255,255,.07);\r\n --radius:18px;\r\n --shadow:0 18px 50px -18px rgba(0,0,0,.75);\r\n --font-title:'Bowlby One',system-ui,sans-serif;\r\n --font-body:'Space Grotesk',system-ui,sans-serif;\r\n --nav-w:190px;\r\n font-family:var(--font-body);\r\n color:#fff;\r\n position:relative;\r\n overflow-x:clip;\r\n background:#0B2E84;\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\n#smew-root *,#smew-root *::before,#smew-root *::after{box-sizing:border-box}\r\n#smew-root h1,#smew-root h2,#smew-root h3,#smew-root h4{font-family:var(--font-title);font-weight:400;letter-spacing:.5px;margin:0;line-height:1.05;text-transform:uppercase}\r\n#smew-root p{margin:0}\r\n#smew-root img{display:block;max-width:100%}\r\n#smew-root a{text-decoration:none;color:inherit}\r\n\r\n\/* ================= LAYOUT ================= *\/\r\n#smew-root .smew-section{position:relative;isolation:isolate;overflow:hidden}\r\n#smew-root .smew-blue{background:radial-gradient(120% 120% at 50% 30%, #132EA3 0%, #0B2E84 62%, #08215f 100%)}\r\n#smew-root .smew-red{background:radial-gradient(120% 120% at 50% 30%, #c41713 0%, #A8120F 55%, #7d0c0a 100%)}\r\n#smew-root .smew-wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:22px}\r\n#smew-root .smew-pad{padding-block:clamp(64px,9vw,120px)}\r\n#smew-root .smew-shell{padding-left:0}\r\n@media(min-width:1100px){#smew-root .smew-shell{padding-left:var(--nav-w)}}\r\n\r\n\/* grain + web overlay *\/\r\n#smew-root .smew-section::after{\r\n content:\"\";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.35;\r\n background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);\r\n background-size:22px 22px;mix-blend-mode:overlay;\r\n}\r\n#smew-root .smew-inner{position:relative;z-index:2}\r\n\r\n\/* ================= SIDE NAV ================= *\/\r\n#smew-root .smew-sidenav{\r\n position:fixed;left:0;top:0;height:100vh;width:var(--nav-w);z-index:60;\r\n display:none;flex-direction:column;justify-content:center;gap:6px;\r\n padding:26px 16px;background:linear-gradient(180deg,rgba(5,12,45,.92),rgba(5,12,45,.75));\r\n border-right:1px solid var(--line);backdrop-filter:blur(14px);\r\n}\r\n@media(min-width:1100px){#smew-root .smew-sidenav{display:flex}}\r\n#smew-root .smew-sidenav .sn-brand{position:absolute;top:24px;left:16px;font-family:var(--font-title);font-size:13px;letter-spacing:2px;color:#fff}\r\n#smew-root .smew-sidenav .sn-brand span{color:#ff5f5c}\r\n#smew-root .sn-current{\r\n position:absolute;top:60px;left:16px;right:16px;font-family:var(--font-title);\r\n font-size:19px;line-height:1.15;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6);\r\n min-height:44px;transition:opacity .3s ease, transform .3s ease;\r\n}\r\n#smew-root .sn-current small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.5);margin-bottom:6px}\r\n#smew-root .sn-item{\r\n display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;\r\n font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.55);\r\n border:1px solid transparent;transition:.28s ease;cursor:pointer;background:none;font-family:var(--font-body);width:100%;text-align:left\r\n}\r\n#smew-root .sn-item i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:.28s}\r\n#smew-root .sn-item:hover{color:#fff;background:rgba(255,255,255,.07)}\r\n#smew-root .sn-item.active{color:#fff;background:linear-gradient(90deg,rgba(168,18,15,.85),rgba(168,18,15,.15));border-color:rgba(255,255,255,.2)}\r\n#smew-root .sn-item.active i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}\r\n#smew-root .sn-progress{position:absolute;bottom:26px;left:16px;right:16px;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}\r\n#smew-root .sn-progress b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff4b47,#fff)}\r\n\r\n\/* ================= NAVBAR ================= *\/\r\n#smew-root .smew-nav{\r\n position:fixed;top:14px;left:0;right:0;z-index:70;display:flex;justify-content:center;padding-inline:16px;\r\n pointer-events:none;\r\n}\r\n@media(min-width:1100px){#smew-root .smew-nav{left:var(--nav-w)}}\r\n#smew-root .smew-navbar{\r\n pointer-events:auto;display:flex;align-items:center;gap:18px;justify-content:space-between;\r\n width:min(980px,100%);padding:9px 9px 9px 18px;border-radius:99px;\r\n background:rgba(6,15,52,.62);border:1px solid rgba(255,255,255,.16);\r\n backdrop-filter:blur(16px);box-shadow:0 14px 40px -18px rgba(0,0,0,.9);\r\n transition:.35s ease;\r\n}\r\n#smew-root .smew-navbar.scrolled{background:rgba(6,15,52,.92);box-shadow:0 16px 44px -16px rgba(0,0,0,1)}\r\n#smew-root .nv-logo{font-family:var(--font-title);font-size:15px;letter-spacing:1px;white-space:nowrap}\r\n#smew-root .nv-logo span{color:#ff5f5c}\r\n#smew-root .nv-right{display:flex;align-items:center;gap:8px}\r\n\r\n\/* ================= BUTTONS (small) ================= *\/\r\n#smew-root .btn{\r\n display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;\r\n font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;\r\n border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;\r\n cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .25s ease;font-family:var(--font-body);\r\n white-space:nowrap;\r\n}\r\n#smew-root .btn svg{width:14px;height:14px;flex:none}\r\n#smew-root .btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}\r\n#smew-root .btn:active{transform:translateY(0) scale(.98)}\r\n#smew-root .btn-red{background:linear-gradient(135deg,#e0322e,#A8120F);border-color:rgba(255,255,255,.28);box-shadow:0 10px 26px -12px #A8120F}\r\n#smew-root .btn-red:hover{box-shadow:0 14px 30px -10px #e0322e}\r\n#smew-root .btn-white{background:#fff;color:#0B2E84;border-color:#fff}\r\n#smew-root .btn-white:hover{background:#eef2ff}\r\n#smew-root .btn-ghost{background:transparent}\r\n#smew-root .btn-blue{background:linear-gradient(135deg,#2547d6,#0B2E84);box-shadow:0 10px 26px -12px #071c56}\r\n\r\n\/* ================= HERO ================= *\/\r\n#smew-root .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:96px;background:#0B2E84}\r\n#smew-root .hero-fx{position:absolute;inset:0;z-index:0}\r\n#smew-root .hero-fx canvas{width:100%;height:100%;display:block}\r\n#smew-root .hero::before{content:\"\";position:absolute;inset:0;z-index:1;background:radial-gradient(90% 70% at 50% 25%, rgba(19,46,163,.25), rgba(11,46,132,.75) 60%, rgba(6,20,70,.95));pointer-events:none}\r\n#smew-root .parallax{position:relative;overflow:hidden;z-index:3;margin-top:8px}\r\n#smew-root .scroller{display:flex;white-space:nowrap;will-change:transform}\r\n#smew-root .scroller span{\r\n flex:none;font-family:var(--font-title);font-size:clamp(46px,10.5vw,150px);line-height:1;\r\n padding-right:.28em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);\r\n text-shadow:0 0 40px rgba(255,255,255,.15);\r\n}\r\n#smew-root .scroller.solid span{color:#fff;-webkit-text-stroke:0;text-shadow:0 12px 40px rgba(0,0,0,.45)}\r\n#smew-root .scroller.redline span{-webkit-text-stroke:2px rgba(255,255,255,.35);color:transparent}\r\n#smew-root .hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr;gap:26px;align-items:start;margin-top:26px}\r\n@media(min-width:880px){#smew-root .hero-grid{grid-template-columns:1.1fr .9fr;gap:490px}}\r\n#smew-root .hero-copy p{color:var(--muted);max-width:52ch;font-size:15px}\r\n#smew-root .hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(168,18,15,.9);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:14px}\r\n#smew-root .ca-card{\r\n background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));\r\n border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(10px);\r\n}\r\n#smew-root .ca-card h4{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.65);font-family:var(--font-body);text-transform:uppercase;margin-bottom:10px}\r\n#smew-root .ca-value{\r\n font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all;\r\n background:rgba(0,0,0,.35);border:1px dashed rgba(255,255,255,.22);border-radius:12px;padding:11px 12px;margin-bottom:12px;color:#dbe4ff\r\n}\r\n#smew-root .ca-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}\r\n#smew-root .ca-ok{font-size:11px;letter-spacing:1px;color:#8ef5b4;opacity:0;transition:.3s}\r\n#smew-root .ca-ok.on{opacity:1}\r\n\r\n\/* ================= HOVER BLUR FLASHLIGHT REVEAL (REVISED) ================= *\/\r\n#smew-root .reveal-stage{position:relative;z-index:20;display:flex;margin-top:-550px;margin-bottom:-60px;justify-content:center;pointer-events:none}\r\n#smew-root .ba{\r\n position:relative;width:min(680px,92%);aspect-ratio:1\/1;pointer-events:auto;\r\n cursor:crosshair;\r\n user-select:none;touch-action:none;margin-bottom:-6px;\r\n filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));\r\n}\r\n#smew-root .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none}\r\n#smew-root .ba .after-wrap{\r\n position:absolute;inset:0;\r\n opacity: 0; \/* Tersembunyi saat tidak di-hover *\/\r\n \/* Gradient blur: inti solid hitam di 30%, lalu memudar jadi transparan di 80% *\/\r\n -webkit-mask-image: radial-gradient(circle 440px at var(--mx, 50%) var(--my, 50%), black 30%, transparent 80%);\r\n mask-image: radial-gradient(circle 440px at var(--mx, 50%) var(--my, 50%), black 30%, transparent 80%);\r\n transition: opacity 0.35s ease;\r\n}\r\n#smew-root .ba:hover .after-wrap, \r\n#smew-root .ba:active .after-wrap {\r\n opacity: 1; \/* Muncul mulus saat cursor masuk *\/\r\n}\r\n\r\n#smew-root .hero-bottom{position:relative;z-index:25;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-bottom:22px;margin-top:8px}\r\n#smew-root .hero-bottom .grp{display:flex;gap:8px;flex-wrap:wrap}\r\n\r\n\/* ================= PURE CSS MARQUEE (REVISED: FIX FREEZE) ================= *\/\r\n#smew-root .marquee {\r\n position: relative;\r\n z-index: 30;\r\n overflow: hidden;\r\n display: flex;\r\n flex-wrap: nowrap;\r\n background: #fff;\r\n color: #0B2E84;\r\n border-block: 3px solid rgba(0,0,0,.15);\r\n padding: 14px 0;\r\n}\r\n#smew-root .marquee.red { background: var(--red); color: #fff; }\r\n#smew-root .marquee.blue { background: var(--blue-1); color: #fff; }\r\n#smew-root .marquee-track {\r\n display: flex;\r\n flex-shrink: 0;\r\n white-space: nowrap;\r\n animation: smew-marquee-anim 18s linear infinite;\r\n}\r\n#smew-root .marquee-track span {\r\n font-family: var(--font-title);\r\n font-size: clamp(16px, 2.1vw, 24px);\r\n padding-right: 40px;\r\n}\r\n@keyframes smew-marquee-anim {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-100%); }\r\n}\r\n\r\n\/* ================= CARDS ================= *\/\r\n#smew-root .card{\r\n position:relative;border-radius:22px;padding:22px;border:1px solid rgba(255,255,255,.2);\r\n background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));\r\n box-shadow:var(--shadow);backdrop-filter:blur(10px);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s\r\n}\r\n#smew-root .card:hover{transform:translateY(-6px);box-shadow:0 28px 60px -22px rgba(0,0,0,.85)}\r\n#smew-root .card-dark{background:linear-gradient(160deg,rgba(6,16,55,.85),rgba(6,16,55,.55))}\r\n#smew-root .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.75);border:1px solid var(--line);padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.2);margin-bottom:16px}\r\n#smew-root .h2{font-size:clamp(28px,4.6vw,54px)}\r\n#smew-root .lead{color:rgba(255,255,255,.82);font-size:15px}\r\n\r\n\/* ================= ABOUT ================= *\/\r\n#smew-root .hang-top{position:relative;z-index:40;display:flex;justify-content:center;margin-top:-15px;margin-bottom:-120px;pointer-events:none}\r\n#smew-root .hang-top img{width:min(300px,46vw);transform-origin:50% 0%;animation:smew-swing 2.4s ease-in-out infinite;filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}\r\n@keyframes smew-swing{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}\r\n#smew-root .about-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch}\r\n@media(min-width:880px){#smew-root .about-grid{grid-template-columns:1fr 1fr}}\r\n#smew-root .video-card{padding:12px;overflow:hidden}\r\n#smew-root .video-card video{width:100%;border-radius:14px;display:block;aspect-ratio:1\/1;object-fit:cover;background:#000}\r\n#smew-root .stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}\r\n#smew-root .stat{flex:1 1 130px;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(0,0,0,.22)}\r\n#smew-root .stat b{display:block;font-family:var(--font-title);font-size:20px}\r\n#smew-root .stat small{font-size:10px;letter-spacing:2px;opacity:.7;text-transform:uppercase}\r\n\r\n\/* ================= LORE ================= *\/\r\n#smew-root .lore{text-align:center;padding-bottom:0}\r\n#smew-root .lore .lead{margin-inline:auto;max-width:62ch}\r\n#smew-root .hang-bottom{position:relative;z-index:15;display:flex;justify-content:center;margin-top:34px;margin-bottom:-4px}\r\n#smew-root .hang-bottom img{width:min(360px,88%);filter:drop-shadow(0 -8px 40px rgba(0,0,0,.45))}\r\n\r\n\/* ================= TOKENOMICS (Circular Carousel) ================= *\/\r\n#smew-root .sm-tokeno {\r\n background: radial-gradient(circle at 50% 40%, var(--blue-1) 0%, var(--blue-2) 55%, var(--blue-deep) 100%);\r\n padding: 140px 0; \r\n text-align: center; \r\n position: relative; \r\n overflow: hidden;\r\n}\r\n#smew-root .sm-tokeno::before {\r\n content: \"\"; position: absolute; inset: 0; z-index: 0; opacity: 0.3;\r\n background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.5) 1px, transparent 0);\r\n background-size: 22px 22px;\r\n mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);\r\n -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);\r\n}\r\n#smew-root .sm-tokeno .smew-wrap { position: relative; z-index: 2; }\r\n#smew-root .sm-tokeno .chapter {\r\n font-family: 'JetBrains Mono', monospace, sans-serif; font-size: 11px;\r\n letter-spacing: .3em; text-transform: uppercase;\r\n color: #f5eee2; opacity: .7; margin-bottom: 18px;\r\n}\r\n#smew-root .sm-tokeno h2 {\r\n font-size: clamp(48px, 6vw, 90px); color: #f5eee2;\r\n margin-bottom: 14px;\r\n}\r\n#smew-root .sm-tokeno .sub {\r\n font-size: 16px; color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 60px;\r\n}\r\n#smew-root .sm-carousel {\r\n position: relative; height: 420px; perspective: 1200px;\r\n margin: 0 auto; max-width: 900px;\r\n}\r\n#smew-root .sm-carousel-track {\r\n position: absolute; inset: 0; transform-style: preserve-3d;\r\n}\r\n#smew-root .sm-card {\r\n position: absolute; left: 50%; top: 50%;\r\n width: 280px; height: 180px;\r\n margin-left: -140px; margin-top: -90px;\r\n background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));\r\n border: 1px solid rgba(255,255,255,0.15);\r\n border-radius: 20px; padding: 22px; text-align: left;\r\n backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);\r\n transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s, box-shadow .6s;\r\n cursor: pointer;\r\n display: flex; flex-direction: column; justify-content: space-between;\r\n}\r\n#smew-root .sm-card.active {\r\n box-shadow: 0 30px 80px -20px rgba(232,26,20,0.5), 0 0 0 2px rgba(232,26,20,0.6);\r\n background: linear-gradient(160deg, rgba(232,26,20,0.15), rgba(0,0,0,0.5));\r\n}\r\n#smew-root .sm-card .tag {\r\n font-family: 'JetBrains Mono', monospace, sans-serif; font-size: 9px;\r\n letter-spacing: .2em; text-transform: uppercase;\r\n color: #f5eee2; background: rgba(0,0,0,0.4);\r\n padding: 4px 10px; border-radius: 999px; align-self: flex-start;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n}\r\n#smew-root .sm-card h4 {\r\n font-family: 'Bowlby One'; font-size: 22px; color: #f5eee2;\r\n margin-top: 12px; line-height: 1.1; letter-spacing: 0; text-transform: none;\r\n}\r\n#smew-root .sm-card p {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.7);\r\n margin-top: 6px; text-transform: none; letter-spacing: 0;\r\n}\r\n#smew-root .sm-carousel-center {\r\n position: absolute; left: 50%; top: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center; pointer-events: none;\r\n z-index: 1;\r\n}\r\n#smew-root .sm-carousel-center .num {\r\n font-family: 'Bowlby One'; font-size: 80px; color: transparent;\r\n -webkit-text-stroke: 1.5px rgba(255,255,255,0.25);\r\n line-height: 1; letter-spacing: 0;\r\n}\r\n#smew-root .sm-carousel-center .of {\r\n font-family: 'JetBrains Mono', monospace, sans-serif; font-size: 11px;\r\n letter-spacing: .3em; color: rgba(255,255,255,0.5);\r\n margin-top: 6px; text-transform: uppercase;\r\n}\r\n#smew-root .sm-carousel-controls {\r\n display: flex; align-items: center; justify-content: center;\r\n gap: 16px; margin-top: 40px; position: relative; z-index: 10;\r\n}\r\n#smew-root .sm-carousel-btn {\r\n width: 44px; height: 44px; border-radius: 50%;\r\n background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);\r\n color: #f5eee2; font-size: 14px;\r\n transition: all .3s; display: flex; align-items: center; justify-content: center;\r\n}\r\n#smew-root .sm-carousel-btn:hover { background: var(--red); border-color: var(--red); transform: scale(1.1); }\r\n#smew-root .sm-dots { display: flex; gap: 6px; }\r\n#smew-root .sm-dot {\r\n width: 6px; height: 6px; border-radius: 999px;\r\n background: rgba(255,255,255,0.2); transition: all .3s; cursor: pointer;\r\n border: none; padding: 0;\r\n}\r\n#smew-root .sm-dot.active { background: #f5eee2; width: 24px; }\r\n\r\n\/* ================= CHART ================= *\/\r\n#smew-root .chart-frame{\r\n position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);\r\n background:#0a0a0f;box-shadow:var(--shadow);height:clamp(380px,60vh,620px);margin-top:26px\r\n}\r\n#smew-root .chart-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.05)}\r\n#smew-root .chart-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:#0a0a0f;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6)}\r\n#smew-root .live-dot{width:7px;height:7px;border-radius:50%;background:#28e07a;box-shadow:0 0 0 0 rgba(40,224,122,.6);animation:smew-pulse 1.8s infinite}\r\n@keyframes smew-pulse{70%{box-shadow:0 0 0 10px rgba(40,224,122,0)}100%{box-shadow:0 0 0 0 rgba(40,224,122,0)}}\r\n\r\n\/* ================= COMMUNITY ================= *\/\r\n#smew-root .comm-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:end}\r\n@media(min-width:880px){#smew-root .comm-grid{grid-template-columns:1fr 1fr}}\r\n#smew-root .comm-img{display:flex;justify-content:center;align-items:flex-end;margin-bottom:calc(-1 * clamp(64px,9vw,120px))}\r\n#smew-root .comm-img img{width:min(520px,100%);filter:drop-shadow(0 -10px 40px rgba(0,0,0,.4))}\r\n\r\n\/* ================= FOOTER ================= *\/\r\n#smew-root .footer{background:#050d2c;padding-block:46px 26px;position:relative;z-index:5}\r\n#smew-root .f-grid{display:grid;grid-template-columns:1fr;gap:26px}\r\n@media(min-width:760px){#smew-root .f-grid{grid-template-columns:1.4fr 1fr 1fr}}\r\n#smew-root .footer h5{font-family:var(--font-title);font-size:12px;letter-spacing:2px;margin-bottom:12px;color:#fff}\r\n#smew-root .footer p,#smew-root .footer a{font-size:13px;color:rgba(255,255,255,.6)}\r\n#smew-root .footer a{display:block;padding:4px 0;transition:.2s}\r\n#smew-root .footer a:hover{color:#fff;transform:translateX(3px)}\r\n#smew-root .f-bottom{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.45)}\r\n#smew-root .f-logo{font-family:var(--font-title);font-size:26px}\r\n#smew-root .f-logo span{color:#ff5f5c}\r\n\r\n\/* reveal on scroll *\/\r\n#smew-root .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}\r\n#smew-root .rv.in{opacity:1;transform:none}\r\n@media (prefers-reduced-motion: reduce){#smew-root *{animation:none!important;transition:none!important}}\r\n<\/style>\r\n\r\n<!-- ============ SIDE NAV ============ -->\r\n<aside class=\"smew-sidenav\" aria-label=\"Section navigation\">\r\n <div class=\"sn-brand\">SPIDER<span>MEW<\/span><\/div>\r\n <div class=\"sn-current\" id=\"snCurrent\"><small>SECTION<\/small><em style=\"font-style:normal\" id=\"snCurrentTxt\">Hero<\/em><\/div>\r\n <nav id=\"snList\" style=\"margin-top:40px\">\r\n <button class=\"sn-item\" data-go=\"hero\"><i><\/i>Hero<\/button>\r\n <button class=\"sn-item\" data-go=\"about\"><i><\/i>About<\/button>\r\n <button class=\"sn-item\" data-go=\"lore\"><i><\/i>Lore<\/button>\r\n <button class=\"sn-item\" data-go=\"tokenomics\"><i><\/i>Tokenomics<\/button>\r\n <button class=\"sn-item\" data-go=\"chart\"><i><\/i>Live Chart<\/button>\r\n <button class=\"sn-item\" data-go=\"community\"><i><\/i>Community<\/button>\r\n <\/nav>\r\n <div class=\"sn-progress\"><b id=\"snBar\"><\/b><\/div>\r\n<\/aside>\r\n\r\n<!-- ============ NAVBAR ============ -->\r\n<div class=\"smew-nav\">\r\n <div class=\"smew-navbar\" id=\"navbar\">\r\n <div class=\"nv-logo\">SPIDER<span>MEW<\/span><\/div>\r\n <div class=\"nv-right\">\r\n <a class=\"btn btn-ghost\" href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener\">X<\/a>\r\n <a class=\"btn btn-red\" href=\"#smew-chart\">Buy Now<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"smew-shell\">\r\n\r\n<!-- ============ HERO ============ -->\r\n<section class=\"smew-section hero\" id=\"smew-hero\" data-sec=\"hero\" data-name=\"Hero\">\r\n <div class=\"hero-fx\"><canvas id=\"ferro\"><\/canvas><\/div>\r\n\r\n <div class=\"smew-inner\">\r\n <div class=\"parallax\">\r\n <div class=\"scroller solid\" data-vel=\"90\"><span>SPIDERMEW \ud83d\udd78\ufe0f <\/span><\/div>\r\n <\/div>\r\n <div class=\"parallax\">\r\n <div class=\"scroller redline\" data-vel=\"-70\"><span>SPIDER POWERS. FELINE CHARM. \ud83d\udc3e <\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"smew-wrap\">\r\n <div class=\"hero-grid\">\r\n <div class=\"hero-copy rv\">\r\n <span class=\"hero-tag\">\ud83d\udd77\ufe0f Venomous bite. Feline DNA. One hero.<\/span>\r\n <p>Mew was an ordinary cat until a venomous spider bite fused spider DNA with his feline DNA. SpiderMew was born with web-slinging powers, razor-sharp instincts, and irresistible feline charm.<\/p>\r\n <\/div>\r\n <div class=\"ca-card rv\">\r\n <h4>Contract Address<\/h4>\r\n <div class=\"ca-value\" id=\"caText\">SpiDerMeW1111111111111111111111111111pump<\/div>\r\n <div class=\"ca-row\">\r\n <button class=\"btn btn-red\" id=\"copyCa\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\r\n Copy CA\r\n <\/button>\r\n <span class=\"ca-ok\" id=\"caOk\">Web secured \u2713<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- HOVER REVEAL BEFORE \/ AFTER (UPDATED) -->\r\n <div class=\"reveal-stage\">\r\n <div class=\"ba\" id=\"ba\">\r\n <img decoding=\"async\" src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/Asset-9.png\" alt=\"Mew before the venomous bite\">\r\n <div class=\"after-wrap\" id=\"baAfter\">\r\n <img decoding=\"async\" src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/Asset-10.png\" alt=\"SpiderMew after the DNA fusion\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"smew-wrap\">\r\n <div class=\"hero-bottom\">\r\n <div class=\"grp\">\r\n <a class=\"btn\" href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener\">\ud83d\udc26 Twitter<\/a>\r\n <a class=\"btn\" href=\"https:\/\/t.me\" target=\"_blank\" rel=\"noopener\">\u2708\ufe0f Telegram<\/a>\r\n <\/div>\r\n <div class=\"grp\">\r\n <a class=\"btn btn-white\" href=\"#smew-chart\">\ud83d\udcc8 Chart<\/a>\r\n <a class=\"btn btn-red\" href=\"#smew-chart\">Buy Now<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ MARQUEE (PURE CSS - FIXED) ============ -->\r\n<div class=\"marquee\">\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ ABOUT ============ -->\r\n<section class=\"smew-section smew-red\" id=\"smew-about\" data-sec=\"about\" data-name=\"About\">\r\n <div class=\"hang-top\"><img decoding=\"async\" src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/Asset-6.png\" alt=\"Spidermew hanging from a web\"><\/div>\r\n <div class=\"smew-inner smew-wrap smew-pad\" style=\"padding-top:24px\">\r\n <div class=\"about-grid\">\r\n <div class=\"card video-card rv\">\r\n <video src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/fasgo.mp4\" autoplay muted loop playsinline><\/video>\r\n <\/div>\r\n <div class=\"card rv\">\r\n <span class=\"eyebrow\">\ud83d\udd78\ufe0f The Cat Behind the Mask<\/span>\r\n <h2 class=\"h2\">Meet The Cat<br>With Spider Powers<\/h2>\r\n <p class=\"lead\" style=\"margin-top:14px\">$SPIDERMEW is what happens when spider power meets feline cuteness. Fast, fearless, curious, and always ready to swing into the next adventure.<\/p>\r\n <div class=\"stat-row\">\r\n <div class=\"stat\"><b>1B<\/b><small>Total Supply<\/small><\/div>\r\n <div class=\"stat\"><b>0%<\/b><small>Buy \/ Sell Tax<\/small><\/div>\r\n <div class=\"stat\"><b>100%<\/b><small>Community<\/small><\/div>\r\n <\/div>\r\n <div class=\"ca-row\" style=\"margin-top:18px\">\r\n <a class=\"btn btn-white\" href=\"#smew-tokenomics\">Tokenomics<\/a>\r\n <a class=\"btn btn-ghost\" href=\"#smew-lore\">Read the lore<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ LORE ============ -->\r\n<section class=\"smew-section smew-red lore\" id=\"smew-lore\" data-sec=\"lore\" data-name=\"Lore\">\r\n <div class=\"smew-inner smew-wrap smew-pad\" style=\"padding-bottom:0\">\r\n <div class=\"rv\" style=\"text-align:center\">\r\n <span class=\"eyebrow\">\ud83d\udd77\ufe0f The Origin of SpiderMew<\/span>\r\n <h2 class=\"h2\">The Bite That<br>Changed Mew Forever<\/h2>\r\n <p class=\"lead\" style=\"margin-top:16px\">Mew was exploring the city when a venomous spider struck. The spider DNA fused with his feline DNA and transformed him into SpiderMew.\r\n\r\nHe gained spider strength, lightning-fast reflexes, wall-crawling abilities, and the power to shoot webs.\r\n\r\nBut beneath the mask, he is still Mew\u2014curious, playful, and impossibly cute.\r\n\r\nNow he swings across the city, protects his community, and proves that even the smallest paws can carry great power.<\/p>\r\n <div class=\"ca-row\" style=\"justify-content:center;margin-top:18px\">\r\n <a class=\"btn btn-white\" href=\"#smew-community\">Join SpiderMew<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hang-bottom rv\"><img decoding=\"async\" src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/Asset-7.png\" alt=\"Spidermew swinging through the city\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ MARQUEE (PURE CSS - FIXED) ============ -->\r\n<div class=\"marquee red\">\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ TOKENOMICS ============ -->\r\n<section class=\"sm-tokeno smew-section\" id=\"smew-tokenomics\" data-sec=\"tokenomics\" data-name=\"Tokenomics\">\r\n <div class=\"smew-wrap\">\r\n <div class=\"chapter rv\">\u2014 Chapter 03 \u00b7 Inside The Web<\/div>\r\n <h2 class=\"rv\">Tokenomics<\/h2>\r\n <p class=\"sub rv\">A simple look at the supply, safety, and community-powered foundation of $SPIDERMEW.<\/p>\r\n \r\n <div class=\"sm-carousel rv\" id=\"sm-carousel\">\r\n <div class=\"sm-carousel-track\" id=\"sm-track\"><\/div>\r\n <div class=\"sm-carousel-center\">\r\n <div class=\"num\" id=\"sm-carousel-num\">01<\/div>\r\n <div class=\"of\">of 06<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"sm-carousel-controls rv\">\r\n <button class=\"sm-carousel-btn\" id=\"sm-prev\" aria-label=\"Previous\"><i class=\"fa-solid fa-chevron-left\"><\/i><\/button>\r\n <div class=\"sm-dots\" id=\"sm-dots\"><\/div>\r\n <button class=\"sm-carousel-btn\" id=\"sm-next\" aria-label=\"Next\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ LIVE CHART ============ -->\r\n<section class=\"smew-section smew-blue\" id=\"smew-chart\" data-sec=\"chart\" data-name=\"Live Chart\">\r\n <div class=\"smew-inner smew-wrap smew-pad\" style=\"text-align:center\">\r\n <div class=\"rv\">\r\n <span class=\"eyebrow\">\ud83d\udcc8 Spider-Sense Market Watch<\/span>\r\n <h2 class=\"h2\">Live Chart<\/h2>\r\n <p class=\"lead\" style=\"margin:14px auto 0;max-width:56ch\">Spider-sense on. Follow every move of $SPIDERMEW and watch the web grow in real time.<\/p>\r\n <\/div>\r\n <div class=\"chart-frame rv\">\r\n <div class=\"chart-bar\"><span><i class=\"live-dot\" style=\"display:inline-block;margin-right:8px\"><\/i>Live \u2022 $SPIDERMEW<\/span><span>Dexscreener<\/span><\/div>\r\n <iframe src=\"https:\/\/dexscreener.com\/?embed=1&theme=dark&trades=0&info=0\" title=\"Live chart\" loading=\"lazy\" style=\"height:calc(100% - 37px)\"><\/iframe>\r\n <\/div>\r\n <div class=\"ca-row rv\" style=\"justify-content:center;margin-top:16px\">\r\n <a class=\"btn btn-white\" href=\"https:\/\/dexscreener.com\/\" target=\"_blank\" rel=\"noopener\">Open Dexscreener<\/a>\r\n <a class=\"btn btn-red\" href=\"https:\/\/dexscreener.com\/\" target=\"_blank\" rel=\"noopener\">Buy Now<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ MARQUEE (PURE CSS - FIXED) ============ -->\r\n<div class=\"marquee\">\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n <div class=\"marquee-track\">\r\n <span>$SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f $SPIDERMEW \ud83d\udd78\ufe0f<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ============ COMMUNITY ============ -->\r\n<section class=\"smew-section smew-red\" id=\"smew-community\" data-sec=\"community\" data-name=\"Community\">\r\n <div class=\"smew-inner smew-wrap smew-pad\">\r\n <div class=\"comm-grid\">\r\n <div class=\"rv\">\r\n <span class=\"eyebrow\">\ud83d\udd78\ufe0f Join the SpiderMew Crew<\/span>\r\n <h2 class=\"h2\">Swing Into<br>The Community<\/h2>\r\n <p class=\"lead\" style=\"margin-top:14px;max-width:46ch\">Join the cats, web-slingers, and meme believers building SpiderMew together. Follow the mission, share the story, and swing with the community.<\/p>\r\n <div class=\"ca-row\" style=\"margin-top:18px\">\r\n <a class=\"btn btn-white\" href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener\">X \/ Twitter<\/a>\r\n <a class=\"btn btn-blue\" href=\"https:\/\/t.me\" target=\"_blank\" rel=\"noopener\">Telegram Community<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"comm-img rv\"><img decoding=\"async\" src=\"https:\/\/spidermew.fun\/wp-content\/uploads\/2026\/07\/Asset-8.png\" alt=\"Spidermew community\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============ FOOTER ============ -->\r\n<footer class=\"footer\">\r\n <div class=\"smew-wrap\">\r\n <div class=\"f-grid\">\r\n <div>\r\n <div class=\"f-logo\">SPIDER<span>MEW<\/span><\/div>\r\n <p style=\"margin-top:10px;max-width:38ch\">Born from a venomous bite, powered by spider DNA, and wrapped in unstoppable feline cuteness.<\/p>\r\n <div class=\"ca-row\" style=\"margin-top:14px\">\r\n <a class=\"btn btn-red\" href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener\">X<\/a>\r\n <a class=\"btn\" href=\"https:\/\/t.me\" target=\"_blank\" rel=\"noopener\">Telegram<\/a>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <h5>Navigate<\/h5>\r\n <a href=\"#smew-hero\">Home<\/a><a href=\"#smew-about\">About<\/a><a href=\"#smew-lore\">Lore<\/a><a href=\"#smew-tokenomics\">Tokenomics<\/a>\r\n <\/div>\r\n <div>\r\n <h5>Resources<\/h5>\r\n <a href=\"#smew-chart\">Live Chart<\/a><a href=\"https:\/\/dexscreener.com\/\" target=\"_blank\" rel=\"noopener\">Dexscreener<\/a><a href=\"#smew-community\">Community<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"f-bottom\">\r\n <span>\u00a9 2026 $SPIDERMEW. All webs reserved.<\/span>\r\n <span>Memes only. Not financial advice.<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\r\n<\/div><!-- \/shell -->\r\n<\/div><!-- \/#smew-root -->\r\n\r\n<script>\r\n(function(){\r\n var root = document.getElementById('smew-root');\r\n if(!root || root.dataset.init) return; root.dataset.init = '1';\r\n\r\n \/* ---------- SCROLL VELOCITY TITLE ---------- *\/\r\n (function(){\r\n var scrollers = [].slice.call(root.querySelectorAll('.scroller'));\r\n if(!scrollers.length) return;\r\n var state = scrollers.map(function(el){\r\n var base = el.querySelector('span'), html = base.outerHTML;\r\n el.innerHTML = new Array(8).fill(html).join('');\r\n return { el: el, x: 0, w: 0, vel: parseFloat(el.dataset.vel)||80, dir: 1 };\r\n });\r\n function measure(){ state.forEach(function(s){ s.w = s.el.firstElementChild.getBoundingClientRect().width; }); }\r\n measure(); window.addEventListener('resize', measure);\r\n\r\n var lastY = window.scrollY, smooth = 0, last = performance.now();\r\n function wrap(min,max,v){ var r=max-min, m=(((v-min)%r)+r)%r; return m+min; }\r\n function frame(now){\r\n var dt = Math.min(50, now-last)\/1000; last = now;\r\n var y = window.scrollY, raw = (y-lastY)\/Math.max(dt,0.001); lastY = y;\r\n smooth += (raw - smooth) * Math.min(1, dt*8);\r\n var factor = Math.max(-5, Math.min(5, smooth\/220));\r\n state.forEach(function(s){\r\n if(!s.w) return;\r\n if(factor < 0) s.dir = -1; else if(factor > 0) s.dir = 1;\r\n var move = s.dir * s.vel * dt;\r\n move += s.dir * move * Math.abs(factor);\r\n s.x = wrap(-s.w, 0, s.x + move);\r\n s.el.style.transform = 'translate3d('+s.x+'px,0,0)';\r\n });\r\n requestAnimationFrame(frame);\r\n }\r\n requestAnimationFrame(frame);\r\n })();\r\n\r\n \/* ---------- FERROFLUID (WebGL, no deps) ---------- *\/\r\n (function(){\r\n var canvas = document.getElementById('ferro');\r\n if(!canvas) return;\r\n var gl = canvas.getContext('webgl', {alpha:true, antialias:true, premultipliedAlpha:false});\r\n if(!gl){ canvas.parentNode.style.background='radial-gradient(circle at 50% 40%,#132EA3,#0B2E84)'; return; }\r\n\r\n var vs = 'attribute vec2 position;void main(){gl_Position=vec4(position,0.0,1.0);}';\r\n var fs = [\r\n'precision highp float;',\r\n'uniform vec3 iResolution;uniform vec2 iMouse;uniform float iTime;',\r\n'uniform vec3 uColor0;uniform vec3 uColor1;uniform vec3 uColor2;uniform int uColorCount;',\r\n'uniform vec2 uFlow;uniform float uSpeed;uniform float uScale;uniform float uTurbulence;uniform float uFluidity;',\r\n'uniform float uRimWidth;uniform float uSharpness;uniform float uShimmer;uniform float uGlow;uniform float uOpacity;',\r\n'uniform float uMouseEnabled;uniform float uMouseStrength;uniform float uMouseRadius;',\r\n'#define PI 3.14159265',\r\n'vec3 palette(float h){int c=uColorCount;if(c<1)c=1;int i=int(floor(clamp(h,0.0,0.999999)*float(c)));if(i<=0)return uColor0;if(i==1)return uColor1;return uColor2;}',\r\n'float hash(vec3 p3){p3=fract(p3*0.1031);p3+=dot(p3,p3.zyx+33.33);return fract((p3.x+p3.y)*p3.z);}',\r\n'float smin(float a,float b,float k){float r=exp2(-a\/k)+exp2(-b\/k);return -k*log2(r);}',\r\n'float sinlerp(float a,float b,float w){return mix(a,b,(sin(w*PI-PI\/2.0)+1.0)\/2.0);}',\r\n'float vn(vec2 p,float s,float seed){vec2 cp=floor(p\/s);vec2 rp=mod(p,s);float g1=hash(vec3(cp,seed));float g2=hash(vec3(cp.x+1.0,cp.y,seed));float g3=hash(vec3(cp.x+1.0,cp.y+1.0,seed));float g4=hash(vec3(cp.x,cp.y+1.0,seed));float bx=sinlerp(g1,g2,rp.x\/s);float tx=sinlerp(g4,g3,rp.x\/s);return sinlerp(bx,tx,rp.y\/s);}',\r\n'float dbn(vec2 p,float s,float seed){float o=s\/2.0;float n0=vn(p,s,seed);float n1=vn(p+vec2(o,o),s,seed+0.1);float n2=vn(p+vec2(-o,o),s,seed+0.2);float n3=vn(p+vec2(o,-o),s,seed+0.3);float n4=vn(p+vec2(-o,-o),s,seed+0.4);return (2.0*n0+1.5*n1+1.25*n2+1.125*n3+n4)\/7.0;}',\r\n'void main(){',\r\n' vec2 fragCoord=gl_FragCoord.xy;',\r\n' float ref=700.0\/max(uScale,0.05);',\r\n' vec2 p=fragCoord\/iResolution.y*ref;',\r\n' float spd=200.0*uSpeed;float t=iTime;',\r\n' vec2 dir=uFlow;vec2 perp=vec2(-dir.y,dir.x);',\r\n' float d1=vn(p+perp*(t*spd),60.0,10.0)*50.0*uTurbulence;',\r\n' float d2=vn(p-perp*(t*spd),120.0,15.0)*100.0*uTurbulence;',\r\n' float pk=dbn(p+d1+dir*(t*spd*0.5),40.0,1.0);',\r\n' float pk2=dbn(p+d2-dir*(t*spd*0.5),40.0,0.0);',\r\n' float ma=smin(pk,pk2,max(uFluidity,0.001));',\r\n' float mG=0.0;',\r\n' if(uMouseEnabled>0.5){vec2 mp=iMouse\/iResolution.y*ref;float md=length(p-mp)\/ref;float rr=max(uMouseRadius,0.02);mG=exp(-md*md\/(rr*rr))*uMouseStrength;}',\r\n' float band=(uRimWidth-abs((ma-0.4)*2.0))*5.0;',\r\n' float ltn=clamp(band-vn(p+dir*(t*spd*0.5),60.0,12.0)*uShimmer,0.0,1.0);',\r\n' ltn=pow(ltn,uSharpness)*uGlow;ltn*=clamp(1.0-mG,0.0,1.0);',\r\n' float h=clamp(0.5+(pk-pk2)*0.8,0.0,1.0);',\r\n' vec3 col=palette(h);vec3 o=col*ltn;',\r\n' float a=clamp(max(o.r,max(o.g,o.b)),0.0,1.0);',\r\n' gl_FragColor=vec4(o,a*uOpacity);',\r\n'}'].join('\\n');\r\n\r\n function sh(type, src){ var s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); return s; }\r\n var prog = gl.createProgram();\r\n gl.attachShader(prog, sh(gl.VERTEX_SHADER, vs));\r\n gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, fs));\r\n gl.linkProgram(prog); gl.useProgram(prog);\r\n\r\n var buf = gl.createBuffer();\r\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,3,-1,-1,3]), gl.STATIC_DRAW);\r\n var loc = gl.getAttribLocation(prog,'position');\r\n gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);\r\n gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\r\n gl.clearColor(0,0,0,0);\r\n\r\n function U(n){ return gl.getUniformLocation(prog,n); }\r\n function hex(h){ h=h.replace('#',''); return [parseInt(h.slice(0,2),16)\/255,parseInt(h.slice(2,4),16)\/255,parseInt(h.slice(4,6),16)\/255]; }\r\n gl.uniform3fv(U('uColor0'), hex('#ffffff'));\r\n gl.uniform3fv(U('uColor1'), hex('#7FA0FF'));\r\n gl.uniform3fv(U('uColor2'), hex('#FF5F5C'));\r\n gl.uniform1i(U('uColorCount'), 3);\r\n gl.uniform2f(U('uFlow'), 0, -1);\r\n gl.uniform1f(U('uSpeed'), 0.5);\r\n gl.uniform1f(U('uScale'), 1.6);\r\n gl.uniform1f(U('uTurbulence'), 1);\r\n gl.uniform1f(U('uFluidity'), 0.1);\r\n gl.uniform1f(U('uRimWidth'), 0.2);\r\n gl.uniform1f(U('uSharpness'), 2.5);\r\n gl.uniform1f(U('uShimmer'), 1.5);\r\n gl.uniform1f(U('uGlow'), 2);\r\n gl.uniform1f(U('uOpacity'), 0.9);\r\n gl.uniform1f(U('uMouseEnabled'), 1);\r\n gl.uniform1f(U('uMouseStrength'), 1);\r\n gl.uniform1f(U('uMouseRadius'), 0.35);\r\n\r\n var uRes=U('iResolution'), uTime=U('iTime'), uMouse=U('iMouse');\r\n var dpr = Math.min(window.devicePixelRatio||1, 1.75);\r\n var target=[0,0], cur=[0,0];\r\n\r\n function resize(){\r\n var r = canvas.parentNode.getBoundingClientRect();\r\n canvas.width = Math.max(1, Math.floor(r.width*dpr));\r\n canvas.height = Math.max(1, Math.floor(r.height*dpr));\r\n gl.viewport(0,0,canvas.width,canvas.height);\r\n gl.uniform3f(uRes, canvas.width, canvas.height, 1);\r\n }\r\n resize();\r\n if(window.ResizeObserver) new ResizeObserver(resize).observe(canvas.parentNode);\r\n else window.addEventListener('resize', resize);\r\n\r\n canvas.parentNode.addEventListener('pointermove', function(e){\r\n var r = canvas.getBoundingClientRect();\r\n target = [(e.clientX-r.left)*dpr, (r.height-(e.clientY-r.top))*dpr];\r\n });\r\n\r\n var visible = true, hero = document.getElementById('smew-hero');\r\n if(window.IntersectionObserver) new IntersectionObserver(function(en){ visible = en[0].isIntersecting; },{threshold:0}).observe(hero);\r\n\r\n var lt = 0;\r\n function loop(t){\r\n requestAnimationFrame(loop);\r\n if(!visible) { lt = t; return; }\r\n var dt = lt ? (t-lt)\/1000 : 0; lt = t;\r\n var f = 1 - Math.exp(-dt\/0.15);\r\n cur[0] += (target[0]-cur[0])*f; cur[1] += (target[1]-cur[1])*f;\r\n gl.uniform2f(uMouse, cur[0], cur[1]);\r\n gl.uniform1f(uTime, t*0.001);\r\n gl.clear(gl.COLOR_BUFFER_BIT);\r\n gl.drawArrays(gl.TRIANGLES,0,3);\r\n }\r\n requestAnimationFrame(loop);\r\n })();\r\n\r\n \/* ---------- FLASHLIGHT REVEAL HOVER (UPDATED) ---------- *\/\r\n (function(){\r\n const ba = document.getElementById('ba');\r\n if(!ba) return;\r\n\r\n function updateLight(e) {\r\n const rect = ba.getBoundingClientRect();\r\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\r\n const clientY = e.touches ? e.touches[0].clientY : e.clientY;\r\n \r\n const x = ((clientX - rect.left) \/ rect.width) * 100;\r\n const y = ((clientY - rect.top) \/ rect.height) * 100;\r\n \r\n ba.style.setProperty('--mx', x + '%');\r\n ba.style.setProperty('--my', y + '%');\r\n }\r\n\r\n ba.addEventListener('mousemove', updateLight);\r\n ba.addEventListener('touchmove', function(e){\r\n e.preventDefault(); \r\n updateLight(e);\r\n }, {passive: false});\r\n })();\r\n\r\n \/* ---------- COPY CA ---------- *\/\r\n (function(){\r\n var btn = document.getElementById('copyCa'), txt = document.getElementById('caText'), ok = document.getElementById('caOk');\r\n if(!btn) return;\r\n btn.addEventListener('click', function(){\r\n var v = txt.textContent.trim();\r\n var done = function(){ ok.classList.add('on'); setTimeout(function(){ ok.classList.remove('on'); }, 1800); };\r\n if(navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(v).then(done, done); }\r\n else { var ta=document.createElement('textarea'); ta.value=v; document.body.appendChild(ta); ta.select(); try{document.execCommand('copy');}catch(e){} ta.remove(); done(); }\r\n });\r\n })();\r\n\r\n \/* ---------- TOKENOMICS CIRCULAR CAROUSEL ---------- *\/\r\n (function(){\r\n const track = document.getElementById('sm-track');\r\n if(!track) return;\r\n\r\n const items = [\r\n { tag:'01 \u00b7 Supply', title:'1,000,000,000', desc:'The complete $SPIDERMEW supply, spread across one powerful web.' },\r\n { tag:'02 \u00b7 Fees', title:'0% Tax', desc:'No buy or sell tax. Swing in and out without extra friction.' },\r\n { tag:'03 \u00b7 LP', title:'Safety Net', desc:'Liquidity burned and kept away from sneaky paws.' },\r\n { tag:'04 \u00b7 Owner', title:'Renounced', desc:'No owner controls the contract. The community leads the mission.' },\r\n { tag:'05 \u00b7 Chain', title:'Solana', desc:'Built for fast movement, low fees, and quicker swings.' },\r\n { tag:'06 \u00b7 DNA', title:'SpiderMew', desc:'Spider strength, feline instincts, and cuteness no villain can resist.' }\r\n ];\r\n \r\n const dotsWrap = document.getElementById('sm-dots');\r\n const numLabel = document.getElementById('sm-carousel-num');\r\n let active = 0;\r\n \r\n items.forEach((it,i)=>{\r\n const c = document.createElement('div');\r\n c.className = 'sm-card';\r\n c.innerHTML = `<span class=\"tag\">${it.tag}<\/span><div><h4>${it.title}<\/h4><p>${it.desc}<\/p><\/div>`;\r\n c.addEventListener('click',()=>go(i));\r\n track.appendChild(c);\r\n \r\n const d = document.createElement('button');\r\n d.className = 'sm-dot' + (i === 0 ? ' active' : '');\r\n d.addEventListener('click',()=>go(i));\r\n dotsWrap.appendChild(d);\r\n });\r\n \r\n const cards = track.querySelectorAll('.sm-card');\r\n const dots = dotsWrap.querySelectorAll('.sm-dot');\r\n const VISIBLE = 5;\r\n const RX = 260, RY = 90;\r\n \r\n function layout(){\r\n const total = items.length;\r\n const half = Math.floor(VISIBLE\/2);\r\n \r\n cards.forEach((card, i)=>{\r\n let off = i - active;\r\n if(off > half) off -= total;\r\n if(off < -half) off += total;\r\n \r\n const inside = Math.abs(off) <= half;\r\n const angle = (off \/ VISIBLE) * Math.PI;\r\n const x = Math.sin(angle) * RX;\r\n const y = -Math.cos(angle) * RY + RY;\r\n const dist = Math.abs(off);\r\n \r\n const scale = Math.max(0, 1 - (dist\/(half+1)) * 0.28);\r\n const opa = inside ? Math.max(0.25, 1 - (dist\/(half+1)) * 0.7) : 0;\r\n const z = VISIBLE - dist;\r\n \r\n card.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;\r\n card.style.opacity = opa;\r\n card.style.zIndex = z;\r\n card.classList.toggle('active', i === active);\r\n card.style.pointerEvents = inside ? 'auto' : 'none'; \r\n });\r\n \r\n dots.forEach((d,i)=>d.classList.toggle('active', i === active));\r\n if(numLabel) numLabel.textContent = String(active+1).padStart(2,'0');\r\n }\r\n \r\n function go(i){ \r\n active = ((i % items.length) + items.length) % items.length; \r\n layout(); \r\n }\r\n layout();\r\n \r\n document.getElementById('sm-next').addEventListener('click',()=>go(active+1));\r\n document.getElementById('sm-prev').addEventListener('click',()=>go(active-1));\r\n \r\n let auto = setInterval(()=>go(active+1), 4200);\r\n const car = document.getElementById('sm-carousel');\r\n car.addEventListener('mouseenter',()=>clearInterval(auto));\r\n car.addEventListener('mouseleave',()=>{ auto = setInterval(()=>go(active+1), 4200); });\r\n })();\r\n\r\n \/* ---------- SIDE NAV + NAVBAR ACTIVE STATE ---------- *\/\r\n (function(){\r\n var sections = [].slice.call(root.querySelectorAll('[data-sec]'));\r\n var snItems = [].slice.call(root.querySelectorAll('.sn-item'));\r\n var navLinks = [].slice.call(root.querySelectorAll('.nv-links a'));\r\n var pill = document.getElementById('nvPill');\r\n var curTxt = document.getElementById('snCurrentTxt');\r\n var bar = document.getElementById('snBar');\r\n var navbar = document.getElementById('navbar');\r\n\r\n function movePill(a){\r\n if(!a || !pill) return;\r\n pill.style.width = a.offsetWidth+'px';\r\n pill.style.transform = 'translateX('+a.offsetLeft+'px)';\r\n pill.style.opacity = 1;\r\n }\r\n function setActive(key){\r\n snItems.forEach(function(b){ b.classList.toggle('active', b.dataset.go===key); });\r\n navLinks.forEach(function(a){ a.classList.toggle('active', a.dataset.go===key); });\r\n var sec = sections.filter(function(s){ return s.dataset.sec===key; })[0];\r\n if(sec && curTxt.textContent !== sec.dataset.name){\r\n curTxt.style.opacity=0; curTxt.style.transform='translateY(8px)';\r\n setTimeout(function(){ curTxt.textContent = sec.dataset.name; curTxt.style.opacity=1; curTxt.style.transform='none'; },160);\r\n }\r\n movePill(navLinks.filter(function(a){ return a.dataset.go===key; })[0]);\r\n }\r\n function onScroll(){\r\n var y = window.scrollY + window.innerHeight*0.35, cur = sections[0];\r\n sections.forEach(function(s){ if(s.offsetTop <= y) cur = s; });\r\n setActive(cur.dataset.sec);\r\n var max = document.body.scrollHeight - window.innerHeight;\r\n bar.style.width = Math.min(100, (window.scrollY\/Math.max(max,1))*100)+'%';\r\n navbar.classList.toggle('scrolled', window.scrollY > 40);\r\n }\r\n window.addEventListener('scroll', onScroll, {passive:true});\r\n window.addEventListener('resize', onScroll);\r\n setTimeout(onScroll, 60);\r\n\r\n function jump(key){\r\n var sec = sections.filter(function(s){ return s.dataset.sec===key; })[0];\r\n if(sec) window.scrollTo({ top: sec.offsetTop - 10, behavior:'smooth' });\r\n }\r\n snItems.forEach(function(b){ b.addEventListener('click', function(){ jump(b.dataset.go); }); });\r\n navLinks.forEach(function(a){ a.addEventListener('click', function(e){ e.preventDefault(); jump(a.dataset.go); }); });\r\n })();\r\n\r\n \/* ---------- REVEAL ON SCROLL ---------- *\/\r\n (function(){\r\n var els = [].slice.call(root.querySelectorAll('.rv'));\r\n if(!window.IntersectionObserver){ els.forEach(function(e){ e.classList.add('in'); }); return; }\r\n var io = new IntersectionObserver(function(entries){\r\n entries.forEach(function(en,i){\r\n if(en.isIntersecting){ setTimeout(function(){ en.target.classList.add('in'); }, i*90); io.unobserve(en.target); }\r\n });\r\n },{ threshold:.14, rootMargin:'0px 0px -8% 0px' });\r\n els.forEach(function(e){ io.observe(e); });\r\n })();\r\n})();\r\n<\/script>\r\n<!-- ================== END SPIDERMEW BLOCK ================== -->\r\n\r\n<\/body>\r\n<\/html>\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>SPIDERMEW \u2014 Spider Powers, Feline Charm SPIDERMEW SECTIONHero Hero About Lore Tokenomics Live Chart Community SPIDERMEW X Buy Now SPIDERMEW \ud83d\udd78\ufe0f  SPIDER POWERS. FELINE CHARM. \ud83d\udc3e  \ud83d\udd77\ufe0f Venomous bite. Feline DNA. One hero. Mew was an ordinary cat until a venomous spider bite fused spider DNA with his feline DNA. SpiderMew was born with web-slinging powers, razor-sharp […]<\/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:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spidermew.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":43,"href":"https:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/spidermew.fun\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/spidermew.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}