/* Shared fixed star field for the home page and Today screen. */
.today-page-atmosphere {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(100%, 480px);
  height: 100dvh;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88), transparent 27%), radial-gradient(circle at 86% 42%, rgba(224, 202, 238, 0.44), transparent 30%), radial-gradient(circle at 12% 78%, rgba(255, 232, 219, 0.34), transparent 32%), linear-gradient(165deg, #f6eff9 0%, #eee3f3 48%, #fbf3ee 100%);
}
.today-page-atmosphere::before, .today-page-atmosphere::after {
  position: absolute;
  inset: -12%;
  content: "";
  pointer-events: none;
  will-change: opacity, transform;
}
.today-page-atmosphere::before {
  opacity: 0.58;
  background: radial-gradient(ellipse at 18% 24%, rgba(205, 181, 234, 0.2), transparent 34%), radial-gradient(ellipse at 82% 58%, rgba(255, 222, 204, 0.2), transparent 32%), radial-gradient(ellipse at 48% 92%, rgba(202, 209, 247, 0.18), transparent 36%);
  animation: today-night-nebula-shift 18s ease-in-out infinite alternate;
}
.today-page-atmosphere::after {
  opacity: 0.4;
  background: radial-gradient(ellipse at 72% 18%, rgba(255, 247, 226, 0.3), transparent 26%), radial-gradient(ellipse at 24% 72%, rgba(221, 199, 240, 0.2), transparent 30%);
  animation: today-night-nebula-shift 24s -9s ease-in-out infinite alternate-reverse;
}
.today-page-atmosphere__far, .today-page-atmosphere__mid, .today-page-atmosphere__near, .today-page-atmosphere__shooting, .today-page-atmosphere__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.today-page-atmosphere__shooting-star {
  position: absolute;
  top: var(--shooting-y);
  left: var(--shooting-x);
  width: var(--shooting-length);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 251, 235, 0.98) 100%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(218, 188, 244, 0.78));
  opacity: 0;
  transform-origin: 0 50%;
  animation: today-shooting-star-flight var(--shooting-duration) var(--shooting-delay) cubic-bezier(0.2, 0.55, 0.35, 1) infinite;
  will-change: opacity, transform;
}
.today-page-atmosphere__point {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, #fff7df 42%, rgba(202, 183, 235, 0.75) 100%);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.86);
  opacity: 0.28;
  animation: today-star-point-twinkle var(--star-duration) var(--star-delay) ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.today-page-atmosphere__star {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  background: radial-gradient(circle, #fff 0 12%, #fff6dc 30%, #d7bdea 68%, rgba(180, 150, 212, 0.48) 100%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.94)) drop-shadow(0 0 9px rgba(216, 188, 238, 0.76));
  opacity: 0.48;
  animation: today-star-mid-twinkle var(--star-duration) var(--star-delay) ease-in-out infinite;
  will-change: opacity, transform;
}
.today-page-atmosphere__near .today-page-atmosphere__star {
  opacity: 0.62;
  animation-name: today-star-near-drift;
  animation-direction: alternate;
}
.today-page-atmosphere__burst {
  opacity: 0;
}
.today-page-atmosphere__burst span {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 10px;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  background: radial-gradient(circle, #fff 0 16%, #fff4d4 40%, #d7bdea 100%);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.96));
  opacity: 0;
}

@keyframes today-night-nebula-shift {
  0% {
    opacity: 0.46;
    transform: translate3d(-4%, 3%, 0) scale(0.94);
  }
  100% {
    opacity: 0.86;
    transform: translate3d(5%, -3%, 0) scale(1.08);
  }
}
@keyframes today-star-point-twinkle {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.12);
  }
}
@keyframes today-star-mid-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: translate3d(0, 0, 0) scale(0.66) rotate(-2deg);
  }
  48% {
    opacity: 0.96;
    transform: translate3d(var(--star-drift-x), var(--star-drift-y), 0) scale(1.08) rotate(3deg);
  }
}
@keyframes today-star-near-drift {
  0% {
    opacity: 0.36;
    transform: translate3d(0, 0, 0) scale(0.78) rotate(-3deg);
  }
  48% {
    opacity: 0.94;
    transform: translate3d(var(--star-drift-x), var(--star-drift-y), 0) scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0) scale(0.92) rotate(-1deg);
  }
}
@keyframes today-shooting-star-flight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--shooting-angle)) scaleX(0.5);
  }
  4% {
    opacity: 0.9;
  }
  14% {
    opacity: 0.96;
  }
  26% {
    opacity: 0;
    transform: translate3d(var(--shooting-dx), var(--shooting-dy), 0) rotate(var(--shooting-angle)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--shooting-dx), var(--shooting-dy), 0) rotate(var(--shooting-angle)) scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-page-atmosphere::before,
  .today-page-atmosphere::after {
    animation: none;
  }
  .today-page-atmosphere__point,
  .today-page-atmosphere__star {
    opacity: 0.62;
    animation: none;
    transform: none;
  }
  .today-page-atmosphere__shooting {
    display: none;
  }
  .today-page-atmosphere__burst {
    display: none;
  }
}