/* skull.black · glance — tema "noite de tempestade" */

/* céu de tempestade: gradientes frios + escuro profundo, fixo ao rolar */
html, body {
  background:
    radial-gradient(1100px 620px at 78% -12%, hsla(210, 55%, 42%, .16), transparent 62%),
    radial-gradient(820px 520px at 12% -6%, hsla(255, 45%, 34%, .14), transparent 58%),
    linear-gradient(180deg, #0a0f1b 0%, #080b14 45%, #05070d 100%) !important;
  background-attachment: fixed !important;
}

/* relâmpago: um clarão que ilumina a tela inteira, raro e rápido (não atrapalha o uso) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  background:
    radial-gradient(1200px 820px at 72% 6%, hsla(205, 100%, 88%, .85), hsla(210, 100%, 76%, .14) 38%, transparent 62%);
  opacity: 0;
  animation: sb-lightning 23s ease-out infinite;
}
@keyframes sb-lightning {
  0%, 100% { opacity: 0; }
  21.8%    { opacity: 0; }
  22.2%    { opacity: .50; }  /* primeiro estalo */
  22.7%    { opacity: .06; }
  23.3%    { opacity: .40; }  /* segundo estalo (o eco) */
  24.1%    { opacity: 0; }
  60.5%    { opacity: 0; }
  60.9%    { opacity: .32; }  /* um relâmpago distante mais tarde */
  61.6%    { opacity: 0; }
}

/* garante o conteúdo acima do céu; cantos levemente arredondados */
.widget { position: relative; z-index: 1; }
.widget-content { border-radius: 10px; }
.widget-header { letter-spacing: .3px; }