/* ==========================================================================
   Design System — Fundos decorativos das seções (marca d'água institucional)
   Usa o brasão oficial da AME/RJ como elemento gráfico sutil via
   pseudo-elementos, sem inserir imagens decorativas no HTML.
   ========================================================================== */

.section--watermark-left,
.section--watermark-right,
.section--watermark-center,
.section--pattern-soft,
.section--glow-soft {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section--watermark-left > .container,
.section--watermark-right > .container,
.section--watermark-center > .container {
  position: relative;
  z-index: 1;
}

.section--watermark-left::before,
.section--watermark-right::before,
.section--watermark-center::before {
  content: '';
  position: absolute;
  top: 50%;
  width: min(52vw, 720px);
  aspect-ratio: 873 / 810;
  background-image: url('../../images/brasao-amerj.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.section--watermark-left::before {
  left: -14%;
}

.section--watermark-right::before {
  right: -14%;
}

.section--watermark-center::before {
  left: 50%;
  width: min(38vw, 560px);
  opacity: 0.035;
  transform: translate(-50%, -50%);
}

/* Em seções escuras (azul-marinho, oliva profundo, vinho), o brasão aparece
   esbranquiçado para manter a leveza — opacidade um pouco maior (0.04–0.09)
   do que em seções claras, como recomenda o Design System. */
.section--inverse.section--watermark-left::before,
.section--inverse.section--watermark-right::before,
.section--inverse.section--watermark-center::before,
.section--olive.section--watermark-left::before,
.section--olive.section--watermark-right::before,
.section--olive.section--watermark-center::before,
.section--red.section--watermark-left::before,
.section--red.section--watermark-right::before,
.section--red.section--watermark-center::before {
  filter: grayscale(1) invert(1) brightness(1.75) contrast(1.1);
  opacity: 0.07;
}

/* ---- Textura sutil adicional: pontos de luz discretos ---- */
.section--pattern-soft::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(201, 162, 39, 0.06), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(15, 35, 55, 0.05), transparent 42%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---- Brilho radial muito discreto no topo da seção ---- */
.section--glow-soft::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.section--pattern-soft > .container,
.section--glow-soft > .container {
  position: relative;
  z-index: 1;
}