#map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    /* caustic light shafts */
    repeating-linear-gradient(105deg,
      transparent 0%, transparent 8%,
      rgba(100, 200, 255, .025) 9%, transparent 10%),
    repeating-linear-gradient(80deg,
      transparent 0%, transparent 12%,
      rgba(80, 180, 240, .02) 13%, transparent 14%),
    /* depth gradient — darker at edges, lighter at centre */
    radial-gradient(ellipse 120% 80% at 50% 40%,
      rgba(0, 60, 100, .0) 0%,
      rgba(0, 30, 60, .4) 100%),
    /* base ocean floor */
    linear-gradient(180deg,
      #001830 0%,
      #002a4a 25%,
      #003a5c 50%,
      #004a6e 70%,
      #005078 100%);
}

/* Floating particles (bubbles / plankton) */
#ocean-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
      rgba(180, 230, 255, .55),
      rgba(100, 200, 255, .15) 60%,
      transparent 100%);
  border: 1px solid rgba(150, 210, 255, .2);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: .6;
  }

  100% {
    transform: translateY(-110vh) translateX(var(--drift)) scale(.7);
    opacity: 0;
  }
}

/* Slow caustic shimmer overlay */
#ocean-caustics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 40% 25% at 30% 40%,
      rgba(100, 200, 255, .06), transparent 70%),
    radial-gradient(ellipse 30% 20% at 70% 55%,
      rgba(80, 180, 240, .05), transparent 70%);
  animation: causticShift 12s ease-in-out infinite alternate;
}

@keyframes causticShift {
  0% {
    opacity: .5;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.08) rotate(1deg);
  }

  100% {
    opacity: .6;
    transform: scale(.95) rotate(-1deg);
  }
}

#map-viewport:active {
  cursor: grabbing;
}

#map-container {
  position: absolute;
  transform-origin: 0 0;
  z-index: 1;
  /* set via JS */
}