/* 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; }
/* Glints start at the photo's horizon (row 83 of 512), not at the layer's top, so no sparkle lands on sky or hills.
   The photo is cover-fitted into the layer (124% of the strip's height), centred, so its scale is
   max(width / 1536, 1.24 * height / 512) and the horizon sits 0.62 * height - 173 * scale below the layer's top
   (cq units = the strip). */
.sea { container-type: size; --sea-top: 15%; }
@supports (top: 1cqh) { .sea { --sea-top: max(0px, calc(62cqh - 173 * max(100cqw / 1536, 124cqh / 512))); } }
/* The photo and its glints share one layer, so the scroll parallax (reveal.js) moves them together. */
.sea__layer { position: absolute; left: 0; right: 0; top: -12%; height: 124%; will-change: transform; }
.sea__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 6% 50%; }
.glint {
  position: absolute; top: var(--sea-top); bottom: 0; left: 0; width: calc(var(--tile) * 4);
  -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); /* fade in below the horizon */
  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: calc(var(--sea-top) + 6px); 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; }
}