/* Photographs and their live renderings share identical bounds. Copy stays above. */
.ocean-scene{position:relative;isolation:isolate;overflow:hidden}
.ocean-scene .ocean-photo,.ocean-scene .ocean-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;pointer-events:none}
.ocean-scene .ocean-canvas{display:none}
.ocean-scene[data-water-renderer=webgl]>.ocean-canvas{display:block}
.ocean-scene[data-water-renderer=webgl]>.ocean-photo{opacity:0}
.ocean-scene[data-water-renderer=webgl]>.ocean-fallback,
.ocean-scene[data-water-renderer=webgl]>.pipeline-spot,
.ocean-scene[data-water-renderer=webgl]>.map-light{display:none}
.ocean-fallback{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;mix-blend-mode:screen}
.ocean-fallback::before,.ocean-fallback::after{content:'';position:absolute;inset:-15%;opacity:.5;filter:blur(9px);background:radial-gradient(ellipse at 76% 18%,#e2fff15c,transparent 21%),radial-gradient(ellipse at 37% 65%,#14cbb538,transparent 29%);animation:ocean-light-drift 8s ease-in-out infinite alternate}
.ocean-fallback::after{opacity:.4;background:repeating-conic-gradient(from 156deg at 82% 0%,transparent 0deg 9deg,#b5f9e81f 10deg 12deg,transparent 13deg 25deg);transform-origin:82% 0%;animation:ocean-light-shafts 11s ease-in-out infinite alternate}
.ocean-scene.ocean-paused .ocean-fallback::before,.ocean-scene.ocean-paused .ocean-fallback::after{animation-play-state:paused!important}
@keyframes ocean-light-drift{from{transform:translate(-4%,-3%) scale(.95);opacity:.32}to{transform:translate(5%,7%) scale(1.08);opacity:.7}}
@keyframes ocean-light-shafts{from{transform:rotate(-6deg);opacity:.2}to{transform:rotate(7deg);opacity:.5}}
/* The hero reaches both viewport edges; only its text has a reading width. */
.hero{width:100%;max-width:none;margin:0;min-height:clamp(650px,68vh,840px)}
.hero.ocean-scene .hero-ocean{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:.95}
.hero.ocean-scene[data-water-renderer=webgl]>img.hero-ocean{opacity:0}
.hero-inner,.ocean-label{z-index:2}
.hero::after{z-index:1;background:linear-gradient(90deg,#061c2bf5 0%,#061c2bc7 28%,#061c2b69 49%,#061c2b0d 78%,transparent 100%)}
/* Animate the illustrated water and light, keeping infographic labels stable. */
.pipeline-art.ocean-scene .pipeline-art-label{z-index:2}
.pipeline-art.ocean-scene .ocean-photo,.pipeline-art.ocean-scene .ocean-canvas{object-position:50% 50%}
.semantic-map.ocean-scene .ocean-photo,.semantic-map.ocean-scene .ocean-canvas{object-position:50% 50%}
/* A second full-width ocean scene closes the page. */
.final-cta.ocean-scene{background:#061c2b;color:#f7fbfc;min-height:440px;width:100%}
.final-cta.ocean-scene>.section{position:relative;z-index:2;padding-block:86px}
.final-cta.ocean-scene::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#061c2bd4,#061c2bb5 45%,#061c2b8c 75%,#061c2b9c)}
.final-cta.ocean-scene h2{color:#f7fbfc;text-shadow:0 2px 24px #061c2b65}
.final-cta.ocean-scene p{color:#bed9df}
.final-cta.ocean-scene .tiny-wave{color:#b5f9e8}
.final-cta.ocean-scene .ocean-photo,.final-cta.ocean-scene .ocean-canvas{object-position:50% 44%}
/* Account artwork shares the same renderer, without moving form elements. */
.auth-art.ocean-scene,.login-art.ocean-scene{background-image:none}
.auth-art.ocean-scene::before{z-index:1;background:linear-gradient(180deg,#061c2b40,#061c2b80 45%,#061c2bed)}
.auth-art.ocean-scene>.wordmark,.auth-art.ocean-scene>div:not(.ocean-fallback),.auth-art.ocean-scene>small{position:relative;z-index:2}
.auth-art.ocean-scene .ocean-photo,.auth-art.ocean-scene .ocean-canvas,.login-art.ocean-scene .ocean-photo,.login-art.ocean-scene .ocean-canvas{object-position:56% 50%}
.login-art.ocean-scene::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#061c2b25,#061c2b26 40%,#061c2bbc)}
.login-art.ocean-scene .login-art-caption{z-index:2}
@media(max-width:760px){.hero{min-height:650px}.hero.ocean-scene .hero-ocean{object-position:85% 35%;opacity:.83}.hero.ocean-scene[data-water-renderer=webgl]>img.hero-ocean{opacity:0}.hero::after{background:linear-gradient(90deg,#061c2bed 0%,#061c2ba3 43%,#061c2b45 100%)}.final-cta.ocean-scene{min-height:410px}.final-cta.ocean-scene>.section{padding-block:70px}.final-cta.ocean-scene .ocean-photo,.final-cta.ocean-scene .ocean-canvas{object-position:50% 40%}.auth-art.ocean-scene .ocean-photo,.auth-art.ocean-scene .ocean-canvas{object-position:56% 25%}}
@media(prefers-reduced-motion:reduce){.ocean-fallback::before,.ocean-fallback::after{animation:none!important;transform:none!important;opacity:.2}}