@font-face {
  font-family: "Imbue Display";
  src: url("fonts/imbue-display.woff2") format("woff2");
  font-weight: 200 400;
  font-display: swap;
}

@font-face {
  font-family: "Imbue Text";
  src: url("fonts/imbue-text.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --sky-top: #8e9b95;
  --sky-mid: #c9cdc0;
  --fog-ivory: #ebe7d8;
  --bridge: #8a958d;
  --ink: #2c3833;
  --amber: #ffb04f;
  --amber-core: #fff2da;
  --horizon-haze: #d9d8c8;
  --horizon-edge: #9aa39a;
  --water-near: #2a3532;
  --water-deep: #121918;
  --line: #e4e0d0;
  --line-dim: rgba(228, 224, 208, 0.8);
  --horizon: 56%;
  --line-size: 13px;
  --line-track: 0.32em;
  --gutter: clamp(22px, 4.6vh, 44px);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 160ms;
  --t-reveal: 1400ms;
  --serif-fallback: "Bodoni 72 Oldstyle", "Didot", "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--water-deep);
}

body {
  position: relative;
  background:
    linear-gradient(to bottom,
      var(--sky-top) 0%,
      var(--sky-mid) 30%,
      var(--fog-ivory) calc(var(--horizon) - 0.4%),
      var(--horizon-haze) var(--horizon),
      var(--horizon-edge) calc(var(--horizon) + 0.25%),
      var(--water-near) calc(var(--horizon) + 9%),
      var(--water-deep) 100%);
  font-family: "Imbue Text", var(--serif-fallback);
  color: var(--line);
  -webkit-font-smoothing: antialiased;
}

.still {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.word {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--horizon) + 1.4vh);
  margin: 0;
  text-align: center;
  font-family: "Imbue Display", var(--serif-fallback);
  font-weight: 260;
  font-size: min(50vh, 36vw);
  line-height: 0.74;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.86;
}

.word-reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon) + 1.4vh);
  text-align: center;
  font-family: "Imbue Display", var(--serif-fallback);
  font-weight: 260;
  font-size: min(50vh, 36vw);
  line-height: 0.74;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.42;
  transform: scaleY(-1);
  filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
}

.lamps {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon) - 9vh);
  height: 2vh;
  background:
    radial-gradient(circle at 50% 50%, var(--amber-core) 0 1.6px, rgba(255, 176, 79, 0.55) 2.5px, rgba(255, 176, 79, 0) 9px)
    0 0 / calc(100vw / 26) 100% repeat-x;
}

.streaks {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon) + 8.4vh);
  height: 30vh;
  background:
    linear-gradient(to right, transparent calc(50% - 1.5px), rgba(255, 176, 79, 0.42) 50%, transparent calc(50% + 1.5px))
    0 0 / calc(100vw / 26) 100% repeat-x;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px), linear-gradient(to bottom, #000, transparent);
  -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px), linear-gradient(to bottom, #000, transparent);
  mask-composite: intersect;
  filter: blur(0.6px);
}

.river {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease-out);
}

.gl-ready .river { opacity: 1; }

.mark {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--gutter);
  margin: 0;
  text-align: center;
  font-size: var(--line-size);
  letter-spacing: var(--line-track);
  text-transform: lowercase;
  color: var(--line-dim);
  z-index: 2;
}

.mark a {
  color: var(--line);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: color var(--t-fast) var(--ease-out), background-size var(--t-fast) var(--ease-out);
}

.mark a:hover { color: var(--amber); }
.mark a:active { color: var(--amber-core); }

.mark a:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 6px;
  border-radius: 1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .river { transition: none; }
  .mark a { transition: none; }
}