{"id":8,"date":"2026-08-03T10:56:58","date_gmt":"2026-08-03T10:56:58","guid":{"rendered":"https:\/\/2x6cat.fun\/?page_id=8"},"modified":"2026-08-03T12:20:35","modified_gmt":"2026-08-03T12:20:35","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/2x6cat.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e26591 e-con-full e-flex e-con e-parent\" data-id=\"4e26591\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0845348 elementor-widget elementor-widget-html\" data-id=\"0845348\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- FONT LIBRARIES -->\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=Syne+Mono&family=ZCOOL+QingKe+HuangYou&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- REACT, ReactDOM, BABEL & GSAP -->\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n\r\n<!-- STYLES -->\r\n<style>\r\n  :root {\r\n    --bg-color: #000000;\r\n    --accent-1: #CC24A3;\r\n    --accent-2: #F5A3B8;\r\n    --font-title: 'ZCOOL QingKe HuangYou', sans-serif;\r\n    --font-mono: 'Syne Mono', monospace;\r\n  }\r\n\r\n  html, body {\r\n    margin: 0;\r\n    padding: 0;\r\n    background-color: var(--bg-color);\r\n    color: #fff;\r\n    font-family: var(--font-mono);\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  \/* CUSTOM SCROLLBAR *\/\r\n  ::-webkit-scrollbar { width: 8px; }\r\n  ::-webkit-scrollbar-track { background: var(--bg-color); }\r\n  ::-webkit-scrollbar-thumb { background: var(--accent-1); border-radius: 4px; }\r\n\r\n  .x26-app-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    background: var(--bg-color);\r\n  }\r\n\r\n  \/* --- HERO SECTION --- *\/\r\n  .hero-section {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 0 5%;\r\n    box-sizing: border-box;\r\n    z-index: 1;\r\n  }\r\n\r\n  .hero-bg {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    object-fit: cover;\r\n    z-index: -2;\r\n    opacity: 0.6;\r\n  }\r\n\r\n  .hero-overlay {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,1) 100%);\r\n    z-index: -1;\r\n  }\r\n\r\n  .hero-seamless-bottom {\r\n    position: absolute;\r\n    bottom: 0; left: 0; width: 100%; height: 25vh;\r\n    background: linear-gradient(to top, var(--bg-color) 0%, transparent 100%);\r\n    z-index: -1;\r\n  }\r\n\r\n  .hero-content {\r\n    max-width: 800px;\r\n    z-index: 2;\r\n  }\r\n\r\n  .hero-title {\r\n    font-family: var(--font-title);\r\n    font-size: clamp(4rem, 8vw, 8rem);\r\n    line-height: 0.9;\r\n    margin: 0 0 20px 0;\r\n    text-transform: uppercase;\r\n    background: linear-gradient(to right, #fff, var(--accent-2));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    text-shadow: 0 0 30px rgba(204, 36, 163, 0.4);\r\n    letter-spacing: 2px;\r\n  }\r\n\r\n  .hero-desc {\r\n    font-family: var(--font-mono);\r\n    font-size: clamp(1rem, 1.5vw, 1.25rem);\r\n    color: #ccc;\r\n    line-height: 1.6;\r\n    margin-bottom: 40px;\r\n    max-width: 600px;\r\n  }\r\n\r\n  .btn-cyber {\r\n    position: relative;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 15px 30px;\r\n    font-family: var(--font-mono);\r\n    font-size: 1.1rem;\r\n    font-weight: bold;\r\n    color: #fff;\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    text-transform: uppercase;\r\n    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);\r\n    transition: all 0.3s ease;\r\n  }\r\n  .btn-cyber::before {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: linear-gradient(45deg, var(--accent-1), var(--accent-2));\r\n    z-index: -1;\r\n    transition: opacity 0.3s;\r\n  }\r\n  .btn-cyber::after {\r\n    content: ''; position: absolute; inset: 2px;\r\n    background: var(--bg-color);\r\n    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);\r\n    z-index: -1;\r\n    transition: background 0.3s;\r\n  }\r\n  .btn-cyber:hover::after { background: transparent; }\r\n  .btn-cyber:hover { text-shadow: 0 0 10px #fff; }\r\n\r\n  .ca-text { margin-top: 15px; font-size: 0.9rem; color: var(--accent-2); opacity: 0.8; word-break: break-all; }\r\n\r\n  \/* --- LEFT MODAL (INFO PANEL) --- *\/\r\n  .side-modal {\r\n    position: fixed;\r\n    top: 0; left: 0; width: clamp(320px, 40vw, 500px); height: 100%;\r\n    background: rgba(10, 10, 10, 0.95);\r\n    backdrop-filter: blur(20px);\r\n    border-right: 1px solid var(--accent-1);\r\n    z-index: 100;\r\n    padding: 100px 40px 40px;\r\n    box-sizing: border-box;\r\n    transform: translateX(-100%);\r\n    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .side-modal.active { transform: translateX(0); box-shadow: 20px 0 50px rgba(204,36,163,0.15); }\r\n  .modal-close {\r\n    position: absolute; top: 30px; right: 30px;\r\n    background: transparent; border: none; color: #fff;\r\n    font-size: 2rem; cursor: pointer; transition: color 0.3s;\r\n  }\r\n  .modal-close:hover { color: var(--accent-2); }\r\n  .modal-title { font-family: var(--font-title); font-size: 3rem; color: var(--accent-1); margin-bottom: 20px; }\r\n  .modal-content { font-family: var(--font-mono); font-size: 1.1rem; line-height: 1.6; color: #ddd; flex-grow: 1; }\r\n\r\n  \/* --- STAGGERED MENU CSS --- *\/\r\n  .staggered-menu-wrapper { position: fixed; top: 0; right: 0; width: 100%; height: 0; z-index: 90; pointer-events: none; }\r\n  .staggered-menu-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 2em; box-sizing: border-box; pointer-events: none; z-index: 95; }\r\n  .staggered-menu-header > * { pointer-events: auto; }\r\n  .sm-logo-img { height: 40px; width: auto; object-fit: contain; }\r\n  .sm-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; color: #fff; font-family: var(--font-mono); font-size: 1.2rem; font-weight: bold; text-transform: uppercase; z-index: 100; }\r\n  .sm-toggle-textWrap { display: inline-block; height: 1em; overflow: hidden; }\r\n  .sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; }\r\n  .sm-toggle-line { display: block; height: 1em; }\r\n  .sm-icon { position: relative; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }\r\n  .sm-icon-line { position: absolute; width: 100%; height: 2px; background: currentColor; border-radius: 2px; }\r\n  .sm-icon-line-v { transform: rotate(90deg); }\r\n\r\n  .staggered-menu-panel { position: absolute; top: 0; right: 0; width: clamp(300px, 40vw, 450px); height: 100vh; background: #080808; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; padding: 8em 3em 3em 3em; box-sizing: border-box; overflow-y: auto; z-index: 91; pointer-events: auto; opacity: 0; transform: translateX(100%); }\r\n  .sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(300px, 40vw, 450px); pointer-events: none; z-index: 90; }\r\n  .sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: 100%; opacity: 0; transform: translateX(100%); }\r\n  .sm-panel-inner { flex: 1; display: flex; flex-direction: column; }\r\n  \r\n  .sm-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }\r\n  .sm-panel-itemWrap { overflow: hidden; line-height: 1.2; }\r\n  .sm-panel-item { position: relative; color: #fff; font-family: var(--font-title); font-size: 3.5rem; cursor: pointer; text-transform: uppercase; transition: color 0.3s; display: inline-block; background: none; border: none; text-align: left; padding: 0; }\r\n  .sm-panel-item:hover { color: var(--accent-1); text-shadow: 0 0 15px var(--accent-1); }\r\n  .sm-panel-itemLabel { display: inline-block; will-change: transform; transform-origin: left bottom; }\r\n\r\n  .sm-socials { margin-top: auto; padding-top: 3rem; }\r\n  .sm-socials-title { font-size: 1rem; color: var(--accent-2); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px;}\r\n  .sm-socials-list { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }\r\n  .sm-socials-link { font-size: 1.1rem; color: #ccc; text-decoration: none; transition: color 0.3s; }\r\n  .sm-socials-link:hover { color: var(--accent-1); }\r\n\r\n  \/* --- DOME GALLERY CSS --- *\/\r\n  .gallery-section { position: relative; width: 100%; height: 100vh; background: var(--bg-color); overflow: hidden; }\r\n  .sphere-root {\r\n    position: relative; width: 100%; height: 100%;\r\n    --radius: 600px;\r\n    --circ: calc(var(--radius) * 3.14);\r\n    --rot-y: calc((360deg \/ var(--segments-x)) \/ 2);\r\n    --rot-x: calc((360deg \/ var(--segments-y)) \/ 2);\r\n    --item-width: calc(var(--circ) \/ var(--segments-x));\r\n    --item-height: calc(var(--circ) \/ var(--segments-y));\r\n  }\r\n  .sphere, .item, .item__image { transform-style: preserve-3d; }\r\n  .sphere-main { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; }\r\n  .stage { width: 100%; height: 100%; display: grid; place-items: center; perspective: calc(var(--radius) * 2.5); contain: layout paint size; }\r\n  .sphere { transform: translateZ(calc(var(--radius) * -1)); will-change: transform; }\r\n  .overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: radial-gradient(rgba(0, 0, 0, 0) 50%, var(--bg-color) 100%); }\r\n  \r\n  .item {\r\n    width: calc(var(--item-width) * var(--item-size-x));\r\n    height: calc(var(--item-height) * var(--item-size-y));\r\n    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px; margin: auto;\r\n    transform-origin: 50% 50%; backface-visibility: hidden; transition: transform 300ms;\r\n    transform: rotateY(calc(var(--rot-y) * (var(--offset-x) + ((var(--item-size-x) - 1) \/ 2)) + var(--rot-y-delta, 0deg)))\r\n               rotateX(calc(var(--rot-x) * (var(--offset-y) - ((var(--item-size-y) - 1) \/ 2)) + var(--rot-x-delta, 0deg)))\r\n               translateZ(var(--radius));\r\n  }\r\n  .item__image {\r\n    position: absolute; inset: 8px; border-radius: var(--tile-radius, 15px); overflow: hidden;\r\n    backface-visibility: hidden; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid rgba(204, 36, 163, 0.2);\r\n  }\r\n  .item__image:hover { transform: scale(1.05); border-color: var(--accent-1); box-shadow: 0 0 20px rgba(204, 36, 163, 0.4); z-index: 10;}\r\n  .item__image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }\r\n  .viewer { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 50px; }\r\n  .viewer .frame { height: 100%; aspect-ratio: 1; border-radius: 20px; display: flex; }\r\n  .viewer .scrim { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.8); pointer-events: none; opacity: 0; transition: opacity 400ms ease; backdrop-filter: blur(5px); }\r\n  .sphere-root[data-enlarging='true'] .viewer .scrim { opacity: 1; pointer-events: all; }\r\n  .viewer .enlarge { position: absolute; z-index: 30; border-radius: 20px; overflow: hidden; transition: transform 400ms ease, opacity 400ms ease; box-shadow: 0 0 50px rgba(204, 36, 163, 0.3); border: 2px solid var(--accent-1); }\r\n  .viewer .enlarge img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n  \/* --- FOOTER --- *\/\r\n  .footer-section { padding: 60px 5%; background: var(--bg-color); border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }\r\n  .footer-logo { width: 150px; margin-bottom: 20px; filter: drop-shadow(0 0 10px rgba(204,36,163,0.5)); }\r\n  .footer-text { color: #666; font-size: 0.9rem; letter-spacing: 1px; }\r\n\r\n  @media (max-width: 768px) {\r\n    .staggered-menu-panel { width: 100%; }\r\n    .side-modal { width: 100%; }\r\n  }\r\n<\/style>\r\n\r\n<!-- REACT APP MOUNT POINT -->\r\n<div id=\"react-app-root\"><\/div>\r\n\r\n<!-- APPLICATION LOGIC -->\r\n<script type=\"text\/babel\">\r\n  const { useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo } = React;\r\n\r\n  \/\/ --- DOME GALLERY LOGIC & MATH ---\r\n  const clamp = (v, min, max) => Math.min(Math.max(v, min), max);\r\n  const normalizeAngle = d => ((d % 360) + 360) % 360;\r\n  const wrapAngleSigned = deg => { const a = (((deg + 180) % 360) + 360) % 360; return a - 180; };\r\n  const getDataNumber = (el, name, fallback) => { const attr = el.dataset[name] ?? el.getAttribute(`data-${name}`); const n = parseFloat(attr); return Number.isFinite(n) ? n : fallback; };\r\n\r\n  function buildItems(pool, seg) {\r\n    const xCols = Array.from({ length: seg }, (_, i) => -37 + i * 2);\r\n    const evenYs = [-4, -2, 0, 2, 4];\r\n    const oddYs = [-3, -1, 1, 3, 5];\r\n    const coords = xCols.flatMap((x, c) => {\r\n      const ys = c % 2 === 0 ? evenYs : oddYs;\r\n      return ys.map(y => ({ x, y, sizeX: 2, sizeY: 2 }));\r\n    });\r\n    const totalSlots = coords.length;\r\n    const normalizedImages = pool.map(src => ({ src, alt: '2x6cat art' }));\r\n    const usedImages = Array.from({ length: totalSlots }, (_, i) => normalizedImages[i % normalizedImages.length]);\r\n    \/\/ Prevent adjacent duplicates if possible\r\n    for (let i = 1; i < usedImages.length; i++) {\r\n      if (usedImages[i].src === usedImages[i - 1].src) {\r\n        for (let j = i + 1; j < usedImages.length; j++) {\r\n          if (usedImages[j].src !== usedImages[i].src) {\r\n            const tmp = usedImages[i]; usedImages[i] = usedImages[j]; usedImages[j] = tmp; break;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    return coords.map((c, i) => ({ ...c, src: usedImages[i].src, alt: usedImages[i].alt }));\r\n  }\r\n\r\n  function computeItemBaseRotation(offsetX, offsetY, sizeX, sizeY, segments) {\r\n    const unit = 360 \/ segments \/ 2;\r\n    const rotateY = unit * (offsetX + (sizeX - 1) \/ 2);\r\n    const rotateX = unit * (offsetY - (sizeY - 1) \/ 2);\r\n    return { rotateX, rotateY };\r\n  }\r\n\r\n  const DomeGallery = ({ images }) => {\r\n    const segments = 35;\r\n    const maxVerticalRotationDeg = 15;\r\n    const dragSensitivity = 15;\r\n    const enlargeTransitionMs = 400;\r\n\r\n    const rootRef = useRef(null);\r\n    const mainRef = useRef(null);\r\n    const sphereRef = useRef(null);\r\n    const frameRef = useRef(null);\r\n    const viewerRef = useRef(null);\r\n    const scrimRef = useRef(null);\r\n    const focusedElRef = useRef(null);\r\n    const originalTilePositionRef = useRef(null);\r\n\r\n    const rotationRef = useRef({ x: 0, y: 0 });\r\n    const draggingRef = useRef(false);\r\n    const movedRef = useRef(false);\r\n    const inertiaRAF = useRef(null);\r\n    const openingRef = useRef(false);\r\n    const openStartedAtRef = useRef(0);\r\n    const lastDragEndAt = useRef(0);\r\n    const scrollLockedRef = useRef(false);\r\n\r\n    const lockScroll = useCallback(() => {\r\n      if (scrollLockedRef.current) return;\r\n      scrollLockedRef.current = true; document.body.style.overflow = 'hidden';\r\n    }, []);\r\n    const unlockScroll = useCallback(() => {\r\n      if (!scrollLockedRef.current) return;\r\n      if (rootRef.current?.getAttribute('data-enlarging') === 'true') return;\r\n      scrollLockedRef.current = false; document.body.style.overflow = '';\r\n    }, []);\r\n\r\n    const items = useMemo(() => buildItems(images, segments), [images, segments]);\r\n\r\n    const applyTransform = (xDeg, yDeg) => {\r\n      if (sphereRef.current) sphereRef.current.style.transform = `translateZ(calc(var(--radius) * -1)) rotateX(${xDeg}deg) rotateY(${yDeg}deg)`;\r\n    };\r\n\r\n    useEffect(() => {\r\n      const root = rootRef.current;\r\n      if (!root) return;\r\n      const ro = new ResizeObserver(entries => {\r\n        const cr = entries[0].contentRect;\r\n        const w = Math.max(1, cr.width), h = Math.max(1, cr.height);\r\n        const minDim = Math.min(w, h);\r\n        let radius = Math.round(minDim * 0.7);\r\n        radius = clamp(radius, 400, 1000);\r\n        root.style.setProperty('--radius', `${radius}px`);\r\n        applyTransform(rotationRef.current.x, rotationRef.current.y);\r\n      });\r\n      ro.observe(root);\r\n      return () => ro.disconnect();\r\n    }, []);\r\n\r\n    const stopInertia = useCallback(() => { if (inertiaRAF.current) { cancelAnimationFrame(inertiaRAF.current); inertiaRAF.current = null; } }, []);\r\n\r\n    const startInertia = useCallback((vx, vy) => {\r\n      let vX = clamp(vx, -1.5, 1.5) * 40;\r\n      let vY = clamp(vy, -1.5, 1.5) * 40;\r\n      let frames = 0;\r\n      const friction = 0.95;\r\n      const step = () => {\r\n        vX *= friction; vY *= friction;\r\n        if (Math.abs(vX) < 0.1 && Math.abs(vY) < 0.1 || ++frames > 150) { inertiaRAF.current = null; return; }\r\n        const nextX = clamp(rotationRef.current.x - vY \/ 100, -maxVerticalRotationDeg, maxVerticalRotationDeg);\r\n        const nextY = wrapAngleSigned(rotationRef.current.y + vX \/ 100);\r\n        rotationRef.current = { x: nextX, y: nextY };\r\n        applyTransform(nextX, nextY);\r\n        inertiaRAF.current = requestAnimationFrame(step);\r\n      };\r\n      stopInertia();\r\n      inertiaRAF.current = requestAnimationFrame(step);\r\n    }, [stopInertia]);\r\n\r\n    \/\/ Custom Drag Logic replacing @use-gesture\r\n    useEffect(() => {\r\n      const main = mainRef.current;\r\n      if(!main) return;\r\n      let isDown = false, sX = 0, sY = 0, sRotX = 0, sRotY = 0, lastX = 0, lastY = 0, lastT = 0, vX = 0, vY = 0;\r\n\r\n      const down = (e) => {\r\n        if(focusedElRef.current) return;\r\n        stopInertia();\r\n        isDown = true; draggingRef.current = true; movedRef.current = false;\r\n        sX = e.clientX; sY = e.clientY; lastX = sX; lastY = sY; lastT = performance.now();\r\n        sRotX = rotationRef.current.x; sRotY = rotationRef.current.y;\r\n      };\r\n      const move = (e) => {\r\n        if(!isDown || focusedElRef.current) return;\r\n        const dx = e.clientX - sX, dy = e.clientY - sY;\r\n        if(Math.abs(dx)>5 || Math.abs(dy)>5) movedRef.current = true;\r\n        const now = performance.now(), dt = Math.max(1, now - lastT);\r\n        vX = (e.clientX - lastX) \/ dt; vY = (e.clientY - lastY) \/ dt;\r\n        lastX = e.clientX; lastY = e.clientY; lastT = now;\r\n\r\n        const nextX = clamp(sRotX - dy \/ dragSensitivity, -maxVerticalRotationDeg, maxVerticalRotationDeg);\r\n        const nextY = wrapAngleSigned(sRotY + dx \/ dragSensitivity);\r\n        rotationRef.current = { x: nextX, y: nextY };\r\n        applyTransform(nextX, nextY);\r\n      };\r\n      const up = () => {\r\n        if(!isDown) return;\r\n        isDown = false; draggingRef.current = false;\r\n        if(movedRef.current) lastDragEndAt.current = performance.now();\r\n        if(Math.abs(vX) > 0.1 || Math.abs(vY) > 0.1) startInertia(vX, vY);\r\n        setTimeout(()=> movedRef.current = false, 50);\r\n      };\r\n\r\n      main.addEventListener('pointerdown', down);\r\n      window.addEventListener('pointermove', move);\r\n      window.addEventListener('pointerup', up);\r\n      return () => { main.removeEventListener('pointerdown', down); window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };\r\n    }, [dragSensitivity, stopInertia, startInertia]);\r\n\r\n    \/\/ Enlarge & Close Logic\r\n    useEffect(() => {\r\n      const scrim = scrimRef.current;\r\n      if (!scrim) return;\r\n      const close = () => {\r\n        if (performance.now() - openStartedAtRef.current < 300) return;\r\n        const el = focusedElRef.current; if (!el) return;\r\n        const overlay = viewerRef.current?.querySelector('.enlarge'); if (!overlay) return;\r\n        const originalPos = originalTilePositionRef.current;\r\n        if (!originalPos) {\r\n           overlay.remove(); el.style.visibility = ''; focusedElRef.current = null;\r\n           rootRef.current?.removeAttribute('data-enlarging'); openingRef.current = false; unlockScroll(); return;\r\n        }\r\n        overlay.style.transition = `all ${enlargeTransitionMs}ms cubic-bezier(0.25, 1, 0.5, 1)`;\r\n        overlay.style.left = `${originalPos.left}px`;\r\n        overlay.style.top = `${originalPos.top}px`;\r\n        overlay.style.width = `${originalPos.width}px`;\r\n        overlay.style.height = `${originalPos.height}px`;\r\n        overlay.style.opacity = '0';\r\n        \r\n        const cleanup = () => {\r\n          overlay.remove(); originalTilePositionRef.current = null;\r\n          el.style.visibility = ''; el.style.opacity = '1';\r\n          focusedElRef.current = null; rootRef.current?.removeAttribute('data-enlarging');\r\n          openingRef.current = false; unlockScroll();\r\n        };\r\n        setTimeout(cleanup, enlargeTransitionMs);\r\n      };\r\n      scrim.addEventListener('click', close);\r\n      return () => scrim.removeEventListener('click', close);\r\n    }, [unlockScroll]);\r\n\r\n    const openItem = useCallback((el) => {\r\n      if (openingRef.current || draggingRef.current || movedRef.current) return;\r\n      openingRef.current = true; openStartedAtRef.current = performance.now(); lockScroll();\r\n      focusedElRef.current = el;\r\n      \r\n      const parent = el.parentElement;\r\n      const tileR = el.getBoundingClientRect();\r\n      originalTilePositionRef.current = { left: tileR.left, top: tileR.top, width: tileR.width, height: tileR.height };\r\n      \r\n      const frameR = frameRef.current?.getBoundingClientRect();\r\n      if (!frameR) return;\r\n\r\n      el.style.visibility = 'hidden';\r\n      const overlay = document.createElement('div');\r\n      overlay.className = 'enlarge';\r\n      overlay.style.left = `${tileR.left}px`; overlay.style.top = `${tileR.top}px`;\r\n      overlay.style.width = `${tileR.width}px`; overlay.style.height = `${tileR.height}px`;\r\n      \r\n      const img = document.createElement('img');\r\n      img.src = parent.dataset.src; overlay.appendChild(img);\r\n      viewerRef.current.appendChild(overlay);\r\n\r\n      setTimeout(() => {\r\n        overlay.style.left = `${frameR.left}px`;\r\n        overlay.style.top = `${frameR.top}px`;\r\n        overlay.style.width = `${frameR.width}px`;\r\n        overlay.style.height = `${frameR.height}px`;\r\n        rootRef.current?.setAttribute('data-enlarging', 'true');\r\n      }, 30);\r\n    }, [lockScroll]);\r\n\r\n    return (\r\n      <div className=\"gallery-section\">\r\n        <div ref={rootRef} className=\"sphere-root\" style={{ '--segments-x': segments, '--segments-y': segments, '--tile-radius': '20px' }}>\r\n          <main ref={mainRef} className=\"sphere-main\">\r\n            <div className=\"stage\">\r\n              <div ref={sphereRef} className=\"sphere\">\r\n                {items.map((it, i) => (\r\n                  <div key={`${it.x}-${it.y}-${i}`} className=\"item\" data-src={it.src} data-offset-x={it.x} data-offset-y={it.y} data-size-x={it.sizeX} data-size-y={it.sizeY} style={{ '--offset-x': it.x, '--offset-y': it.y, '--item-size-x': it.sizeX, '--item-size-y': it.sizeY }}>\r\n                    <div className=\"item__image\" onClick={(e) => openItem(e.currentTarget)}>\r\n                      <img src={it.src} draggable={false} alt={it.alt} \/>\r\n                    <\/div>\r\n                  <\/div>\r\n                ))}\r\n              <\/div>\r\n            <\/div>\r\n            <div className=\"overlay\" \/>\r\n            <div className=\"viewer\" ref={viewerRef}>\r\n              <div ref={scrimRef} className=\"scrim\" \/>\r\n              <div ref={frameRef} className=\"frame\" \/>\r\n            <\/div>\r\n          <\/main>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  \/\/ --- STAGGERED MENU COMPONENT ---\r\n  const StaggeredMenu = ({ items, onMenuItemClick }) => {\r\n    const [open, setOpen] = useState(false);\r\n    const panelRef = useRef(null);\r\n    const preLayersRef = useRef(null);\r\n    const toggleBtnRef = useRef(null);\r\n    const textInnerRef = useRef(null);\r\n    const iconRef = useRef(null);\r\n\r\n    const toggleMenu = () => {\r\n      const target = !open;\r\n      setOpen(target);\r\n      \r\n      \/\/ Animations using GSAP\r\n      const panel = panelRef.current;\r\n      const layers = Array.from(preLayersRef.current?.querySelectorAll('.sm-prelayer') || []);\r\n      const texts = Array.from(panel.querySelectorAll('.sm-panel-itemLabel'));\r\n      \r\n      if(target) {\r\n        gsap.to(iconRef.current, { rotate: 225, duration: 0.5 });\r\n        gsap.to(textInnerRef.current, { yPercent: -50, duration: 0.4 });\r\n        \r\n        layers.forEach((l, i) => {\r\n          gsap.fromTo(l, { xPercent: 100, opacity: 1 }, { xPercent: 0, duration: 0.5, ease: 'power3.out', delay: i * 0.1 });\r\n        });\r\n        gsap.fromTo(panel, { xPercent: 100, opacity: 1 }, { xPercent: 0, duration: 0.6, ease: 'power3.out', delay: 0.2 });\r\n        gsap.fromTo(texts, { y: 50, opacity: 0, rotate: 5 }, { y: 0, opacity: 1, rotate: 0, duration: 0.6, stagger: 0.1, delay: 0.4 });\r\n      } else {\r\n        gsap.to(iconRef.current, { rotate: 0, duration: 0.5 });\r\n        gsap.to(textInnerRef.current, { yPercent: 0, duration: 0.4 });\r\n        gsap.to([panel, ...layers.reverse()], { xPercent: 100, duration: 0.4, ease: 'power3.in', stagger: 0.05 });\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div className=\"staggered-menu-wrapper\" style={{ pointerEvents: open ? 'auto' : 'none' }}>\r\n        <header className=\"staggered-menu-header\">\r\n          <img decoding=\"async\" src=\"https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-5.png\" alt=\"2x6cat Logo\" className=\"sm-logo-img\" \/>\r\n          <button ref={toggleBtnRef} className=\"sm-toggle\" onClick={toggleMenu}>\r\n            <span className=\"sm-toggle-textWrap\">\r\n              <span ref={textInnerRef} className=\"sm-toggle-textInner\">\r\n                <span className=\"sm-toggle-line\">MENU<\/span>\r\n                <span className=\"sm-toggle-line\" style={{color: '#CC24A3'}}>CLOSE<\/span>\r\n              <\/span>\r\n            <\/span>\r\n            <span ref={iconRef} className=\"sm-icon\">\r\n              <span className=\"sm-icon-line\" \/>\r\n              <span className=\"sm-icon-line sm-icon-line-v\" \/>\r\n            <\/span>\r\n          <\/button>\r\n        <\/header>\r\n\r\n        <div ref={preLayersRef} className=\"sm-prelayers\">\r\n          <div className=\"sm-prelayer\" style={{ background: '#CC24A3' }} \/>\r\n          <div className=\"sm-prelayer\" style={{ background: '#F5A3B8' }} \/>\r\n        <\/div>\r\n\r\n        <aside ref={panelRef} className=\"staggered-menu-panel\">\r\n          <div className=\"sm-panel-inner\">\r\n            <ul className=\"sm-panel-list\">\r\n              {items.map((it, idx) => (\r\n                <li key={idx} className=\"sm-panel-itemWrap\">\r\n                  <button className=\"sm-panel-item\" onClick={() => { toggleMenu(); setTimeout(()=>onMenuItemClick(it), 400); }}>\r\n                    <span className=\"sm-panel-itemLabel\">{it.label}<\/span>\r\n                  <\/button>\r\n                <\/li>\r\n              ))}\r\n            <\/ul>\r\n            <div className=\"sm-socials\">\r\n              <h3 className=\"sm-socials-title\">Network<\/h3>\r\n              <ul className=\"sm-socials-list\">\r\n                <li><a href=\"#\" className=\"sm-socials-link\">Twitter<\/a><\/li>\r\n                <li><a href=\"#\" className=\"sm-socials-link\">Telegram<\/a><\/li>\r\n                <li><a href=\"#\" className=\"sm-socials-link\">Live Chart<\/a><\/li>\r\n              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/aside>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  \/\/ --- MAIN APP COMPONENT ---\r\n  const App = () => {\r\n    const [activeModal, setActiveModal] = useState(null);\r\n\r\n    const menuItems = [\r\n      { \r\n        label: 'THE ETHOS', \r\n        title: 'THE ETHOS',\r\n        content: 'The digital asset realm is drowning in actors. Grandiose fairytales are peddled every minute, bursting the second a downtrend arrives. 2x6cat emerged from profound fatigue over this constant masquerade. No forced enthusiasm. No fabricated visions of instant wealth. Keep your footing solid, stand firm, and navigate the madness with pure indifference.'\r\n      },\r\n      { \r\n        label: 'COLD MATH', \r\n        title: 'COLD MATH',\r\n        content: 'Supply: 1,000,000,000\\nTax: 0\/0\\nLiquidity: Burned.\\nContract: Renounced.\\n\\nPure mechanics. No empty promises. The numbers remain static, untouched by emotion.'\r\n      },\r\n      { \r\n        label: 'SECURE POSITION', \r\n        title: 'SECURE POSITION',\r\n        content: '1. Initialize Phantom Wallet.\\n2. Acquire SOL.\\n3. Access Raydium.\\n4. Execute Swap.\\n5. Hold the line. Remain Unfazed.'\r\n      }\r\n    ];\r\n\r\n    const galleryImages = [\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-7.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-8.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-9.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-10.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-11.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-12.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-13.png',\r\n      'https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-14.png'\r\n    ];\r\n\r\n    const handleCopy = () => {\r\n      navigator.clipboard.writeText(\"YOUR_CA_ADDRESS_HERE\");\r\n      alert(\"CA Copied to clipboard. Stay cold.\");\r\n    };\r\n\r\n    return (\r\n      <div className=\"x26-app-wrapper\">\r\n        <StaggeredMenu items={menuItems} onMenuItemClick={setActiveModal} \/>\r\n        \r\n        {\/* SIDE MODAL *\/}\r\n        <div className={`side-modal ${activeModal ? 'active' : ''}`}>\r\n          <button className=\"modal-close\" onClick={() => setActiveModal(null)}>&times;<\/button>\r\n          {activeModal && (\r\n            <>\r\n              <h2 className=\"modal-title\">{activeModal.title}<\/h2>\r\n              <div className=\"modal-content\" style={{whiteSpace: 'pre-wrap'}}>{activeModal.content}<\/div>\r\n            <\/>\r\n          )}\r\n        <\/div>\r\n\r\n        {\/* HERO SECTION *\/}\r\n        <section className=\"hero-section\">\r\n          <video className=\"hero-bg\" autoPlay loop muted playsInline>\r\n            <source src=\"https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/2X6CAT-BG1.mp4\" type=\"video\/mp4\" \/>\r\n          <\/video>\r\n          <div className=\"hero-overlay\"><\/div>\r\n          \r\n          <div className=\"hero-content\">\r\n            <h1 className=\"hero-title\">The Apex<br\/>of Apathy.<\/h1>\r\n            <p className=\"hero-desc\">Sick of the endless circus, paid promoters, and empty guarantees polluting Solana. When red candles dominate and hysteria takes over, 2x6cat stands as the ultimate anchor.<\/p>\r\n            <button className=\"btn-cyber\" onClick={handleCopy}>COPY CA<\/button>\r\n            <p className=\"ca-text\">CA: YOUR_CA_ADDRESS_HERE<\/p>\r\n          <\/div>\r\n          \r\n          <div className=\"hero-seamless-bottom\"><\/div>\r\n        <\/section>\r\n\r\n        {\/* GALLERY SECTION *\/}\r\n        <DomeGallery images={galleryImages} \/>\r\n\r\n        {\/* FOOTER *\/}\r\n        <footer className=\"footer-section\">\r\n          <img decoding=\"async\" src=\"https:\/\/2x6cat.fun\/wp-content\/uploads\/2026\/08\/Asset-5.png\" alt=\"2x6cat Logo\" className=\"footer-logo\" \/>\r\n          <p className=\"footer-text\">UNFAZED. UNBOTHERED. JUST 2X6CAT.<\/p>\r\n          <p className=\"footer-text\" style={{opacity: 0.5, marginTop: '10px'}}>&copy; 2026 2X6CAT. All rights reserved on Solana.<\/p>\r\n        <\/footer>\r\n      <\/div>\r\n    );\r\n  };\r\n\r\n  const root = ReactDOM.createRoot(document.getElementById('react-app-root'));\r\n  root.render(<App \/>);\r\n<\/script>\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":"","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:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2x6cat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":7,"href":"https:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/2x6cat.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/2x6cat.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}