@font-face {
  font-family: Sonanta;
  src: url('../fonts/sonanta-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Iosevka Etoile";
  src: url('../fonts/iosevka-etoile-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #142e43;
  color: #fffaf0;
  font-family: Sonanta, Georgia, "Times New Roman", serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
}

.landing__background,
.landing__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.landing__background {
  object-fit: cover;
  object-position: 65% center;
}

/* Darken the bright sky behind the raised title and subtitle. */
.landing__veil {
  background: linear-gradient(180deg,
    rgb(12 29 43 / 58%) 0%,
    rgb(12 29 43 / 55%) 45%,
    rgb(12 29 43 / 25%) 70%,
    rgb(12 29 43 / 18%) 100%);
}

.landing__wordmark {
  --letter-start: .35s;
  --letter-stagger: .12s;
  --letter-duration: 2.8s;
  min-width: 0;
  margin-bottom: 20svh;
  text-align: center;
  text-shadow: 0 2px 18px rgb(5 18 30 / 55%);
}

.wordmark { margin: 0; font-weight: 400; }
.wordmark__first,
.wordmark__second { display: block; white-space: nowrap; }

.wordmark__letter,
.wordmark__space { display: inline-block; }

.wordmark__letter { transform-origin: 50% 65%; }
.wordmark__space { white-space: pre; }

.wordmark__first {
  font-size: clamp(2rem, 4.3vw, 4.6rem);
  line-height: 1.3;
  letter-spacing: .01em;
}

.wordmark__second {
  font-size: clamp(5.5rem, 12.5vw, 12.5rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  padding-right: .025em;
}

.landing__subtitle {
  max-width: 42ch;
  margin: 1.5rem auto 0;
  font-family: "Iosevka Etoile", Georgia, serif;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .025em;
  text-wrap: balance;
}

.horizon {
  display: block;
  width: clamp(5rem, 9vw, 9rem);
  height: auto;
  margin: 1.75rem auto 0;
  overflow: visible;
}

.horizon__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.horizon__point { fill: currentColor; }

/* Animation is opt-in. Without it, all content is already visible. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark__letter {
    animation: condense var(--letter-duration) cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--letter-start) + var(--letter-index) * var(--letter-stagger));
  }
  .landing__subtitle {
    animation: appear 250ms ease both;
    animation-delay: calc(var(--letter-start) + var(--last-letter-index) * var(--letter-stagger) + var(--letter-duration));
  }
  .horizon__line {
    transform-box: fill-box;
    transform-origin: center;
    animation: draw-horizon 1.1s cubic-bezier(.22, 1, .36, 1) 3.5s both;
  }
  .horizon__point { animation: appear .7s ease 4.1s both; }
}

/* Opacity reveals the actual image underneath each glyph, not a flat color.
   The glyph stays centered in its final slot: no travel or layout shifts. */
@keyframes condense {
  0% { opacity: 0; filter: blur(.16em); transform: scale(.8); }
  30% { opacity: .2; filter: blur(.09em); }
  65% { opacity: .75; filter: blur(.025em); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes draw-horizon {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: .8; transform: scaleX(1); }
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 600px) {
  .landing__background { object-position: 67% center; }
  .landing__wordmark { margin-bottom: 16svh; }
  .landing__subtitle { margin-top: 1.1rem; }
  .horizon { margin-top: 1.4rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .landing { padding-block: 1.5rem; }
  .landing__wordmark { margin-bottom: 8svh; }
  .wordmark__first { font-size: 1.75rem; }
  .wordmark__second { font-size: 5rem; }
  .landing__subtitle { margin-top: .7rem; font-size: 1rem; }
  .horizon { margin-top: .8rem; }
}