/* ─────────────────────────────────────────────
   logo.css — Animações da logo LinckDev
   Entrada única + hover pulse
───────────────────────────────────────────── */

/* Estado inicial: tudo invisível */
.nl-border {
  opacity: 0;
}
.nl-node {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.nl-ln {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  opacity: 0;
}
.nl-wm {
  opacity: 0;
  transform: translateX(-10px);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Keyframes de entrada ── */
@keyframes logo-fadeIn {
  to { opacity: 1; }
}
@keyframes logo-nodeIn {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logo-drawLn {
  0%   { stroke-dashoffset: 30; opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 1; }
}
@keyframes logo-slideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ── Classe .go dispara a entrada ── */
.nav-logo.go .nl-border  { animation: logo-fadeIn  .4s  ease                          .05s forwards; }
.nav-logo.go .nl-l       { animation: logo-nodeIn  .4s  var(--ease-spring)            .12s forwards; }
.nav-logo.go .nl-i       { animation: logo-nodeIn  .4s  var(--ease-spring)            .26s forwards; }
.nav-logo.go .nl-n       { animation: logo-nodeIn  .4s  var(--ease-spring)            .40s forwards; }
.nav-logo.go .nl-c       { animation: logo-nodeIn  .4s  var(--ease-spring)            .54s forwards; }
.nav-logo.go .nl-ctr     { animation: logo-nodeIn  .35s var(--ease-spring)            .70s forwards; }
.nav-logo.go .nl-top     { animation: logo-drawLn  .32s ease                          .64s forwards; }
.nav-logo.go .nl-left    { animation: logo-drawLn  .32s ease                          .70s forwards; }
.nav-logo.go .nl-bottom  { animation: logo-drawLn  .32s ease                          .76s forwards; }
.nav-logo.go .nl-right   { animation: logo-drawLn  .32s ease                          .82s forwards; }
.nav-logo.go .nl-d1      { animation: logo-drawLn  .28s ease                          .90s forwards; }
.nav-logo.go .nl-d2      { animation: logo-drawLn  .28s ease                          .95s forwards; }
.nav-logo.go .nl-wm      { animation: logo-slideIn .5s  var(--ease-out)               .78s forwards; }

/* ── Hover pulse ── */
@keyframes logo-hPulse {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.45); opacity: .75; }
}
@keyframes logo-hPulseC {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.65); }
}
@keyframes logo-snake {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0;  }
}
@keyframes logo-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: 0%   center; }
}

.nav-logo.go:hover .nl-l   { animation: logo-hPulse  1.8s ease-in-out infinite 0.00s; }
.nav-logo.go:hover .nl-i   { animation: logo-hPulse  1.8s ease-in-out infinite 0.45s; }
.nav-logo.go:hover .nl-n   { animation: logo-hPulse  1.8s ease-in-out infinite 0.90s; }
.nav-logo.go:hover .nl-c   { animation: logo-hPulse  1.8s ease-in-out infinite 1.35s; }
.nav-logo.go:hover .nl-ctr { animation: logo-hPulseC 1.8s ease-in-out infinite; }

.nav-logo.go:hover .nl-top,
.nav-logo.go:hover .nl-left,
.nav-logo.go:hover .nl-bottom,
.nav-logo.go:hover .nl-right {
  stroke-dasharray: 10 20 !important;
  animation: logo-snake 1.2s linear infinite !important;
  stroke-dashoffset: 0 !important;
}
.nav-logo.go:hover .nl-left   { animation-delay: .15s !important; }
.nav-logo.go:hover .nl-bottom { animation-delay: .30s !important; }
.nav-logo.go:hover .nl-right  { animation-delay: .45s !important; }
.nav-logo.go:hover .nl-name   {
  background-size: 200% auto;
  animation: logo-shimmer 1.5s linear infinite;
}

/* ── Wordmark ── */
.nl-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  background: var(--gradient-text);
  background-size: 100% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nl-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Fallback: if animation never fires (e.g. JS blocked), keep logo visible */
@media (prefers-reduced-motion: reduce) {
  .nl-border, .nl-node, .nl-ln { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .nl-wm { opacity: 1 !important; transform: none !important; }
}