/* ============================================================================
   scrollux.css — ENGENHEIRO (ScrollUX)
   Suporte visual às interações de js/animations.js: split de títulos por
   palavra, anel pulsante do nav-dot ativo e sheen de hover nos stats.
   Complementa theme.css (não redefine tokens nem o look base).
   ========================================================================== */

/* Sonda lida pelo JS: se ausente, animations.js degrada com segurança
   (não splita o título hero, cujo gradiente é reaplicado aqui). */
:root { --scrollux-ready: 1; }

/* ------------------- Títulos splitados (palavra a palavra) ----------------
   Estrutura criada pelo JS:
   .slide-title.is-split[aria-label] > .split-wrap[aria-hidden] > .tw > .tw-in
   A máscara estrutural também vai inline via JS; aqui fica a versão
   declarativa + overflow:clip (mais leve que hidden onde suportado). */

.slide-title.is-split .tw {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  /* padding + margin negativa: clip folgado p/ acentos e descendentes
     (line-height 1.05), sem alterar o layout */
  padding: 0.1em 0.06em 0.16em;
  margin: -0.1em -0.06em -0.16em;
}

.slide-title.is-split .tw-in {
  display: inline-block;
}

/* Hero: o background-clip:text do gradiente (theme.css) quebra no Chrome
   quando os descendentes têm transform — reaplicado palavra a palavra. */
.slide-hero .slide-title.is-split {
  background: none;
}
.slide-hero .slide-title.is-split .tw-in {
  color: var(--glow, #ff8c5a); /* fallback sem background-clip */
  background: linear-gradient(115deg, #ffffff 30%, var(--sand, #ffd9c0) 55%, var(--glow, #ff8c5a) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------- Nav dot ativo: anel pulsante ---------------------- */

.nav-dot { position: relative; }

.nav-dot.active::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 140, 90, 0.75);
  pointer-events: none;
  opacity: 0;
  animation: scrollux-dot-ring 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes scrollux-dot-ring {
  0%        { transform: scale(0.55); opacity: 0.9; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ------------------ Stats: sheen no hover (lift no theme.css) ------------- */

.stat { position: relative; }

.stat::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 140, 90, 0.14), transparent 62%);
  transition: opacity 0.35s ease;
}
.stat:hover::after,
.stat:focus-within::after { opacity: 1; }

/* ----------------------------- Reduced motion ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav-dot.active::after {
    animation: none;
    opacity: 0.55;
    transform: scale(1.2);
  }
  .stat::after { transition-duration: 0.01s; }
}