/*
 * The Sultanate Hotels — hub-only styles for the immersive 3D layer.
 * Kept SEPARATE from the shared assets/style.css (which must stay byte-identical
 * across all five sites). Everything here is gated on html.bg3d-on, which the
 * scene module adds only when the WebGL layer actually starts — so with no JS,
 * no WebGL, reduced-motion, or on phones, none of this applies and the original
 * 2D site renders unchanged.
 */

/* Fixed full-viewport canvas behind everything. inset:0 (not 100vw) avoids
   horizontal-scrollbar overflow. Hidden until the scene starts. */
#bg3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
html.bg3d-on #bg3d { display: block; }

/* When the ocean is live, let it show through the page background and the hero. */
html.bg3d-on body { background: transparent; }

/* The 3D scene replaces the hero's gradient art and its CSS atoll ring. */
html.bg3d-on .hero::before { opacity: 0; }
html.bg3d-on .hero::after { opacity: 0; }

/* Legibility scrim so hero copy stays readable over the moving water
   (weighted to the bottom, where the copy sits). This sits above the fixed
   canvas but below the hero content. */
html.bg3d-on .hero {
  background: linear-gradient(
    180deg,
    rgba(5, 13, 26, 0.10) 0%,
    rgba(5, 13, 26, 0.35) 55%,
    rgba(5, 13, 26, 0.78) 100%
  );
}

/* Immersive scroll journey: the two "ocean" sections let the live water shimmer
   through a dark glass tint that still guarantees text contrast, so the whole
   page feels like it floats on the sea. The warm .section-sand sections
   (#story, #map, #contact) stay opaque cream as intentional interludes, and the
   property/experience cards inside carry their own dark panels for legibility. */
html.bg3d-on #collection,
html.bg3d-on #islands,
html.bg3d-on #map {
  background: rgba(5, 13, 26, 0.66);
}
html.bg3d-on footer {
  background: rgba(5, 13, 26, 0.72);
}

/* Headings and body copy that float over the tint get a soft shadow for safety. */
html.bg3d-on #collection .eyebrow,
html.bg3d-on #collection > .wrap > h2,
html.bg3d-on #islands .eyebrow,
html.bg3d-on #islands > .wrap > h2,
html.bg3d-on #islands .lede,
html.bg3d-on #islands .exp p,
html.bg3d-on #islands > .wrap > p,
html.bg3d-on #map .eyebrow,
html.bg3d-on #map > .wrap > h2,
html.bg3d-on #map .notice {
  text-shadow: 0 1px 16px rgba(5, 13, 26, 0.85);
}

/* Respect reduced-motion even if the class somehow gets set. */
@media (prefers-reduced-motion: reduce) {
  #bg3d { display: none !important; }
}