/* ═══════════════════════════════════════════════════════
   ZEVSAMA STUDIO — tap-impact.css
   Mobile touch feedback: ring + dot + 4 sparks
   Phase 02 — diekstrak dari index.html (line 78–123)
   Dipakai di: semua halaman
   ═══════════════════════════════════════════════════════ */

/* ── TAP IMPACT EFFECT — mobile touch only ── */
.zt-tap-impact {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 1;
  animation: ztTapBurst 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Outer ring */
.zt-tap-impact.ring {
  width: 48px; height: 48px;
  border: 1.5px solid var(--pink);
  background: transparent;
  animation-duration: 400ms;
}

/* Inner fill dot */
.zt-tap-impact.dot {
  width: 12px; height: 12px;
  background: var(--pink);
  animation-duration: 260ms;
}

/* Sparkle lines — 4 buah */
.zt-tap-spark {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  width: 2px;
  border-radius: 1px;
  background: var(--pink);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: ztSparkShoot 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ztTapBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes ztSparkShoot {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(0); }
  40%  { opacity: 0.7; transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(1) translateY(calc(var(--dist) * -0.6)); }
  100% { opacity: 0;   transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(0.4) translateY(calc(var(--dist) * -1)); }
}