/* =====================================================================
   SALAO 1.0 — Camadas de atmosfera da vitrine
   ---------------------------------------------------------------------
   Quatro acabamentos que se somam ao fundo de cubos, todos herdando os
   tokens de tema (invertendo sozinhos no claro/escuro):

   1) Aurora  — brilho radial que deriva devagar ATRÁS dos cubos (z:-2).
   2) Paralaxe — cubos (perto) e aurora (longe) deslocam com o cursor.
   3) Grão    — textura de filme sutil POR CIMA do conteúdo (z:2).
   4) Tilt 3D — cards inclinam de leve no hover (transform via JS).

   Interações (paralaxe/tilt) só no desktop e fora de reduced-motion —
   ver assets/js/vitrine-fx.js. A aurora vira estática (sem deriva) em
   reduced-motion, preservando a atmosfera sem movimento.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 + 2. AURORA (z:-2) — fica atrás dos cubos; "mais longe" → move menos
   --------------------------------------------------------------------- */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
  /* paralaxe: var preenchida pelo JS em :root (-1..1) */
  transform: translate3d(calc(var(--fx-px, 0) * 8px), calc(var(--fx-py, 0) * 8px), 0);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;

  /* CLARO: bloom verde + dourado bem suave sobre o creme */
  --aurora-1: rgba(58, 168, 116, .12);
  --aurora-2: rgba(205, 163, 73, .10);
  --aurora-3: rgba(36, 131, 85, .10);
}

/* ESCURO: aurora esmeralda com fio dourado sobre o verde-quase-preto */
:root[data-theme="dark"] .bg-aurora {
  --aurora-1: rgba(36, 131, 85, .20);
  --aurora-2: rgba(236, 213, 150, .08);
  --aurora-3: rgba(31, 106, 69, .22);
}

/* Dois conjuntos de blobs que derivam em tempos/sentidos diferentes */
.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  inset: -22%;
  will-change: transform;
}
.bg-aurora::before {
  background:
    radial-gradient(38% 36% at 22% 30%, var(--aurora-1), transparent 70%),
    radial-gradient(42% 40% at 80% 70%, var(--aurora-2), transparent 72%);
  animation: auroraA 26s ease-in-out infinite alternate;
}
.bg-aurora::after {
  background:
    radial-gradient(36% 34% at 70% 20%, var(--aurora-3), transparent 70%),
    radial-gradient(40% 38% at 28% 82%, var(--aurora-1), transparent 72%);
  animation: auroraB 34s ease-in-out infinite alternate;
}
@keyframes auroraA {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}
@keyframes auroraB {
  from { transform: translate3d(3%, -2%, 0) scale(1.08); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1); }
}

/* Cubos (z:-1) são "mais perto" → deslocam mais com o cursor */
.bg-cubes {
  transform: translate3d(calc(var(--fx-px, 0) * 16px), calc(var(--fx-py, 0) * 16px), 0);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------------
   3. GRÃO DE FILME (z:2) — por cima do conteúdo, abaixo da navbar/floats.
   Ruído fractal dessaturado embutido (SVG data-URI, sem asset externo).
   --------------------------------------------------------------------- */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
:root[data-theme="dark"] .bg-grain { opacity: .055; }

/* ---------------------------------------------------------------------
   4. TILT 3D dos cards — o JS escreve o transform inline (vence o :hover)
   só nos cards de showcase (.svc-card/.step-card), que JÁ transicionam
   transform (o follow suave vem dessa transição). Cards funcionais (mapa
   embutido, painéis do formulário do agendar) ficam de fora p/ o tilt não
   atrapalhar a interação — por isso não há regra de transform aqui.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   5. REFLEXO DE LUZ + PARALLAX DA FOTO (cursor sobre os cards)
   O reflexo (sheen) segue --gx/--gy e a foto desloca por --ox/--oy,
   ambos escritos pelo JS. object-position não mexe no transform → não
   briga com o zoom/tilt. Só em ponteiro fino (desktop).
   --------------------------------------------------------------------- */
.svc-photo {
  object-position: var(--ox, 50%) var(--oy, 50%);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), object-position .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(200px 200px at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .30), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .svc-card:hover::after { opacity: 1; }
  /* No escuro o card é escuro → reflexo branco mais sutil */
  :root[data-theme="dark"] .svc-card::after {
    background: radial-gradient(200px 200px at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .12), transparent 60%);
  }
}

/* ---------------------------------------------------------------------
   Movimento reduzido: aurora vira estática (sem deriva), sem paralaxe.
   (Os cubos já somem via bg-cubes.css; o tilt nem é ligado no JS.)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before,
  .bg-aurora::after { animation: none; }
  .bg-aurora,
  .bg-cubes { transform: none; transition: none; }
}