/* ==========================================================================
   growthway_ FX — cluster EFEITOS-21 (micro-componentes, catálogo 21st.dev)
   1) border-beam — cometa de luz laranja que percorre a borda (.card-dark)
   2) spotlight card — glow que segue o mouse (compõe com o tilt do fx3d.js)
   3) spotlight discreto nas linhas de documentos (.doc-row)
   4) shine — varredura de luz no hover de .btn / .nav-cta
   5) glow pulsante — respiração de luz nas CTAs primárias
   Módulo isolado: só classes gw21-*, aplicadas por efeitos-21.js.
   A luz é sempre o laranja da casa (#e8622a) sobre creme/preto.
   Não toca em transform (tilt do fx3d.js e magnéticos do site.js são donos),
   nem no ::after dos cards (brilho branco do .fx-tilt), nem em topbar/legais.
   ========================================================================== */

@property --gw21-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- 1) border-beam (padrão Magic UI "Border Beam" / Shine Border) --
   Anel de 1.5px recortado por máscara (xor/exclude) sobre a borda existente;
   um arco-cometa laranja gira devagar. Só existe onde a máscara é suportada —
   sem suporte, fica a borda original e nada vaza. CSS puro: ok no mobile.   */
.gw21-beam { position: relative; }

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .gw21-beam::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
      from var(--gw21-angle),
      transparent 0%,
      transparent 72%,
      rgba(232, 98, 42, 0.16) 83%,
      rgba(232, 98, 42, 0.72) 92%,
      rgba(255, 185, 143, 0.95) 96%,
      rgba(232, 98, 42, 0.38) 98.5%,
      transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    animation: gw21Beam 9s linear infinite;
  }

  /* variação lenta e mais tênue (registro-card: peça institucional, luz discreta) */
  .gw21-beam-slow::before {
    animation-duration: 19s;
    opacity: 0.85;
    padding: 1.25px;
  }
}

@keyframes gw21Beam { to { --gw21-angle: 360deg; } }

/* ---------- 2) spotlight card (padrão Magic UI "Magic Card") ---------------
   Glow radial laranja que segue o cursor dentro do card. Camada filha própria
   (.gw21-spot-layer) — compõe com o tilt do fx3d.js (que usa transform inline
   e o ::after branco) em vez de substituí-lo. JS alimenta --gw21-x/--gw21-y. */
.gw21-spot { --gw21-x: 50%; --gw21-y: 50%; }

.gw21-spot > .gw21-spot-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    15rem circle at var(--gw21-x) var(--gw21-y),
    rgba(232, 98, 42, 0.085),
    rgba(232, 98, 42, 0.03) 38%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 380ms ease;
}

.gw21-spot:hover > .gw21-spot-layer { opacity: 1; }

/* ---------- 3) spotlight discreto nas linhas de documentos -----------------
   Halo curto atrás da linha sob o cursor; isolation garante que o pseudo em
   z negativo fique atrás do texto mas à frente do fundo branco da .doc-list. */
.gw21-spot-row { position: relative; isolation: isolate; }

.gw21-spot-row::before {
  content: "";
  position: absolute;
  inset: 2px -0.8rem;
  z-index: -1;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(
    12rem circle at var(--gw21-x, 50%) var(--gw21-y, 50%),
    rgba(232, 98, 42, 0.08),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 240ms ease;
}

.gw21-spot-row:hover::before { opacity: 1; }

.scene-dark .gw21-spot-row::before {
  background: radial-gradient(
    12rem circle at var(--gw21-x, 50%) var(--gw21-y, 50%),
    rgba(232, 98, 42, 0.13),
    transparent 72%
  );
}

/* ---------- 4) shine (padrão Magic UI "Shiny Button") ----------------------
   Uma única varredura diagonal de luz por hover; roda no ::after com
   border-radius herdado — nunca mexe no transform (magnéticos do site.js). */
.gw21-shine { position: relative; }

.gw21-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 68%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
  opacity: 0;
}

.gw21-shine:hover::after,
.gw21-shine:focus-visible::after {
  opacity: 1;
  animation: gw21Shine 900ms cubic-bezier(0.35, 0, 0.25, 1) 1;
}

@keyframes gw21Shine {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ghost: a luz vira laranja tênue (branco não leria sobre creme/transparente) */
.btn-ghost.gw21-shine::after {
  background-image: linear-gradient(
    115deg,
    transparent 32%,
    rgba(232, 98, 42, 0.14) 50%,
    transparent 68%
  );
}

/* ---------- 5) glow pulsante — respiração de luz nas CTAs primárias --------
   Só fora do hover: no hover, a sombra própria do .btn (styles.css) assume. */
.gw21-glow:not(:hover) { animation: gw21GlowPulse 5.2s ease-in-out infinite; }

@keyframes gw21GlowPulse {
  0%, 100% { box-shadow: 0 2px 10px -6px rgba(232, 98, 42, 0); }
  50%      { box-shadow: 0 6px 26px -8px rgba(232, 98, 42, 0.45); }
}

/* ---------- guards ----------------------------------------------------------
   reduced-motion desliga tudo (o kill-switch global do styles.css também
   congela animações; aqui os overlays somem por inteiro). Mobile: o beam é
   CSS puro e permanece; spotlights só nascem com pointer fino (JS).        */
@media (prefers-reduced-motion: reduce) {
  .gw21-beam::before,
  .gw21-spot > .gw21-spot-layer,
  .gw21-spot-row::before { display: none !important; }
  .gw21-shine::after { animation: none !important; opacity: 0 !important; }
  .gw21-glow { animation: none !important; }
}