/* The photo is always painted underneath. Only a decoded video frame can cover it. */
.ocean-scene {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #102536 var(--ocean-preview) center / cover no-repeat;
}
.ocean-scene img,
.ocean-scene video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: var(--ocean-filter, brightness(.80) saturate(.86));
}
.ocean-scene video {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.ocean-scene[data-video-ready] video {
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .ocean-scene video { visibility: hidden !important; }
}