/* Coming soon — the holding page every route that isn't built yet points at.

   Two words on the limewash ground under a short rule. Everything is sized from the small
   viewport height, so the composition keeps its proportions on any screen and always arrives
   whole on the first one; the page runs a little past it only so there is something to scroll. */

:root {
  /* A short run of empty ground under the composition, so the page gives a little when you
     scroll instead of sitting dead. */
  --holding-scroll: clamp(4rem, 20svh, 14rem);
}

/* The composition holds the first screen; the extra length is ground below it. */
body {
  min-height: calc(100svh + var(--holding-scroll));
}

.holding {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  text-align: center;
}

/* The two rests either side of the words, as flex items rather than margins: the air above
   the words and the air below them then hold the same ratio at every window size, instead of
   one of them swallowing whatever is left over. min-height, not flex-basis, sets the gap kept
   above the words on a window too short for the ratio to matter — a basis would be added
   before the split and skew it. */
.holding::before,
.holding::after {
  content: "";
}

.holding::before {
  order: 1;
  flex: 1.35 0 0;
  min-height: clamp(2rem, 5svh, 4rem);
}

.holding::after {
  order: 3;
  flex: 1 0 0;
}

.holding__title {
  order: 2;
  font-family: var(--font-display);
  font-weight: var(--display-weight, 500);
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--color-ink);
}

/* A short rule above the words keeps the composition deliberate rather than merely empty */
.holding__title::before {
  content: "";
  display: block;
  width: clamp(2.5rem, 6vw, 4rem);
  height: 1px;
  margin: 0 auto clamp(1.25rem, 3svh, 2.25rem);
  background: color-mix(in srgb, var(--color-ink) 30%, transparent);
}

/* The one authored moment on the page: the words settle in. It plays once — there is no scroll
   here to trigger anything and nothing repeats. */
@media (prefers-reduced-motion: no-preference) {
  .holding__title {
    animation: title-settle 900ms 700ms var(--ease-out) both;
  }
}

@keyframes title-settle {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* The not-found page (app/global-not-found.tsx) wears the same composition, with a line or two
   under the title: one in each language, since the page cannot know which was wanted. */
.holding__text {
  order: 2;
  max-width: 34rem;
  margin-top: clamp(1.25rem, 3svh, 2rem);
  padding: 0 var(--frame-inset, 1.5rem);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-ink);
}

.holding__text + .holding__text {
  margin-top: 0.75rem;
}

.holding__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--color-ink) 40%, transparent);
}

.holding__text a:hover {
  text-decoration-color: currentColor;
}