/* TapTapFeedback motion. JavaScript writes variables, never inline transforms.
   Override --tap-base-transform to compose a pre-existing transform if needed. */
[data-tilt],
[data-magnetic],
[data-parallax] {
  transform:
    translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0)
    translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0)
    perspective(1100px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    var(--tap-base-transform, translateZ(0));
  transition: transform 280ms cubic-bezier(.2, .75, .25, 1);
}

/* Content is visible by default. Only successfully initialized JS hides it. */
[data-reveal].tm-reveal-ready {
  transition:
    opacity 620ms cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
    translate 620ms cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
    transform 280ms cubic-bezier(.2, .75, .25, 1);
}

[data-reveal].tm-reveal-pending {
  opacity: 0;
  translate: 0 16px;
}

.tap-demo,
.tm-tap-surface {
  position: relative;
  isolation: isolate;
}

.tm-tap-surface.is-tapping {
  animation: tm-tap-press 240ms cubic-bezier(.2, .75, .25, 1);
}

.tap-ripple {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  animation: tm-tap-ripple 620ms cubic-bezier(.15, .65, .25, 1) forwards;
}

@keyframes tm-tap-press {
  0%, 100% { scale: 1; }
  42% { scale: .975; }
}

@keyframes tm-tap-ripple {
  from { opacity: .58; transform: scale(.5); }
  to { opacity: 0; transform: scale(5.5); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].tm-reveal-ready,
  [data-reveal].tm-reveal-pending {
    opacity: 1;
    translate: none;
    transition: none;
  }

  [data-tilt],
  [data-magnetic],
  [data-parallax] {
    transform: var(--tap-base-transform, none);
    transition: none;
  }

  .tm-tap-surface.is-tapping { animation: none; }
  .tap-ripple { display: none; animation: none; }
}