/* Day and night are two states of the same sky. */
.celestial-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.celestial-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  background-image:
    radial-gradient(circle at 8% 17%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 19% 35%,#f5e8ba 0 1px,transparent 1.8px),
    radial-gradient(circle at 34% 12%,#fff 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 49% 31%,#d9eeff 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 15%,#fff 0 1px,transparent 1.7px),
    radial-gradient(circle at 76% 39%,#ffe9aa 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 91% 19%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 86% 58%,#dcefff 0 1px,transparent 1.6px),
    radial-gradient(circle at 27% 61%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 57% 54%,#fbecc2 0 1px,transparent 1.6px);
  transition: opacity 1.15s ease .18s, transform 1.4s cubic-bezier(.2,.76,.2,1);
}
.celestial-stars::before,
.celestial-stars::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff4ca; box-shadow: 0 0 12px 3px #fff2b75c; animation: celestial-twinkle 4.2s ease-in-out infinite; }
.celestial-stars::before { left: 72%; top: 22%; }
.celestial-stars::after { left: 42%; top: 18%; animation-delay: -2.1s; transform: scale(.65); }
.celestial-orb {
  position: absolute;
  right: clamp(90px, 12vw, 190px);
  top: 86px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transition: transform 1.25s cubic-bezier(.2,.72,.18,1), opacity .75s ease, filter 1s ease;
}
.celestial-sun { background: #fff0b1; box-shadow: 0 0 34px 12px #ffe49b55,0 0 120px 46px #ffdc8226; opacity: .7; transform: translateY(0) scale(1); }
.celestial-moon { background: #e8f1ee; box-shadow: inset -13px -8px 0 #a7bfd1,0 0 30px 7px #d8edff45; opacity: 0; transform: translate(110px,-85px) scale(.65); }
.celestial-horizon { position: absolute; left: 14%; right: 5%; bottom: 17%; height: 28%; opacity: .2; background: radial-gradient(ellipse at 70% 100%,#ffd58e75,transparent 62%); transition: opacity 1.1s ease, filter 1.1s ease; }
.night .celestial-stars { opacity: .82; transform: translateY(0); }
.night .celestial-sun { opacity: 0; transform: translate(-70px,150px) scale(.55); }
.night .celestial-moon { opacity: .85; transform: translate(0,0) scale(1); }
.night .celestial-horizon { opacity: .3; filter: hue-rotate(155deg) saturate(.65); }
.theme-toggle { position: relative; overflow: visible; transition: transform .7s cubic-bezier(.2,.8,.2,1), background-color .6s ease, box-shadow .6s ease; }
.theme-transforming .theme-toggle { transform: rotate(180deg) scale(1.08); box-shadow: 0 0 24px #f1dca866; }
.celestial-transition-wave { position: fixed; z-index: 9998; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; will-change: transform,opacity; }
.celestial-shooting-star { position: absolute; left: 68%; top: 14%; width: 86px; height: 1px; opacity: 0; transform: rotate(-24deg); background: linear-gradient(90deg,transparent,#e9f5ff); filter: drop-shadow(0 0 4px #e9f5ff); }
.night.theme-transforming .celestial-shooting-star { animation: celestial-shoot 1.15s .38s ease-out both; }
@keyframes celestial-twinkle { 0%,100%{opacity:.28;transform:scale(.65)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes celestial-shoot { 0%{opacity:0;translate:90px -42px} 22%{opacity:.85} 100%{opacity:0;translate:-230px 110px} }

/* Palette shifts continue below the hero, making the whole world change time. */
.portfolio-page :is(.paper,.contact,.talent-card,.work-card,.skill-detail,.education-ribbon) { transition: background-color 1.15s ease, border-color 1.15s ease, color .9s ease, box-shadow .9s ease; }
.portfolio-page .landscape { transition: transform 900ms ease-out, filter 1.25s ease, opacity 1.25s ease; }
.portfolio-page.night .landscape { filter: saturate(.62) brightness(.68) hue-rotate(9deg); }
.portfolio-page.night .paper { filter: none; }

@media (max-width: 600px), (pointer: coarse) {
  .celestial-orb { right: 48px; top: 104px; width: 43px; height: 43px; }
  .celestial-stars { opacity: 0; background-size: 100% 62%; background-repeat: no-repeat; }
  .night .celestial-stars { opacity: .62; }
  .celestial-shooting-star { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .celestial-sky *, .theme-toggle, .portfolio-page :is(.paper,.contact,.talent-card,.work-card,.skill-detail,.education-ribbon,.landscape) { animation: none !important; transition: none !important; }
  .celestial-transition-wave { display: none; }
}