/* ============ BG LOGIN — painel esquerdo isolado ============ */
/* Reproduz exatamente o fundo escuro animado da tela de login  */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Container ── */
.bg-wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* ── Foto de fundo com Ken Burns ── */
.bg-wrap::before {
  content: '';
  position: absolute;
  inset: -40px;
  background:
    url('../assets/img/login/bg.jpg') center / cover no-repeat,
    linear-gradient(150deg, #0d4a6e 0%, #08344C 50%, #041520 100%);
  will-change: transform;
  animation: ken-burns 30s ease-in-out infinite;
  z-index: 0;
}

/* ── Overlay duplo: lateral + inferior ── */
.bg-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8,52,76,0.60) 0%, rgba(8,52,76,0.20) 100%),
    linear-gradient(to top,  rgba(4,15,25,0.95) 0%, rgba(8,52,76,0.00) 55%);
  z-index: 1;
  pointer-events: none;
}

/* ── Partículas decorativas ── */
.particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
}

/* 1 — anel dourado grande, canto inferior direito, gira */
.particle--1 {
  width: 280px; height: 280px;
  border: 1.5px solid rgba(254,189,13,0.14);
  bottom: -70px; right: -70px;
  animation: spin 24s linear infinite;
}

/* 2 — anel branco médio, topo direito, flutua */
.particle--2 {
  width: 150px; height: 150px;
  border: 1px solid rgba(255,255,255,0.10);
  top: 10%; right: 8%;
  animation: float 9s ease-in-out infinite;
}

/* 3 — blob dourado pequeno, lado esquerdo */
.particle--3 {
  width: 56px; height: 56px;
  background: rgba(254,189,13,0.12);
  top: 38%; left: 7%;
  animation: float 12s 2s ease-in-out infinite;
}

/* 4 — anel branco enorme, canto superior esquerdo, gira lento reverse */
.particle--4 {
  width: 340px; height: 340px;
  border: 1px solid rgba(255,255,255,0.04);
  top: -90px; left: -90px;
  animation: spin 38s linear infinite reverse;
}

/* 5 — quadrado dourado pequeno, lado direito baixo */
.particle--5 {
  width: 22px; height: 22px;
  background: rgba(254,189,13,0.25);
  border-radius: 5px;
  bottom: 26%; right: 16%;
  animation: float 8s 1s ease-in-out infinite;
}

/* 6 — bolinha branca topo esquerdo */
.particle--6 {
  width: 9px; height: 9px;
  background: rgba(255,255,255,0.22);
  top: 20%; left: 20%;
  animation: float 10s 3s ease-in-out infinite;
}

/* ── Conteúdo de marca (opcional) ── */
.brand-content {
  position: relative;
  z-index: 3;
  padding: 48px 52px;
  color: #fff;
}

.brand-logo {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #FFAA00 0%, #FFD762 100%);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
  color: #08344C;
  margin-bottom: 24px;
}

.brand-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.brand-title em {
  font-style: normal;
  color: #FEBD0D;
}

.brand-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  max-width: 280px;
}

/* ── Keyframes ── */
@keyframes ken-burns {
  0%   { transform: scale(1)    translate(0,    0);    }
  33%  { transform: scale(1.06) translate(-1%,  -0.5%); }
  66%  { transform: scale(1.04) translate(0.8%, -1%);  }
  100% { transform: scale(1)    translate(0,    0);    }
}

@keyframes spin {
  from { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.08); }
  to   { transform: rotate(360deg) scale(1);    }
}

@keyframes float {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(7deg); }
}

/* ── Redução de movimento ── */
@media (prefers-reduced-motion: reduce) {
  .bg-wrap::before, .particle { animation: none; }
}

/* ============ BG Shell — index (sem conflito WP) ============ */

.dunorte-bg-shell {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(254,189,13,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 80%, rgba(30,76,101,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #0A4565 0%, #022C42 50%, #06131F 100%);
}

.dunorte-bg-shell::before {
  content: '';
  position: absolute;
  inset: -10% -10%;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(254,189,13,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(30,76,101,0.30) 0%, transparent 60%);
  animation: dunorte-bg-aurora 24s ease-in-out infinite;
  filter: blur(40px);
  pointer-events: none;
}

.dunorte-bg-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
}

.dunorte-bg-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: dunorte-bg-twinkle 3.2s infinite;
}

@keyframes dunorte-bg-aurora {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(3%,-2%) scale(1.04); }
  66%      { transform: translate(-2%,2%) scale(0.98); }
}

@keyframes dunorte-bg-twinkle {
  0%,100% { opacity: 0.15; }
  50%      { opacity: 0.9; }
}