/* 3D WebGL opening scene: a dark, calm dusk ocean with a drifting sailboat
   that the viewer dives through on scroll, cross-fading into the reef beneath.

   Layered OVER the main #canvas but BELOW the site header / nav (z:5) and the
   scroll-indicator (z:10). Never blocks input: the virtual-scroll engine keeps
   receiving wheel/touch so the reef advances underneath in sync. */

#ocean-intro {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  -webkit-user-select: none;
  user-select: none;
  background: #02040a; /* dark fallback before WebGL paints */
  will-change: opacity;
}

#ocean-intro[data-dived="true"] {
  display: none;
  pointer-events: none;
}

#ocean-intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* FATHOM wordmark over the scene */
#ocean-intro__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #eef3f4;
  text-shadow: 0 2px 30px rgba(0, 12, 20, 0.7), 0 0 2px rgba(0, 0, 0, 0.4);
  will-change: opacity, transform;
}
#ocean-intro__wordmark {
  font-family: var(--header-font, "Feature Display"), Georgia, serif;
  font-weight: 300;
  font-size: var(--h1, max(80px, 11vw));
  line-height: 0.8;
  letter-spacing: 0.05em;
  margin: 0;
}
#ocean-intro__sub {
  font-family: var(--default-font, "Britti Sans"), system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 18px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 1.6em;
  opacity: 0.82;
  padding-left: 0.42em;
}
#ocean-intro__sub::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.6em;
  margin: 1.1em auto 0;
  background: linear-gradient(to bottom, rgba(238, 243, 244, 0.6), rgba(238, 243, 244, 0));
  animation: ocean-intro-cue 2.4s ease-in-out infinite;
}
@keyframes ocean-intro-cue {
  0%, 100% { opacity: 0.2; transform: translateY(-4px); }
  50%      { opacity: 0.85; transform: translateY(2px); }
}

/* White foam / surface-break flash, opacity driven by JS at p ~ 0.5 */
#ocean-intro__foam {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 58%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(226, 244, 255, 0.5) 26%,
    rgba(190, 224, 240, 0.16) 52%,
    rgba(255, 255, 255, 0) 74%);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* FATHOM de-dup: hide the reef's own DOM hero title so the wordmark isn't
   shown twice. fathom-branding.css forces it visible+white; we override.
   Keep opacity:0 + visibility:hidden (NOT display:none) so the element keeps
   its layout box — the engine reads `.title`'s getBoundingClientRect to place
   the 3D reef title, so the box must remain. */
#home-hero .title {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  #ocean-intro__sub::after { animation: none; }
}