/* KRAKING's cool moonlit atmosphere. Layout, branding and story are unchanged. */
:root {
  --black: #060f1a;
  --glass: rgba(6, 15, 26, .84);
}
nav.top {
  background: linear-gradient(rgba(6,15,26,.8), rgba(6,15,26,0));
}
nav.top .join { background: rgba(6,15,26,.5); }
.foot {
  background: linear-gradient(rgba(6,15,26,0), rgba(6,15,26,.94) 40%);
}
#stage { overflow: hidden; isolation: isolate; }
#stage::before, #stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
/* Light stays at the edges and waterline, leaving the lime character clear. */
#stage::before {
  inset: -5%;
  background:
    radial-gradient(ellipse 56% 18% at 17% 64%, rgba(74,184,193,.19), transparent 76%),
    radial-gradient(ellipse 52% 22% at 89% 57%, rgba(135,104,198,.15), transparent 80%),
    radial-gradient(ellipse 65% 40% at 10% 8%, rgba(39,82,126,.23), transparent 80%);
  opacity: var(--sea-mood, 1);
  animation: sea-mist 24s ease-in-out infinite alternate;
  transition: opacity .7s ease;
}
#stage::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 52%, rgba(27,99,126,.12), transparent 55%),
    radial-gradient(ellipse at 100% 66%, rgba(82,58,123,.12), transparent 52%),
    radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(2,8,18,.3) 100%);
}
@keyframes sea-mist {
  from { transform: translate3d(-1.3%,.8%,0) scale(1); }
  to { transform: translate3d(1.3%,-.8%,0) scale(1.025); }
}
body.static .st-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 65%, rgba(39,142,160,.2), transparent 65%),
    radial-gradient(ellipse at 100% 40%, rgba(108,79,166,.17), transparent 60%);
}
body.static .st-hero .over { z-index: 1; }
@media (max-width: 760px) {
  .sec, .sec.right { background: rgba(6,15,26,.94); }
  .foot { background: linear-gradient(rgba(6,15,26,0), rgba(6,15,26,.96) 56px); }
}
@media (prefers-reduced-motion: reduce) {
  #stage::before { animation: none; transition: none; }
}