/* One bottom-anchored environment; additional viewport height reveals blue water above. */
:root {
  --ocean-art-width: max(100vw, 900px);
  --ocean-art-ratio: 1585 / 992;
  background: #082641;
}
body {
  background: #082641;
  isolation: isolate;
}
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: -1;
}
body::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 44% -10%, #24608466, transparent 65%),
    linear-gradient(
      104deg,
      transparent 35%,
      #87c2dd12 38%,
      transparent 42%,
      #a8d5e60c 45%,
      transparent 49%
    ),
    linear-gradient(180deg, #082641, #103754 70%, #284557);
}
body::after {
  width: var(--ocean-art-width);
  aspect-ratio: var(--ocean-art-ratio);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: url('/images/ui/ocean-seafloor.png') center bottom / 100% 100%
    no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
}

/* Ambient wildlife stays above the scenery and below every interactive page. */
.ocean-wildlife {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#app,
body > .topbar,
body > main,
body > .modal-backdrop {
  position: relative;
  z-index: 1;
}
body > .modal-backdrop {
  position: fixed;
  z-index: 40;
}
.ocean-swimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 99px;
  height: 50px;
  opacity: 0;
  transform: translate3d(-150px, 0, 0);
  transform-origin: center;
}
.ocean-fish-facing,
.ocean-fish-sprite {
  width: 99px;
  height: 50px;
}
.ocean-fish-sprite {
  background: url('/images/ui/swimming-fish/fish-sprite.png') 0 0 / 297px 50px
    no-repeat;
}
.is-swimming .ocean-fish-sprite {
  animation: fish-flap 540ms steps(3) infinite;
}
@keyframes fish-flap {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -297px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-wildlife {
    display: none;
  }
  .ocean-fish-sprite {
    animation: none;
  }
}

.ocean-air-bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  transform-origin: center;
  mix-blend-mode: screen;
  filter: brightness(1.18);
}

/* The daily starfish is static decoration, including for reduced-motion users. */
.ocean-starfish-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ocean-starfish {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: drop-shadow(1px 3px 2px #1e21195c);
}