/* 2026-09-26 15:30 CEST - The landing page on the app's black: the g in the corner, "before we’re goeeng" in
   Albert Sans ending in the exported wordmark, a quiet rotating subline, the sign-up on one thin line and small print. */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url("fonts/AlbertSans-350-latin.woff2") format("woff2");
}

.landing {
  --gutter: clamp(20px, 5vw, 64px);
  --small: 12px;
  --body: 16px;
  --settle: cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: 300;
}

/* ---- The centred column ---- */

.stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) 16px;
  text-align: center;
}

/* ---- The g, alone in the top corner, far from the hero's wordmark ---- */

.top {
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0;
}

.mark {
  display: block;
  width: 36px;
  height: 36px;
  margin-left: -6px;
  color: var(--ink);
}

/* ---- The hero: live Albert Sans ending in the exported wordmark, scaled and set on the same baseline ---- */

.hero {
  --hero: clamp(40px, min(7vw, 11vh), 112px);
  margin: 0;
  font-family: "Albert Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: var(--hero);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: 0.039em;
  white-space: nowrap;
}

/* The wordmark was outlined at 32 pt: 32 of its units make one em. Its baseline sits 6.4 units above its
   bottom, and its first g starts at the ink, so it takes back the g's own side bearing as a margin. */
.wordmark {
  display: inline-block;
  width: calc(113.77em / 32);
  height: calc(22.624em / 32);
  margin-left: 0.047em;
  vertical-align: -0.2em;
  overflow: visible;
  color: var(--ink);
}

/* ---- The quiet subline: the old slogan and its pairs ---- */

.line {
  margin: clamp(24px, 4vh, 44px) 0 0;
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.line-words {
  display: inline-block;
}

.pair {
  color: var(--ink);
}

.line-words.is-out {
  opacity: 0;
  transition: opacity 700ms ease-in;
}

/* A new pair arrives through a soft mask sweeping left to right. */
.line-words.is-in {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: wipe 1600ms var(--settle) both;
}

@keyframes wipe {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* ---- The beta sign-up ---- */

.beta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 420px);
  margin-top: clamp(40px, 8vh, 88px);
}

.beta-line,
.beta-details,
.beta .beta-note {
  margin: 0;
  font-size: var(--small);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-wrap: balance;
}

.beta-line time,
.beta-availability {
  color: var(--ink);
  white-space: nowrap;
}

.beta-details a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color 300ms var(--ease);
}

.beta-details a:hover {
  color: var(--ink);
}

.beta .beta-note {
  min-height: 1.7em;
  color: var(--ink);
}

/* One thin line holds the field and its quiet button; it brightens while the field has focus. */
.beta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  border-bottom: 1px solid var(--line);
  transition: border-color 300ms var(--ease);
}

.beta-row:focus-within {
  border-bottom-color: var(--ink);
}

.beta-field {
  flex: 1 1 auto;
  min-width: 0;
}

.beta-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--body);
  letter-spacing: 0.02em;
}

.beta-input::placeholder {
  color: var(--ink-muted);
}

.beta-input:focus-visible {
  outline: 0;
}

.beta .beta-button {
  flex: 0 0 auto;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--body);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.beta .beta-button:hover {
  opacity: 0.7;
}

.beta .beta-button:disabled {
  opacity: 0.4;
}

/* Turnstile stays out of the layout until a person has to interact with it. */
.beta-check {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.beta-check.is-shown {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

/* ---- The small print ---- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 28px;
  padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
  font-size: var(--small);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
}

.foot a {
  color: inherit;
  text-decoration: none;
  transition: color 300ms var(--ease);
}

.foot a:hover,
.foot a:focus-visible {
  color: var(--ink);
}

.word-toggle {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.word-toggle:hover,
.word-toggle:focus-visible {
  color: var(--ink);
}

@media (max-width: 600px) {
  .hero {
    --hero: min(13.5vw, 7.5vh);
    line-height: 1.05;
  }

  .hero-words {
    display: block;
  }

  .foot-links {
    flex-basis: 100%;
    gap: 4px 20px;
  }
}

@media (max-height: 700px) {
  .beta {
    gap: 10px;
    margin-top: clamp(28px, 6vh, 48px);
  }
}

/* Keep controls reachable when zoom or a software keyboard leaves too little room. */
@media (max-height: 460px) {
  .landing {
    overflow-y: auto;
    touch-action: pan-y pinch-zoom;
  }

  .stage {
    flex-shrink: 0;
    padding-block: 24px;
  }
}

/* ---- The intro: the words fade up, the wordmark converges as the brand's motion does, then the rest. ---- */

.hero-words,
.mark {
  animation: fade 900ms ease-out 150ms backwards;
}

.letter {
  animation: converge 420ms var(--settle) 700ms backwards;
}

.letter:nth-child(1) { --from: -14.761px; }
.letter:nth-child(2) { --from: -8.511px; }
.letter:nth-child(3) { --from: -2.616px; }
.letter:nth-child(4) { --from: 3.155px; }
.letter:nth-child(5) { --from: 8.972px; }
.letter:nth-child(6) { --from: 14.762px; }

.line,
.beta,
.foot {
  animation: fade 1200ms ease-out 1100ms backwards;
}

@keyframes converge {
  from {
    opacity: 0;
    transform: translateX(var(--from));
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-words,
  .mark,
  .letter,
  .line,
  .beta,
  .foot,
  .line-words.is-in {
    animation: none;
  }

  .line-words.is-out {
    transition: none;
  }
}