/* Decorative, compositor-driven water. No video, canvas loop, or image download. */
.landing-hero { isolation: isolate; }
.ocean-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ocean-water { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 38% -12%, #087bba88, transparent 65%); }
.ocean-surface { position: absolute; top: -92px; left: -10%; width: 120%; height: 190px; border-radius: 50%; background: radial-gradient(ellipse, #9df9ff99, #17a6dc44 40%, transparent 70%); filter: blur(18px); animation: ocean-surface 14s ease-in-out infinite alternate; }
.ocean-rays { position: absolute; top: -18%; left: -25%; width: 150%; height: 115%; transform-origin: 50% 0; background: conic-gradient(from 135deg at 50% 0%, transparent 0deg, #75e9ff22 9deg, transparent 13deg, transparent 21deg, #8feaff30 24deg, transparent 29deg, transparent 39deg, #6bdfff22 42deg, transparent 48deg, transparent 60deg, #87e8ff28 64deg, transparent 70deg, transparent 80deg, #63dfff24 84deg, transparent 90deg); mask-image: linear-gradient(#000, #0008 48%, transparent 94%); animation: ocean-rays 19s ease-in-out infinite alternate; }
.ocean-rays-far { opacity: .55; animation-duration: 27s; animation-delay: -12s; animation-direction: alternate-reverse; filter: blur(8px); }
.ocean-shimmer { position: absolute; top: -100px; left: -20%; width: 140%; height: 320px; background: repeating-radial-gradient(ellipse at 48% 0%, transparent 0 22px, #89eeff30 24px, transparent 27px 48px); mask-image: linear-gradient(#000, transparent); transform: rotate(-6deg); animation: ocean-shimmer 17s ease-in-out infinite alternate; }
.ocean-current { position: absolute; inset: 15% -25% -20%; background: radial-gradient(ellipse at 15% 65%, #009dd025, transparent 40%), radial-gradient(ellipse at 80% 35%, #006bd530, transparent 45%); animation: ocean-current 24s ease-in-out infinite alternate; }
.ocean-particle { position: absolute; left: var(--x); top: 100%; width: var(--size); height: var(--size); border-radius: 50%; background: #b8f5ff; box-shadow: 0 0 8px #6cdfff60; opacity: 0; animation: ocean-rise var(--duration) linear var(--delay) infinite; }
/* Keep light out of the reading area; the edges retain the most visible water. */
.ocean-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 36%, #061d4b88, transparent 68%), linear-gradient(transparent 40%, #06132e99); }
@keyframes ocean-rays { from { transform: rotate(-8deg) scaleX(.93); opacity: .65; } to { transform: rotate(7deg) scaleX(1.08); opacity: 1; } }
@keyframes ocean-surface { to { transform: translateX(8%) scaleX(1.15); opacity: .6; } }
@keyframes ocean-shimmer { to { transform: translate(4%, 24px) rotate(4deg) scale(1.1); opacity: .5; } }
@keyframes ocean-current { to { transform: translate(7%, -5%); } }
@keyframes ocean-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .35; } 80% { opacity: .2; } 100% { transform: translate(65px, -1100px); opacity: 0; } }
@media (max-width: 600px) { .ocean-rays-far, .ocean-particle:nth-of-type(n+10) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ocean-water * { animation: none !important; } .ocean-particle { display: none; } }