/* =====================================================================
   POLISH — camada de refinamento por cima do style.css base
   1) Tipografia gigante (referências: Lusion, igloo.inc, Aventura)
   2) Anel do cursor com inércia
   3) Detalhes de respiro e ritmo
   ===================================================================== */

/* ---------- 2. CURSOR: anel com inércia (o caret do base fica) ---------- */
@media (hover: hover) and (pointer: fine){
  .cursor-ring{
    position: fixed; top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(198, 255, 61, 0.65);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99999;
    transition: width .22s ease, height .22s ease, opacity .22s ease,
                background-color .22s ease, border-color .22s ease;
    mix-blend-mode: screen;
  }
  .cursor-ring.is-hover{
    width: 58px; height: 58px;
    background: rgba(198, 255, 61, 0.12);
    border-color: rgba(198, 255, 61, 0.95);
  }
  .cursor-ring.is-down{ width: 26px; height: 26px; }
}
@media (hover: none), (prefers-reduced-motion: reduce){
  .cursor-ring{ display: none; }
}

/* ---------- 3. DETALHES ---------- */
/* botões magnéticos: transform vem do JS; garante transição suave na saída */
[data-magnetic]{ will-change: transform; }

/* eyebrows ganham um caret piscando após o scramble */
.eyebrow.scrambled::after{
  content: "_";
  margin-left: 2px;
  animation: eyebrow-caret 1.1s steps(1) infinite;
}
@keyframes eyebrow-caret{ 50%{ opacity: 0; } }