/* Mouse-driven decoration. Content and controls keep their normal touch/keyboard behaviour. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-pointer-surface] {
    position: relative;
    isolation: isolate;
    --pointer-tint: 36, 79, 234;
    --pointer-strength: .075;
  }

  [data-pointer-surface]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(480px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(var(--pointer-tint), var(--pointer-strength)), transparent 75%);
    opacity: 0;
    transition: opacity .35s ease;
  }

  [data-pointer-surface][data-pointer-active]::before { opacity: 1; }
  .new-hero[data-pointer-surface] { --pointer-strength: .12; }
  .services-section[data-pointer-surface],
  .studio-dark[data-pointer-surface] { --pointer-tint: 145, 173, 255; --pointer-strength: .075; }
  .studio-blue[data-pointer-surface] { --pointer-tint: 235, 241, 255; --pointer-strength: .16; }

  /* Rows share the page surface. Only the light moves; text and rules stay put. */
  [data-pointer-row] {
    position: relative;
    isolation: isolate;
    transform: none;
    --row-tint: 75, 111, 255;
    --row-strength: .07;
  }

  [data-pointer-row]::after {
    content: "";
    position: absolute;
    inset: -12px 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(280px 130px at var(--row-x, 50%) calc(var(--row-y, 50%) + 12px), rgba(var(--row-tint), var(--row-strength)), transparent 75%);
    mask-image: radial-gradient(ellipse farthest-side at center, #000 30%, transparent 100%);
    filter: blur(8px);
    opacity: 0;
    transition: opacity .3s ease;
  }

  [data-pointer-row][data-pointer-active]::after { opacity: 1; }
  .services-section [data-pointer-row],
  .studio-dark [data-pointer-row] { --row-tint: 182, 202, 255; --row-strength: .09; }

  [data-pointer-card] {
    position: relative;
    isolation: isolate;
    transform: perspective(1000px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
    transition: transform .22s ease-out, box-shadow .25s ease, border-color .25s ease;
  }

  [data-pointer-card]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(300px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(75, 111, 255, .10), transparent 78%);
    opacity: 0;
    transition: opacity .25s ease;
  }

  [data-pointer-card][data-pointer-active]::after { opacity: 1; }

  .studio-card[data-pointer-card]:hover {
    transform: perspective(1000px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateY(-5px);
    box-shadow: 0 22px 48px -16px #18223638;
  }
  .studio-card[data-pointer-card]::after {
    z-index: 2;
    background: radial-gradient(300px circle at var(--card-x, 50%) var(--card-y, 50%), #fff3, transparent 72%);
  }
  .studio-card[data-pointer-card] .studio-card-copy { position: relative; z-index: 3; }
  [data-pointer-magnet] {
    translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
    transition: translate .2s ease-out, background .2s ease, color .2s ease, transform .2s ease;
  }
  .studio-link[data-pointer-magnet]:hover { gap: 38px; }
  .home-demo-link[data-pointer-magnet]:hover { gap: 20px; }
  [data-pointer-magnet] > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform .25s ease;
  }
  [data-pointer-magnet]:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); }
  [data-pointer-magnet]:focus-visible { translate: none; transform: none; }
  [data-pointer-card]:focus-visible,
  .studio-card[data-pointer-card]:focus-visible { transform: none; }

  .site-nav > a:not(.nav-contact), .quiet-link, .hero-bottom a {
    background-image: linear-gradient(var(--blue), var(--blue));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size .25s ease, color .2s ease;
  }
  .site-nav > a:not(.nav-contact):hover, .quiet-link:hover, .hero-bottom a:hover { background-size: 100% 1px; }
  .work-controls button .work-arrow { transition: transform .25s ease; }
  .work-controls button:hover .work-arrow { transform: translate(3px, -3px); }

  .design-lab .lab-specimen {
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(-6deg);
    transition: transform .2s ease-out, background .4s ease, color .4s ease, box-shadow .3s ease;
  }
  .design-lab[data-pointer-active] .lab-specimen { box-shadow: 18px 32px 38px -18px #19243a88; }
  .design-lab .lab-tag {
    translate: calc(var(--parallax-x, 0px) * -.5) calc(var(--parallax-y, 0px) * -.5);
    transition: translate .25s ease-out;
  }
  .design-lab .lab-orbit {
    translate: calc(var(--parallax-x, 0px) * -.3) calc(var(--parallax-y, 0px) * -.3);
    transition: translate .3s ease-out;
  }
}