/* =========================================================
   EFEITOS — usados em várias seções
   Cursor, brilho que segue o mouse nos cards, entrada dos
   elementos ao rolar (.fade-up) e efeito ímã nos botões.
   Carregado DEPOIS das seções de propósito: a entrada ao
   rolar precisa prevalecer sobre o transform dos cards.
   JS: js/efeitos.js
   ========================================================= */

/* ---------- cursor ---------- */
.cursor {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
}
@media (pointer: fine) {
  .cursor { display: block; }
}
/* o JS move o .cursor; quem cresce é esta camada, só com transform */
.cursor::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); border: 0 solid var(--accent);
  transition: transform .2s var(--ease-out), background-color .2s ease;
}
.cursor.expand::before { transform: scale(3.5); background: rgba(229, 169, 99, 0.15); border-width: .3px; }

/* ---------- brilho que segue o mouse nos cards ---------- */
/* 1. prepara os cards (a luz fica presa dentro de cada um) */
.service-card,
.project-card,
.exp-card,
.testimonial-card,
.tool-card,
.pj-cartao,
.contact-card {
  position: relative;
  overflow: hidden;
}
/* 2. o conteúdo fica acima da luz */
.service-card > *,
.project-card > *,
.exp-card > *,
.testimonial-card > *,
.tool-card > *,
.pj-cartao > *,
.contact-card > * {
  position: relative;
  z-index: 1;
}
/* 3. a luz (invisível até o hover); .cartao-luz é criada e movida pelo js/efeitos.js */
.service-card > .cartao-luz, .project-card > .cartao-luz, .exp-card > .cartao-luz,
.testimonial-card > .cartao-luz, .tool-card > .cartao-luz, .pj-cartao > .cartao-luz {
  position: absolute; top: -240px; left: -240px; width: 480px; height: 480px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--spotlight), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(800px circle at 50% 50%, var(--spotlight), transparent 40%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
/* 4. acende no hover */
.service-card:hover > .cartao-luz, .project-card:hover > .cartao-luz, .exp-card:hover > .cartao-luz,
.testimonial-card:hover > .cartao-luz, .tool-card:hover > .cartao-luz, .pj-cartao:hover > .cartao-luz, .contact-card:hover::before { opacity: 1; }

/* ---------- entrada ao rolar (suave e com direção) ---------- */
.fade-up {
  opacity: 0;
  transform: translate(var(--fx, 0px), var(--fy, 30px));
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.fade-up.visible { opacity: 1; transform: none; }
/* terminada a entrada (js/efeitos.js), o hover responde na hora: sem os .6s nem o atraso escalonado */
.fade-up.entrou { transition: transform .15s var(--ease-out), scale 160ms var(--ease-out), border-color .15s ease, box-shadow .15s ease, background-color .15s ease, opacity .15s ease; transition-delay: 0s; }
/* no toque o hover fica preso depois do toque: sem movimento */
@media (hover: none), (pointer: coarse) {
  .btn-primary:hover, .service-card:hover, .project-card:hover, .exp-card:hover, .tool-card:hover, .contact-card:hover,
  .teo-tema:hover, .teo-estudo:hover, .teo-chamada:hover, .news-card:hover, .detail-list li:hover, .tm-card:hover,
  .contact-card:hover .card-arrow, .news-card:hover .news-arrow, .news-row:hover > *, .news-event:hover > *, .teo-estudo:hover .teo-e-seta, .privacy-btn:hover, .nav-cta:hover, .vhero-btn:hover svg, .news-event:hover .news-arrow, .news-row:hover .news-arrow { transform: none !important; }
}
.fade-up.from-left { --fx: -60px; --fy: 0px; }
.fade-up.from-right { --fx: 60px; --fy: 0px; }
/* atraso escalonado (precisa vir depois do .fade-up) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ---------- ímã nos botões ---------- */
[data-magnet] { will-change: transform; }

/* ---------- desempenho: seções fora da tela pausam as animações (js/efeitos.js) ---------- */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { transform: none; }
  [data-magnet] { transform: none !important; }
}