.vampire-ocean{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;color:#d8e1d5}.island-position{position:absolute;width:min(38vw,560px);right:7vw;bottom:21vh;will-change:opacity,transform}.island-button{display:block;width:100%;border:0;background:none;padding:0;pointer-events:auto;cursor:pointer;color:inherit}.island-button svg{width:100%;display:block;overflow:visible}.island-button span{display:block;font-size:9px;letter-spacing:.22em;opacity:.65;margin-top:-3px}.island-button:focus-visible{outline:1px solid currentColor;outline-offset:10px}.little-boat{transform-origin:130px 380px;animation:boat-float 6s ease-in-out infinite}.island-ripples{opacity:.38;animation:ripple-breathe 5s ease-in-out infinite}.beacon{transform-origin:348px 122px;animation:beacon-sweep 12s ease-in-out infinite;opacity:.65}.beacon-awake .beacon{opacity:1;filter:drop-shadow(0 0 9px #ffe6a2)}.sea-birds{animation:bird-drift 14s ease-in-out infinite}.pennant{transform-origin:137px 223px;animation:flag-flutter 2s ease-in-out infinite}html[data-scene-theme=night] .island-button svg{filter:brightness(.65) saturate(.7)}html[data-scene-theme=night] .beacon{filter:drop-shadow(0 0 8px #f9d39c)}html[data-scene-theme=day] .vampire-ocean{color:#d7ebe6}html[data-scene-theme=sunset] .vampire-ocean{color:#e6c7ac}@keyframes boat-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.8deg)}}@keyframes beacon-sweep{0%,100%{transform:scaleX(1);opacity:.25}50%{transform:scaleX(-.8);opacity:.8}}@keyframes ripple-breathe{50%{opacity:.17;transform:translateY(2px)}}@keyframes bird-drift{50%{transform:translate(12px,-4px)}}@keyframes flag-flutter{50%{transform:skewY(8deg) scaleX(.85)}}
.under-story{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden}.story-day,.story-sunset,.story-night{position:absolute;inset:0;display:none}html[data-scene-theme=day] .story-day{display:block}html[data-scene-theme=sunset] .story-sunset{display:block}html[data-scene-theme=night] .story-night{display:block}.reef{position:absolute;width:24vw;height:48vh;bottom:-10vh;color:#377f7950;filter:blur(.4px);transform-origin:bottom;animation:reef-sway 7s ease-in-out infinite}.reef-left{left:-5vw}.reef-right{right:-4vw;color:#326c6c48;animation-delay:-3s;transform:scaleX(-1)}.fish-school i{position:absolute;width:var(--size);height:calc(var(--size)*.42);top:var(--y);left:-60px;background:#0b4d5e75;border-radius:50%;animation:fish-swim var(--duration) linear infinite;animation-delay:var(--delay)}.fish-school i:after{content:"";position:absolute;left:-5px;top:-2px;border-right:7px solid #0b4d5e75;border-top:5px solid transparent;border-bottom:5px solid transparent}.bubbles i{position:absolute;left:var(--x);width:var(--size);height:var(--size);bottom:-20px;border:1px solid #c4f4e136;border-radius:50%;box-shadow:inset -1px 1px 3px #e3fff32e;animation:bubble-rise var(--duration) linear infinite;animation-delay:var(--delay)}.ruin{position:absolute;width:8vw;min-width:35px;height:65vh;bottom:-10vh;background:linear-gradient(90deg,#6d3e4928,#dcad8542,#57304728);border:1px solid #f3c6a61a;box-shadow:inset 12px 0 25px #030b1f44;transform:perspective(600px) rotateY(22deg);filter:blur(1px)}.ruin:before,.ruin:after{content:"";position:absolute;left:-18%;right:-18%;height:20px;border:1px solid #f0c4a229;background:#ba8d7621;top:-20px}.ruin:after{top:auto;bottom:30px}.ruin-a{left:4%;height:51vh;opacity:.7}.ruin-b{right:7%;height:80vh;opacity:.5}.rose-window{position:absolute;width:45vw;height:45vw;right:6%;top:12%;color:#e3b69724;filter:drop-shadow(0 0 18px #dcb28126);animation:window-orbit 160s linear infinite}.rose-petals i{position:absolute;left:var(--x);top:-30px;width:var(--size);height:calc(var(--size)*1.7);border-radius:80% 5% 70% 10%;background:linear-gradient(45deg,#b9667438,#efb7a864);animation:petal-fall var(--duration) linear infinite;animation-delay:var(--delay)}.jelly{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);animation:jelly-drift 8s ease-in-out infinite;animation-delay:var(--delay);filter:drop-shadow(0 0 12px #98b7f12e);opacity:.55}.jelly-bell{position:absolute;inset:0 0 35%;border:1px solid #c4d8ff85;border-radius:60% 60% 22% 22%;background:radial-gradient(ellipse at 50% 70%,#b5bbf322,transparent 65%);box-shadow:inset 0 3px 12px #c3e1ff30;animation:jelly-pulse 3.7s ease-in-out infinite;animation-delay:var(--delay)}.tentacle{position:absolute;top:62%;height:100%;width:18%;border-left:1px solid #b9c7fb59;border-radius:45%;transform-origin:top;animation:tentacle 4s ease-in-out infinite}.t1{left:15%}.t2{left:35%;height:130%;animation-delay:-1s}.t3{left:55%;height:118%;animation-delay:-2s}.t4{left:75%;animation-delay:-3s}.constellation i{position:absolute;width:2px;height:2px;border-radius:50%;background:#b7ddff;box-shadow:0 0 8px #9bbcfb;animation:star-breathe 4s ease-in-out infinite}.fx-paused .vampire-ocean *,.fx-paused .under-story *,.scene-hidden .vampire-ocean *,.scene-hidden .under-story *{animation-play-state:paused!important}@keyframes reef-sway{50%{transform:rotate(4deg)}}@keyframes fish-swim{to{transform:translateX(calc(100vw + 150px))}}@keyframes bubble-rise{to{transform:translate(40px,-120vh);opacity:0}}@keyframes petal-fall{to{transform:translate(70px,120vh) rotate(260deg);opacity:0}}@keyframes window-orbit{to{transform:rotate(360deg)}}@keyframes jelly-drift{50%{transform:translate(15px,-28px) rotate(5deg)}}@keyframes jelly-pulse{50%{transform:scale(.88,.92)}}@keyframes tentacle{50%{transform:skewX(14deg) rotate(6deg)}}@keyframes star-breathe{50%{opacity:.15;transform:scale(.6)}}
@media(max-width:760px){.island-position{width:64vw;right:-2vw;bottom:13vh}.island-button span{font-size:7px}.reef{width:40vw;height:36vh}.rose-window{width:75vw;height:75vw;right:-15%;top:22%}.ruin{width:10vw}.jelly{opacity:.4}}
@media(prefers-reduced-motion:reduce){.vampire-ocean *,.under-story *{animation:none!important;transition:none!important}}

/* Each time of day has its own composition. The lighthouse exists only at night. */
.surface-day,.surface-sunset,.surface-night{display:none}html[data-scene-theme=day] .surface-day,html[data-scene-theme=sunset] .surface-sunset,html[data-scene-theme=night] .surface-night{display:block}
.day-yacht{transform:translate(120px,-22px) scale(1.18);transform-origin:130px 380px}.day-wake{animation:ripple-breathe 5s ease-in-out infinite}.kite{transform-origin:215px 126px;animation:kite-sway 8s ease-in-out infinite}.shore-waves{opacity:.3;animation:ripple-breathe 6s ease-in-out infinite}.night-dinghy{transform-origin:130px 380px;animation:boat-float 7s ease-in-out infinite}.boat-lantern{filter:drop-shadow(0 0 9px #f5ce88);animation:lantern-pulse 5s ease-in-out infinite}.night-sparks{animation:lantern-pulse 7s ease-in-out infinite}.surface-night .beacon{animation:beacon-sweep 14s ease-in-out infinite;opacity:.7}.scene-awake .surface-night .beacon{animation-play-state:paused;opacity:.12}.scene-awake .day-yacht{animation:sail-away 9s ease-in-out infinite}.scene-awake .kite{animation-duration:3s}
@keyframes kite-sway{0%,100%{transform:rotate(-5deg) translate(-3px,2px)}50%{transform:rotate(7deg) translate(8px,-8px)}}@keyframes lantern-pulse{50%{opacity:.4}}@keyframes sail-away{50%{transform:translate(160px,-28px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.vampire-ocean *{animation:none!important}}

/* Keep the small character vignette grounded below the lowered sea horizon. */
html:not([data-scene-theme=day]) .island-position{width:min(28vw,420px);bottom:5vh;right:5vw}@media(max-width:760px){html:not([data-scene-theme=day]) .island-position{width:52vw;bottom:10vh;right:0}}

/* Let the realistic water ceiling read clearly; no large graphic architecture over it. */
html[data-scene-theme=sunset] .under-story .ruin,html[data-scene-theme=sunset] .under-story .rose-window{display:none}.rose-petals{opacity:.18}