/* ScrollVars: pointer tilt preset (use with trackPointer / usePointer). */

/* ---- Pointer preset (use with trackPointer / usePointer) ---- */

.sv-tilt {
  --mx: 0;
  --my: 0;
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateY(calc(var(--mx) * var(--sv-tilt, 14deg)))
    rotateX(calc(var(--my) * var(--sv-tilt, 14deg) * -1));
  transform-style: preserve-3d;
  transition: transform 140ms ease-out;
}
.sv-tilt.sv-pointer-leave {
  transition: transform 600ms var(--sv-ease, cubic-bezier(0.28, 0.84, 0.42, 1));
}
.sv-tilt::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.14),
    transparent 42%
  );
  translate: calc(var(--mx) * 38%) calc(var(--my) * 38%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  /* .sv-tilt.sv-pointer-leave (line 15) matches the plain .sv-tilt selector's
     specificity here, so add it too: the override ties and wins on source
     order instead of losing to the leave-transition rule's extra class. */
  .sv-tilt,
  .sv-tilt.sv-pointer-leave {
    transform: none;
    transition: none;
  }
  .sv-tilt::after {
    display: none;
  }
}

/* The same under the page's own switch, html[data-sv-motion="reduce"]
   (core/motion.ts): a test keeps every rule in step with the block above. */
:where([data-sv-motion="reduce"]) .sv-tilt,
:where([data-sv-motion="reduce"]) .sv-tilt.sv-pointer-leave {
  transform: none;
  transition: none;
}
:where([data-sv-motion="reduce"]) .sv-tilt::after {
  display: none;
}