/* ============================================================
TSN Sistemas — Page loader "logo se formando"
Componente autocontido: logo-loader.css + logo-loader.js + logo-mask.png
na MESMA pasta. Copie a pasta inteira pra outro projeto e inclua:
Como funciona: 4 traços de linha central do símbolo são desenhados por
stroke-dasharray/dashoffset e o PNG oficial da marca (logo-mask.png)
recorta o resultado — o desenho final é pixel-igual à logo real.
Tema: TODAS as cores derivam dos tokens do site em tempo real
(--bg, --text, --text-muted, --accent, --line), então o overlay
acompanha [data-theme] e [data-palette] do sem CSS extra —
claro fica claro, escuro fica escuro, e trocar a paleta troca o glow,
o traço e a linha de progresso juntos.
Tokens (opcionais, sobrescrevem a herança do site):
--tsn-loader-bg fundo do overlay (padrão: var(--bg) ou #fff)
--tsn-loader-ink cor final da logo (padrão: var(--text) ou #0B0C0E)
--tsn-loader-accent cor enquanto desenha (padrão: var(--accent) ou #3B5DE8)
--tsn-loader-muted legenda (padrão: var(--text-muted) ou ink 60%)
--tsn-loader-font fonte da legenda (padrão: system-ui)
--tsn-loader-size tamanho da logo (padrão: 120px)
--tsn-loader-failsafe tempo pra sumir sozinho sem JS (padrão: 4s)
============================================================ */
.tsn-loader{
--_bg:var(--tsn-loader-bg,var(--bg,#FFFFFF));
--_ink:var(--tsn-loader-ink,var(--text,#0B0C0E));
--_accent:var(--tsn-loader-accent,var(--accent,#3B5DE8));
--_muted:var(--tsn-loader-muted,var(--text-muted,color-mix(in oklab,var(--_ink) 60%,transparent)));
--_font:var(--tsn-loader-font,system-ui,sans-serif);
--_size:var(--tsn-loader-size,120px);
/* glow derivado do accent: mais presente no escuro, sussurro no claro */
--_glow:color-mix(in oklab,var(--_accent) 14%,transparent);
--_bg-gradient:radial-gradient(60% 55% at 50% 46%,var(--_glow) 0%,transparent 70%);
--_dot:color-mix(in oklab,var(--_ink) 7%,transparent);
--_track:color-mix(in oklab,var(--_ink) 10%,transparent);
position:fixed;inset:0;z-index:9999;box-sizing:border-box;
display:grid;place-items:center;align-content:center;gap:22px;
background:var(--_bg-gradient),var(--_bg);color:var(--_ink);
font-family:var(--_font);
opacity:1;visibility:visible;
transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
/* sem JS (ou JS travado) o overlay sai sozinho — nunca prende a página */
animation:tsn-loader-failsafe 0s linear var(--tsn-loader-failsafe,4s) forwards;
}
[data-theme="dark"] .tsn-loader{--_glow:color-mix(in oklab,var(--_accent) 26%,transparent)}
/* grade de pontos bem apagada, mesma textura do site */
.tsn-loader::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
background-image:radial-gradient(var(--_dot) 1px,transparent 1.2px);background-size:22px 22px;
-webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%);
mask:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%)}
.tsn-loader.is-done{opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility 0s linear .55s}
.tsn-loader.is-instant{transition:none}
@keyframes tsn-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* palco da logo: recebe o glow pulsante e a saída em escala */
.tsn-loader__stage{position:relative;display:grid;place-items:center;
transform:scale(1);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .4s ease}
.tsn-loader__stage::after{content:"";position:absolute;inset:-34%;border-radius:50%;pointer-events:none;z-index:-1;
background:radial-gradient(circle,color-mix(in oklab,var(--_accent) 22%,transparent) 0%,transparent 62%);
opacity:0;transform:scale(.8)}
.tsn-loader.is-playing .tsn-loader__stage::after{animation:tsn-loader-glow 1.9s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes tsn-loader-glow{0%{opacity:0;transform:scale(.8)}45%{opacity:1;transform:scale(1.05)}100%{opacity:.35;transform:scale(1)}}
.tsn-loader.is-done .tsn-loader__stage{transform:scale(1.06);opacity:0}
.tsn-loader__logo{
width:var(--_size);height:var(--_size);display:block;overflow:visible;
color:var(--_accent);
-webkit-mask:url(logo-mask.png) center/contain no-repeat;
mask:url(logo-mask.png) center/contain no-repeat;
}
.tsn-loader__logo .tl{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;
stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
/* comprimentos aproximados; o JS grava o valor exato com getTotalLength()
Cadência: os três traços grandes se desenham JUNTOS desde o início — o
tl-1 nasce na PERNA VERTICAL do T (canto 122,236) e desce, sem nenhum
pedaço da barra horizontal (uma no SVG garante isso); a barra
horizontal do T entra por último, sozinha, como assinatura, varrendo da
esquerda pra direita: tl-4 (trecho externo) emenda direto no tl-5
(trecho interno com o ganchinho). */
.tsn-loader__logo .tl-1{--len:878;--tl-dur:1s;--tl-delay:.1s}
.tsn-loader__logo .tl-2{--len:642;--tl-dur:.9s;--tl-delay:.1s}
.tsn-loader__logo .tl-3{--len:186;--tl-dur:.75s;--tl-delay:.1s}
.tsn-loader__logo .tl-4{--len:146;--tl-dur:.18s;--tl-delay:1.12s}
.tsn-loader__logo .tl-5{--len:191;--tl-dur:.3s;--tl-delay:1.3s}
.tsn-loader.is-playing .tsn-loader__logo .tl{stroke-dashoffset:0;
transition:stroke-dashoffset var(--tl-dur) var(--tl-ease,cubic-bezier(.4,0,.2,1)) var(--tl-delay)}
.tsn-loader__logo .tl-4{--tl-ease:cubic-bezier(.4,0,1,1)}
.tsn-loader__logo .tl-5{--tl-ease:cubic-bezier(0,0,.2,1)}
.tsn-loader.is-playing .tsn-loader__logo{animation:tsn-loader-settle .5s ease-out 1.55s both}
@keyframes tsn-loader-settle{from{color:var(--_accent)}to{color:var(--_ink)}}
/* legenda + linha de progresso: mesma cadência do traço */
.tsn-loader__label{margin:0;font:600 12px/1 var(--_font);letter-spacing:.18em;text-transform:uppercase;
color:var(--_muted);opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.55s,transform .4s ease 1.55s}
.tsn-loader.is-playing .tsn-loader__label{opacity:1;transform:none}
.tsn-loader__label:empty{display:none}
.tsn-loader__bar{width:min(160px,40vw);height:2px;border-radius:999px;background:var(--_track);overflow:clip;
opacity:0;transition:opacity .3s ease .1s}
.tsn-loader__bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--_accent);
transform-origin:left center;transform:scaleX(0)}
.tsn-loader.is-playing .tsn-loader__bar{opacity:1}
.tsn-loader.is-playing .tsn-loader__bar i{animation:tsn-loader-bar 1.9s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes tsn-loader-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
.tsn-loader{animation-delay:.6s}
.tsn-loader,.tsn-loader.is-done{transition:none}
.tsn-loader__logo .tl{stroke-dashoffset:0;transition:none}
.tsn-loader.is-playing .tsn-loader__logo{animation:none;color:var(--_ink)}
.tsn-loader__stage,.tsn-loader.is-done .tsn-loader__stage{transition:none;transform:none}
.tsn-loader.is-playing .tsn-loader__stage::after{animation:none;opacity:.35;transform:none}
.tsn-loader__label{transition:none;opacity:1;transform:none}
.tsn-loader__bar{display:none}
}