/* Underwater feedback stays inside the photographic area. */
.rm-sea-media { position: relative; isolation: isolate; overflow: hidden; }
.rm-sea-shade, .rm-card-bubbles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
.rm-sea-shade { z-index: 1; background: #020e16; }
.rm-card-bubbles { z-index: 2; overflow: hidden; }
.rm-card-bubbles i { position: absolute; top: 0; bottom: 0; left: calc(11% + var(--bubble)*15%); width: 9px; opacity: 0; animation: rm-card-rise 3.6s linear infinite; animation-delay: calc(var(--bubble)*-.61s); animation-play-state: paused; }
.rm-card-bubbles i::before { content: ''; position: absolute; bottom: 0; width: 100%; aspect-ratio: 1; border: 1px solid rgba(223,239,238,.65); border-radius: 50%; background: rgba(223,239,238,.07); }
.rm-card-bubbles i:nth-child(2n) { width: 5px; animation-duration: 4.2s; }
.rm-sea-active.rm-sea-visible > .rm-sea-shade { opacity: .2; }
.rm-sea-active.rm-sea-visible > .rm-card-bubbles { opacity: 1; }
.rm-sea-active.rm-sea-visible > .rm-card-bubbles i { animation-play-state: running; }
.rm-sea-focus.rm-sea-visible > .rm-sea-shade { opacity: .2; transition: none; }
@keyframes rm-card-rise {
 0% { transform: translateY(12%); opacity: 0; }
 12% { opacity: .7; }
 76% { opacity: .45; }
 100% { transform: translateY(-102%); opacity: 0; }
}
@media(prefers-reduced-motion:reduce) {
 .rm-card-bubbles { display: none; }
 .rm-sea-shade { transition-duration: 120ms; }
}
/* Also covers switching from a mouse to touch after the page has loaded. */
@media (hover:none), (pointer:coarse) {
 .rm-sea-shade, .rm-card-bubbles { display: none; }
 .rm-card-bubbles i { animation: none; }
}