/* Céu de estrelas compartilhado por TODAS as landing pages (/lp/*).
 * Uso em cada landing:  <link rel="stylesheet" href="/lp/stars.css">  e, logo depois de <body>:  <div class="sky" aria-hidden="true"></div>
 * Cores por página (opcional): --star-a e --star-b no :root. As seções precisam ter fundo transparente/translúcido para as estrelas aparecerem. */
:root { --star-a: #d4af62; --star-b: #ffffff; }

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky::before, .sky::after, .sky i { content: ""; position: absolute; inset: 0; background-repeat: repeat; }

/* camada 1: estrelas pequenas e densas */
.sky::before {
  background-image:
    radial-gradient(1px 1px at 12px 18px, var(--star-b), transparent), radial-gradient(1.5px 1.5px at 74px 96px, var(--star-a), transparent),
    radial-gradient(1px 1px at 140px 44px, var(--star-b), transparent), radial-gradient(1px 1px at 190px 150px, var(--star-a), transparent),
    radial-gradient(1.5px 1.5px at 250px 70px, var(--star-b), transparent), radial-gradient(1px 1px at 310px 190px, var(--star-a), transparent),
    radial-gradient(1px 1px at 370px 30px, var(--star-b), transparent), radial-gradient(1.5px 1.5px at 420px 130px, var(--star-a), transparent);
  background-size: 460px 230px; animation: sky-twinkle 5s ease-in-out infinite;
}
/* camada 2: estrelas médias, ritmo diferente */
.sky::after {
  background-image:
    radial-gradient(2px 2px at 40px 60px, var(--star-a), transparent), radial-gradient(1.5px 1.5px at 160px 20px, var(--star-b), transparent),
    radial-gradient(2px 2px at 280px 120px, var(--star-a), transparent), radial-gradient(1.5px 1.5px at 360px 80px, var(--star-b), transparent),
    radial-gradient(2px 2px at 90px 170px, var(--star-b), transparent);
  background-size: 520px 280px; animation: sky-twinkle 7s ease-in-out 1.5s infinite;
}
/* camada 3: poucas estrelas grandes com brilho (cintilam devagar) */
.sky i { background-image: radial-gradient(3px 3px at 80px 90px, var(--star-a), transparent), radial-gradient(2.5px 2.5px at 330px 210px, var(--star-b), transparent), radial-gradient(3px 3px at 520px 40px, var(--star-a), transparent); background-size: 640px 320px; filter: drop-shadow(0 0 4px var(--star-a)); animation: sky-twinkle 9s ease-in-out 3s infinite; }

@keyframes sky-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sky::before, .sky::after, .sky i { animation: none; opacity: .5; } }

/* conteúdo acima do céu */
body > header, body > main, body > footer, body > a { position: relative; z-index: 1; }
.float-wa { position: fixed; z-index: 30; }