body.natal {
  background: linear-gradient(180deg, #1c0f0a, #3a1a14 60%, #2b1d14);
}

.natal .container { position: relative; z-index: 1; }
.natal .profile h1 { text-shadow: 0 0 14px rgba(255, 200, 120, .5); }
.natal .category h2 { color: #f2c46d; }

#festive {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.flake {
  position: absolute;
  top: -10%;
  color: #fff;
  opacity: .85;
  animation: fall linear infinite, sway ease-in-out infinite alternate;
}

@keyframes fall {
  to { transform: translateY(115vh); }
}

@keyframes sway {
  from { margin-left: -20px; }
  to { margin-left: 20px; }
}

.lights {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  z-index: 2; pointer-events: none;
}
.lights i {
  width: 10px; height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: blink 1.6s ease-in-out infinite;
}
.lights i:nth-child(4n+1) { background: #e63946; box-shadow: 0 0 10px 3px #e63946; }
.lights i:nth-child(4n+2) { background: #f2c46d; box-shadow: 0 0 10px 3px #f2c46d; animation-delay: .4s; }
.lights i:nth-child(4n+3) { background: #52b788; box-shadow: 0 0 10px 3px #52b788; animation-delay: .8s; }
.lights i:nth-child(4n)   { background: #8ecae6; box-shadow: 0 0 10px 3px #8ecae6; animation-delay: 1.2s; }

@keyframes blink {
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .flake, .lights i { animation: none; }
}