/* =========================================================
   EFEITOS DE FUNDO
   1) Grade viva do hero: linhas finas + pulsos verde-lima
   2) Granulado animado no site inteiro
   Liga/desliga e intensidade em assets/js/config.js (background)
   ========================================================= */

:root {
  --grain-opacity: .07;     /* intensidade do granulado (0 a ~.12) */
  --pulse-length: 22%;      /* comprimento do rastro de cada pulso */
}

/* ---------- 1. Grade viva do hero ---------- */
.hero-fx {
  position: absolute; z-index: -1; inset: 0;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + 40px));
  right: max(var(--gutter-r), calc((100% - var(--wrap)) / 2 + 40px));
  overflow: hidden; pointer-events: none;
  /* linhas verticais: 6 colunas */
  background-image: linear-gradient(to right, rgba(52, 52, 56, .55) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 96%);
}

.hero-pulse {
  position: absolute; top: 0; height: 100%; width: 1px;
  left: calc(var(--line) * (100% / 6));
  background: linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--pulse-length)),
    rgba(199, 255, 61, .55) 100%);
  transform: translateY(-100%);
  animation: pulse-run var(--dur, 6s) linear var(--delay, 0s) infinite;
  opacity: 0;
}
/* ponto brilhante na ponta do pulso */
.hero-pulse::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(199, 255, 61, .55);
}
@keyframes pulse-run {
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
/* pausa quando o hero sai da tela (effects.js) */
.hero-fx.is-paused .hero-pulse { animation-play-state: paused; }

/* ---------- 2. Granulado animado ---------- */
.fx-grain body::after {
  content: ""; position: fixed; inset: -50%; z-index: 60;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift .9s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(4%, -7%); }
  50%  { transform: translate(-9%, -3%); }
  67%  { transform: translate(7%, 6%); }
  83%  { transform: translate(-3%, 9%); }
  100% { transform: translate(0, 0); }
}

/* Movimento reduzido: grade e granulado ficam parados, sem pulsos */
@media (prefers-reduced-motion: reduce) {
  .hero-pulse { display: none; }
  .fx-grain body::after { animation: none; }
}

/* ---------- 3. Luzes verde-lima suaves ----------
   Manchas de luz difusas atrás de títulos e projetos. Ficam
   atrás do conteúdo (z-index -1) e flutuam devagar. */
.hero, .price, .work, .final { position: relative; isolation: isolate; overflow-x: clip; }
.glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: var(--glow-size, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 255, 61, var(--glow-strength, .16)) 0%, rgba(199, 255, 61, 0) 62%);
  animation: glow-drift 16s var(--ease-in-out) infinite alternate;
}
.glow--hero  { --glow-size: 720px; --glow-strength: .18; left: 50%; top: 50%; translate: -50% -50%; }
.glow--price { --glow-size: 680px; right: -8%; top: 10%; }
.glow--work  { --glow-size: 760px; --glow-strength: .1; left: -14%; top: 2%; }
.glow--final { --glow-size: 820px; --glow-strength: .14; left: 30%; top: -10%; }
@keyframes glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, -6%) scale(1.12); }
}

/* Profundidade nos cards: leve luz no topo + sombra longa */
.card, .shot, .compare, .faq-item {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 70px -40px rgba(0, 0, 0, .95);
}

/* ---------- 4. Inclinação 3D no hover (tilt.js) ----------
   --rx/--ry: ângulos; --mx/--my: posição do brilho que segue o mouse */
/* Depois da revelação de entrada, o transform passa a ser a inclinação */
.motion [data-tilt]:not([data-reveal]),
.motion [data-tilt][data-reveal].is-in {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .6s var(--ease-out), border-color var(--dur-base), clip-path 1.3s var(--ease-out), opacity var(--dur-reveal) var(--ease-out);
}
.motion [data-tilt][data-reveal].is-in.is-tilting,
.motion [data-tilt]:not([data-reveal]).is-tilting { --lift: -6px; transition: transform .15s linear, border-color var(--dur-base), clip-path 1.3s var(--ease-out); }
[data-tilt] { position: relative; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(199, 255, 61, .10), transparent 45%);
  opacity: 0; transition: opacity var(--dur-base);
}
[data-tilt].is-tilting::after { opacity: 1; }
.case--compact:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
}