.night-sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 76% 12%, #20345580, transparent 48%),
    radial-gradient(ellipse at 14% 63%, #25204755, transparent 52%),
    linear-gradient(165deg, #080e20, #0c142a 55%, #080d1c);
}

.star-field {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 23px 37px, #d9e8ff 95%, transparent),
    radial-gradient(1px 1px at 131px 113px, #a3bfec 95%, transparent),
    radial-gradient(1.5px 1.5px at 83px 173px, #d2e4ff 95%, transparent),
    radial-gradient(1px 1px at 191px 59px, #7997c8 95%, transparent);
  background-size: 257px 263px, 349px 307px, 467px 419px, 179px 211px;
  mask-image: linear-gradient(#000, #0009);
}

.meteor {
  --flight: 9s;
  position: absolute;
  top: 0;
  left: 60%;
  width: clamp(100px, 19vw, 270px);
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #89b8ff80 75%, #eaf5ff);
  transform-origin: right center;
  filter: drop-shadow(0 0 5px #8cbaff);
  animation: meteor-flight var(--flight) linear infinite;
}

.meteor::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #eff8ff;
  box-shadow: 0 0 8px 2px #a4ccff80;
}

.meteor-one { left: 42%; top: -4%; animation-delay: -0.6s; }
.meteor-two { left: 78%; top: 10%; --flight: 12s; animation-delay: -5s; }
.meteor-three { left: 12%; top: 22%; --flight: 11s; animation-delay: -7.5s; }
.meteor-four { left: 94%; top: 43%; --flight: 15s; animation-delay: -3s; }
.meteor-five { left: 56%; top: 60%; --flight: 13s; animation-delay: -10s; }

@keyframes meteor-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(145deg) scaleX(0.5); }
  3% { opacity: 0.85; }
  15% { opacity: 0; transform: translate3d(-55vw, 38.5vw, 0) rotate(145deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(-55vw, 38.5vw, 0) rotate(145deg) scaleX(1); }
}

body[data-sky-paused="true"] .meteor { animation-play-state: paused; visibility: hidden; }

.starlight-trail {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.cursor-sparkle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  color: #dcecff;
  filter: drop-shadow(0 0 4px #94bfff);
  animation: cursor-shimmer var(--lifetime) ease-out forwards;
}

.cursor-sparkle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}

.cursor-sparkle.is-dust {
  width: 3px;
  height: 3px;
  margin: -1.5px;
  color: #9fbfff;
}

.cursor-sparkle.is-dust::before { clip-path: none; border-radius: 50%; }

@keyframes cursor-shimmer {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.35) rotate(0deg); }
  16% { opacity: 0.9; transform: translate3d(0, 0, 0) scale(1) rotate(8deg); }
  38% { opacity: 0.45; }
  52% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(0.15) rotate(65deg); }
}

body[data-sky-paused="true"] .starlight-trail { display: none; }

.profile-intro {
  max-width: 760px;
  min-height: calc(100svh - 180px);
  padding: clamp(3.5rem, 10vh, 7rem) 0 4rem;
}

.profile-label { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.2em; }
.profile-intro h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 1.15; margin: 1rem 0 1.75rem; }
.profile-summary { max-width: 42ch; font-size: clamp(1.2rem, 2.6vw, 1.65rem); line-height: 1.8; }
.certifications-label { margin: 2rem 0 1rem; color: var(--muted); line-height: 1.7; }
.certifications { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; list-style: none; }
.certifications li { padding: 0.75rem 1.25rem; border: 1px solid var(--line-strong); border-radius: 10px; background: #101c32cc; color: var(--accent-deep); letter-spacing: 0.06em; }
.profile-records-link { display: inline-block; margin-top: 1.8rem; color: var(--accent); line-height: 1.8; text-decoration: underline; text-underline-offset: 0.3em; }
.records-title { margin: 2.5rem 0 0; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.2; }

@media (max-width: 800px) {
  .topbar { flex-wrap: wrap; gap: 0.9rem; }
  .topbar-tools { flex-wrap: wrap; gap: 0.5rem; }
  .nav a { padding: 0.58rem 0.55rem; font-size: 0.82rem; }
}

@media (max-width: 620px) {
  .meteor-four, .meteor-five { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the background static when reduced motion is requested. */
  body:not([data-sky-paused="false"]) .meteor { animation: none; visibility: hidden; }
}