/* Pointer feedback shares the colors of the motion field. Native cursor stays intact. */
.pointer-surface{position:relative;isolation:isolate}.pointer-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(360px circle at var(--spot-x,50%) var(--spot-y,50%),#c297ff24 0%,#8470f80b 45%,transparent 75%);opacity:0;transition:opacity .35s}.pointer-surface.is-pointed::before{opacity:1}.steps article.pointer-surface::before{z-index:0;background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%),#ccb1ff28,transparent 72%)}.steps article.pointer-surface>*{position:relative;z-index:1}.steps article.pointer-surface{transition:transform .35s ease-out,border-color .3s,box-shadow .3s;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.steps article.is-pointed{border-color:#bba0fa66;box-shadow:0 15px 50px #5f3a971d}.service-list details.pointer-surface{border-radius:12px;transition:background .3s,border-color .3s}.service-list details.is-pointed{background:#b38aff06;border-color:#b49aec66}.service-list details summary h3{transition:color .25s,translate .3s}.service-list details.is-pointed summary h3{color:#e3d3ff;translate:5px 0}.service-list details.is-pointed .plus{color:#eadcff}.project-stage.pointer-surface::before{z-index:2;background:radial-gradient(300px circle at var(--spot-x,50%) var(--spot-y,50%),#bde9ff30,transparent 72%);mix-blend-mode:screen}.project-stage .mock-browser{transition:transform .45s ease-out;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.contact.pointer-surface::before{z-index:-1;background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,50%),#dfa1f03d,#9c7be914 45%,transparent 75%)}.magnetic{translate:var(--mag-x,0px) var(--mag-y,0px);transition:translate .22s ease-out,box-shadow .25s,transform .25s}.primary.magnetic{position:relative;overflow:hidden}.primary.magnetic::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(100px circle at var(--spot-x,50%) var(--spot-y,50%),#ffffffc0,transparent 75%);opacity:0;transition:opacity .3s}.primary.magnetic.is-pointed::after{opacity:.65}.primary.magnetic span{transition:translate .25s}.primary.magnetic.is-pointed span{translate:3px -3px}.text-link,.contact-top{transition:color .25s,border-color .25s,translate .22s}.text-link:hover,.contact-top:hover{color:#dcc5ff;border-color:#bc91ff}.project-tabs button:hover{color:#e2caff}.field-controls button:hover{background:#ac87e72b;color:white}.tags span{transition:background .25s,border-color .25s}.tags span:hover{background:#b78dff19;border-color:#ba98f666}.service-list details:focus-within,.steps article:focus-within{border-color:#a9c8ff}.primary:focus-visible,.field-controls button:focus-visible{box-shadow:0 0 25px #ab8cff55}@media(hover:none),(pointer:coarse){.pointer-surface::before,.primary.magnetic::after{display:none}.magnetic{translate:0 0!important}.steps article.pointer-surface,.project-stage .mock-browser{transform:none!important}}@media(prefers-reduced-motion:reduce){.magnetic{translate:0 0!important}.steps article.pointer-surface,.project-stage .mock-browser{transform:none!important}.service-list details.is-pointed summary h3,.primary.magnetic.is-pointed span{translate:0 0}}.paused .magnetic{translate:0 0!important}.paused .steps article.pointer-surface,.paused .project-stage .mock-browser{transform:none!important}

/* The full strip responds, with the strongest response nearest the pointer. */
.creative-strip.pointer-surface::before{z-index:0;border-radius:0;background:radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,50%),#c6a0ff40,#8c7dff16 48%,transparent 78%)}
.creative-strip::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(160px 2px at var(--spot-x,50%) 0%,#e5d3ffbb,transparent),radial-gradient(160px 2px at var(--spot-x,50%) 100%,#a6d9ff99,transparent)}
.creative-strip.is-pointed::after{opacity:1}.creative-strip>div{position:relative;z-index:1}
.creative-strip span{display:inline-block;translate:0 calc(var(--near,0)*-5px);scale:calc(1 + var(--near,0)*.065);color:color-mix(in srgb,#fff calc(var(--near,0)*100%),#dfd1ed);text-shadow:0 0 22px rgba(214,178,255,calc(var(--near,0)*.65));transition:translate .25s ease-out,scale .25s ease-out,color .25s,text-shadow .25s}
.creative-strip i{display:inline-block;rotate:calc(var(--near,0)*65deg);scale:calc(1 + var(--near,0)*.24);color:color-mix(in srgb,#cdeaff calc(var(--near,0)*100%),#a77fe2);text-shadow:0 0 20px rgba(168,204,255,calc(var(--near,0)*.7));transition:rotate .4s ease-out,scale .3s,color .3s,text-shadow .3s}
.creative-strip.is-pointed i{animation-play-state:paused}
@media(hover:none),(pointer:coarse){.creative-strip::after{display:none}.creative-strip span,.creative-strip i{translate:0 0;scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.creative-strip span,.creative-strip i{translate:0 0!important;scale:1!important;rotate:0deg!important}}
.paused .creative-strip span,.paused .creative-strip i{translate:0 0!important;scale:1!important;rotate:0deg!important}