/* ─────────────────────────────────────────────────────────────────
   Nexyo CTA — sparkle + letter glow + loading state
   Baseado em Uiverse (dexter-st/young-newt-20) — namespaced nx-cta__*
   Default hue: 75deg (lime, alinhado à paleta da proposta)
   Variação sugerida: 252deg (purple, alinhado à wave duotone)
   ───────────────────────────────────────────────────────────────── */

.nx-cta{
  position:relative;
  display:inline-block;
}

.nx-cta__btn{
  --border-radius:24px;
  --padding:4px;
  --transition:.4s;
  --button-color:#101010;
  --highlight-color-hue:75deg;          /* lime — combina com a paleta da proposta */
  /* alternativa: --highlight-color-hue:252deg;  (purple/violeta) */

  user-select:none;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.55em .85em .55em 1.15em;
  font-family:inherit;                  /* DM Sans via body */
  font-size:1em;
  font-weight:500;
  color:#fff;

  background-color:var(--button-color);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 2px 2px rgba(255,255,255,.15),
    inset 0 4px 4px rgba(255,255,255,.1),
    inset 0 8px 8px rgba(255,255,255,.05),
    inset 0 16px 16px rgba(255,255,255,.05),
    0 -1px 1px rgba(0,0,0,.02),
    0 -2px 2px rgba(0,0,0,.03),
    0 -4px 4px rgba(0,0,0,.05),
    0 -8px 8px rgba(0,0,0,.06),
    0 -16px 16px rgba(0,0,0,.08);

  border:solid 1px #fff2;
  border-radius:var(--border-radius);
  cursor:pointer;

  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition);
}

/* Outer rim shadow */
.nx-cta__btn::before{
  content:"";
  position:absolute;
  top:calc(0px - var(--padding));
  left:calc(0px - var(--padding));
  width:calc(100% + var(--padding) * 2);
  height:calc(100% + var(--padding) * 2);
  border-radius:calc(var(--border-radius) + var(--padding));
  pointer-events:none;
  background-image:linear-gradient(0deg,#0004,#000a);
  z-index:-1;
  transition:box-shadow var(--transition),filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

/* Inner highlight overlay */
.nx-cta__btn::after{
  content:"";
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  border-radius:inherit;
  pointer-events:none;
  background-image:linear-gradient(
    0deg,
    #fff,
    hsl(var(--highlight-color-hue),100%,70%),
    hsla(var(--highlight-color-hue),100%,70%,.5),
    8%,
    transparent
  );
  background-position:0 0;
  opacity:0;
  transition:opacity var(--transition),filter var(--transition);
}

/* Letras com glow loop */
.nx-cta__letter{
  position:relative;
  display:inline-block;
  color:#fff5;
  animation:nx-cta-letter 2s ease-in-out infinite;
  transition:
    color var(--transition),
    text-shadow var(--transition),
    opacity var(--transition);
}
@keyframes nx-cta-letter{
  50%{
    text-shadow:0 0 3px #fff8;
    color:#fff;
  }
}

/* Ícone sparkle */
.nx-cta__icon{
  flex-shrink:0;
  height:22px;
  width:22px;
  margin-right:.5rem;
  fill:#e8e8e8;
  animation:nx-cta-flicker 2s linear infinite;
  animation-delay:.5s;
  filter:drop-shadow(0 0 2px #fff9);
  transition:
    fill var(--transition),
    filter var(--transition),
    opacity var(--transition);
}
@keyframes nx-cta-flicker{
  50%{opacity:.3}
}

/* Texto wrapper (dual state) */
.nx-cta__text{
  position:relative;
  display:flex;
  align-items:center;
  min-width:7.1em;
  height:1.4em;
}
.nx-cta__text--idle,
.nx-cta__text--active{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  word-spacing:-1em;
  white-space:nowrap;
}
.nx-cta__text--idle{
  animation:nx-cta-appear 1s ease-in-out forwards;
}
.nx-cta__text--active{opacity:0}
@keyframes nx-cta-appear{
  0%{opacity:0}
  100%{opacity:1}
}

/* Transição idle → active quando focar OU quando a classe .is-confirming for adicionada */
.nx-cta__btn:focus .nx-cta__text--idle,
.nx-cta__btn.is-confirming .nx-cta__text--idle{
  animation:nx-cta-opacity .3s ease-in-out forwards;
  animation-delay:1s;
}
.nx-cta__btn:focus .nx-cta__text--active,
.nx-cta__btn.is-confirming .nx-cta__text--active{
  animation:nx-cta-opacity .3s ease-in-out reverse forwards;
  animation-delay:1s;
}
@keyframes nx-cta-opacity{
  0%{opacity:1}
  100%{opacity:0}
}

/* Letras com efeito "fragmenting" no focus/confirming */
.nx-cta__btn:focus .nx-cta__letter,
.nx-cta__btn.is-confirming .nx-cta__letter{
  animation:
    nx-cta-focused-letter 1s ease-in-out forwards,
    nx-cta-letter 1.2s ease-in-out infinite;
  animation-delay:0s,1s;
}
@keyframes nx-cta-focused-letter{
  0%,100%{filter:blur(0)}
  50%{
    transform:scale(2);
    filter:blur(10px) brightness(150%)
      drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue),100%,70%));
  }
}

