:root { --motion-ease: cubic-bezier(.2,.75,.2,1); --motion-settle: cubic-bezier(.16,1,.3,1); --motion-time: .5s; }
/* V7: a precise point inside an elastic contour; hover wraps the actual target. */
.motion-cursor,.motion-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 110;
  width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity .18s ease; will-change: transform;
}
.motion-cursor.is-visible,.motion-cursor-dot.is-visible { opacity: 1; }
.motion-cursor-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); z-index: 111; }
.motion-cursor-ring {
  position: absolute; inset: 0 auto auto 0;
  width: 46px; height: 46px; border: 1.2px solid var(--ink); border-radius: 50%;
  opacity: .65; background: color-mix(in srgb,var(--bg) 8%,transparent);
  transition: border-color .2s,background-color .25s,opacity .2s,box-shadow .25s;
  will-change: width,height,transform;
}
.motion-cursor-label {
  position: absolute; top: 0; left: 0; color: var(--accent);
  font: 500 17px/1.2 var(--font); white-space: nowrap;
  opacity: 0; transform: translate(-50%,-50%) scale(.65);
  transition: opacity .16s,transform .32s cubic-bezier(.2,.8,.3,1);
}
.motion-cursor.has-target .motion-cursor-ring {
  border-color: var(--accent); background: color-mix(in srgb,var(--accent) 7%,transparent); opacity: .9;
}
.motion-cursor.has-target .motion-cursor-label { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.motion-cursor.is-wrapped .motion-cursor-ring {
  opacity: .8; border-color: var(--ink); background: color-mix(in srgb,var(--ink) 3%,transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--bg) 35%,transparent);
}
.motion-cursor.is-wrapped .motion-cursor-label,.motion-cursor.is-project-key .motion-cursor-label { opacity: 0; }
.motion-cursor.is-view .motion-cursor-ring {
  border-color: var(--ink); background: var(--ink); opacity: .96;
  box-shadow: 0 5px 24px #00000018;
}
.motion-cursor.is-view .motion-cursor-label { color: var(--bg); font-size: 10px; letter-spacing: .03em; }
.motion-cursor.is-project-key .motion-cursor-ring { border-color: var(--cursor-project-color,var(--accent)); background: transparent; opacity: .9; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .motion-pointer-active,.motion-pointer-active body,.motion-pointer-active a,.motion-pointer-active button,.motion-pointer-active [role="button"] { cursor: none!important; }
  .motion-pointer-active :is(video,audio,input,textarea,select,[contenteditable],[data-no-custom-cursor]),.motion-pointer-active [data-no-custom-cursor] * { cursor: auto!important; }
  .motion-magnetic {
    translate: var(--magnet-x,0px) var(--magnet-y,0px);
    transition: translate .72s cubic-bezier(.18,1.65,.3,1),color .2s,background-color .25s,border-color .25s;
    will-change: translate;
  }
  .motion-magnetic.is-magnetic-active { transition: color .2s,background-color .25s,border-color .25s; }
  .pk-key::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
    background:radial-gradient(75px circle at var(--key-light-x,50%) var(--key-light-y,30%),color-mix(in srgb,var(--project-color,var(--accent)) 35%,transparent),transparent 78%);
    transition:opacity .3s;
  }
  .pk-key.is-key-lit::after { opacity:1; }
  .project-section { perspective:1400px; }
  .motion-surface {
    rotate:var(--surface-axis-x,0) var(--surface-axis-y,1) 0 var(--surface-angle,0deg);
    transition:rotate .7s cubic-bezier(.2,.9,.3,1);
  }
  .motion-surface.is-surface-active { transition-duration:.25s; }
  .motion-surface-light {
    position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; opacity:0;
    background:radial-gradient(360px circle at var(--surface-light-x,50%) var(--surface-light-y,50%),rgba(255,255,255,.14),transparent 76%);
    transition:opacity .5s;
  }
  .is-surface-active .motion-surface-light { opacity:1; }
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
  .motion-cursor,.motion-cursor-dot,.motion-surface-light { display:none!important; }
  .motion-magnetic { translate:none!important; }
  .motion-surface { rotate:none!important; }
  .pk-key::after { display:none; }
}