/* The waiting page: the main site's clear sky, a single screen of it. */
:root {
  --sky: #dcebff;
  --sky-deep: #c4dcff;
  --peach: #ffdcc2;
  --ink: #14182b;
  --ink-soft: #4a5370;
  --indigo: #527bff;
  --cloud: #ffffff;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --top: var(--sky-deep);
  --middle: var(--sky);
  --bottom: var(--peach);
  --cloud-tint: var(--cloud);
  color-scheme: light;
}
/* the same three skies as the main site's scroll, by the visitor's hour */
:root[data-sky="evening"] { --top: #a593cf; --middle: #f6b296; --bottom: #ffdcc2; --ink: #1f1b3a; --ink-soft: #4a3d78; --cloud-tint: #ffe9dc; }
:root[data-sky="night"] { --top: #0b0d1e; --middle: #12152d; --bottom: #262450; --ink: #eef0ff; --ink-soft: #b9bedc; --cloud-tint: #3a3768; color-scheme: dark; }

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--top) 0%, var(--middle) 58%, var(--bottom) 100%) fixed;
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--display);
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

.top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 800; font-size: 1.25rem; }
.lang { text-decoration: none; font-weight: 600; font-size: 1rem; color: var(--ink-soft); }
.lang:hover { color: var(--ink); }

main {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
}
h1 {
  margin: 0; max-width: 11em;
  font-weight: 800; font-size: clamp(3.2rem, 10vw, 7.4rem); line-height: .92; letter-spacing: -0.04em;
  font-variation-settings: "opsz" 96, "wdth" 82;
  text-wrap: balance;
}
.lede { margin: 1.2rem 0 0; font-size: 1.25rem; color: var(--ink-soft); }
footer { position: relative; z-index: 2; padding: 0 clamp(1rem, 4vw, 3rem) 1.2rem; font-size: .85rem; color: var(--ink-soft); }

/* the main site's clouds, drifting */
.cloud { position: absolute; z-index: 1; background: var(--cloud-tint); border-radius: 999px; opacity: .9; animation: drift 34s ease-in-out infinite alternate; translate: var(--px, 0) var(--py, 0); transition: translate .5s ease-out; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.c1 { width: 220px; height: 56px; top: 20%; left: 56%; }
.c1::before { width: 90px; height: 90px; left: 34px; top: -46px; }
.c1::after { width: 64px; height: 64px; left: 112px; top: -28px; }
.c2 { width: 160px; height: 42px; bottom: 12%; left: 6%; opacity: .7; animation-duration: 46s; }
.c2::before { width: 64px; height: 64px; left: 26px; top: -34px; }
.c2::after { width: 48px; height: 48px; left: 82px; top: -20px; }
.c3 { width: 300px; height: 70px; bottom: 26%; right: -70px; opacity: .8; animation-duration: 40s; animation-direction: alternate-reverse; }
.c3::before { width: 120px; height: 120px; left: 50px; top: -64px; }
.c3::after { width: 86px; height: 86px; left: 160px; top: -40px; }

@keyframes drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }

@media (max-width: 640px) {
  .c1 { top: 11%; left: 48%; transform: scale(.7); animation: none; }
  .c3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; transition: none; }
}