/* Icone com flicker mais rápido no focus/confirming */
.nx-cta__btn:focus .nx-cta__icon,
.nx-cta__btn.is-confirming .nx-cta__icon{
  animation-duration:1.2s;
  animation-delay:.2s;
}

/* Outer glow ativa no focus/confirming */
.nx-cta__btn:focus::before,
.nx-cta__btn.is-confirming::before{
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,.2) inset,
    1px 1px 1px #fff3,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.nx-cta__btn:focus::after,
.nx-cta__btn.is-confirming::after{
  opacity:.6;
  mask-image:linear-gradient(0deg,#fff,transparent);
  -webkit-mask-image:linear-gradient(0deg,#fff,transparent);
  filter:brightness(100%);
}

/* Stagger letter-by-letter (até 10) */
.nx-cta__letter:nth-child(1),  .nx-cta__btn:focus .nx-cta__letter:nth-child(1),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(1)  { animation-delay:0s }
.nx-cta__letter:nth-child(2),  .nx-cta__btn:focus .nx-cta__letter:nth-child(2),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(2)  { animation-delay:.08s }
.nx-cta__letter:nth-child(3),  .nx-cta__btn:focus .nx-cta__letter:nth-child(3),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(3)  { animation-delay:.16s }
.nx-cta__letter:nth-child(4),  .nx-cta__btn:focus .nx-cta__letter:nth-child(4),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(4)  { animation-delay:.24s }
.nx-cta__letter:nth-child(5),  .nx-cta__btn:focus .nx-cta__letter:nth-child(5),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(5)  { animation-delay:.32s }
.nx-cta__letter:nth-child(6),  .nx-cta__btn:focus .nx-cta__letter:nth-child(6),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(6)  { animation-delay:.40s }
.nx-cta__letter:nth-child(7),  .nx-cta__btn:focus .nx-cta__letter:nth-child(7),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(7)  { animation-delay:.48s }
.nx-cta__letter:nth-child(8),  .nx-cta__btn:focus .nx-cta__letter:nth-child(8),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(8)  { animation-delay:.56s }
.nx-cta__letter:nth-child(9),  .nx-cta__btn:focus .nx-cta__letter:nth-child(9),  .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(9)  { animation-delay:.64s }
.nx-cta__letter:nth-child(10), .nx-cta__btn:focus .nx-cta__letter:nth-child(10), .nx-cta__btn.is-confirming .nx-cta__letter:nth-child(10) { animation-delay:.72s }

/* Active (mousedown) */
.nx-cta__btn:active{
  border:solid 1px hsla(var(--highlight-color-hue),100%,80%,.7);
  background-color:hsla(var(--highlight-color-hue),50%,20%,.5);
}
.nx-cta__btn:active::before{
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,.8) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.nx-cta__btn:active::after{
  opacity:1;
  mask-image:linear-gradient(0deg,#fff,transparent);
  -webkit-mask-image:linear-gradient(0deg,#fff,transparent);
  filter:brightness(200%);
}
.nx-cta__btn:active .nx-cta__letter{
  text-shadow:0 0 1px hsla(var(--highlight-color-hue),100%,90%,.9);
  animation:none;
}

/* Hover */
.nx-cta__btn:hover{
  border:solid 1px hsla(var(--highlight-color-hue),100%,80%,.4);
}
.nx-cta__btn:hover::before{
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,.3) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.nx-cta__btn:hover::after{
  opacity:1;
  mask-image:linear-gradient(0deg,#fff,transparent);
  -webkit-mask-image:linear-gradient(0deg,#fff,transparent);
}
.nx-cta__btn:hover .nx-cta__icon{
  fill:#fff;
  filter:drop-shadow(0 0 3px hsl(var(--highlight-color-hue),100%,70%))
    drop-shadow(0 -4px 6px #0009);
  animation:none;
}

/* :focus-visible — outline acessível pra teclado */
.nx-cta__btn:focus-visible{
  outline:2px solid hsl(var(--highlight-color-hue),100%,70%);
  outline-offset:4px;
}

/* Modifier large (versão bridge no fim das seções) */
.nx-cta--lg .nx-cta__btn{
  font-size:1.15em;
  padding:.65em 1em .65em 1.3em;
}
.nx-cta--lg .nx-cta__icon{
  height:26px;
  width:26px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .nx-cta__letter,
  .nx-cta__icon,
  .nx-cta__text--idle{
    animation:none !important;
  }
  .nx-cta__btn:focus .nx-cta__letter,
  .nx-cta__btn.is-confirming .nx-cta__letter,
  .nx-cta__btn:focus .nx-cta__icon,
  .nx-cta__btn.is-confirming .nx-cta__icon{
    animation:none !important;
  }
  .nx-cta__btn:focus .nx-cta__text--idle,
  .nx-cta__btn.is-confirming .nx-cta__text--idle{
    opacity:0;
    animation:none !important;
  }
  .nx-cta__btn:focus .nx-cta__text--active,
  .nx-cta__btn.is-confirming .nx-cta__text--active{
    opacity:1;
    animation:none !important;
  }
  .nx-cta__letter{color:#fff}
}