/* The sea strip: the only full-bleed photograph. Glints drift. */
.waterline { padding-bottom: var(--section-gap); }
.sea { --h: 220px; --tile: calc(var(--h) * 4); position: relative; height: var(--h); overflow: hidden; isolation: isolate; background: #1c5e92; }
.sea__img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 6% 50%; }
.glint {
  position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--tile) * 4);
  background: url("../img/glint.webp") repeat-x 0 0 / var(--tile) 100%; mix-blend-mode: screen; will-change: transform; pointer-events: none;
  animation: drift-l 22s linear infinite, shimmer 5s var(--ease-sine) infinite alternate;
}
.glint--b { animation-name: drift-r, shimmer; animation-duration: 31s, 7s; animation-delay: 0s, -2s; top: 6%; opacity: 0.7; }
@keyframes drift-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes drift-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes shimmer { from { opacity: 0.55; } to { opacity: 0.85; } }
.js .waterline:not(.is-live) .glint { animation-play-state: paused; }

.waterline__text { padding: var(--s7) var(--gutter) 0; max-width: 1296px; margin-inline: auto; }
.statement { font-size: var(--fs-h2); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; }
.waterline__hand { margin: var(--s4) 0 0 auto; width: max-content; color: var(--terra-600); }
@media (min-width: 900px) {
  .sea { --h: max(38vh, 300px); }
  .waterline__text { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-top: var(--s8); }
  .statement { grid-column: 1 / 9; max-width: 26ch; }
  .waterline__hand { grid-column: 9 / 13; align-self: end; margin: 0 0 var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .glint--b { display: none; }
  .glint { animation: none; opacity: 0.6; }
}