/* TUON — COMPORTAMENTO DE APP (v1.0401)
   O arco de latão do "puxar pra atualizar", em todas as telas do sistema.
   Só no celular; no desktop nada disso é desenhado. */

.tuon-puxa{ display:none; }

@media (max-width: 1023px){
  .tuon-puxa{
    display:grid; place-items:center; position:fixed; z-index:9000;
    left:50%; width:40px; height:40px; margin-left:-20px;
    top:10px;
    border-radius:50%;
    background:rgba(11,7,3,.94);
    border:1px solid rgba(240,210,138,.22);
    box-shadow:0 8px 22px -8px rgba(0,0,0,.85);
    opacity:0; transform:translateY(-16px) scale(.84);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  /* puxando de baixo pra cima, o arco nasce no rodapé */
  .tuon-puxa.debaixo{ top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateY(16px) scale(.84); }

  .tuon-puxa.on{
    opacity:calc(.34 + var(--f,0) * .66);
    transform:translateY(calc(var(--f,0) * 26px)) scale(calc(.84 + var(--f,0) * .16));
  }
  .tuon-puxa.on.debaixo{
    transform:translateY(calc(var(--f,0) * -26px)) scale(calc(.84 + var(--f,0) * .16));
  }

  .tuon-puxa svg{ width:27px; height:27px; transform:rotate(-90deg); }
  .tuon-puxa circle{ fill:none; stroke-width:2.6; }
  .tuon-puxa .t{ stroke:rgba(245,237,223,.13); }
  .tuon-puxa .p{ stroke:#f0d28a; stroke-linecap:round; }
  .tuon-puxa i{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background:#f0d28a; opacity:calc(var(--f,0) * .9);
  }
  /* cheio: acende e avisa que soltando, atualiza */
  .tuon-puxa.vai{
    border-color:rgba(240,210,138,.8);
    box-shadow:0 0 22px -3px rgba(240,210,138,.75), 0 8px 22px -8px rgba(0,0,0,.85);
  }
  .tuon-puxa.vai i{ animation:tuonPuxaPt .5s ease-in-out infinite alternate; }
  @keyframes tuonPuxaPt{ to{ transform:scale(1.75) } }
  /* buscando */
  .tuon-puxa.indo svg{ animation:tuonPuxaGira .8s linear infinite; }
  .tuon-puxa.indo .p{ stroke-dasharray:26 74 !important; }
  @keyframes tuonPuxaGira{ to{ transform:rotate(270deg) } }

  /* acabamento de aplicativo: sem o flash azul do Android nos alvos de toque */
  .tuon-app button, .tuon-app a, .tuon-app label, .tuon-app summary,
  .tuon-app [role="button"]{ -webkit-tap-highlight-color:transparent; }
}

@media (prefers-reduced-motion: reduce){
  .tuon-puxa, .tuon-puxa.vai i, .tuon-puxa.indo svg{ animation:none; transition:none; }
}