/* M/V Dream Keeper — story-local styles: the page descends from the surface into darkness */

body.ocean {
  background: linear-gradient(180deg,
    #9fd8f0 0%, #5db4da 3%,
    #2e8fc0 7%, #1a6ea3 14%, #10538a 24%,
    #0a3d6d 36%, #062c52 50%, #041e3c 64%,
    #02132a 78%, #010a17 89%, #00040a 100%);
}

/* ---------- surface hero ---------- */
.hero.sea {
  background: linear-gradient(180deg,
    #cfeaf7 0%, #a5d8ee 34%, #7cc4e6 52%,
    #47a3d3 66%, #2e8fc0 84%, #1a6ea3 100%);
}
.hero.sea .sun {
  position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
  width: 68vmin; height: 68vmin; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,248,220,.95) 0%, rgba(255,244,200,.5) 26%, rgba(255,240,190,0) 62%);
  pointer-events: none;
}
.hero.sea .rays {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(76deg,
    rgba(255,255,255,.12) 0 18px, rgba(255,255,255,0) 18px 74px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
}
.hero.sea h1 { text-shadow: 0 4px 40px rgba(3,42,66,.55); }
.hero.sea .sub { color: #fff; text-shadow: 0 1px 14px rgba(3,42,66,.6); }

.hero.sea .waves { position: absolute; left: 0; right: 0; bottom: -2px; height: 110px; pointer-events: none; }
.hero.sea .w { position: absolute; inset: 0; background-repeat: repeat-x; background-position: bottom; }
.hero.sea .w1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32 Q30 14 60 32 T120 32 T180 32 T240 32 L240 60 L0 60 Z' fill='%231a6ea3'/%3E%3C/svg%3E");
  background-size: 240px 60px;
  animation: wave1 11s linear infinite;
}
.hero.sea .w2 {
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32 Q30 14 60 32 T120 32 T180 32 T240 32 L240 60 L0 60 Z' fill='%23479fce'/%3E%3C/svg%3E");
  background-size: 300px 70px; opacity: .55;
  animation: wave2 17s linear infinite reverse;
}
@keyframes wave1 { from { background-position-x: 0; } to { background-position-x: 240px; } }
@keyframes wave2 { from { background-position-x: 0; } to { background-position-x: 300px; } }

/* ---------- fixed descent furniture ---------- */
#bubbles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#ghost-ship {
  position: fixed; top: 0; left: 50%; width: min(540px, 72vw);
  opacity: 0; pointer-events: none; z-index: 0;
}
.gauge {
  position: fixed; right: 1.1rem; bottom: 1.2rem; z-index: 90; pointer-events: none;
  font-family: var(--font-display); text-align: right;
  color: rgba(255,255,255,.8); line-height: 1;
}
.gauge .num { font-size: 2.4rem; letter-spacing: .04em; }
.gauge .unit { display: block; font-size: .8rem; letter-spacing: .35em; opacity: .6; margin-top: .2rem; }

/* ---------- depth structure ---------- */
article.story, .sea-banner, .depthmark, .seafloor { position: relative; z-index: 2; }

.depthmark {
  display: flex; align-items: center; gap: 1.2rem; max-width: 900px;
  margin: 4.5rem auto 0; padding: 0 1.5rem;
  color: rgba(255,255,255,.5); font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: .45em;
}
.depthmark::before, .depthmark::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.16);
}

.sea-banner {
  min-height: 44vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.5rem;
}
.sea-banner h3 {
  font-size: clamp(1.7rem, 5.5vw, 3.4rem); max-width: 880px;
  text-shadow: 0 2px 34px rgba(0,0,0,.55);
}

.reefwrap { position: relative; z-index: 1; overflow: hidden; margin-top: -2rem; }
.reefwrap svg { display: block; width: 100%; height: auto; }

/* ---------- seafloor / memorial ---------- */
.seafloor { text-align: center; padding: 6rem 1.5rem 2rem; }
.seafloor svg { width: min(640px, 88vw); height: auto; display: block; margin: 0 auto; }
.memorial {
  margin: 2.5rem auto 0; max-width: 34rem;
  font-style: italic; font-weight: 300; letter-spacing: .05em;
  color: rgba(255,255,255,.85);
}

body.ocean footer { color: #4d6172; }
body.ocean footer .brandline { color: #5d7488; }

@media (prefers-reduced-motion: reduce) {
  .hero.sea .w1, .hero.sea .w2 { animation: none; }
}