/* Estrelinhas flutuantes na junta entre “Continue a exploração” e “Walking Updates”
   — ancoragem com altura 0 (não cria bloco / faixa); só os ícones são visíveis. */

/* Mobile: escondido abaixo de 768px (alinhado ao breakpoint md do site) */
@media (max-width: 47.99rem) {
  .wp-join-floating-stars {
    display: none;
  }
}

.wp-join-floating-stars {
  position: relative;
  /* Acima do fundo de #noticias (z-10) para as estrelas sobrepor a junta */
  z-index: 12;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  background: none;
  border: 0;
}

.wp-join-floating-stars__star {
  position: absolute;
  left: var(--x, 8%);
  top: var(--y, 0);
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(0deg);
  transform-origin: 50% 50%;
  color: #fff;
  will-change: transform;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75));
  /* Rotação + ligeiro movimento vertical = “a girar e a flutuar” */
  animation: wpJoinStarFloat 11s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

.wp-join-floating-stars__star::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 62%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 62%,
    0% 38%,
    37% 38%
  );
}

@media (prefers-reduced-motion: reduce) {
  .wp-join-floating-stars__star {
    animation: none;
  }
}

@keyframes wpJoinStarFloat {
  0% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0) rotate(0deg);
  }
  20% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(-0.2rem) rotate(72deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0.12rem) rotate(144deg);
  }
  60% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(-0.1rem) rotate(216deg);
  }
  80% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0.15rem) rotate(288deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(var(--s, 1)) translateY(0) rotate(360deg);
  }
}