.hero {
  position: relative;
  z-index: 2;
  height: 340vh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-surface);
}
/* Fallback when WebGL is unavailable */
.no-webgl .hero__stage { background: linear-gradient(180deg, #5cb1e6 0%, #eef7fb 58%, #1e84c3 62%, #364c84 100%); }

.hero__ocean { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-webgl .hero__ocean { display: none; }
.hero__gulls { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 600ms var(--ease-in-out); }

.hero__veil {
  position: absolute; inset: -2px; /* overscan hides a subpixel seam at the stage edge */
  background: var(--color-surface);
  opacity: 0;
  pointer-events: none;
}

.hero__intro {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: min(58rem, calc(100% - 2 * var(--gutter)));
  margin-top: -8rem;
  will-change: transform, opacity;
}

.hero__title {
  margin: 0 0 1.25rem;
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero__lede {
  margin: 0 0 1.75rem;
  max-width: 34ch;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-ink);
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.hero__deep {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--gutter);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--brand-white);
  text-shadow: 0 2px 30px rgb(34 51 94 / 0.35);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__deep strong { font-weight: 600; }
/* Sits over the darker water below the caustics, where white reads best */
.hero__deep--low { padding-top: 22vh; }

.hero__hint {
  position: absolute;
  left: var(--gutter);
  bottom: 2rem;
  display: flex; align-items: center; gap: 0.9rem;
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-white);
  text-shadow: 0 1px 12px rgb(34 51 94 / 0.5);
}
.hero__hint-line {
  position: relative;
  width: 1px; height: 36px;
  background: rgb(255 255 255 / 0.35);
  overflow: hidden;
}
.hero__hint-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-white);
  animation: hint-drop 2.2s var(--ease-in-out) infinite;
}
@keyframes hint-drop {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* Depth gauge — right edge, reads the camera's height relative to sea level */
.depth {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  display: grid;
  justify-items: end;
  gap: 0.75rem;
  transform: translateY(-50%);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color var(--duration-normal);
}
.depth__track { position: relative; width: 1px; height: 28vh; background: currentColor; opacity: 0.35; }
.depth__marker {
  position: absolute; left: -3px; top: 0;
  transform: translate3d(0, calc(var(--p, 0) * 28vh), 0);
  width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
}
.depth__value { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

.is-underwater .depth { color: var(--brand-white); }

/* Entrance animates the children so JS can still drive the wrapper's scroll fade */
body:not(.is-ready) .hero__intro > * { opacity: 0; }
.is-ready .hero__intro > * { animation: rise 1.4s var(--ease-out-expo) both; }
.is-ready .hero__intro > :nth-child(2) { animation-delay: 0.08s; }
.is-ready .hero__intro > :nth-child(3) { animation-delay: 0.16s; }
.is-ready .hero__intro > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise {
  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 760px) {
  .hero__intro { margin-top: -12rem; }
  .depth { display: none; }
}