/* branding.css — camada visual isolada (Universo Popular / Recolhe).
   Carregado por ULTIMO, depois de style.css. Namespace up-brand-* apenas.
   Nao editar/depender de classes, IDs ou regras do sistema existente. */

.up-brand-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --up-brand-x: 0px;
  --up-brand-y: 0px;
}

/* arte 3D: desfocada e em opacidade baixa -> vira luz/profundidade ambiente,
   nao um desenho nitido competindo com tabelas/cards */
.up-brand-background::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: url("hero-dashboard-3d.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.05);
  opacity: .28;
  transform: translate3d(var(--up-brand-x), var(--up-brand-y), 0);
  transition: transform .6s ease-out;
  will-change: transform;
}

/* overlay escuro + glow respirando por cima da arte, garantindo contraste */
.up-brand-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,14,26,.66) 0%, rgba(10,14,26,.87) 45%, rgba(10,14,26,.97) 100%),
    radial-gradient(600px 400px at 18% 12%, rgba(91,127,255,.16), transparent 60%),
    radial-gradient(560px 420px at 85% 88%, rgba(143,107,255,.14), transparent 60%);
  animation: up-brand-breathe 10s ease-in-out infinite;
}

@keyframes up-brand-breathe {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* mobile: efeito mais discreto (mas mantem o parallax de scroll, ligado via JS) */
@media (max-width: 640px) {
  .up-brand-background::before { filter: blur(22px) saturate(1); opacity: .22; }
  .up-brand-background::after { animation-duration: 16s; }
}

/* acessibilidade: desliga movimento decorativo, mantem fundo estatico */
@media (prefers-reduced-motion: reduce) {
  .up-brand-background::before { transform: none; transition: none; }
  .up-brand-background::after { animation: none; opacity: .92; }
}

/* "neuronio" — pulso decorativo a cada toque/clique (criado dinamicamente
   pelo branding.js). Nunca intercepta cliques (pointer-events: none). */
.up-brand-pulse {
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,168,255,.9) 0%, rgba(91,127,255,.45) 45%, transparent 72%);
  pointer-events: none;
  z-index: 9999;
  animation: up-brand-pulse-anim 850ms cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes up-brand-pulse-anim {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .up-brand-pulse { display: none; }
}