/* Poeira cósmica — login, Tarefas, Relatórios e Call (mesmo CSS + sync de fase via JS).
   Nebulosa Dia/Nublado: ::before CSS (path fechado).
   Nebulosa Noite: canvas procedural (cosmic-nebula-noite.js) atrás dos grãos.
   Grãos: idênticos em todos os temas (direita → esquerda, leve baixo).
   Maiores mais rápidos, médios médios, mínimos mais lentos (parallax).
   background-position desloca exatamente 1 tile (W×H) — loop pixel-perfeito
   porque background-repeat:repeat. Fases via --cosmic-delay-* (cosmic-dust-sync.js).
   Tons de grão via --cosmic-grain-* (Nublado redefine; Noite NÃO redefine — pontos estáveis). */

:root {
  --cosmic-nebula-1: rgba(255, 255, 255, 0.62);
  --cosmic-nebula-2: rgba(144, 238, 255, 0.68);
  --cosmic-nebula-3: rgba(255, 255, 255, 0.42);
  --cosmic-nebula-4: rgba(90, 160, 255, 0.52);
  --cosmic-grain-bright: rgba(255, 255, 255, 1);
  --cosmic-grain-soft: rgba(255, 255, 255, 0.92);
  --cosmic-grain-cyan: rgba(144, 238, 255, 0.98);
  --cosmic-grain-ice: rgba(200, 240, 255, 0.95);
}

html[data-theme="cinza"] {
  /* Nublado: prata + azul institucional, sem ciano elétrico */
  --cosmic-nebula-1: rgba(236, 238, 243, 0.42);
  --cosmic-nebula-2: rgba(172, 179, 188, 0.48);
  --cosmic-nebula-3: rgba(184, 191, 199, 0.36);
  --cosmic-nebula-4: rgba(11, 99, 214, 0.28);
  --cosmic-grain-bright: rgba(236, 238, 243, 0.95);
  --cosmic-grain-soft: rgba(220, 224, 230, 0.88);
  --cosmic-grain-cyan: rgba(180, 198, 220, 0.9);
  --cosmic-grain-ice: rgba(160, 180, 205, 0.85);
}

html[data-theme="dark"] {
  /* Noite: fundo profundo; nebulosa via canvas. Grãos herdam :root (não mudam no switch). */
  --cosmic-void-0: #01030a;
  --cosmic-void-1: #020510;
  --cosmic-void-2: #030817;
  --cosmic-void-3: #050a19;
}

.login-cosmic-dust,
.tf-cosmic-dust,
.sidebar-cosmic-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.login-cosmic-dust::before,
.tf-cosmic-dust::before,
.sidebar-cosmic-dust::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 190%;
  left: -28%;
  top: -48%;
  z-index: 0;
  background:
    radial-gradient(ellipse 46% 34% at 16% 58%, var(--cosmic-nebula-1), transparent 64%),
    radial-gradient(ellipse 40% 44% at 72% 18%, var(--cosmic-nebula-2), transparent 60%),
    radial-gradient(ellipse 52% 32% at 92% 72%, var(--cosmic-nebula-3), transparent 62%),
    radial-gradient(ellipse 30% 40% at 40% 90%, var(--cosmic-nebula-4), transparent 64%);
  filter: blur(1.625rem);
  mix-blend-mode: screen;
  /* 48s: deriva na mesma diagonal dos grãos; path fecha em 100% = 0%. */
  animation: cosmic-nebula-drift 48s linear infinite;
  animation-delay: var(--cosmic-delay-nebula, 0s);
  animation-play-state: running;
  will-change: transform;
}

/* Grãos passam a ser filhos — desliga o ::after legado síncrono. */
.login-cosmic-dust::after,
.tf-cosmic-dust::after,
.sidebar-cosmic-dust::after {
  content: none !important;
  display: none !important;
}

/* Canvas da nebulosa Noite — atrás dos pontos */
.cosmic-nebula-noite-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
  border-radius: inherit;
  image-rendering: auto;
}

html[data-theme="dark"] .cosmic-nebula-noite-canvas {
  display: block;
}

