/* Ocean & Waves */

#ocean {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 44vh;
  z-index: 3;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0)
  );
}

.ocean-reflection {
  position: absolute;
  top: var(--horizon-y);
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 45vh;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 200, 0.15) 0%,
    rgba(255, 255, 200, 0.08) 40%,
    rgba(255, 255, 200, 0.02) 70%,
    rgba(255, 255, 200, 0.0) 100%
  );

  clip-path: polygon(
    45% 0%,
    55% 0%,
    80% 100%,
    20% 100%
  );
}

.sun-reflection {
  position: absolute;
  top: 0;
  left: 50%;
  width: 180px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 200, 0.35),
    rgba(255, 255, 200, 0.18),
    rgba(255, 255, 200, 0.08),
    rgba(255, 255, 200, 0)
  );
}