/*
  Sistema de Background Premium em Camadas — Defendi Studio
  Baseado em background_sistema_camadas_prompt.md
  Puro CSS: sem imagens, sem canvas, sem bibliotecas.
  Cada camada é independente e pode ser ajustada isoladamente.
*/

:root {
  /* Paleta base do sistema de background (independente dos tokens de UI em style.css) */
  --bgsys-1: #12060b;
  --bgsys-2: #19070d;
  --bgsys-3: #210912;
  --bgsys-4: #2b0d18;
  --bgsys-5: #420d24;
  --bgsys-6: #6b1635;
  --bgsys-7: #851b46;
  --bgsys-8: #b01d5d;
  --bgsys-glow-edge: #a41556;
  --bgsys-line: rgba(255, 40, 120, 0.12);
}

/* Container fixo: fica atrás de todo o conteúdo e não rola com a página */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.background > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ==========================================================================
   1. BASE — mistura das 4 cores mais escuras da paleta, nunca preto puro
   ========================================================================== */
.bg-base {
  background:
    linear-gradient(90deg, #18070f, #240a13),
    linear-gradient(180deg, #12080e, #11080e, #18070f, #240a13, #0c0a0a);
  background-blend-mode: overlay;
}

/* ==========================================================================
   2. VINHETA — escurece topo/laterais/rodapé, centro mais iluminado
   ========================================================================== */
.bg-vignette {
  background: radial-gradient(110% 90% at 50% 42%, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
  mix-blend-mode: multiply;
}

/* ==========================================================================
   3. PROFUNDIDADE — duas manchas enormes e desfocadas
   ========================================================================== */
.bg-depth {
  /* usa pseudo-elementos para as duas manchas, sem marcação extra */
}
.bg-depth::before,
.bg-depth::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(450px);
}
.bg-depth::before {
  width: 70vw;
  height: 70vw;
  top: -15vw;
  left: -10vw;
  background: rgba(70, 10, 30, 0.14);
}
.bg-depth::after {
  width: 80vw;
  height: 80vw;
  bottom: -25vw;
  right: -15vw;
  background: rgba(30, 5, 15, 0.16);
}

/* ==========================================================================
   4. GLOW CENTRAL — iluminação suave atrás do conteúdo
   ========================================================================== */
.bg-center-glow {
  background: radial-gradient(circle, rgba(255, 40, 120, 0.07) 0%, transparent 70%);
  filter: blur(600px);
}

/* ==========================================================================
   5. NEBLINA — 6 manchas orgânicas, nunca iguais entre si
   ========================================================================== */
.bg-smoke {
  border-radius: 50%;
  filter: blur(160px);
  opacity: 0.045;
}
/* topo esquerdo */
.smoke1 {
  width: 38vw;
  height: 30vw;
  top: -8vw;
  left: -6vw;
  background: var(--bgsys-6);
}
/* topo direito */
.smoke2 {
  width: 30vw;
  height: 34vw;
  top: -4vw;
  right: -10vw;
  background: var(--bgsys-5);
}
/* centro inferior */
.smoke3 {
  width: 46vw;
  height: 26vw;
  bottom: 8vh;
  left: 28vw;
  background: var(--bgsys-7);
}
/* inferior esquerdo */
.smoke4 {
  width: 34vw;
  height: 28vw;
  bottom: -10vw;
  left: -8vw;
  background: var(--bgsys-4);
}
/* inferior direito */
.smoke5 {
  width: 28vw;
  height: 32vw;
  bottom: -6vw;
  right: -6vw;
  background: var(--bgsys-6);
}
/* centro */
.smoke6 {
  width: 40vw;
  height: 22vw;
  top: 38vh;
  left: 32vw;
  background: var(--bgsys-3);
  opacity: 0.035;
}

/* ==========================================================================
   6. GLOWS DAS BORDAS — apenas nos cantos
   ========================================================================== */
.bg-border-glow {
  width: 26vw;
  height: 26vw;
  border-radius: 50%;
  background: var(--bgsys-glow-edge);
  filter: blur(220px);
  opacity: 0.1;
}
.glow-left-top {
  top: -10vw;
  left: -10vw;
}
.glow-right-top {
  top: -10vw;
  right: -10vw;
}
.glow-left-bottom {
  bottom: -10vw;
  left: -10vw;
}
.glow-right-bottom {
  bottom: -10vw;
  right: -10vw;
}

/* ==========================================================================
   7. LINHAS ORGÂNICAS — SVG inline, curvas apenas nas laterais
   ========================================================================== */
.bg-lines {
  width: 100%;
  height: 100%;
  filter: blur(2px);
  opacity: 0.9;
}
.bg-lines path {
  fill: none;
  stroke: var(--bgsys-line);
  stroke-width: 1.2;
}

/* ==========================================================================
   8. NOISE — feTurbulence via SVG embutido como data-uri, blend overlay
   ========================================================================== */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* ==========================================================================
   9. OVERLAY VERTICAL — escurece topo e rodapé para dar leitura ao conteúdo
   ========================================================================== */
.bg-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 18%, transparent 70%, rgba(0, 0, 0, 0.55));
}

/* ==========================================================================
   10. TEXTURA — pseudo-elemento no container, blend soft-light
   ========================================================================== */
.background::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.02), transparent 70%);
  transform: rotate(15deg);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ==========================================================================
   Responsivo — reduz custo de blur em telas menores sem perder a atmosfera
   ========================================================================== */
@media (max-width: 767px) {
  .bg-depth::before,
  .bg-depth::after {
    filter: blur(220px);
  }
  .bg-center-glow {
    filter: blur(160px);
  }
  .bg-smoke {
    filter: blur(90px);
  }
  .bg-border-glow {
    filter: blur(120px);
    width: 55vw;
    height: 55vw;
  }
  .bg-lines {
    opacity: 0.5;
  }
}

@media (min-width: 2200px) {
  .bg-depth::before,
  .bg-depth::after,
  .bg-center-glow {
    filter: blur(550px);
  }
}