/* ── Aurora Nightsky Header ────────────────────────────────────────────────── */

#view-nights {
  --aurora-top: rgba(99, 57, 255, 0.22);
  --aurora-mid: rgba(11, 183, 255, 0.12);
  --aurora-low: rgba(152, 91, 255, 0.16);
  --sky-base-dark: #070612;
  --sky-base-light: #f8fbff;
  --panel-glow: rgba(255, 255, 255, 0.12);

  position: relative;
  width: 100vw;
  max-width: none;
  min-height: 33vh;
  margin: 0 calc(50% - 50vw);
  padding: 7rem clamp(4.5rem, 4vw, 3.4rem) 0rem;
  box-sizing: border-box;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(circle at 15% 5%, rgba(161, 120, 255, 0.2), transparent 18%),
    radial-gradient(circle at 82% 8%, rgba(62, 217, 255, 0.14), transparent 16%),
    radial-gradient(circle at 50% 18%, rgba(126, 71, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #0a0b18 0%, #0d0f22 45%, #070812 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 78%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 78%, rgba(0, 0, 0, 0) 100%);
}

html[data-theme="light"] #view-nights {
  --aurora-top: rgba(95, 58, 255, 0.28);
  --aurora-mid: rgba(16, 190, 255, 0.18);
  --aurora-low: rgba(126, 90, 255, 0.2);
  --panel-glow: rgba(96, 79, 255, 0.12);

  background:
    radial-gradient(circle at 15% 5%, rgba(114, 76, 255, 0.26), transparent 18%),
    radial-gradient(circle at 82% 8%, rgba(25, 180, 255, 0.18), transparent 16%),
    radial-gradient(circle at 50% 20%, rgba(140, 101, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #f8f9ff 0%, #eef2ff 45%, #e9ecff 100%);
}

#view-nights::before,
#view-nights::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#view-nights::before {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0, 255, 180, 0.12), transparent 36%),
    radial-gradient(ellipse at 78% 16%, rgba(0, 188, 255, 0.1), transparent 32%);
  opacity: 0.9;
  filter: blur(1px);
  animation: drift-soft 18s ease-in-out infinite alternate;
}

#view-nights::after {
  background:
    radial-gradient(ellipse at 52% 18%, rgba(148, 118, 255, 0.12), transparent 32%),
    radial-gradient(ellipse at 35% 26%, rgba(118, 150, 255, 0.09), transparent 30%);
  opacity: 0.85;
  animation: drift-soft-reverse 22s ease-in-out infinite alternate;
}

@keyframes drift-soft {
  0% { transform: translate3d(-1.4%, 0, 0) scale(1.01); }
  100% { transform: translate3d(1.6%, 1.2%, 0) scale(1.03); }
}

@keyframes drift-soft-reverse {
  0% { transform: translate3d(1%, -0.8%, 0) scale(1); }
  100% { transform: translate3d(-1.8%, 1.2%, 0) scale(1.04); }
}

#view-nights .stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

#view-nights .stars span {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  opacity: var(--op, 0.55);
  animation: star-fade var(--dur, 3.8s) ease-in-out infinite alternate;
}

@keyframes star-fade {
  0% { opacity: var(--op, 0.55); transform: scale(1); }
  100% { opacity: calc(var(--op, 0.55) * 0.28); transform: scale(0.85); }
}

#view-nights .shooting-star {
  position: absolute;
  top: 17%;
  left: -8%;
  width: 80px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.85), transparent);
  opacity: 0;
  filter: blur(0.1px);
  animation: shoot-smooth 11s ease-in-out infinite;
  z-index: 1;
}

#view-nights .shooting-star:nth-child(2) {
  top: 35%;
  width: 56px;
  animation-delay: 5.5s;
}

@keyframes shoot-smooth {
  0% { left: -8%; top: 16%; opacity: 0; transform: translate3d(0, 0, 0) rotate(-16deg); }
  8% { opacity: 0.65; }
  22% { opacity: 0.45; }
  34% { left: 108%; top: 38%; opacity: 0; transform: translate3d(-8px, 0, 0) rotate(-16deg); }
  100% { left: 108%; top: 38%; opacity: 0; }
}

#view-nights .aurora-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 74px;
  background: linear-gradient(to bottom, rgba(7, 6, 18, 0), rgba(7, 6, 18, 0.85));
  mask-image: linear-gradient(to bottom, transparent, black 60%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 60%, rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-theme="light"] #view-nights .aurora-fade {
  background: linear-gradient(to bottom, rgba(248, 251, 255, 0), rgba(248, 251, 255, 0.9));
  mask-image: linear-gradient(to bottom, transparent, black 60%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 60%, rgba(0, 0, 0, 1) 100%);
}

#view-nights > * {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}

#view-nights h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin: 0 0 1.2rem;
  letter-spacing: -0.6px;
  line-height: 1.02;
  color: #fff;
}

html[data-theme="light"] #view-nights h1 {
  color: #120d2f;
  text-shadow: 0 10px 30px rgba(108, 91, 255, 0.12);
}

.news-header {
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
}