{"id":2505,"date":"2026-01-10T18:19:24","date_gmt":"2026-01-10T10:19:24","guid":{"rendered":"https:\/\/chk.show\/?page_id=2505"},"modified":"2026-06-28T22:44:06","modified_gmt":"2026-06-28T14:44:06","slug":"newhome","status":"publish","type":"page","link":"https:\/\/chk.show\/","title":{"rendered":"[\u9996\u9875]2026\u65b0\u7248"},"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\n \r\n CAURIS - VISUAL DIRECTOR<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.geekzu.org\">\r\n <link href=\"https:\/\/fonts.geekzu.org\/css2?family=Syncopate:wght@800&family=Inter:wght@500;600;900&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --accent: #ff003c;\r\n --glass-line: rgba(255, 255, 255, 0.28);\r\n --glass-fill: rgba(12, 12, 14, 0.34);\r\n --cursor-x: 50vw;\r\n --cursor-y: 50vh;\r\n --parallax-x: 0px;\r\n --parallax-y: 0px;\r\n --bg-x: 0px;\r\n --bg-y: 0px;\r\n --title-scale-x: 1;\r\n --title-scale-y: 1;\r\n --title-enter-scale-x: 0.92;\r\n --title-enter-scale-y: 0.98;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html,\r\n body {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n body {\r\n background: #000;\r\n color: #fff;\r\n font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\r\n min-height: 100vh;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n }\r\n\r\n \/* === \u89c6\u9891\u80cc\u666f === *\/\r\n .video-container {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n transform:\r\n translate3d(\r\n var(--bg-x),\r\n var(--bg-y),\r\n 0\r\n )\r\n scale(1.045);\r\n will-change: transform;\r\n }\r\n\r\n .bg-video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0;\r\n transition: opacity 1.15s ease;\r\n }\r\n\r\n body.video-ready .bg-video {\r\n opacity: 0.85;\r\n }\r\n\r\n \/* === \u566a\u70b9 === *\/\r\n .grain {\r\n position: fixed;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 1;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.52'\/%3E%3C\/svg%3E\");\r\n opacity: 0.08;\r\n }\r\n\r\n \/* === \u5de8\u578b\u6587\u5b57\u5c42 === *\/\r\n .hero-content {\r\n z-index: 10;\r\n position: fixed;\r\n left: 50%;\r\n top: 42%;\r\n width: 100%;\r\n text-align: center;\r\n mix-blend-mode: exclusion;\r\n pointer-events: none;\r\n transform:\r\n translate3d(\r\n calc(-50% + var(--parallax-x)),\r\n calc(-50% + var(--parallax-y)),\r\n 0\r\n );\r\n will-change: transform;\r\n }\r\n\r\n .giant-text {\r\n position: relative;\r\n display: inline-block;\r\n font-family: 'Syncopate', system-ui, sans-serif;\r\n font-size: 9rem;\r\n font-weight: 800;\r\n line-height: 0.95;\r\n letter-spacing: 0;\r\n color: rgba(255, 255, 255, 0.96);\r\n white-space: nowrap;\r\n text-transform: uppercase;\r\n transform-origin: center center;\r\n text-shadow:\r\n 0 0 1px rgba(255, 255, 255, 0.84),\r\n 0 0 38px rgba(255, 255, 255, 0.18),\r\n 0 18px 70px rgba(0, 0, 0, 0.52);\r\n opacity: 0;\r\n filter: blur(18px);\r\n transform:\r\n translate3d(0, 58px, 0)\r\n scaleX(var(--title-scale-x))\r\n scaleY(var(--title-scale-y))\r\n rotateX(9deg);\r\n animation: titleIn 1.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n will-change: transform, opacity, filter;\r\n }\r\n\r\n .giant-text::after {\r\n content: attr(data-text);\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n }\r\n\r\n .giant-text::after {\r\n background: linear-gradient(104deg, transparent 0 35%, rgba(255, 255, 255, 0.98) 44%, rgba(255, 255, 255, 0.28) 49%, transparent 58% 100%);\r\n background-size: 240% 100%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n mix-blend-mode: screen;\r\n opacity: 0;\r\n animation: titleSheen 7.8s cubic-bezier(0.45, 0, 0.2, 1) 1.45s infinite;\r\n }\r\n\r\n .sub-text {\r\n font-family: 'Inter', system-ui, sans-serif;\r\n font-size: 0.95rem;\r\n letter-spacing: 0;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n margin-top: 1.7vh;\r\n opacity: 0;\r\n filter: blur(10px);\r\n transform: translate3d(0, 14px, 0);\r\n animation: subtitleIn 1.2s cubic-bezier(0.2, 1, 0.3, 1) 0.72s forwards;\r\n }\r\n\r\n \/* === \u5e95\u90e8\u6309\u94ae === *\/\r\n .button-container {\r\n --panel-x: 50%;\r\n --panel-y: 50%;\r\n position: fixed;\r\n bottom: 8%;\r\n left: 50%;\r\n z-index: 20;\r\n display: flex;\r\n gap: 10px;\r\n padding: 10px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n border-radius: 100px;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n opacity: 0;\r\n transform: translate3d(-50%, 32px, 0) scale(0.98);\r\n animation: floatUpButtons 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.18s forwards;\r\n will-change: transform, opacity;\r\n }\r\n\r\n .button-container::before {\r\n content: none;\r\n }\r\n\r\n .button-container::after {\r\n content: none;\r\n }\r\n\r\n .button {\r\n --button-x: 0px;\r\n --button-y: 0px;\r\n --local-x: 50%;\r\n --local-y: 50%;\r\n position: relative;\r\n overflow: hidden;\r\n min-width: 6.1rem;\r\n text-decoration: none;\r\n color: rgba(255, 255, 255, 0.92);\r\n padding: 12px 28px;\r\n border-radius: 100px;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n font-family: 'Inter', system-ui, sans-serif;\r\n letter-spacing: 0;\r\n white-space: nowrap;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transform: translate3d(var(--button-x), var(--button-y), 0);\r\n transition:\r\n transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),\r\n background 0.28s ease,\r\n color 0.28s ease,\r\n box-shadow 0.28s ease;\r\n will-change: transform;\r\n }\r\n\r\n .button::before {\r\n content: none;\r\n }\r\n\r\n .button::after {\r\n content: none;\r\n }\r\n\r\n .button span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .button:hover {\r\n background: #fff;\r\n color: #000;\r\n box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .button:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .button:hover::after {\r\n transform: translate3d(115%, 0, 0) skewX(-16deg);\r\n }\r\n\r\n .button:active {\r\n transform: translate3d(var(--button-x), var(--button-y), 0) scale(0.96);\r\n }\r\n\r\n \/* === \u89d2\u843d UI === *\/\r\n .hud-corner {\r\n position: fixed;\r\n padding: 25px;\r\n z-index: 15;\r\n font-family: 'Inter', system-ui, sans-serif;\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.74);\r\n letter-spacing: 0;\r\n pointer-events: none;\r\n mix-blend-mode: exclusion;\r\n line-height: 1.6;\r\n opacity: 0;\r\n filter: blur(8px);\r\n animation: hudIn 0.9s ease 1.05s forwards;\r\n }\r\n\r\n .top-left {\r\n top: 0;\r\n left: 0;\r\n mix-blend-mode: normal;\r\n }\r\n\r\n .brand-name {\r\n display: block;\r\n font-weight: 700;\r\n color: #fff;\r\n text-shadow: 0 1px 8px rgba(0, 0, 0, 0.86);\r\n }\r\n\r\n .top-right {\r\n top: 0;\r\n right: 0;\r\n text-align: right;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n body.admin-bar .top-left,\r\n body.admin-bar .top-right {\r\n top: 32px;\r\n }\r\n\r\n .rec-dot {\r\n width: 10px;\r\n height: 10px;\r\n background-color: var(--accent);\r\n border-radius: 50%;\r\n margin-right: 8px;\r\n box-shadow: 0 0 14px var(--accent), 0 0 32px rgba(255, 0, 60, 0.45);\r\n animation: blink 1.45s infinite;\r\n }\r\n\r\n .cursor-glass {\r\n display: none;\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n z-index: 50;\r\n width: 42px;\r\n height: 42px;\r\n border: 1px solid rgba(255, 255, 255, 0.48);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n backdrop-filter: blur(8px) saturate(1.4);\r\n -webkit-backdrop-filter: blur(8px) saturate(1.4);\r\n box-shadow:\r\n inset 0 1px 10px rgba(255, 255, 255, 0.24),\r\n 0 0 22px rgba(255, 255, 255, 0.16);\r\n mix-blend-mode: exclusion;\r\n opacity: 0;\r\n transform: translate3d(-50px, -50px, 0);\r\n transition:\r\n opacity 0.25s ease,\r\n width 0.28s cubic-bezier(0.16, 1, 0.3, 1),\r\n height 0.28s cubic-bezier(0.16, 1, 0.3, 1),\r\n border-color 0.28s ease;\r\n will-change: transform, width, height;\r\n }\r\n\r\n .cursor-glass::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.9);\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n body.is-ready .cursor-glass {\r\n opacity: 1;\r\n }\r\n\r\n body.is-hovering .cursor-glass {\r\n width: 58px;\r\n height: 58px;\r\n border-color: rgba(255, 255, 255, 0.72);\r\n }\r\n\r\n .touch-ripple {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n z-index: 45;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n border: 1px solid rgba(255, 255, 255, 0.58);\r\n background: rgba(255, 255, 255, 0.08);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n transform: translate3d(-50%, -50%, 0) scale(1);\r\n animation: rippleOut 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n\r\n @keyframes titleIn {\r\n 0% {\r\n opacity: 0;\r\n filter: blur(18px);\r\n transform:\r\n translate3d(0, 58px, 0)\r\n scaleX(var(--title-enter-scale-x))\r\n scaleY(var(--title-enter-scale-y))\r\n rotateX(9deg);\r\n }\r\n 62% {\r\n opacity: 1;\r\n filter: blur(0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n filter: blur(0);\r\n transform:\r\n translate3d(0, 0, 0)\r\n scaleX(var(--title-scale-x))\r\n scaleY(var(--title-scale-y))\r\n rotateX(0deg);\r\n }\r\n }\r\n\r\n @keyframes subtitleIn {\r\n to {\r\n opacity: 1;\r\n filter: blur(0);\r\n transform: translate3d(0, 0, 0);\r\n }\r\n }\r\n\r\n @keyframes hudIn {\r\n to {\r\n opacity: 1;\r\n filter: blur(0);\r\n }\r\n }\r\n\r\n @keyframes floatUpButtons {\r\n to {\r\n opacity: 1;\r\n transform: translate3d(-50%, 0, 0) scale(1);\r\n }\r\n }\r\n\r\n @keyframes mobileFloatUpButtons {\r\n to {\r\n opacity: 1;\r\n transform: translate3d(0, 0, 0) scale(1);\r\n }\r\n }\r\n\r\n @keyframes blink {\r\n 0%,\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 50% {\r\n opacity: 0.3;\r\n transform: scale(0.82);\r\n }\r\n }\r\n\r\n @keyframes titleSheen {\r\n 0%,\r\n 24% {\r\n opacity: 0;\r\n background-position: 135% 0;\r\n }\r\n 38% {\r\n opacity: 0.92;\r\n }\r\n 56%,\r\n 100% {\r\n opacity: 0;\r\n background-position: -45% 0;\r\n }\r\n }\r\n\r\n @keyframes grainShift {\r\n 0% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 20% {\r\n transform: translate3d(-2%, 1%, 0);\r\n }\r\n 40% {\r\n transform: translate3d(2%, -1%, 0);\r\n }\r\n 60% {\r\n transform: translate3d(-1%, -2%, 0);\r\n }\r\n 80% {\r\n transform: translate3d(1%, 2%, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n }\r\n\r\n @keyframes rippleOut {\r\n to {\r\n opacity: 0;\r\n transform: translate3d(-50%, -50%, 0) scale(9);\r\n }\r\n }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n body {\r\n cursor: none;\r\n }\r\n\r\n .button {\r\n cursor: none;\r\n }\r\n\r\n .cursor-glass {\r\n display: block;\r\n }\r\n }\r\n\r\n @media (min-width: 1280px) {\r\n .giant-text {\r\n font-size: 12rem;\r\n }\r\n }\r\n\r\n @media (min-width: 1680px) {\r\n .giant-text {\r\n font-size: 15rem;\r\n }\r\n }\r\n\r\n \/* === \u624b\u673a\u7aef\u9002\u914d === *\/\r\n @media (max-width: 900px) {\r\n :root {\r\n --title-scale-x: 1.12;\r\n --title-enter-scale-x: 1.03;\r\n --title-enter-scale-y: 0.98;\r\n }\r\n\r\n .hero-content {\r\n top: 40%;\r\n }\r\n\r\n .giant-text {\r\n font-family: 'Inter', system-ui, sans-serif;\r\n font-size: 4.8rem;\r\n font-weight: 900;\r\n }\r\n\r\n .sub-text {\r\n font-size: 0.82rem;\r\n margin-top: 1.4vh;\r\n }\r\n\r\n .hud-corner {\r\n padding: 15px;\r\n }\r\n\r\n .button-container {\r\n display: grid;\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 4px;\r\n left: max(12px, calc((100% - 480px) \/ 2));\r\n right: max(12px, calc((100% - 480px) \/ 2));\r\n width: auto;\r\n padding: 6px;\r\n bottom: 50px;\r\n transform: translate3d(0, 32px, 0) scale(0.98);\r\n animation: mobileFloatUpButtons 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.18s forwards;\r\n }\r\n\r\n .button {\r\n width: 100%;\r\n min-width: 0;\r\n padding: 10px 0;\r\n text-align: center;\r\n font-size: 0.78rem;\r\n }\r\n\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .giant-text {\r\n font-size: 3.5rem;\r\n }\r\n\r\n .sub-text {\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *,\r\n *::before,\r\n *::after {\r\n animation-duration: 0.001ms !important;\r\n animation-iteration-count: 1 !important;\r\n scroll-behavior: auto !important;\r\n transition-duration: 0.001ms !important;\r\n }\r\n\r\n .video-container,\r\n .hero-content,\r\n .button {\r\n transform: none !important;\r\n }\r\n\r\n .hero-content {\r\n transform: translate3d(-50%, -50%, 0) !important;\r\n }\r\n\r\n .cursor-glass,\r\n .touch-ripple {\r\n display: none !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"video-container\">\r\n <video class=\"bg-video\" autoplay muted loop playsinline>\r\n <source src=\"https:\/\/chk.show\/wp-content\/uploads\/2024\/11\/\u5c01\u9762-v4.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n\r\n <div class=\"grain\"><\/div>\r\n\r\n <div class=\"hud-corner top-left\">\r\n <span class=\"brand-name\">PORTFOLIO \u00a92026<\/span>\r\n <\/div>\r\n\r\n <div class=\"hud-corner top-right\">\r\n <span class=\"rec-dot\"><\/span>REC\r\n <\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"giant-text\" data-text=\"CAURIS\">CAURIS<\/div>\r\n <div class=\"sub-text\">Director & Editor<\/div>\r\n <\/div>\r\n\r\n <div class=\"button-container\" aria-label=\"\u4f5c\u54c1\u5206\u7c7b\u5bfc\u822a\">\r\n <a href=\"https:\/\/chk.show\/index.php\/index.php\/xcp2\/\" class=\"button\"><span>\u5ba3\u4f20\u7247<\/span><\/a>\r\n <a href=\"https:\/\/chk.show\/index.php\/index.php\/dp2\/\" class=\"button\"><span>\u77ed\u7247<\/span><\/a>\r\n <a href=\"https:\/\/chk.show\/index.php\/index.php\/jlp2\/\" class=\"button\"><span>\u7eaa\u5f55\u7247<\/span><\/a>\r\n <a href=\"https:\/\/me.chk.show\/\" class=\"button\"><span>ME<\/span><\/a>\r\n <\/div>\r\n\r\n <div class=\"cursor-glass\" aria-hidden=\"true\"><\/div>\r\n\r\n <script>\r\n (() => {\r\n const root = document.documentElement;\r\n const body = document.body;\r\n const video = document.querySelector('.bg-video');\r\n const cursor = document.querySelector('.cursor-glass');\r\n const panel = document.querySelector('.button-container');\r\n const buttons = document.querySelectorAll('.button');\r\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\r\n const pointer = {\r\n targetX: window.innerWidth \/ 2,\r\n targetY: window.innerHeight \/ 2,\r\n currentX: window.innerWidth \/ 2,\r\n currentY: window.innerHeight \/ 2\r\n };\r\n\r\n const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\r\n\r\n const setPointer = (event) => {\r\n pointer.targetX = event.clientX;\r\n pointer.targetY = event.clientY;\r\n body.classList.add('is-ready');\r\n };\r\n\r\n window.addEventListener('pointermove', setPointer, { passive: true });\r\n\r\n window.addEventListener('resize', () => {\r\n pointer.targetX = window.innerWidth \/ 2;\r\n pointer.targetY = window.innerHeight \/ 2;\r\n }, { passive: true });\r\n\r\n const animate = () => {\r\n pointer.currentX += (pointer.targetX - pointer.currentX) * 0.12;\r\n pointer.currentY += (pointer.targetY - pointer.currentY) * 0.12;\r\n\r\n const parallaxX = (window.innerWidth \/ 2 - pointer.currentX) \/ 70;\r\n const parallaxY = (window.innerHeight \/ 2 - pointer.currentY) \/ 70;\r\n\r\n root.style.setProperty('--cursor-x', `${pointer.currentX.toFixed(1)}px`);\r\n root.style.setProperty('--cursor-y', `${pointer.currentY.toFixed(1)}px`);\r\n root.style.setProperty('--parallax-x', `${parallaxX.toFixed(2)}px`);\r\n root.style.setProperty('--parallax-y', `${parallaxY.toFixed(2)}px`);\r\n root.style.setProperty('--bg-x', `${(-parallaxX * 0.42).toFixed(2)}px`);\r\n root.style.setProperty('--bg-y', `${(-parallaxY * 0.42).toFixed(2)}px`);\r\n\r\n if (cursor && finePointer) {\r\n cursor.style.transform = `translate3d(${(pointer.currentX - cursor.offsetWidth \/ 2).toFixed(1)}px, ${(pointer.currentY - cursor.offsetHeight \/ 2).toFixed(1)}px, 0)`;\r\n }\r\n\r\n if (!reduceMotion) {\r\n requestAnimationFrame(animate);\r\n }\r\n };\r\n\r\n if (!reduceMotion) {\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n if (video) {\r\n video.addEventListener('canplay', () => body.classList.add('video-ready'), { once: true });\r\n window.setTimeout(() => body.classList.add('video-ready'), 1400);\r\n }\r\n\r\n if (panel) {\r\n panel.addEventListener('pointermove', (event) => {\r\n const rect = panel.getBoundingClientRect();\r\n panel.style.setProperty('--panel-x', `${event.clientX - rect.left}px`);\r\n panel.style.setProperty('--panel-y', `${event.clientY - rect.top}px`);\r\n }, { passive: true });\r\n }\r\n\r\n buttons.forEach((button) => {\r\n button.addEventListener('pointermove', (event) => {\r\n const rect = button.getBoundingClientRect();\r\n const localX = event.clientX - rect.left;\r\n const localY = event.clientY - rect.top;\r\n const magneticX = clamp(((localX - rect.width \/ 2) \/ rect.width) * 18, -9, 9);\r\n const magneticY = clamp(((localY - rect.height \/ 2) \/ rect.height) * 14, -7, 7);\r\n\r\n button.style.setProperty('--local-x', `${localX}px`);\r\n button.style.setProperty('--local-y', `${localY}px`);\r\n button.style.setProperty('--button-x', `${magneticX.toFixed(2)}px`);\r\n button.style.setProperty('--button-y', `${magneticY.toFixed(2)}px`);\r\n }, { passive: true });\r\n\r\n button.addEventListener('pointerenter', () => body.classList.add('is-hovering'));\r\n button.addEventListener('pointerleave', () => {\r\n body.classList.remove('is-hovering');\r\n button.style.setProperty('--button-x', '0px');\r\n button.style.setProperty('--button-y', '0px');\r\n button.style.setProperty('--local-x', '50%');\r\n button.style.setProperty('--local-y', '50%');\r\n });\r\n });\r\n\r\n document.addEventListener('pointerdown', (event) => {\r\n if (reduceMotion) return;\r\n\r\n const ripple = document.createElement('span');\r\n ripple.className = 'touch-ripple';\r\n ripple.style.left = `${event.clientX}px`;\r\n ripple.style.top = `${event.clientY}px`;\r\n body.appendChild(ripple);\r\n ripple.addEventListener('animationend', () => ripple.remove(), { once: true });\r\n }, { passive: true });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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>CAURIS – VISUAL DIRECTOR PORTFOLIO \u00a92026 REC CAUR […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-2505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/pages\/2505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/comments?post=2505"}],"version-history":[{"count":202,"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/pages\/2505\/revisions"}],"predecessor-version":[{"id":2962,"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/pages\/2505\/revisions\/2962"}],"wp:attachment":[{"href":"https:\/\/chk.show\/index.php\/wp-json\/wp\/v2\/media?parent=2505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}