/* Logo animada: o desenho é "revelado" por 3 traços (máscara) que seguem o caminho da logo e, no final, dá uma pulsada.
   Sem a classe .play a logo aparece inteira (fallback). Respeita "reduzir movimento". */
.nlogo{display:block;overflow:visible;transform-origin:50% 50%}
.nlogo .nl-s{fill:none;stroke:#fff;stroke-width:76;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100}
.nlogo.play .nl-s{animation:nl-draw 2.2s cubic-bezier(.65,0,.35,1) both}
.nlogo.play{animation:nl-pulse 1.1s ease-out 2.2s both}
@keyframes nl-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes nl-pulse{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  40%{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(56,189,248,.65))}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
}
@media (prefers-reduced-motion:reduce){.nlogo.play .nl-s,.nlogo.play{animation:none}}

/* variante branca: adicione a classe "mono" ao <svg> para a peça de baixo/esquerda também ficar branca */
.nlogo.mono rect{fill:#fff}

/* ---------- LOOP (header) ----------
   Ciclo de 10s, tudo no mesmo relógio para a logo e o traço do slogan ficarem sincronizados:
   0 → 2,2s  desenha (traço do slogan aparece da esquerda p/ direita junto)
   2,2 → 3,3s pulsada  |  3,3 → 9,4s parada  |  9,4 → 10s some em fade  → recomeça */
.nlogo.loop .nl-s{animation:nl-draw-loop 10s infinite}
.nlogo.loop{animation:nl-cycle 10s infinite}
.tag-line.loop{transform-origin:left center;animation:nl-line-loop 10s infinite}
@keyframes nl-draw-loop{
  0%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  22%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}
@keyframes nl-cycle{
  0%,22%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  26.4%{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(56,189,248,.65))}
  33%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  94%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  100%{opacity:0;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
}
@keyframes nl-line-loop{
  0%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  22%{transform:scaleX(1);opacity:1}
  94%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){.nlogo.loop,.nlogo.loop .nl-s,.tag-line.loop{animation:none}}