/* A held stage: scrolling raises the water until the page is full. The product's promise,
   acted out. Without motion it is one plain screen. */
/* Stages fill the largest viewport so no gap opens when a phone hides its browser bars;
   their content is placed in svh so it still fits while the bars are showing. */
.tide { height: 100lvh; }
.tide__stage { position: relative; height: 100lvh; overflow: clip; background: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .js .tide { height: 170lvh; }
  .js .tide__stage { position: sticky; top: 0; }
}

/* taste-skill-ignore: the owner asked for a blue gradient in the water. */
.water { position: absolute; inset: 0; background: var(--ocean) var(--tide); will-change: clip-path; }
.ascii { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The surface rests through the headline's second line, so that line is split in two colours. */
.hero { --rest: 44svh; }
.hero .water { clip-path: inset(var(--rest) 0 0 0); }
.tide__title { position: absolute; left: var(--margin); right: var(--margin); margin: 0; color: var(--ocean); white-space: nowrap; }
/* At this size each first letter carries its own side bearing, so each line is pulled onto the margin alone. */
.tide__title .line { margin-left: var(--optical, 0); }
.line--t { --optical: -0.02em; }
.line--f, .line--l { --optical: -0.055em; }
.tide__title--under { color: var(--white); }
.hero .tide__title { top: var(--rest); transform: translateY(-75%); }
.tide__title .line { display: block; overflow: clip; padding-block: 0.02em 0.16em; margin-block: -0.02em -0.16em; }
.tide__title .line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .line > span { animation: line-rise 1200ms var(--ease-expo) both; }
  .js .hero .line:nth-child(2) > span { animation-delay: 90ms; }
  .js .hero__foot { animation: foot-in 900ms var(--ease-expo) 500ms both; }
}
@keyframes line-rise { from { transform: translateY(110%); } }
@keyframes foot-in { from { opacity: 0; translate: 0 18px; } }

.hero__foot { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--rest) + 0.45 * var(--step-display) + clamp(1.25rem, 4svh, 2.5rem)); display: grid; justify-items: start; gap: 1.5rem; color: var(--white); }
.hero__foot p { max-width: 32ch; font-size: var(--step-lead); line-height: 1.42; }

/* Saved details floating in the water. Lift comes from the scroll, bob from the clock, on separate
   properties so neither overwrites the other. */
.drift__chip { position: absolute; left: var(--x); top: var(--y); padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: var(--step-small); line-height: 1.45; white-space: nowrap; translate: 0 calc(var(--share, 0) * var(--depth) * -1); opacity: calc(1 - var(--share, 0) * 3); }
.drift__chip b { display: block; font: 500 var(--step-small)/1.45 var(--font-display); color: var(--ocean); }
@media (prefers-reduced-motion: no-preference) {
  .js .drift__chip { animation: bob var(--t) ease-in-out infinite alternate; }
}
@keyframes bob { from { transform: translateY(-8px); } to { transform: translateY(8px); } }

@media (max-width: 860px) {
  .hero { --rest: 36svh; }
  .drift__chip { top: auto; bottom: calc(var(--y-phone) + 100lvh - 100svh); left: auto; translate: none; }
  .drift__chip:nth-child(odd) { left: var(--margin); }
  .drift__chip:nth-child(even) { right: var(--margin); }
  .drift__chip:nth-child(n+3) { display: none; }
}
@media (max-height: 760px) and (max-width: 860px) { .drift { display: none; } }
@media (max-height: 640px) and (min-width: 861px) { .drift__chip:nth-child(n+3) { display: none; } }