/* /css/oink-tap.css — OINK-TAP-2026-09-08 v3 (OLR §3: the press-settle is a native :active state; JS owns only the touch-point ring and the in-flight state). Platform-wide tap acknowledgement (Doctrine 2026-09-08):
   every tappable element answers a tap with a soft, ephemeral glow ring at the touch point (top layer,
   never inside the element, so no layout is touched), a 120 ms press-settle on the element itself,
   and a quiet shimmer while a navigation/submit is in flight. Reduced motion → a plain opacity dip. */
.oink-tap-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483646; overflow: hidden; contain: strict; }
.oink-tap-ring {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tap-c, #ff3fa4) 60%, transparent) 0%, color-mix(in srgb, var(--tap-c, #ff3fa4) 22%, transparent) 42%, transparent 70%);
  transform: translate3d(var(--tap-x, 0px), var(--tap-y, 0px), 0) scale(.5); opacity: .95;
  animation: oink-tap-ring .46s cubic-bezier(.2, .8, .2, 1) forwards; will-change: transform, opacity;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .oink-tap-ring { background: radial-gradient(circle, rgba(255, 63, 164, .55) 0%, rgba(255, 63, 164, .2) 42%, transparent 70%); }
}
@keyframes oink-tap-ring {
  0%   { transform: translate3d(var(--tap-x, 0px), var(--tap-y, 0px), 0) scale(.5); opacity: .95; }
  60%  { opacity: .35; }
  100% { transform: translate3d(var(--tap-x, 0px), var(--tap-y, 0px), 0) scale(6.5); opacity: 0; }
}
:where(a[href], button, [role="button"], [role="tab"], [role="menuitem"], input[type="submit"], input[type="button"], label[for], summary, [data-tap], .dock a, .dock button, .oink-pill-nav a, .dbtn, .tk-l, .avatar, .av, .pen-ava, .sp-av, .oc7-av):not([data-tap="off"]):not([data-tap-off] *) {
  transition: scale .14s ease-out, filter .14s ease-out;
}
:where(a[href], button, [role="button"], [role="tab"], [role="menuitem"], input[type="submit"], input[type="button"], label[for], summary, [data-tap], .dock a, .dock button, .oink-pill-nav a, .dbtn, .tk-l, .avatar, .av, .pen-ava, .sp-av, .oc7-av):not([data-tap="off"]):not([data-tap-off] *):active {
  scale: .97; filter: brightness(1.12); transition-duration: 0s;   /* individual `scale` property: never clobbers an element's own transform (centred FABs, translated dock items) */
}
.oink-pending { position: relative; overflow: hidden; }
.oink-pending::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
  background-size: 220% 100%; animation: oink-tap-shimmer 1.1s linear infinite;
}
input.oink-pending, select.oink-pending { opacity: .78; }
@keyframes oink-tap-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .oink-tap-ring { display: none; }
  :where(a[href], button, [role="button"], input[type="submit"], [data-tap], .dock a, .avatar, .av):active { scale: none; filter: none; opacity: .82; }
  .oink-pending::after { animation: none; background: rgba(255, 255, 255, .08); }
}