.page-sky{
  position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#0d101b;
}
.page-sky:not([hidden])+.shell{position:relative}
.page-sky-art,.page-sky-chart,.page-sky-stars{position:absolute;inset:0}
.page-sky-art{
  background:linear-gradient(112deg,#11122319,#1415227a 50%,#11132130),url('art/cosmic-horizon.webp') center/cover no-repeat;
  opacity:.86;transform:scale(1.03);
  animation:cosmic-drift 42s ease-in-out infinite alternate;
}
.page-sky-chart{
  background:url('art/cosmic-orbits.svg') center/cover no-repeat;opacity:.52;
  animation:chart-drift 31s ease-in-out infinite;
}
.page-sky-stars{
  inset:-4%;opacity:.44;
  background-image:radial-gradient(1px 1px at 37px 43px,#ffe9cb 70%,transparent),
                   radial-gradient(1px 1px at 182px 134px,#b6bcff 65%,transparent),
                   radial-gradient(1px 1px at 243px 21px,#f1e2f5 60%,transparent);
  background-size:281px 193px;
  animation:cosmic-twinkle 10s ease-in-out infinite;
}
.sky-stars-near{
  background-image:radial-gradient(1.5px 1.5px at 61px 173px,#ffe8c7 38%,#ebba9550 63%,transparent),
                   radial-gradient(1.5px 1.5px at 302px 82px,#e0d9ff 38%,#b09bec55 65%,transparent);
  background-size:383px 251px;
  animation:cosmic-twinkle 13s ease-in-out -4s infinite;
}
.page-sky-orbit{
  position:absolute;left:-180px;top:43%;width:420px;aspect-ratio:1;opacity:.45;
  animation:cosmic-spin 51s linear infinite;
}
.page-sky-orbit i{
  position:absolute;top:50%;left:0;width:4px;height:4px;border-radius:50%;
  background:#f9dfbb;box-shadow:0 0 7px #ebc39580;
}
.page-sky-orbit i:nth-child(2){left:50%;top:0;width:3px;height:3px;background:#bfc8f0}
.sky-sparks,.sky-falls{position:absolute;inset:0;overflow:hidden}
.sky-sparks i,.sky-falls i{
  position:absolute;left:var(--x);width:var(--size);height:var(--size);
  border-radius:50%;background:#f2dfc5;box-shadow:0 0 5px #cfb8e1a6;
}
.sky-sparks i{
  top:var(--y);opacity:.3;
  animation:sky-sparkle var(--duration) ease-in-out var(--delay) infinite;
}
.sky-sparks i:nth-child(4n){background:#c0c8ec}
.sky-sparks i:nth-child(6n)::after{
  content:'';position:absolute;inset:-3px;background:#f8e9d4;
  clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%);
}
.sky-falls i{
  top:0;opacity:0;
  animation:sky-fall var(--duration) linear var(--delay) infinite;
}
.sky-falls i:nth-child(3n){background:#c0c8ec}
.sky-falls i:nth-child(5n)::before{
  content:'';position:absolute;inset:auto 0 0;height:9px;
  background:linear-gradient(transparent,#edd9be73);border-radius:inherit;
}
.page-sky.is-paused *{animation-play-state:paused}

.observation-copy .primary{
  position:relative;isolation:isolate;
  background:linear-gradient(115deg,transparent 34%,#fff9e391 49%,transparent 63%) 110% 0/245% 100% no-repeat,
             linear-gradient(135deg,#fff0da,#e9c6a1);
  color:#281c25;border-color:#eccda6;
  box-shadow:inset 0 1px #fff8,0 4px 15px #d19a6536;
  animation:guide-sheen 5.6s cubic-bezier(.43,.06,.44,1) infinite;
}
.observation-copy .primary::after{
  content:'';position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:.33;box-shadow:0 0 14px 2px #e9ad776d;
  animation:guide-halo 5.6s ease-in-out infinite;
}
.observation-copy .primary:is(:hover,:focus-visible){
  color:#211725;border-color:#ffebcf;
  box-shadow:inset 0 1px #fffe,0 0 16px #f5c79575,0 5px 20px #d19a6547;
}
@keyframes guide-sheen{
  0%,16%{background-position:110% 0,0 0}
  63%,100%{background-position:-10% 0,0 0}
}
@keyframes guide-halo{0%,100%{opacity:.3}35%{opacity:.82}60%{opacity:.43}74%{opacity:.58}}
@keyframes cosmic-drift{to{transform:scale(1.075) translate(-.7%,.7%)}}
@keyframes chart-drift{
  0%,100%{opacity:.42;transform:translate(-.6%,.25%) rotate(-1.4deg) scale(1.035)}
  50%{opacity:.68;transform:translate(.8%,-.45%) rotate(1.3deg) scale(1.06)}
}
@keyframes sky-sparkle{
  0%,100%{opacity:.15;transform:scale(.75)}
  48%{opacity:.68;transform:scale(1.12)}
  72%{opacity:.27;transform:scale(.9)}
}
@keyframes sky-fall{
  0%{opacity:0;transform:translate3d(0,-14px,0)}
  14%{opacity:.52}
  83%{opacity:.44}
  100%{opacity:0;transform:translate3d(var(--drift),calc(100vh + 14px),0)}
}
@keyframes cosmic-twinkle{0%,100%{opacity:.23}53%{opacity:.56}}
@keyframes cosmic-spin{to{transform:rotate(1turn)}}

.route-curtain{
  position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;
  display:grid;place-items:center;color:#f9e9d4;
  background:radial-gradient(ellipse at center,#10131d77,#0a0c16b0 82%),#0b0e19 url('art/stellar-transit.webp') center/cover no-repeat;
}
.route-curtain[hidden]{display:none}
.route-curtain[data-phase=enter]{animation:curtain-in 120ms ease-out both}
.route-curtain[data-phase=exit]{animation:curtain-out 250ms ease-in both}
.route-transit{display:grid;justify-items:center;gap:13px;padding:20px;text-align:center}
.route-transit strong{color:#e9d9cb;font-size:13px;font-weight:600}
.route-emblem{
  position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  border:1px solid #ead6ba42;box-shadow:inset 0 0 12px #ac99cf27;
}
.route-emblem::before{
  content:'';position:absolute;inset:10px;border:1px solid #9baed562;border-radius:50%;
  transform:rotate(-35deg) scaleY(.55);
}
.route-emblem span{
  position:absolute;inset:-1px;border:1px solid transparent;border-top-color:#f2d5ad;
  border-right-color:#b2b9e5;border-radius:50%;animation:cosmic-spin 1.65s linear infinite;
}
.route-emblem span::before{
  content:'';position:absolute;top:8px;right:8px;width:4px;height:4px;background:#f9e3c5;
  border-radius:50%;box-shadow:0 0 9px #efc498b8;
}
.route-emblem i{font-style:normal;font-size:25px;color:#eed1a8;text-shadow:0 0 13px #edbd8e85}
@keyframes curtain-in{from{opacity:0}to{opacity:1}}
@keyframes curtain-out{from{opacity:1}to{opacity:0}}

@media(prefers-reduced-motion:no-preference){
  .home-enter> :is(.observation-hero,.home-shortcuts,.home-section){
    animation:home-section-in .45s cubic-bezier(.19,.65,.26,1) both;
  }
  .home-enter>.home-shortcuts{animation-delay:100ms}
  .home-enter>.home-section:nth-child(3){animation-delay:170ms}
  .home-enter>.home-section:nth-child(4){animation-delay:240ms}
  .home-enter>.home-section:nth-child(5){animation-delay:310ms}
}
@keyframes home-section-in{from{opacity:.12;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:650px){
  .page-sky-art{background-position:0 0,18% center}
  .page-sky-art::after{
    content:'';position:absolute;inset:0 0 auto auto;width:54%;height:29%;
    background:url('art/cosmic-horizon.webp') right top/410% auto no-repeat;
    mask-image:radial-gradient(ellipse at 75% 42%,#000 10%,transparent 74%);
  }
  .page-sky-chart{background-position:72% center}
}
@media(prefers-reduced-motion:reduce){
  .page-sky *, .observation-copy .primary,.observation-copy .primary::after,.route-curtain,.route-emblem span{animation:none!important}
  .route-curtain{display:none}
}