/* The front page: the wordmark resting on a hairline horizon, mirrored below as if on still water.
   Loaded after stillwater.css and built from its tokens. */

.fr { --reflect: #9fcac1; }

@media (prefers-color-scheme: light) {
  .fr { --reflect: #234540; }
}

.fr-main {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
  justify-items: center;
  padding: clamp(56px, 13vh, 150px) 0 clamp(32px, 6vh, 72px);
  text-align: center;
}

.fr-scene {
  /* --sink is the distance from the baseline to the bottom of the word's line box. It pulls the horizon up to
     the baseline and the reflection up to the horizon. front.js measures it where text-box can't trim. */
  --sink: 0.16em;
  display: grid;
  justify-items: center;
  width: 100%;
  font: 400 clamp(54px, 15vw, 172px)/1 var(--serif);
  letter-spacing: -0.02em;
}

.fr-word {
  margin: 0 0 calc(-1 * var(--sink));
  padding: 0 var(--gut);
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
}

.fr-horizon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: var(--line-2);
}

.fr-reflection {
  position: relative;
  width: 100%;
  height: 0.6em;
  margin-top: calc(-1 * var(--sink));
  overflow: hidden;
  color: var(--reflect);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent 92%);
}

.fr-reflection span {
  display: block;
  padding: 0 var(--gut);
  transform: scaleY(-1);
  filter: blur(0.5px);
  animation: fr-sway 9s ease-in-out infinite;
}

/* Breaks drifting down through the reflection, slowly: a surface that is still, but plainly water. */
.fr-reflection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--bg) 5px 7px, transparent 8px);
  opacity: 0.9;
  animation: fr-ripple 6s linear infinite;
}

/* Now and then a drop falls onto the water in front of the word and rings spread from where it lands.
   Each .fr-drop sits on the horizon line: ::before is the falling drop, ::after the two rings. */
.fr-drop {
  position: absolute;
  top: var(--y);
  left: calc(50% + var(--x));
  --x: 0em;
  --y: 0.15em;
  --d: 0s;
}
.fr-drop:nth-child(1) { --x: -1.9em; --y: 0.12em; --d: 0.4s; }
.fr-drop:nth-child(2) { --x: 0.7em; --y: 0.26em; --d: 1.6s; }
.fr-drop:nth-child(3) { --x: 2.3em; --y: 0.08em; --d: 2.9s; }
.fr-drop:nth-child(4) { --x: -0.5em; --y: 0.32em; --d: 3.9s; }

.fr-drop::before,
.fr-drop::after {
  content: "";
  position: absolute;
  opacity: 0;
  animation: 4.8s var(--d) infinite both;
}

.fr-drop::before {
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 0.07em;
  border-radius: 1px;
  background: var(--reflect);
  animation-name: fr-fall;
}

.fr-drop::after {
  left: -0.6em;
  top: -0.1em;
  width: 1.2em;
  height: 0.2em;
  background: radial-gradient(closest-side, transparent 52%, var(--reflect) 57%, transparent 63%,
    transparent 82%, var(--reflect) 88%, transparent 95%);
  animation-name: fr-ring;
}

@supports (text-box: trim-both cap alphabetic) {
  .fr-word, .fr-reflection span { text-box: trim-both cap alphabetic; }
  .fr-word, .fr-reflection { margin: 0; }
}

.fr-copy {
  display: grid;
  justify-items: center;
  max-width: 620px;
  margin-top: clamp(4px, 1.5vh, 18px);
  padding: 0 var(--gut);
}

.fr-tag {
  color: var(--ink);
  font: 400 clamp(20px, 2.3vw, 26px)/1.35 var(--serif);
  text-wrap: balance;
}

.fr-open { height: 46px; margin-top: 30px; padding: 0 26px; font-size: 15px; }

.fr-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
  font-size: 13.5px;
}
.fr-links a { color: var(--mute); text-decoration: none; }
.fr-links .fr-x { display: inline-flex; align-items: center; }

.fr-ca {
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--faint);
  font: 12.5px/1.4 var(--mono);
  letter-spacing: 0.02em;
}
.fr-ca span { color: var(--mute); }
.fr-ca-copy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mute);
  font: inherit;
  letter-spacing: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.fr-ca-copy:hover { color: var(--ink); }
.fr-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
}

@keyframes fr-ripple { to { background-position: 0 8px; } }
@keyframes fr-sway {
  0%, 100% { transform: scaleY(-1) skewX(0deg) translateX(0); }
  25% { transform: scaleY(-1) skewX(1.8deg) translateX(3px); }
  75% { transform: scaleY(-1) skewX(-1.8deg) translateX(-3px); }
}

@keyframes fr-fall {
  0% { transform: translateY(-0.55em); opacity: 0; animation-timing-function: ease-in; }
  2% { opacity: 0.75; animation-timing-function: ease-in; }
  7% { transform: translateY(0); opacity: 0.75; }
  7.5%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes fr-ring {
  0%, 7% { transform: scale(0.1); opacity: 0; }
  8% { transform: scale(0.15); opacity: 0.85; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
  45%, 100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-reflection span, .fr-reflection::after { animation: none; }
  .fr-drop { display: none; }
}

@media (max-width: 640px) {
  .fr-open { margin-top: 26px; }
  .fr-ca { font-size: 11px; }
}