/* The hero, held still behind the letters: Monet's 1899 Japanese Footbridge, full bleed.
   One WebGL pass moves the pond beneath the bridge, lets the leaves breathe,
   mirrors the name in the water and answers the pointer. */

:root {
  --line: 62%;
  --name-size: clamp(3rem, 15vw, 22rem);
  --paint-focus: 12%;
}

.lake { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; min-height: 600px; overflow: hidden; background: #5f7a45; isolation: isolate; }

.lake__still { position: absolute; inset: 0; }
.lake__paint { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% var(--paint-focus); }
.lake.gl-on .lake__still { visibility: hidden; }
/* a soft shade under the name and along the foot so the cream type reads on the greens */
.lake::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 26% at 50% var(--line), rgba(20, 30, 18, 0.32), transparent 70%),
    linear-gradient(transparent 72%, rgba(16, 24, 16, 0.42));
}

.lake__gl, .lake__petals { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.lake__gl { opacity: 0; transition: opacity 0.6s ease; }
.lake.gl-on .lake__gl { opacity: 1; }
.lake__petals { z-index: 3; pointer-events: none; }

.lake__name {
  position: absolute; left: 0; right: 0; bottom: calc(100% - var(--line)); z-index: 2;
  translate: 0 var(--drop, 0.2em);
  font-family: var(--font-display); font-weight: 300; font-size: var(--name-size); line-height: 1; letter-spacing: -0.035em;
  white-space: nowrap; text-align: center; color: #fbf8ef;
  text-shadow: 0 2px 30px rgba(14, 22, 12, 0.45), 0 1px 3px rgba(14, 22, 12, 0.35);
  clip-path: inset(-40% -5% var(--drop, 0.2em) -5%);
}
/* just a touch more weight than the cut gives: a hairline stroke in the same colour */
.lake__name { --heft: 0.9px; -webkit-text-stroke: var(--heft) currentColor; paint-order: stroke fill; }
/* the names rise out of the water whatever the motion toggle says (.hero-alive, set in index.html) */
.hero-alive .lake__name .char { transform: translateY(105%); }
.hero-alive .lake__name:not(:has(.char)) { visibility: hidden; }


/* the names and details, faded as a whole once the letters arrive */
.lake__words { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lake__words a { pointer-events: auto; }
.lake__words.is-away { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }

/* the painting dims a little while a letter is being read over it */
.lake__shade { position: absolute; inset: 0; z-index: 5; background: #1a2414; opacity: 0; pointer-events: none; }

@media (max-width: 1000px) {
  :root { --line: 60%; --name-size: 15.8vw; }
  .lake__name { font-weight: 400; letter-spacing: -0.04em; --heft: 0.5px; }
}