/* =====================================================================
   SALAO 1.0 — Imersão da vitrine (3 camadas)
   ---------------------------------------------------------------------
   1) Spotlight  — luz que segue o cursor/toque e ilumina a atmosfera
                   (fica entre os cubos e o conteúdo; screen no escuro).
   2) Profundidade ao rolar — os .reveal entram em 3D (de trás p/ frente)
                   + parallax do hero (no JS). Só na vitrine (este arquivo
                   não é carregado no painel) → não afeta o painel.
   3) Celebração — ao confirmar o agendamento: bloom dourado + faíscas +
                   um surto sutil dos cubos.

   Tudo herda os tokens de tema e é neutralizado em prefers-reduced-motion.
   Driver em assets/js/fx-imersao.js.
   ===================================================================== */

/* =====================================================================
   1. RASTRO DO CURSOR — quadrados da marca que se espalham do cursor
   ---------------------------------------------------------------------
   Canvas full-viewport (acima do conteúdo, abaixo da navbar). As partículas
   (quadradinhos esmeralda/dourado/creme) nascem no cursor conforme ele se
   move, flutuam pra cima, giram e se dissolvem — quanto mais rápido o mouse,
   mais quadrados. Tudo desenhado no JS (sem DOM por partícula); cor pelo tema.
   ===================================================================== */
.bg-spot {
  position: fixed;
  inset: 0;
  z-index: 4;            /* acima do conteúdo e do grão, abaixo da navbar/floats */
  pointer-events: none;
}

/* =====================================================================
   2. PROFUNDIDADE AO ROLAR — entrada 3D dos .reveal (de trás p/ frente).
   Mantém a mesma transição base; só troca os transforms inicial/final por
   versões com perspectiva. O parallax do hero é feito no JS.
   ===================================================================== */
.reveal {
  transform: perspective(1100px) translateY(30px) translateZ(-44px) rotateX(6deg);
  transform-origin: center bottom;
}
.reveal.in {
  transform: perspective(1100px) translateY(0) translateZ(0) rotateX(0deg);
}

/* =====================================================================
   3. CELEBRAÇÃO AO CONFIRMAR — bloom dourado + faíscas (criados no JS).
   ===================================================================== */
.celebrate-bloom {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42vmax 42vmax at var(--bx, 50%) var(--by, 40%),
    rgba(205, 163, 73, .30), transparent 60%);
  mix-blend-mode: screen;
  animation: bloomFlash 1.1s ease-out forwards;
}
@keyframes bloomFlash {
  0%   { opacity: 0; transform: scale(.7); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}

.spark {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c, #cda349);
  box-shadow: 0 0 8px var(--c, #cda349);
  transform: translate(-50%, -50%) rotate(0) scale(.4);
  animation: sparkFly var(--d, 1.4s) cubic-bezier(.18, .7, .3, 1) forwards;
}
@keyframes sparkFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(1); }
}

/* Surto sutil dos cubos durante a celebração (só brilho, não mexe no transform) */
.bg-cubes.is-celebrate { animation: cubesSurge 2.4s ease-out; }
@keyframes cubesSurge {
  0%, 100% { filter: brightness(1); }
  35%      { filter: brightness(1.4); }
}

/* =====================================================================
   REDUCED MOTION — spotlight segue sem fade autônomo; reveal sem 3D;
   celebração é pulada no JS (o confete base já some via vitrine.css).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-spot { display: none; } /* sem rastro do cursor */
  .reveal,
  .reveal.in { transform: none; }
}