.cosmic-dust-grain {
  position: absolute;
  /* Margem assimetrica: o percurso e -x / +y, entao sobra so onde ele
     descobre — direita e topo. Cobre o maior tile (384 x 249) com folga.
     Percentual nao serve: em host estreito 40% < 16rem e a borda aparece. */
  top: -16.875rem;
  right: -25.625rem;
  bottom: -3.75rem;
  left: -3.75rem;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background-repeat: repeat;
  background-position: 0 0;
  animation-play-state: running;
  /* background-position NAO e compositavel: animava repintando ~12,6x a area
     do host por quadro. transform e, e o loop continua perfeito porque
     transladar exatamente um tile equivale a nao transladar. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Próximos (maiores) — camada rápida.
   Tile sizes espelhados no @keyframes (Δx = −W, Δy = +H — mesma diagonal).
   Gradiente suave (sem hard-stop) = movimento contínuo sem “pixel step”. */
.cosmic-dust-grain--a {
  background-image:
    radial-gradient(0.175rem 0.175rem at 7% 19%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.15625rem 0.15625rem at 31% 8%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.1625rem 0.1625rem at 54% 71%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.15rem 0.15rem at 76% 33%, var(--cosmic-grain-cyan), transparent),
    radial-gradient(0.16875rem 0.16875rem at 18% 57%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.15625rem 0.15625rem at 44% 88%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.1625rem 0.1625rem at 88% 62%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.15rem 0.15rem at 63% 44%, var(--cosmic-grain-cyan), transparent);
  background-size: 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem, 24rem 15.5625rem;
  animation: cosmic-dust-grain-a 27s linear infinite;
  animation-delay: var(--cosmic-delay-a, 0s);
  opacity: 1;
}

/* Médios — mais lentos que os próximos */
.cosmic-dust-grain--b {
  background-image:
    radial-gradient(0.10625rem 0.10625rem at 12% 63%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.1125rem 0.1125rem at 39% 82%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.1rem 0.1rem at 68% 27%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.10625rem 0.10625rem at 91% 55%, var(--cosmic-grain-cyan), transparent),
    radial-gradient(0.1125rem 0.1125rem at 25% 14%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.1rem 0.1rem at 57% 48%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.10625rem 0.10625rem at 80% 90%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.1125rem 0.1125rem at 5% 38%, var(--cosmic-grain-cyan), transparent);
  background-size: 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem, 20.625rem 13.375rem;
  animation: cosmic-dust-grain-b 48s linear infinite;
  animation-delay: var(--cosmic-delay-b, 0s);
  opacity: 0.92;
}

/* Distantes (menores) — mais lentos que os médios */
.cosmic-dust-grain--c {
  background-image:
    radial-gradient(0.071875rem 0.071875rem at 22% 47%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.075rem 0.075rem at 48% 15%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.078125rem 0.078125rem at 71% 79%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.06875rem 0.06875rem at 95% 31%, var(--cosmic-grain-cyan), transparent),
    radial-gradient(0.075rem 0.075rem at 9% 72%, var(--cosmic-grain-bright), transparent),
    radial-gradient(0.071875rem 0.071875rem at 35% 92%, var(--cosmic-grain-soft), transparent),
    radial-gradient(0.078125rem 0.078125rem at 60% 58%, var(--cosmic-grain-ice), transparent),
    radial-gradient(0.06875rem 0.06875rem at 84% 8%, var(--cosmic-grain-cyan), transparent);
  background-size: 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem, 17.8125rem 11.5625rem;
  animation: cosmic-dust-grain-c 75s linear infinite;
  animation-delay: var(--cosmic-delay-c, 0s);
  opacity: 0.85;
}

/* Path fechado na mesma diagonal (direita → esquerda, leve baixo). */
@keyframes cosmic-nebula-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(-4%, 1.2%, 0) scale(1.02); }
  50% { transform: translate3d(-8%, 2.4%, 0) scale(1.05); }
  75% { transform: translate3d(-4%, 1.2%, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Loop tile-perfect por transform: transladar exatamente um tile e o mesmo
   que nao transladar, entao 100% ≡ 0% e a costura some. Os tres tiles
   partilham o angulo (~33 graus) — muda so a velocidade, que e o parallax. */
@keyframes cosmic-dust-grain-a {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-24rem, 15.5625rem, 0); }
}

@keyframes cosmic-dust-grain-b {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-20.625rem, 13.375rem, 0); }
}

@keyframes cosmic-dust-grain-c {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-17.8125rem, 11.5625rem, 0); }
}

/* —— Tema Noite: fundo void + desliga ::before CSS (canvas assume a nebulosa) —— */
html[data-theme="dark"] .login-cosmic-dust,
html[data-theme="dark"] .tf-cosmic-dust,
html[data-theme="dark"] .sidebar-cosmic-dust {
  /* Void + poços lilás leves (profundidade; canvas reforça a mesma ideia). */
  background:
    radial-gradient(ellipse 50% 38% at 68% 18%, rgba(96, 55, 128, 0.22), transparent 62%),
    radial-gradient(ellipse 42% 36% at 18% 58%, rgba(72, 42, 112, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 32% at 90% 74%, rgba(110, 68, 150, 0.14), transparent 58%),
    radial-gradient(ellipse 34% 38% at 40% 90%, rgba(58, 34, 96, 0.16), transparent 64%),
    linear-gradient(160deg, var(--cosmic-void-0) 0%, var(--cosmic-void-1) 40%, var(--cosmic-void-2) 72%, var(--cosmic-void-3) 100%);
}

html[data-theme="dark"] .login-cosmic-dust::before,
html[data-theme="dark"] .tf-cosmic-dust::before,
html[data-theme="dark"] .sidebar-cosmic-dust::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html[data-theme="dark"] .login-cosmic-dust::after,
html[data-theme="dark"] .tf-cosmic-dust::after,
html[data-theme="dark"] .sidebar-cosmic-dust::after {
  content: none !important;
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .login-cosmic-dust::before,
  .tf-cosmic-dust::before,
  .sidebar-cosmic-dust::before,
  .login-cosmic-dust::after,
  .tf-cosmic-dust::after,
  .sidebar-cosmic-dust::after,
  .cosmic-dust-grain {
    animation: none !important;
    will-change: auto;
  }
  html[data-theme="dark"] .cosmic-nebula-noite-canvas {
    opacity: 0.92;
  }
}

/* Login: conteúdo acima da poeira — só z-index (não trocar position:
   blobs/slides são absolute; position:relative aqui empurrava o carrossel para baixo).
   Blobs ficam atrás da poeira no Noite (ver login.css / portal). */
#loginScreen .fd-login-promo > :not(.login-cosmic-dust):not(.fd-login-blob),
#portalLogin .portal-login-visual > :not(.login-cosmic-dust):not([class*="__blob"]) {
  z-index: 1;
}

#loginScreen .fd-login-promo,
#portalLogin .portal-login-visual {
  isolation: isolate;
}