/* The poster and its lighting share a single coordinate system at every breakpoint. */
.hero .hero-visual { background-image: none; }
.wave-surface {
  position: absolute;
  height: 181%;
  aspect-ratio: 1186 / 1674;
  width: auto;
  right: 0;
  top: -65.61%;
}
.wave-surface > img { width: 100%; height: 100%; max-width: none; }
.wave-lighting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.wave-trace { stroke: #89d5ed; stroke-width: .8; opacity: .13; }
.wave-flow {
  stroke: url(#ocean-light);
  stroke-linecap: round;
  animation: ocean-current 11s linear infinite;
  animation-delay: -2s;
}
.wave-halo { stroke-width: 12; stroke-dasharray: 172 828; opacity: .62; }
.wave-beam { stroke-width: 2.2; stroke-dasharray: 150 850; opacity: 1; }
.flow-curl { animation-duration: 12s; animation-delay: -7s; }
.flow-wake { animation-duration: 15s; animation-delay: -12s; }
.flow-ridge { animation-duration: 13s; animation-delay: -6s; }
.flow-inner { animation-duration: 10s; animation-delay: -8s; }
.flow-swell { animation-duration: 14s; animation-delay: -3s; }
.flow-deep { animation-duration: 12.5s; animation-delay: -10s; }
.flow-tide { animation-duration: 16s; animation-delay: -7s; }
.flow-wake .wave-beam, .flow-tide .wave-beam { stroke-width: 1.6; opacity: .85; }
@keyframes ocean-current {
  0% { stroke-dashoffset: 1100; opacity: 0; }
  9% { opacity: .9; }
  82% { opacity: .9; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.ocean-scene:not([data-motion-ready]) .wave-flow,
.ocean-scene[data-motion-paused="true"] .wave-flow,
.ocean-scene[data-motion-idle="true"] .wave-flow { animation-play-state: paused; }
.ambient-toggle {
  position: absolute;
  z-index: 3;
  top: 23px;
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid #a5d4e333;
  border-radius: 20px;
  color: #c6e5ee;
  background: #04223955;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ambient-toggle svg { width: 17px; height: 17px; }
.ambient-toggle:hover { background: #073651b3; border-color: #a5d4e380; }
.ambient-toggle[hidden] { display: none; }
.ambient-toggle:disabled { cursor: default; opacity: .7; }
.subhero { isolation: isolate; }
.subhero > .wrap { position: relative; z-index: 1; }
.subhero > .wave-lighting { opacity: .95; mask-image: linear-gradient(90deg, transparent 22%, #000 65%); }
.subhero .wave-trace { opacity: .28; stroke-width: .8; }
.subhero .wave-beam { stroke-width: 1.5; }
.subhero .wave-halo { stroke-width: 8; opacity: .48; }
.subhero .ambient-toggle { top: auto; bottom: 22px; }
@media (min-width: 1600px) {
  .wave-surface { height: 184%; top: -67.2%; }
}
@media (max-width: 1100px) {
  .wave-surface { height: 180%; top: -64.8%; left: 80%; right: auto; transform: translateX(-80%); }
}
@media (max-width: 850px) {
  .wave-surface { top: -64%; left: 70%; transform: translateX(-70%); }
}
@media (max-width: 580px) {
  .wave-surface { height: 196%; top: -70.08%; left: 73%; transform: translateX(-73%); }
  .hero .wave-lighting { opacity: .85; }
  .hero .flow-wake, .hero .flow-deep, .hero .flow-tide { display: none; }
  .ambient-toggle { top: 18px; font-size: 9px; gap: 4px; padding: 4px 8px; min-height: 30px; }
  .ambient-toggle svg { width: 14px; height: 14px; }
  .hero-content > .eyebrow { max-width: calc(100% - 100px); line-height: 1.6; }
  .subhero > .wave-lighting { width: 170%; left: -45%; opacity: .65; }
  .subhero .ambient-toggle { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave-flow { display: none; animation: none; }
}