/* =========================================================
   INTERAÇÕES — cursor personalizado, palavras alternando
   no hero e botões magnéticos (cursor.js, rotator.js,
   magnetic.js). Opções em assets/js/config.js
   ========================================================= */

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 70;
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.cursor.is-visible { opacity: 1; }
.cursor-ring {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--accent); border-radius: 50%;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out),
              background-color .3s, border-color .3s, scale .2s var(--ease-out);
}
.cursor-label {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  font: var(--w-bold) .78rem/1 var(--font); letter-spacing: .04em; color: var(--on-accent);
  white-space: nowrap; opacity: 0; scale: .6;
  transition: opacity .3s, scale .45s var(--ease-out);
}
/* Sobre links e botões */
.cursor.is-hover .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-color: rgba(199, 255, 61, .1); }
/* Sobre projetos e antes/depois: círculo cheio com rótulo */
.cursor.is-label .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background-color: var(--accent); border-color: var(--accent); }
.cursor.is-label .cursor-label { opacity: 1; scale: 1; }
.cursor.is-pressed .cursor-ring { scale: .85; }
/* O cursor nativo some só onde o círculo mostra um rótulo */
.has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; }

/* ---------- Palavra que alterna no título ---------- */
/* Ocupa a própria linha, então o título não "pula" ao trocar */
.split-word--block { display: block; }
[data-rotate] { display: block; color: var(--text); }
[data-rotate].is-ready {
  /* folga de .16em acima e abaixo para acentos e descendentes não vazarem */
  position: relative; max-width: 100%; height: 1.4em; margin: -.16em 0; overflow: hidden;
  color: transparent; -webkit-text-stroke: 2px var(--accent);
}
.rotator-track {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--index, 0) * -1.4em));
  transition: transform .9s var(--ease-out);
}
.rotator-word { display: block; width: max-content; height: 1.4em; line-height: 1.4; white-space: nowrap; }

/* ---------- Botões magnéticos ---------- */
.btn { transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-fast) var(--ease-out), translate .6s var(--ease-out); }
.btn.is-magnetic { transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-fast) var(--ease-out), translate .18s linear; }