/* ===============================
   Topbar de campanha fixa (segura)
=============================== */

.campanha-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}


/* ===============================
   Campanha Topbar – Base
=============================== */

.campanha-topbar {
  position: relative;
  overflow: hidden;
  color: #212529;
  font-weight: 500;
  background: transparent;
}

/* Camada animada de fundo */
.campanha-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: var(--campanha-bg);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0%;

  transition: background-position 6s linear;
}

/* Estado animado: direita → esquerda */
.campanha-topbar.animar::before {
  background-position: 0% 0%;
}

/* Conteúdo acima do fundo */
.campanha-topbar > .container {
  position: relative;
  z-index: 1;
}

/* ===============================
   Ícone e texto
=============================== */

.campanha-topbar i,
.campanha-topbar span {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Ícone e texto acompanham o fluxo */
.campanha-topbar.animar i,
.campanha-topbar.animar span {
  transform: translateX(-6px);
  opacity: 0.95;
}

/* Ajuste fino do ícone */
.campanha-topbar i {
  font-size: 1.2rem;
}

.campanha-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.campanha-topbar-spacer {
  height: 36px; /* ajuste fino se quiser */
}


/* ===============================
   Etapa 1 – Entrada narrativa
=============================== */

.campanha-topbar .campanha-conteudo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  /* estado inicial (fora, à direita) */
  transform: translateX(56px);
  opacity: 0;

  transition:
    transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 1.6s ease;
}

/* entra e assenta */
.campanha-topbar.entrar .campanha-conteudo {
  transform: translateX(0);
  opacity: 1;
}

/* ===============================
   Etapa 2 – Vida sutil (respiração)
=============================== */

.campanha-topbar.respirar .campanha-conteudo {
  animation: respirar-horizontal 2.5s ease-in-out infinite;
}

@keyframes respirar-horizontal {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}