/* Loading screen: the anglerfish sends a ping while the 3D scene draws its first frame behind it.
   Shown only on pages that include the #loader markup (the two 3D pages). loader.js lifts it on
   the page's "scene-ready" event, with a minimum and maximum time. If scripts fail, the failsafe
   animation below lifts it anyway after 4 s, so the page can never stay covered. */
.loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;align-content:center;gap:20px;
  background:radial-gradient(circle at 50% 44%,#0c262d 0,#041016 42%,#02070b 75%);
  transition:opacity .6s ease,visibility 0s linear .6s;animation:loader-failsafe 0s linear 4s forwards}
.loader.out{opacity:0;visibility:hidden}
.loader-mark{position:relative;width:min(44vw,200px);aspect-ratio:23/16;color:#74f7bc}
.loader-fish{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px rgba(116,247,188,.22))}
.loader-fish .fish-body{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.loader-fish .fish-faint{opacity:.48}
.loader-fish .fish-eye,.loader-fish .fish-lure{fill:currentColor;stroke:none}
.loader-fish .fish-lure{color:#ffd88a}
/* the lure sits at (40, 28) in the 230 x 160 logo: 17.4% across, 17.5% down */
.loader-lure{position:absolute;left:17.4%;top:17.5%;width:5%;aspect-ratio:1;margin:-2.5% 0 0 -2.5%;border-radius:50%;
  background:#ffe2a8;box-shadow:0 0 14px 5px rgba(255,216,138,.55);animation:loader-glow 1.6s ease-in-out infinite}
.loader-ping{position:absolute;left:17.4%;top:17.5%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;
  border:1.5px solid rgba(255,216,138,.95);box-shadow:0 0 18px rgba(255,216,138,.35),inset 0 0 10px rgba(255,216,138,.12);
  opacity:0;transform:scale(.04);animation:loader-ping 1.6s cubic-bezier(.2,.55,.35,1) infinite}
.loader-ping.two{animation-delay:.8s}
.loader-text{margin:0;font:11px ui-monospace,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:#8ea79f}
.loader-text span{display:inline-block;animation:loader-dot 1.6s steps(1) infinite}
.loader-text span:nth-child(2){animation-delay:.2s}.loader-text span:nth-child(3){animation-delay:.4s}
@keyframes loader-ping{0%{transform:scale(.04);opacity:0}10%{opacity:1}100%{transform:scale(1.9);opacity:0}}
@keyframes loader-glow{0%,100%{box-shadow:0 0 12px 4px rgba(255,216,138,.45)}50%{box-shadow:0 0 26px 11px rgba(255,216,138,.85)}}
@keyframes loader-dot{0%,40%{opacity:.25}50%,100%{opacity:1}}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .loader{transition-duration:.2s}
  .loader-ping{animation:none;opacity:.5;transform:scale(1)}
  .loader-lure,.loader-text span{animation:none}
}