/*
 * tap-cue.css — a small animated pointer on the nav "Call Now" button.
 *
 * Ben's brief (2026-07-28): an extremely light tap cue, a finger on
 * iPhone/iPad and a desktop cursor on desktop, tilted 20 degrees to the left.
 *
 * Icon: carbon:touch-1 (IBM Carbon, Apache 2.0) on touch, and
 * fluent:cursor-click-24-filled (Microsoft Fluent, MIT) on desktop. Inlined by
 * add-tap-cue.js so there is no extra request.
 *
 * Pure CSS on purpose — no SMIL, no JavaScript. Script-driven SMIL froze the
 * renderer earlier in this project, and this sits on the highest-value button
 * on all ~200 pages.
 *
 * The tilt is baked into EVERY keyframe. `transform` is one property, so a
 * separate `rotate` declaration would be overwritten by the animation's
 * translate/scale and the tilt would silently vanish.
 */

.vtq-tap-host {
  position: relative;
}

.vtq-tapcue {
  position: absolute;
  right: -9px;
  bottom: -13px;
  width: 24px;
  height: 24px;
  pointer-events: none; /* must never intercept the tel: click or its conversion */
  color: #171717;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
  animation: vtq-tap-press 4.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-origin: 55% 15%;
  z-index: 2;
}

/* The nav button is dark in light mode and white in dark mode, so the cue
   flips with it to stay legible against the page, not the button. */
.dark .vtq-tapcue {
  color: #ffffff;
}

.vtq-tapcue svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Press, lift, a smaller second tap, then a long rest. ~70% of the cycle is
   stillness — that is what keeps it a nudge rather than a flashing banner. */
@keyframes vtq-tap-press {
  0%,
  70% {
    transform: rotate(-20deg) translate(0, 0) scale(1);
    opacity: 0.92;
  }
  76% {
    transform: rotate(-20deg) translate(-4px, -6px) scale(1.04);
    opacity: 1;
  }
  82% {
    transform: rotate(-20deg) translate(0, 0) scale(0.92);
  }
  88% {
    transform: rotate(-20deg) translate(-2px, -3px) scale(1.02);
  }
  94%,
  100% {
    transform: rotate(-20deg) translate(0, 0) scale(1);
    opacity: 0.92;
  }
}

/* Finger by default (mobile-first — ~90% of this site's traffic). */
.vtq-tapcue .vtq-cue-cursor {
  display: none;
}

/* Desktop gets the click cursor. Gated on pointer type as well as width, so a
   touchscreen laptop keeps the finger rather than showing a cursor its user
   cannot use, and an iPad at 1024px stays on the finger. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .vtq-tapcue .vtq-cue-touch {
    display: none;
  }
  .vtq-tapcue .vtq-cue-cursor {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vtq-tapcue {
    animation: none;
    transform: rotate(-20deg);
  }
}