/* ============================================================
   GLOBAUX PHARMA — Ambient premium ("quiet luxury")
   Micro-partículas champagne caindo MUITO sutilmente no fundo,
   cada uma com CAUDA DE COMETA que se dissolve atrás dela.
   - Movimento 100% CSS (transform + opacity) → camada de
     composição na GPU, sem JS por frame. Zero custo de main thread.
   - Camada fixa em z-index:-1: vive ATRÁS do conteúdo (o fundo
     decorativo foi para o html/canvas), nunca toca texto nem CTA.
   - Markup gerado 1x por globaux-ambient.js (em idle).
   - Cor em --crgb ("r,g,b") → a cauda usa rgba(var(--crgb), a)
     p/ desvanecer no MESMO tom (sem cinza no fade).
   - Pulado por completo em prefers-reduced-motion.
   ============================================================ */

#gx-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

@media (prefers-reduced-motion: reduce) {
  #gx-ambient { display: none; }
}

/* Aba oculta → congela a animação (poupa CPU/bateria no mobile). */
#gx-ambient.gx-paused .gx-pcl,
#gx-ambient.gx-paused .gx-streak {
  animation-play-state: paused;
}

/* -------- Partículas (cabeça do cometa) -------- */
.gx-pcl {
  position: absolute;
  top: -8vh;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgb(var(--crgb, 214, 185, 123));
  filter: blur(var(--b, 0.5px));
  opacity: 0;
  will-change: transform, opacity;
  animation: gx-pcl-fall var(--dur, 18s) linear var(--delay, 0s) infinite;
}

/* Cauda de cometa: emana da cabeça para CIMA (oposto à queda),
   densa junto ao ponto e DISSOLVENDO até sumir na ponta. */
.gx-pcl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: var(--tw, 1px);
  height: var(--tail, 20px);
  transform: translateX(-50%);
  border-radius: var(--tw, 1px);
  background: linear-gradient(to top,
    rgba(var(--crgb, 214, 185, 123), 0.95) 0%,
    rgba(var(--crgb, 214, 185, 123), 0.42) 40%,
    rgba(var(--crgb, 214, 185, 123), 0) 100%);
  filter: blur(0.7px);
  pointer-events: none;
}

/* Queda vertical com deriva lateral mínima (sway quase imperceptível)
   e fade in/out nas pontas. opacity-alvo = var(--o). */
@keyframes gx-pcl-fall {
  0%   { transform: translate3d(0, 0, 0);                  opacity: 0; }
  10%  { opacity: var(--o, 0.1); }
  33%  { transform: translate3d(var(--d1, 0px), 36vh, 0); }
  66%  { transform: translate3d(var(--d2, 0px), 76vh, 0); }
  90%  { opacity: var(--o, 0.1); }
  100% { transform: translate3d(var(--d3, 0px), 120vh, 0); opacity: 0; }
}

/* Micro brilho com pulso mínimo (halo champagne suavíssimo) em
   parte das 'near'. Segunda animação anima só box-shadow → não
   conflita com a queda. */
.gx-pcl--glow {
  animation:
    gx-pcl-fall var(--dur, 14s) linear var(--delay, 0s) infinite,
    gx-pcl-glow var(--pulse, 6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes gx-pcl-glow {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(var(--crgb, 214, 185, 123), 0.9); }
  50%      { box-shadow: 0 0 7px 1px rgba(var(--crgb, 214, 185, 123), 0.9); }
}

/* -------- Light streaks cinematográficos (1px, blur, raríssimos) -------- */
.gx-streak {
  position: absolute;
  top: -12vh;
  width: 1px;
  height: var(--h, 38vh);
  background: linear-gradient(to bottom,
    rgba(var(--crgb, 214, 185, 123), 0),
    rgb(var(--crgb, 214, 185, 123)),
    rgba(var(--crgb, 214, 185, 123), 0));
  filter: blur(1px);
  opacity: 0;
  will-change: transform, opacity;
  animation: gx-streak var(--dur, 22s) linear var(--delay, 0s) infinite;
}
@keyframes gx-streak {
  0%   { transform: translateY(0);     opacity: 0; }
  16%  { opacity: var(--o, 0.05); }
  84%  { opacity: var(--o, 0.05); }
  100% { transform: translateY(128vh); opacity: 0; }
}