/* ---------- skyline: morning town / magical night ---------- */
.hero{
  --px:clamp(3px,.5vw,7px);
  --hill1:#a9e3c2; --hill2:#7fd3a6;
}
:root[data-theme="night"] .hero{ --hill1:#142170; --hill2:#0e1859; }

.skyline{position:absolute;inset:0;z-index:0;pointer-events:none}
.hills{position:absolute;left:0;right:0;bottom:0;height:130px;background:var(--hill1);transition:background-color .9s ease;
  clip-path:polygon(0 62%,8% 62%,8% 46%,16% 46%,16% 30%,26% 30%,26% 46%,36% 46%,36% 62%,50% 62%,50% 50%,60% 50%,60% 34%,72% 34%,72% 50%,84% 50%,84% 40%,94% 40%,94% 56%,100% 56%,100% 100%,0 100%)}
.hills::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--hill2);transition:background-color .9s ease;
  clip-path:polygon(0 50%,12% 50%,12% 30%,22% 30%,22% 50%,40% 50%,40% 38%,52% 38%,52% 55%,70% 55%,70% 36%,80% 36%,80% 50%,100% 50%,100% 100%,0 100%)}

.sk{position:absolute;inset:0;transition:opacity .9s ease,visibility 0s}
.sk-night{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
:root[data-theme="night"] .sk-day{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
:root[data-theme="night"] .sk-night{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}

.sp{position:absolute;bottom:40px}
.sp svg{width:100%;height:auto}
.nc{isolation:isolate}
.nc::before{content:"";position:absolute;z-index:-1;left:-30%;right:-30%;top:0;bottom:0;background:radial-gradient(closest-side,rgba(150,120,255,.38),transparent)}
.dh1{left:19%;bottom:46px}  .dc{left:24%;bottom:46px}  .dh2{left:40%;bottom:50px}
.dh3{left:62%;bottom:44px}  .dh4{left:69%;bottom:56px} .dh5{left:77%;bottom:46px}
.nh1{left:19%;bottom:46px}  .nc{left:23%;bottom:44px}  .nt1{left:41%;bottom:50px}
.nh2{left:62%;bottom:44px}  .nt2{left:70%;bottom:56px} .nh3{left:78%;bottom:46px}

/* The floating crystal beside the night castle's spire.
   It used to float ABOVE the spire (top:-5px units), which on wide screens put it over the "Meet the townsfolk" button.
   It now floats to the right of the spire, level with the castle's upper floors, so it stays inside the castle's own box.
   Move it with left (in sprite pixels, 0 to 36) and top (0 = top of the castle). Keep top at 0 or more. */
.crystal{position:absolute;left:calc(var(--px)*27);top:calc(var(--px)*4);width:6px;height:6px;margin:-3px 0 0 -3px;background:#7ff3ff;
  box-shadow:0 -6px #7ff3ff,0 6px #7ff3ff,-6px 0 #7ff3ff,6px 0 #7ff3ff,0 0 18px 6px rgba(127,243,255,.55)}

.ff{position:absolute;width:4px;height:4px;background:#d8ff7a;box-shadow:0 0 8px 2px rgba(216,255,122,.7);opacity:.9}
.spk{position:absolute;width:4px;height:4px;background:var(--c);box-shadow:0 -4px var(--c),0 4px var(--c),-4px 0 var(--c),4px 0 var(--c);opacity:.9}
.lantern{position:absolute;width:calc(var(--px)*3);}
.lantern svg{width:100%;height:auto}

/* sky magic (all static): moon halo, star dust, constellation, sparkle stars */

@media (max-width:760px){
  .ff,.spk,.lantern,.dust,.aurora{display:none}
  .dh1,.dh2,.dh3,.dh4,.nh1,.nt1,.nh2,.nh3{display:none}
  .dc,.nc{left:auto;right:3%}
  .dh5,.nt2{left:4%}
}

:root[data-theme="night"] .orb{box-shadow:0 -12px 0 0 var(--orb),0 12px 0 0 var(--orb),-12px 0 0 0 var(--orb),12px 0 0 0 var(--orb),0 0 0 26px rgba(170,185,255,.14),0 0 0 50px rgba(170,185,255,.07)}
.dust,.const{position:absolute;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
:root[data-theme="night"] .dust,:root[data-theme="night"] .const{opacity:1;visibility:visible;transition:opacity 1s ease,visibility 0s}
.dust{left:0;top:0;width:3px;height:3px}
.const{left:52%;top:9%;width:min(300px,26vw);height:auto}
.aurora{position:absolute;left:0;right:0;top:0;height:55%;opacity:0;visibility:hidden;contain:paint;
  background:radial-gradient(ellipse 38% 34% at 30% 40%,rgba(80,255,200,.28),transparent 70%),radial-gradient(ellipse 34% 30% at 62% 32%,rgba(150,120,255,.30),transparent 70%),radial-gradient(ellipse 30% 28% at 82% 46%,rgba(90,200,255,.24),transparent 70%),radial-gradient(ellipse 40% 22% at 46% 58%,rgba(255,120,220,.18),transparent 70%);
  transition:opacity 1s ease,visibility 0s 1s}
:root[data-theme="night"] .aurora{opacity:1;visibility:visible;transition:opacity 1s ease,visibility 0s}
@media (min-width:900px){:root[data-theme="night"] .aurora{animation:glow 12s ease-in-out infinite alternate}}
@keyframes glow{from{opacity:.65}to{opacity:1}}
.sk-move{opacity:0;transition:opacity .5s ease}
.skyline.ready .sk-move{opacity:1}
.stars i.big{box-shadow:0 -4px #fff,0 4px #fff,-4px 0 #fff,4px 0 #fff}

@media (prefers-reduced-motion:reduce){.aurora{animation:none!important}}