/* Preserva a base azul e a opacidade de 6% do vídeo original. */
.stats-space-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: var(--panel);
}

.stats-earth-horizon {
  position: absolute;
  /* O topo do globo aparece a cerca de 30% da altura do painel. */
  top: 22%;
  left: 0;
  width: 100%;
  height: 78%;
  opacity: .06;
  /* 240 quadros do vídeo: 12 colunas, 20 linhas, 30 FPS em 8 segundos. */
  background-image: url("/public/background/panorama-rotation.20261103b.webp");
  background-size: 1200% 2000%;
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: stats-earth-columns .4s steps(12, jump-end) infinite,
    stats-earth-rows 8s steps(20, jump-end) infinite;
}

/* As duas faixas alternam o avanço para manter nuvens sempre em movimento. */
.stats-clouds {
  position: absolute;
  inset: 0;
}

.stats-clouds::before,
.stats-clouds::after {
  content: "";
  position: absolute;
  top: -15%;
  left: -10%;
  width: 120%;
  height: 70%;
  background: url("/public/background/panorama-clouds.20261103a.webp") center / 100% 100% no-repeat;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  transform-origin: 50% 0;
  opacity: 0;
  animation: stats-clouds-approach 8s linear infinite;
}

.stats-clouds::after {
  animation-delay: -4s;
}

@keyframes stats-earth-columns {
  from { background-position-x: 0; }
  to { background-position-x: 109.090909091%; }
}

@keyframes stats-earth-rows {
  from { background-position-y: 0; }
  to { background-position-y: 105.263157895%; }
}

@keyframes stats-clouds-approach {
  0% { opacity: 0; transform: translateY(-8%) scale(.8); }
  20% { opacity: .06; }
  75% { opacity: .06; }
  100% { opacity: 0; transform: translateY(25%) scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .stats-earth-horizon,
  .stats-clouds::before,
  .stats-clouds::after {
    animation: none;
  }

  .stats-clouds::before {
    opacity: .04;
  }
}