/* Shared brand foundation: use this layer on every Frangis After Dark page. */
.night-sky {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgb(111 7 54 / 20%) 0, transparent 29%),
    radial-gradient(circle at 82% 12%, rgb(255 68 151 / 8%) 0, transparent 18%),
    linear-gradient(180deg, #030104 0%, #050106 48%, #000 100%);
}

.night-sky--page {
  opacity: 0.92;
}

.night-sky::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.8;
  background-image:
    radial-gradient(circle, rgb(255 248 219 / 90%) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgb(255 109 177 / 72%) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgb(255 255 255 / 58%) 0 0.8px, transparent 1.4px);
  background-position: 8% 18%, 74% 28%, 38% 8%;
  background-size: 157px 173px, 229px 211px, 113px 137px;
}

.night-sky::after {
  position: absolute;
  inset: 38% -20% -35%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(119 0 53 / 10%) 0, transparent 68%);
  filter: blur(28px);
}

.moon {
  position: absolute;
  top: clamp(2.6rem, 8vh, 6rem);
  right: clamp(2rem, 9vw, 9rem);
  width: clamp(4rem, 8vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #fffaf0 4%, #ffd8c7 48%, #cd8067 100%);
  -webkit-mask: radial-gradient(circle at 26% 31%, transparent 0 56%, #000 57%);
  mask: radial-gradient(circle at 26% 31%, transparent 0 56%, #000 57%);
  filter:
    drop-shadow(0 0 1px rgb(255 255 255 / 90%))
    drop-shadow(0 0 12px rgb(255 215 185 / 38%))
    drop-shadow(0 0 30px rgb(255 57 146 / 16%));
  opacity: 0.82;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6dc;
  box-shadow: 0 0 8px 2px rgb(255 229 200 / 52%);
  animation: brand-twinkle 5.6s ease-in-out infinite;
}

.star::before,
.star::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 241 215 / 92%), transparent);
  transform: translate(-50%, -50%);
}

.star::before {
  width: 23px;
  height: 1px;
}

.star::after {
  width: 17px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.star--1 { top: 16%; left: 12%; animation-delay: -1.2s; }
.star--2 { top: 9%; left: 46%; animation-delay: -3.9s; transform: scale(0.68); }
.star--3 { top: 24%; right: 21%; animation-delay: -0.4s; transform: scale(1.15); }
.star--4 { top: 42%; left: 8%; animation-delay: -4.7s; transform: scale(0.58); }
.star--5 { top: 55%; right: 7%; animation-delay: -2.6s; transform: scale(0.72); }
.star--6 { bottom: 19%; left: 19%; animation-delay: -5.1s; transform: scale(0.48); }
.star--7 { bottom: 25%; right: 18%; animation-delay: -1.8s; transform: scale(0.55); }
.star--8 { top: 5%; left: 23%; animation-delay: -6.2s; animation-duration: 7.3s; transform: scale(0.44); }
.star--9 { top: 13%; right: 7%; animation-delay: -2.1s; animation-duration: 6.8s; transform: scale(0.5); }
.star--10 { top: 30%; left: 24%; animation-delay: -4.4s; animation-duration: 7.7s; transform: scale(0.6); }
.star--11 { top: 35%; right: 38%; animation-delay: -1.1s; animation-duration: 6.3s; transform: scale(0.42); }
.star--12 { top: 49%; left: 2%; animation-delay: -3.6s; animation-duration: 8.1s; transform: scale(0.52); }
.star--13 { top: 62%; left: 14%; animation-delay: -5.7s; animation-duration: 6.9s; transform: scale(0.38); }
.star--14 { top: 68%; right: 23%; animation-delay: -0.8s; animation-duration: 7.5s; transform: scale(0.67); }
.star--15 { top: 76%; left: 41%; animation-delay: -3.2s; animation-duration: 6.6s; transform: scale(0.4); }
.star--16 { top: 83%; right: 9%; animation-delay: -4.9s; animation-duration: 8.4s; transform: scale(0.55); }
.star--17 { bottom: 8%; left: 8%; animation-delay: -2.8s; animation-duration: 7.1s; transform: scale(0.36); }
.star--18 { bottom: 12%; right: 34%; animation-delay: -6.5s; animation-duration: 8s; transform: scale(0.42); }
.star--19 { top: 21%; left: 62%; animation-delay: -3.4s; animation-duration: 6.5s; transform: scale(0.46); }
.star--20 { top: 44%; right: 15%; animation-delay: -5.3s; animation-duration: 7.9s; transform: scale(0.38); }
.star--21 { bottom: 33%; left: 29%; animation-delay: -1.6s; animation-duration: 7.2s; transform: scale(0.5); }

@keyframes brand-twinkle {
  0%, 100% { opacity: 0.3; }
  42% { opacity: 1; }
  58% { opacity: 0.78; }
}

@media (max-width: 520px) {
  .moon {
    top: 7.5vh;
    right: 7vw;
    width: clamp(3.4rem, 15vw, 4.8rem);
    opacity: 0.78;
  }

  .star--3 {
    top: 27%;
    right: 9%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star {
    animation: none;
  }
}