/* ═══ Dreamy background — floating numbers + aurora orbs ═══
   Shared across all meser pages so they match hilel.link.
   Background layers sit at z-index:-1 so sticky bars, forms,
   tables, and modals stay fully interactive above them. */

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.num-star {
  position: absolute;
  font-family: 'Georgia', serif;
  font-weight: 700;
  user-select: none;
  line-height: 1;
  opacity: 0; /* start dim; animation-fill-mode:both applies the 0% (min-op) frame during the delay so numbers never flash bright on load */
  animation: numTwinkle var(--dur) ease-in-out infinite,
             numFloat var(--float-dur) linear infinite;
  animation-delay: var(--delay);
  animation-fill-mode: both;
}
@keyframes numTwinkle { 0%, 100% { opacity: var(--min-op); } 50% { opacity: var(--max-op); } }
@keyframes numFloat { 0% { translate: 0 0; } 100% { translate: var(--drift-x) var(--drift-y); } }

/* Aurora orbs — kept inside .stars so each page's own body::before stays untouched */
.stars::before, .stars::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.stars::before {
  top: 18%; left: 28%; width: 620px; height: 620px;
  background: radial-gradient(ellipse, rgba(133,4,162,0.16) 0%, rgba(89,0,130,0.05) 50%, transparent 70%);
  animation: auroraFloat 22s ease-in-out infinite;
}
.stars::after {
  bottom: 8%; right: 18%; width: 520px; height: 520px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.09) 0%, rgba(133,4,162,0.05) 50%, transparent 70%);
  animation: auroraFloat 27s ease-in-out infinite reverse;
}
@keyframes auroraFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(40px,-30px) scale(1.05); }
  50% { transform: translate(-20px,40px) scale(0.95); }
  75% { transform: translate(30px,20px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .num-star, .stars::before, .stars::after { animation: none; }
}