/* Immersive ocean: photographic reef, depth-projected fish and drifting light. */
.halong-living { background:#063f52; isolation:isolate; }
.bay-world { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#075b72; }
.bay-world-photo { position:absolute; inset:-2%; background:url('../img/ocean/underwater-reef.webp') center / cover no-repeat; }
.bay-world-tint { position:absolute; inset:0; background:linear-gradient(180deg,#002a3c18,#00758b08 45%,#001b3766); }
.ocean-rays { position:absolute; inset:-10%; pointer-events:none; background:conic-gradient(from 155deg at 45% -15%,transparent 0deg,#d5fffa16 10deg,transparent 18deg,#dcffff1a 25deg,transparent 32deg,#cfffff10 39deg,transparent 48deg); transform-origin:50% 0; animation:ocean-rays 18s ease-in-out infinite alternate; }
.ocean-caustics { position:absolute; inset:0; pointer-events:none; opacity:.2; background:repeating-radial-gradient(ellipse at 30% -30%,transparent 0 45px,#c6ffff38 47px,transparent 51px 120px); mask-image:linear-gradient(transparent 20%,black); animation:ocean-caustics 14s ease-in-out infinite alternate; }
@keyframes ocean-rays { from {transform:rotate(-4deg) scale(1);} to {transform:rotate(5deg) scale(1.08);} }
@keyframes ocean-caustics { to {transform:translate3d(22px,12px,0) scale(1.06);opacity:.1;} }
.bay-school { position:fixed; left:0; right:0; bottom:15px; height:220px; z-index:2; overflow:hidden; pointer-events:none; }
.ocean-fish-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.ocean-foreground { position:fixed; inset:auto -1% -10px; height:100px; z-index:2; pointer-events:none; background:url('../img/ocean/reef-foreground.webp') center bottom / 100% auto no-repeat; transform-origin:50% 100%; animation:reef-sway 8s ease-in-out infinite alternate; opacity:.86; }
@keyframes reef-sway { from { transform:skewX(-.6deg) scale(1.02); } to {transform:skewX(.7deg) scale(1.025);} }
.halong-living #main-content { background:rgba(242,251,251,.95); padding:clamp(14px,2.2vw,30px); border:1px solid #ffffffa3; border-radius:26px; box-shadow:0 18px 60px #001b3640; }
.ocean-observatory { position:relative; isolation:isolate; overflow:hidden; height:440px; margin-bottom:24px; border-radius:22px; background:#08627b url('../img/ocean/underwater-reef.webp') center 55% / cover; box-shadow:inset 0 0 60px #00203644; }
.ocean-observatory::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,#001e3f55,transparent 48%,#00253830); }
.ocean-observatory-copy { position:absolute; z-index:2; top:30px; left:32px; right:24px; max-width:600px; color:white; text-shadow:0 2px 14px #002337; pointer-events:none; }
.ocean-kicker { display:block; font-size:.68rem; letter-spacing:.22em; font-weight:700; color:#a4f5ea; margin-bottom:10px; }
.ocean-observatory h2 { color:#fff; font-size:clamp(1.6rem,3vw,2.45rem); font-weight:700; line-height:1.22; text-wrap:balance; }
.ocean-observatory-copy p { font-size:.84rem; color:#d6f6f7; margin-top:12px; }
.ocean-reef-edge { position:absolute; inset:auto -1% -8px; height:30%; background:url('../img/ocean/reef-foreground.webp') center bottom / 100% auto no-repeat; pointer-events:none; animation:reef-sway 9s ease-in-out infinite alternate; transform-origin:50% 100%; }
.ocean-live { position:absolute; z-index:2; bottom:18px; right:20px; display:flex; gap:7px; align-items:center; padding:7px 11px; border-radius:30px; background:#033e50c9; color:#e9ffff; font-size:.67rem; border:1px solid #b4f9f133; }
.ocean-live>span { width:6px; height:6px; border-radius:50%; background:#79edd0; box-shadow:0 0 9px #79edd0; }
.halong-living .visitor-welcome { position:relative; overflow:hidden; min-height:390px; background:linear-gradient(90deg,#032734ed,#03323d99 65%,#03323d33),url('../img/halong-bay.webp') center 48% / cover; border:1px solid #ffffff66; box-shadow:0 12px 36px #073e5026; }
.halong-living .visitor-copy { align-self:center; }
.halong-living .visitor-copy h2 { text-wrap:balance; text-shadow:0 2px 14px #00232f66; }
.halong-living .visitor-copy>p { color:#e5f7f8; }
.halong-living .visitor-booking { background:#fffffff7; box-shadow:0 8px 28px #002c3b30; }
.halong-living .hero-pro { background:linear-gradient(90deg,#032a38f0,#03354199 68%,#03354138),url('../img/halong-bay.webp') center 62% / cover; border-radius:22px!important; }
.halong-living .hero-pro::before { background:linear-gradient(0deg,#00778833,transparent); }
.halong-living .hero-promo-badge-inner,.halong-living .hero-promo-badge-text,.halong-living .hero-promo-badge-inner::before { animation:none; }
.halong-living .hero-promo-badge-inner { background:#fff5df; color:#77451c; box-shadow:0 8px 28px #00232f30; }
.bay-motion-toggle { position:fixed; z-index:1020; left:18px; bottom:100px; display:flex; align-items:center; gap:5px; min-height:42px; padding:8px 12px; border:1px solid #ffffff8c; border-radius:24px; background:#064957; color:white; font-size:12px; box-shadow:0 4px 16px #00364233; }
.bay-motion-toggle[hidden] { display:none; }
.bay-motion-toggle:focus-visible { outline:3px solid #ffc66e; outline-offset:3px; }
.bay-paused .bay-world *,.bay-paused .ocean-foreground,.bay-paused .ocean-observatory * { animation-play-state:paused!important; }
@media(max-width:767px) {
 .bay-world-photo { background-position:60% center; }
 .halong-living #main-content { width:calc(100% - 20px); padding:12px; border-radius:20px; }
 .ocean-observatory { height:370px; border-radius:16px; margin-bottom:16px; background-position:55% center; }
 .ocean-observatory-copy { top:24px; left:20px; right:18px; }
 .ocean-observatory h2 { color:#fff; font-size:1.65rem; }
 .ocean-observatory-copy p { font-size:.73rem; max-width:240px; }
 .ocean-observatory .ocean-reef-edge { height:28%; background-size:150% auto; }
 .ocean-live { bottom:12px; right:12px; font-size:.6rem; }
 .halong-living .visitor-welcome { min-height:0; grid-template-columns:1fr; padding:24px 18px; gap:24px; background-position:60% center; border-radius:16px; }
 .halong-living .visitor-copy h2 { font-size:clamp(1.6rem,7vw,2.2rem); }
 .halong-living .visitor-booking { padding:18px; min-width:0; }
 .halong-living .visitor-categories { gap:8px; }
 .halong-living .visitor-categories a { font-size:.85rem; }
 .bay-school { height:140px; bottom:70px; }
 .ocean-foreground { height:66px; bottom:66px; opacity:.72; background-size:150% auto; }
 .bay-motion-toggle { left:12px; bottom:145px; padding:8px; }
 .bay-motion-toggle span { font-size:11px; }
}
@media print { .bay-world,.bay-school,.bay-motion-toggle,.ocean-foreground,.ocean-observatory { display:none!important; } .halong-living #main-content { background:white; box-shadow:none; } }

.ocean-expand { position:absolute; right:20px; top:20px; z-index:3; display:flex; align-items:center; gap:7px; min-height:42px; padding:8px 12px; background:#043d52d9; color:white; border:1px solid #b8f8ef66; border-radius:22px; font-size:.73rem; }
.ocean-expand:focus-visible { outline:3px solid #ffc66e; outline-offset:3px; }
.ocean-viewing { overflow:hidden; }
.ocean-observatory.ocean-expanded { position:fixed; inset:10px; height:auto; margin:0; z-index:1040; border:1px solid #b8f8ef99; border-radius:20px; }
.ocean-viewing .bay-motion-toggle { z-index:1050; }
@media(max-width:767px){.ocean-expand{top:auto;bottom:12px;left:12px;right:auto;font-size:.65rem;}.ocean-observatory.ocean-expanded{inset:6px;}.ocean-expanded .ocean-observatory-copy{top:24px;}}

.ocean-reef-edge,.ocean-foreground { mask-image:linear-gradient(180deg,transparent,#000 42%); }

@media(max-width:767px){.ocean-expanded .ocean-expand{top:12px;bottom:auto;left:auto;right:12px}.ocean-expanded .ocean-observatory-copy{top:72px}}

.ocean-observatory.ocean-expanded{overflow:clip}