/* assets/css/toque.css
   Resposta ao toque e ao clique (ui/efeitos/toque.js, em React): a bolha de luz que
   nasce do ponto do toque, recortada no formato do controle. A gelatina do próprio
   controle é uma Web Animation e não precisa de CSS. Serve ao app e à página de
   vendas; por isso só usa variáveis próprias, com valor padrão.
   Só transform e opacity animam (compositor): nada de layout por quadro. */

.toque-camada{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;contain:layout paint style}
/* O raio vem do controle (border-radius e clip-path, este garante o recorte no Safari). */
.toque-recorte{position:absolute;overflow:hidden;pointer-events:none}
.toque-bolha{position:absolute;border-radius:50%;pointer-events:none;
  /* bolha de sabão: brilho no alto à esquerda, aro de luz (aparece no dourado) e corpo na cor do
     texto do controle (aparece no papel claro) */
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.42) 0,rgba(255,255,255,0) 22%),
    radial-gradient(circle,rgba(255,255,255,0) 0 63%,rgba(255,255,255,.2) 69%,rgba(255,255,255,0) 72%),
    radial-gradient(circle,color-mix(in srgb,var(--toque-cor,#fff) 8%,transparent) 0 52%,color-mix(in srgb,var(--toque-cor,#fff) 19%,transparent) 68%,color-mix(in srgb,var(--toque-cor,#fff) 5%,transparent) 71%,transparent 72%);
  transform:scale(.06);opacity:0;
  animation:toque-bolha var(--toque-duracao,.62s) cubic-bezier(.16,1,.3,1) forwards}
@keyframes toque-bolha{
  0%{transform:scale(.06);opacity:0}
  14%{opacity:1}
  68%{opacity:.7}
  100%{transform:scale(1);opacity:0}
}
/* O toque virou rolagem: a bolha some depressa, sem terminar de crescer. */
.toque-bolha-sai{animation:toque-sai .14s ease-out forwards}
@keyframes toque-sai{to{opacity:0}}

/* A bolha substitui o lampejo cinza do navegador no toque. */
:where(button,a,summary,label,[role="button"],[role="tab"],[role="switch"],[data-action],.chip,.nav-item,.tab){-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){.toque-camada{display:none}}