/* =========================================================
   CNX Projetos e Tecnologia · efeitos
   Halo do cursor, mascote câmera (SVG) e robô 3D. JS em assets/js/efeitos.js e assets/js/3d/.
   ========================================================= */

/* ---------- Halo de luz que acompanha o cursor (assets/js/efeitos.js) ---------- */
.cursor-halo {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,192,234,.13) 0%, rgba(76,192,234,.05) 35%, transparent 65%);
  opacity: 0; transition: opacity .35s var(--ease); will-change: transform;
}
.cursor-halo.is-on { opacity: 1; }

/* ---------- Mascote: câmera flutuante ---------- */
.mascot {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 72px; height: 72px; border-radius: 50%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  transition: transform .25s var(--ease), opacity .3s var(--ease), visibility 0s;
}
.mascot:hover { transform: translateY(-3px) scale(1.05); }
.mascot:focus-visible { outline-offset: 4px; border-radius: 50%; }
.mascot__svg { width: 100%; height: 100%; overflow: visible; }
.mascot__led { animation: pulse 1.6s ease-in-out infinite; }
.mascot__bubble {
  position: absolute; right: calc(100% + 12px); bottom: 14px;
  white-space: nowrap; padding: 10px 14px;
  background: var(--white); color: var(--ink); border-radius: 14px 14px 4px 14px;
  box-shadow: var(--shadow); font-size: 0.875rem; line-height: 1.3;
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mascot__bubble strong { display: block; color: var(--navy-700); font-family: var(--font-display); }
.mascot:hover .mascot__bubble, .mascot:focus-visible .mascot__bubble, .mascot.is-talking .mascot__bubble { opacity: 1; transform: none; }
.mascot.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
@media (max-width: 560px) {
  .mascot { width: 60px; height: 60px; right: 14px; bottom: 14px; }
  .wa-float { right: 16px; bottom: 88px; width: 52px; height: 52px; }
}

/* ---------- Robô 3D (assets/js/3d/robo.js) ---------- */
/* mascote: o robô substitui o desenho SVG quando o 3D carrega */
.mascot__3d { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.mascot.has-3d { width: 100px; height: 124px; border-radius: 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)); }
.mascot.has-3d .mascot__svg { display: none; }
.mascot.has-3d .mascot__bubble { bottom: 40px; right: calc(100% + 4px); }
body.has-robot .wa-float { bottom: 156px; right: 34px; }

/* robô entre as seções Soluções e Serviços (altura zero: não empurra o conteúdo) */
.robot-divider { position: relative; height: 0; z-index: 5; display: none; }
.robot-divider.has-3d { display: block; }
.robot-divider__3d {
  position: absolute; left: 50%; top: -96px; width: 170px; height: 200px;
  transform: translateX(-50%); overflow: hidden; pointer-events: none;
}
.robot-divider::before { /* anel de "radar" no chão */
  content: ""; position: absolute; left: 50%; top: 66px; width: 300px; height: 56px;
  transform: translateX(-50%); border-radius: 50%;
  border: 2px solid rgba(27,163,214,.22); box-shadow: 0 0 0 26px rgba(27,163,214,.05);
}
@media (max-width: 560px) {
  .mascot.has-3d { width: 80px; height: 100px; }
  body.has-robot .wa-float { bottom: 126px; right: 22px; }
  .robot-divider__3d { top: -86px; width: 130px; height: 152px; }
  .robot-divider::before { top: 34px; width: 220px; height: 40px; box-shadow: 0 0 0 18px rgba(27,163,214,.05); }
}