/* Animação do logotipo · Imersão Colete (spec §10.3) — "o ponto": anel se desenha, ponto preenche, quarto abre;
   colete sobe glifo a glifo por máscara seca; IMERSÃO fecha o tracking; linha 3 entra por último. ≈2,4 s.
   Regra: CSS base = estado FINAL (assinatura estática); os keyframes só fornecem o início (fill-mode both).
   Com prefers-reduced-motion (tokens.css: animation:none) sobra a assinatura pronta.
   `--t` (na raiz) desloca todas as animações pra pausar num instante (?t= no player → html.paused). */
:root{--t:0s}
.logo-anim{display:block;color:var(--linho);--la-ease:cubic-bezier(.22,1,.36,1)}
.claro .logo-anim{color:var(--tinta)}
.logo-anim .bg{fill:var(--carvao)}
.claro .logo-anim .bg{fill:var(--linho)}
.logo-anim [id]{animation-fill-mode:both;animation-timing-function:var(--la-ease)}
.paused .logo-anim [id]{animation-play-state:paused}

/* símbolo 0–1,25 s */
.logo-anim #ring{opacity:0;stroke-dashoffset:0;stroke-linecap:butt;
  animation:la-ring .7s var(--la-ease) calc(0s - var(--t)) both, la-hide .01s linear calc(.9s - var(--t)) both}
.logo-anim #dot{opacity:0;
  animation:la-dot .3s var(--la-ease) calc(.6s - var(--t)) both, la-hide .01s linear calc(.9s - var(--t)) both}
.logo-anim #disc{animation:la-show .01s linear calc(.9s - var(--t)) both}
.logo-anim #cut{clip-path:polygon(0 0,100% 0,100% 0,100% 0);
  animation:la-show .01s linear calc(.9s - var(--t)) both, la-cut .35s var(--la-ease) calc(.9s - var(--t)) both}
@keyframes la-ring{from{stroke-dashoffset:var(--c);opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes la-dot{from{r:0;opacity:1}to{r:var(--r);opacity:1}}
@keyframes la-hide{from{opacity:1}to{opacity:0}}
@keyframes la-show{from{opacity:0}to{opacity:1}}
/* o quarto "abre" como ponteiro: a aresta gira do centro, de baixo pra direita (sweep horário) */
@keyframes la-cut{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}50%{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%)}100%{clip-path:polygon(0 0,100% 0,100% 0,100% 0)}}

/* colete 1,0–1,95 s: sobe de dentro da máscara (aresta seca, sem fade), stagger 80 ms */
.logo-anim #l2 path{animation:la-rise .55s var(--la-ease) calc(var(--d) - var(--t)) both}
.logo-anim #g-1{--d:1s} .logo-anim #g-2{--d:1.08s} .logo-anim #g-3{--d:1.16s}
.logo-anim #g-4{--d:1.24s} .logo-anim #g-5{--d:1.32s} .logo-anim #g-6{--d:1.4s}
@keyframes la-rise{from{transform:translateY(170px)}to{transform:translateY(0)}}

/* IMERSÃO 1,4–2,0 s: tracking 0.6em → 0.28em (cada glifo vem de --dx) + opacity */
.logo-anim #l1 path{animation:la-track .6s var(--la-ease) calc(1.4s - var(--t)) both}
@keyframes la-track{from{transform:translateX(var(--dx));opacity:0}to{transform:translateX(0);opacity:1}}

/* linha 3 2,0–2,4 s */
.logo-anim #l3{animation:la-fade .4s var(--la-ease) calc(2s - var(--t)) both}
@keyframes la-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}