/* Preloader global — a marca e desenhada a traco e depois preenchida.
   Markup injetado por /assets/js/components/preloader.js (SVG inline: o traco
   so anima com stroke-dasharray, por isso nao da para usar <img>).

   Arte: /assets/images/icone-protensys.svg (fonte de verdade do desenho).

   Por que TRES paths de traco e nao um so: no SVG o stroke-dasharray REINICIA
   a cada subpath. Com as 3 chevrons num path unico, o dash vale para cada uma
   em separado e as tres desenham ao mesmo tempo — nunca em sequencia. Entao o
   traco e um path por chevron (577,58 unidades cada, medido com
   getTotalLength()), escalonados pelos keyframes; o preenchimento continua
   sendo um path unico com as tres.

   Tinta: #7B3BFF, a cor do proprio arquivo do icone — FIXA, em toda revenda.
   Decisao do Andre em 06/10/2026: a marca do preloader nao acompanha o
   --accent da revenda, e identidade Protensys. Quem quiser variar numa tela
   especifica redefine --ps-preloader-ink no escopo dela. */

#psPreloader{
  --ps-preloader-len: 580;        /* 577,58 arredondado para o traco fechar */
  --ps-preloader-ink: #7B3BFF;
  --ps-preloader-ciclo: 2.8s;

  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  opacity: 0;
  transition: opacity var(--transition) ease;
}

#psPreloader.is-hidden{
  opacity: 0;
  pointer-events: none;
}

#psPreloader:not(.is-hidden){
  opacity: 1;
  pointer-events: auto;
}

#psPreloader .ps-preloader__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

#psPreloader .ps-preloader__mark{
  width: auto;
  height: clamp(96px, 22vh, 168px);
  aspect-ratio: 217.65 / 353.44;
  overflow: visible;
  animation: ps-preloader-ciclo var(--ps-preloader-ciclo) linear infinite;
}

/* 1) O traco: contorno sem preenchimento, revelado pelo dash, uma chevron
      de cada vez (topo -> meio -> base). */
#psPreloader .ps-preloader__trace{
  fill: none;
  stroke: var(--ps-preloader-ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ps-preloader-len);
  stroke-dashoffset: var(--ps-preloader-len);
  animation-duration: var(--ps-preloader-ciclo);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
#psPreloader .ps-preloader__trace--1{ animation-name: ps-preloader-traco-1; }
#psPreloader .ps-preloader__trace--2{ animation-name: ps-preloader-traco-2; }
#psPreloader .ps-preloader__trace--3{ animation-name: ps-preloader-traco-3; }

/* 2) O preenchimento: entra depois que a ultima chevron fecha, e o traco
      sai junto para nao deixar contorno sobrando em volta da marca. */
#psPreloader .ps-preloader__solid{
  fill: var(--ps-preloader-ink);
  opacity: 0;
  animation: ps-preloader-solid var(--ps-preloader-ciclo) ease-out infinite;
}

#psPreloader .ps-preloader__label{
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-md, 14px);
}

/* Linha do tempo do ciclo (2,8s):
   0–32% topo · 6–38% meio · 12–44% base · 44–62% preenche e apaga o traco
   62–86% segura · 86–97% some · 97–100% invisivel, dash volta ao inicio. */
@keyframes ps-preloader-traco-1{
  0%        { stroke-dashoffset: var(--ps-preloader-len); opacity: 1; }
  32%, 44%  { stroke-dashoffset: 0; opacity: 1; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ps-preloader-traco-2{
  0%, 6%    { stroke-dashoffset: var(--ps-preloader-len); opacity: 1; }
  38%, 44%  { stroke-dashoffset: 0; opacity: 1; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ps-preloader-traco-3{
  0%, 12%   { stroke-dashoffset: var(--ps-preloader-len); opacity: 1; }
  44%       { stroke-dashoffset: 0; opacity: 1; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ps-preloader-solid{
  0%, 44%   { opacity: 0; }
  62%, 100% { opacity: 1; }
}

/* A marca some no fim para o traco recomecar do zero sem desenhar ao contrario:
   quando o dash volta ao inicio (100% -> 0%) ela ja esta invisivel. */
@keyframes ps-preloader-ciclo{
  0%, 86%   { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Sem animacao: a marca aparece pronta, preenchida, sem contorno. */
@media (prefers-reduced-motion: reduce){
  #psPreloader .ps-preloader__mark,
  #psPreloader .ps-preloader__trace,
  #psPreloader .ps-preloader__solid{ animation: none; }
  #psPreloader .ps-preloader__trace{ opacity: 0; }
  #psPreloader .ps-preloader__solid{ opacity: 1; }
}