/* Mark only intentional cards/figures with data-tilt and heading words with data-kinetic. */
[data-kinetic] {
  display: inline-block;
  transform-origin: 50% 70%;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-motion-ready="tilt"] {
    isolation: isolate;
    transform-style: preserve-3d;
    transform-origin: center;
    transform: perspective(var(--motion-perspective, 1100px))
      translate3d(0, var(--vm-lift, 0px), 0)
      rotateX(var(--vm-rotate-x, 0deg)) rotateY(var(--vm-rotate-y, 0deg));
    box-shadow: var(--vm-shadow-x, 0px) var(--vm-shadow-y, 0px) 34px -22px rgb(0 0 0 / 42%);
    transition: transform 360ms cubic-bezier(.2, .7, .25, 1), box-shadow 360ms ease;
  }

  [data-motion-ready="tilt"][data-motion-positioned] { position: relative; }

  [data-motion-ready="tilt"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgb(244 230 0 / 17%);
    background: radial-gradient(ellipse at var(--vm-light-x, 50%) var(--vm-light-y, 50%),
      rgb(255 255 236 / 11%), transparent 62%);
    opacity: 0;
    transform: translateZ(1px);
    transition: opacity 360ms ease;
  }

  [data-motion-ready="tilt"][data-motion-active]::after { opacity: 1; }

  [data-motion-ready="tilt"] [data-depth] {
    transform: translateZ(calc(var(--motion-layer-depth, 16px) * var(--vm-layer, 0)));
    transition: transform 360ms cubic-bezier(.2, .7, .25, 1);
  }

  [data-depth="1"] { --motion-layer-depth: 12px; }
  [data-depth="2"] { --motion-layer-depth: 24px; }
  [data-depth="3"] { --motion-layer-depth: 36px; }

  [data-motion-ready="kinetic"] {
    transform: perspective(900px)
      translate3d(var(--vm-shift-x, 0px), var(--vm-shift-y, 0px), 0)
      rotateX(var(--vm-rotate-x, 0deg)) rotateY(var(--vm-rotate-y, 0deg));
    text-shadow: 0 2px 0 rgb(0 0 0 / 8%),
      var(--vm-shadow-x, 0px) var(--vm-shadow-y, 0px) 24px rgb(0 0 0 / 14%);
    transition: transform 360ms cubic-bezier(.2, .7, .25, 1), text-shadow 360ms ease;
  }

  [data-motion-active], [data-motion-active] [data-depth] {
    transition-duration: 130ms;
    will-change: transform;
  }

  /* Keyboard focus keeps the site's existing outline; depth requires no pointer gesture. */
  .vm-motion-enabled [data-tilt]:focus-visible {
    box-shadow: 0 12px 30px -20px rgb(0 0 0 / 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-ready], [data-motion-ready] [data-depth] {
    transform: none;
    transition: none;
    will-change: auto;
  }
  [data-motion-ready]::after { display: none; }
}