/* ============================================================
   X8 LABS — Layout do hero com partículas (dashboard)
   ------------------------------------------------------------
   Estas regras vivem num CSS ESTÁTICO (linkado no <head>), não
   dentro do módulo JS: um <script type="module"> é deferido, então
   o card navy de boas-vindas chegava a PINTAR antes de o JS rodar
   e sumia depois — o flash do primeiro segundo.
   Como CSS bloqueante, o card já nasce descaracterizado.

   O JS (x8-hero-particles.js) cuida só do canvas/motor.
   ============================================================ */

/* ---- o card de boas-vindas deixa de ser card ---- */
section.dashboard-simple-welcome{
  background: none !important; border: none !important;
  box-shadow: none !important; backdrop-filter: none !important;
  transition: none !important;   /* senão a transição segura a sombra antiga */
}
/* texto solto no fundo claro -> tinta escura (tokens do sistema) */
section.dashboard-simple-welcome .dashboard-simple-welcome-date{ color: var(--via-text-muted, #5C6677) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-name{ color: var(--via-text-body, #344054) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-title{ color: var(--via-text-primary, #0A1F3B) !important; }
section.dashboard-simple-welcome .dashboard-simple-welcome-copy{ color: var(--via-text-body, #344054) !important; opacity: .85; }

/* ---- ancoragem: a nuvem vive no shell, atrás dos cards ---- */
.dashboard-simple-shell{ position: relative; }
.dashboard-simple-top, .dashboard-simple-areas-head, .dashboard-simple-areas-grid{
  position: relative; z-index: 1;
}

/* ---- o host da nuvem (DESKTOP): com máscara, que dissolve a borda e
   deixa a nuvem visualmente mais contida. ---- */
.x8-hero-fx{
  position: absolute; top: -70px; right: 16%; width: 78%; height: 700px;
  max-width: 1040px; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 55% 42%, #000 42%, transparent 74%);
          mask-image: radial-gradient(ellipse 60% 55% at 55% 42%, #000 42%, transparent 74%);
}
.x8-hero-fx canvas{ display: block; width: 100%; height: 100%; }

/* ---- MOBILE: tudo empilha, então o card "Agenda da semana" desce e a
   nuvem ocupa o vão aberto entre ele e o texto de boas-vindas. ---- */
@media (max-width: 900px){
  /* row-gap (não margin-top): com align-items:stretch a margem INFLAVA a
     linha do grid e o card esticava junto. align-self:start trava a altura. */
  .dashboard-simple-top{ row-gap: 270px !important; }
  .dashboard-simple-top > aside{ align-self: start; }
  /* canvas do tamanho da TELA (sem máscara); a nuvem fica menor por causa
     da câmera afastada -> nunca encosta nas bordas. */
  .x8-hero-fx{
    top: 10px; right: auto; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 720px; max-width: none;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
}
