/* =========================================================
   PIER PARTNERS — PADRÃO F8 PROFUNDIDADE
   Wrapper CSS para o SVG de ondas (use junto com
   partials/pattern-f8.html). Inclua este CSS depois de
   tokens.css.
   ========================================================= */

/* Container que recebe o padrão como camada de fundo.
   Uso: <section class="f8-surface"> ... conteúdo ... </section>
   O SVG vai dentro de <div class="f8-surface__waves"> */
.f8-surface {
  position: relative;
  background: var(--navy-900);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.f8-surface__waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.f8-surface__waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Conteúdo fica acima das ondas */
.f8-surface > *:not(.f8-surface__waves) {
  position: relative;
  z-index: 1;
}

/* Variantes de densidade (opcional) */
.f8-surface--soft .f8-surface__waves { opacity: 0.75; }
.f8-surface--flat .f8-surface__waves { display: none; }

/* Grid de 3% Signal sobreposto (uso raro — páginas de dados) */
.f8-surface--grid::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--signal-300) 1px, transparent 1px),
    linear-gradient(to bottom, var(--signal-300) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.6;
}