/* The Tide · motion layer (Experience Bot). Direction A "Calm luxury", Q1 fully off-screen, Q2 phones free-scroll.
   PPB owns the water (front-door.css U2: markup, band art, heights). This file only: phones' one band, the foam
   recolour for sand (--nl-tide-foam / --nl-tide-foam-2, PPB may set them; fallbacks here), the glint, the end state.
   All movement is WAAPI from assets/js/tide.js, keyed off #about's top only (transform + opacity, no blur, no inline styles).
   No JS = html never gets .tide-on = the water is not drawn (front-door.css end state). */

/* fit: PPB's height (clamp 340px..62vh..620px) can be taller than #about (about 367px at 1440x900), and #about clips, which
   cut the wave crest and foam off flat. Cap at #about's own height so the crest always shows. (Hook for PPB to own in front-door.css.) */
html.tide-on #about .nl-tide { max-height: 100%; }

/* phones: one band */
@media (max-width: 640px) {
  html.tide-on #about .nl-tide__band--mid,
  html.tide-on #about .nl-tide__band--foam { display: none; }
}

/* foam on sand: PPB's hairlines were gold-300 + white (they vanish once they cross onto sand). Same two curves, drawn as
   alpha masks so the colours come from variables: line 1 gold-700, line 2 ink at 32%. */
html.tide-on #about .nl-tide__band--foam { background: none; }
html.tide-on #about .nl-tide__band--foam::before,
html.tide-on #about .nl-tide__band--foam::after { content: ""; position: absolute; inset: 0; }
html.tide-on #about .nl-tide__band--foam::before {
  background: var(--nl-tide-foam, var(--gold-700, #7A6656));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 330C160 366 300 308 470 344 660 384 800 370 980 330 1150 292 1280 356 1440 318' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 330C160 366 300 308 470 344 660 384 800 370 980 330 1150 292 1280 356 1440 318' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html.tide-on #about .nl-tide__band--foam::after {
  background: var(--nl-tide-foam-2, color-mix(in oklab, var(--pub-text, #141a4a) 32%, transparent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 346C170 380 320 324 490 360 670 396 820 384 990 346 1160 310 1290 368 1440 334' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 346C170 380 320 324 490 360 670 396 820 384 990 346 1160 310 1290 368 1440 334' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* the glint: one soft light that runs along the gold horizon once, as the water starts to leave */
#hero-section .pub-horizon > .tide-glint {
  position: absolute; top: 0; bottom: 0; left: 0; width: 28%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .95) 50%, transparent);
}

/* end state: once the water has left, it stops being drawn (it comes back if you scroll up) */
html.tide-on.tide-gone #about .nl-tide { visibility: hidden; }

/* 2.2: the read probe (tide.js): 1px at About's top, inside the water layer; never painted */
#about .nl-tide > .nl-tide__probe { position: absolute; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }