/* Independent watercolor foreground layers; all remain behind invitation content. */
.ocean-depth{position:absolute;inset:0;pointer-events:none;translate:0 var(--ocean-shift,0px)}
.sea-sprite{display:block;width:100%;height:100%;background-image:url('ocean-sprites.png');background-size:200% 200%;background-repeat:no-repeat}
.sprite-dolphin{background-position:0 0}.sprite-boat{background-position:100% 0}.sprite-wave{background-position:0 100%}.sprite-coral{background-position:100% 100%}
.sailing-boat{position:absolute;top:39%;left:5%;width:clamp(130px,23vw,330px);aspect-ratio:1;animation:boat-drift 23s ease-in-out infinite alternate}
.sailing-boat .sea-sprite{animation:boat-rock 6s ease-in-out infinite;transform-origin:50% 80%}
.swimming-dolphin .sea-sprite{animation:dolphin-glide 4s ease-in-out infinite}
.swaying-coral{position:absolute;bottom:-8%;width:clamp(180px,30vw,420px);aspect-ratio:1;transform-origin:50% 100%;animation:sea-sway 8s ease-in-out infinite alternate;opacity:.8}
.coral-0{left:-10%}.coral-1{right:-12%;scale:-1 1;animation-delay:-4s;animation-duration:11s}
.underwater-rays{position:absolute;inset:-25%;background:repeating-conic-gradient(from 158deg at 50% 0,transparent 0deg 12deg,#e9fbff18 14deg 18deg,transparent 21deg 30deg);mix-blend-mode:screen;transform-origin:50% 0;animation:water-light 14s ease-in-out infinite alternate}
.sea-bubble{position:absolute;bottom:-8%;width:var(--size);height:var(--size);border:1px solid #e4f8ff8c;border-radius:50%;box-shadow:inset 2px 2px 3px #ffffff30;animation:bubble-rise var(--duration) var(--delay) linear infinite}
@keyframes boat-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(22vw,-12px,0)}}
@keyframes boat-rock{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(4deg) translateY(9px)}}
@keyframes dolphin-crossing{0%{transform:translate3d(0,12px,0)}100%{transform:translate3d(155vw,-40px,0)}}
@keyframes dolphin-glide{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(18px)}}
@keyframes sea-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes water-light{from{transform:rotate(-8deg);opacity:.4}to{transform:rotate(8deg);opacity:.85}}
@keyframes bubble-rise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.6}85%{opacity:.4}100%{transform:translate3d(30px,-112vh,0);opacity:0}}
@media(max-width:700px){.sailing-boat{left:-5%;top:36%;width:160px}.swaying-coral{bottom:-4%;width:210px}}
/* Sprite bounds follow the generated artwork's transparent gutters. */
.sprite-dolphin{background-size:173% 185.78%;background-position:0 0}
.sprite-boat{background-size:237.05% 185.78%;background-position:100% 0}
.sprite-coral{background-size:259.1% 224.33%;background-position:100% 100%}

/* Animate the existing painted water, keeping its shoreline continuous. */
.sea-water-motion{position:absolute;inset:0;background:inherit;background-size:cover;background-position:inherit;mask-image:linear-gradient(transparent 52%,#000 68%);opacity:.65;animation:water-lap 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes water-lap{from{transform:translate3d(-2px,1px,0)}to{transform:translate3d(2px,-3px,0)}}
/* A small pod passes across the upper edge of the underwater scene. */
.swimming-dolphin{position:absolute;top:9%;left:-45%;width:clamp(100px,14vw,200px);aspect-ratio:1;opacity:.78;animation:dolphin-crossing 27s linear infinite;animation-delay:-8s}
.dolphin-1{top:15%;width:clamp(85px,11vw,165px);animation-delay:-11s;opacity:.6}
.dolphin-2{top:8%;width:clamp(90px,12vw,175px);animation-delay:-14s;opacity:.7}
.dolphin-3{top:20%;width:clamp(65px,9vw,135px);animation-delay:-12s;opacity:.48}
/* Bird flight and wing movement run independently. */
.sprite-bird,.sprite-splash{background-image:url('birds-splash.png');background-size:100% 200%}
.sprite-bird{background-position:top center}.sprite-splash{background-position:bottom center}
.flying-bird{position:absolute;left:-25%;top:12%;width:clamp(45px,6vw,85px);aspect-ratio:2;animation:bird-flight 33s linear infinite;animation-delay:-8s;opacity:.85}
.flying-bird .sea-sprite{animation:bird-wings 2.8s ease-in-out infinite}
.bird-1{top:19%;width:42px;animation-delay:-11s;animation-duration:36s}.bird-2{top:9%;width:35px;animation-delay:-15s;animation-duration:39s}.bird-3{top:25%;width:50px;animation-delay:-19s;animation-duration:35s}.bird-4{top:15%;width:30px;animation-delay:-22s;animation-duration:40s}
@keyframes bird-flight{0%{transform:translate3d(0,15px,0)}50%{transform:translate3d(75vw,-20px,0)}100%{transform:translate3d(150vw,10px,0)}}
@keyframes bird-wings{0%,100%{transform:scaleY(.82) rotate(-3deg)}50%{transform:scaleY(1) rotate(3deg)}}
/* The dolphin's landing and painted splash share one clock. */
.jumping-dolphin{position:absolute;top:49%;left:12%;width:clamp(85px,12vw,165px);aspect-ratio:1;opacity:0;animation:dolphin-jump 14s -4s linear infinite}
.jumping-dolphin .sea-sprite{animation:none}
.dolphin-splash{position:absolute;top:51%;left:calc(12% + 48vw);width:clamp(100px,16vw,220px);aspect-ratio:2;animation:landing-splash 14s -4s ease-out infinite;transform-origin:50% 90%}
@keyframes dolphin-jump{
0%,14%{opacity:0;transform:translate3d(0,4vh,0) rotate(-30deg)}
18%{opacity:1;transform:translate3d(3.2vw,-3vh,0) rotate(-30deg)}
35%{opacity:1;transform:translate3d(21.33vw,-18vh,0) rotate(-5deg)}
45%{opacity:1;transform:translate3d(32vw,-15vh,0) rotate(20deg)}
59%{opacity:1;transform:translate3d(46.93vw,0,0) rotate(40deg)}
63%,100%{opacity:0;transform:translate3d(48vw,5vh,0) rotate(45deg)}
}
@keyframes landing-splash{0%,57%{opacity:0;transform:scale(.3,.2)}61%{opacity:.9;transform:scale(.8,1)}68%{opacity:.55;transform:scale(1.15,.8)}77%,100%{opacity:0;transform:scale(1.45,.35)}}

/* Pause every layer together, including nested sprites, to preserve phase. */
.world-scene[data-moving="false"] *{animation-play-state:paused!important}
/* Live wing and tail deformation replaces whole-image flapping. */
.wildlife-canvas{display:block;width:100%;height:100%;pointer-events:none}
.sea-sprite.wildlife-ready{background-image:none}
.flying-bird{aspect-ratio:1;width:clamp(65px,8vw,110px)}
.flying-bird .sea-sprite{animation:none}
.bird-1{width:60px}.bird-2{width:50px}.bird-3{width:70px}.bird-4{width:44px}
.swimming-dolphin .sea-sprite{animation:none}