/* ==========================================================================
   Sonte teaser / pre-launch page
   Shares the fonts and palette with site.css but stands alone, so the two can
   evolve independently and the teaser can be deleted in one commit.
   No build step. No external requests.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --night1: #0E0F24;
  --night2: #191B3A;
  --peri: #6C70DC;
  --peri-soft: #8D90EC;
  --peri-lift: #A2A5F4;
  --dawn: #F0C98A;
  --on-night: #EDEEFB;
  --on-night-mut: #A9ACD8;
  --line: rgba(141, 144, 236, 0.22);
  --card: rgba(255, 255, 255, 0.05);
  --font-head: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--night1);
  color: var(--on-night);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

:focus-visible {
  outline: 2px solid var(--peri-lift);
  outline-offset: 4px;
  border-radius: 6px;
}

/* --- Atmosphere -----------------------------------------------------------
   Two large soft glows and a fine grain. The palette runs cool at the top to
   warm at the bottom-right: night giving way to dawn, which is the brand's
   own motif rather than decoration for its own sake. */

.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.glow--a {
  width: 60vmax;
  height: 60vmax;
  top: -26vmax;
  left: -18vmax;
  background: radial-gradient(circle, rgba(108, 112, 220, 0.62) 0%, rgba(108, 112, 220, 0) 68%);
  animation: drift-a 28s ease-in-out infinite alternate;
}

.glow--b {
  width: 52vmax;
  height: 52vmax;
  right: -20vmax;
  bottom: -24vmax;
  background: radial-gradient(circle, rgba(240, 201, 138, 0.34) 0%, rgba(240, 201, 138, 0) 66%);
  animation: drift-b 34s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); }
}

@keyframes drift-b {
  to { transform: translate3d(-8vmax, -5vmax, 0) scale(1.08); }
}

/* Fine grain so the gradients don't band on a big screen. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.top {
  padding: 30px 0;
}

.main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(32px, 7vh, 88px) 0;
}

.foot {
  padding: 30px 0 36px;
}

/* --- Wordmark ------------------------------------------------------------- */

.mark {
  display: inline-flex;
  /* baseline, not center: the moon is an x-height glyph that sits ON the
     baseline like the letters do. Centring puts it mid-line, floating above
     the text like a degree sign. */
  align-items: baseline;
  font-family: var(--font-head);
  font-weight: 300;
  /* Scales with the viewport the way the h1 does. A fixed size left the lockup
     at 25px against a 104px headline, reading as an afterthought. */
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: 0.24em;
  color: var(--on-night);
  text-decoration: none;
  line-height: 1;
  padding-right: 0.24em;
}

/* The real "o" lifted from the drawn wordmark, with the white paper separated
   out and the dark half recoloured for a night ground. Nicer than redrawing
   it: the crescent is tapered and carries the periwinkle gradient. */
.mark .moon {
  /* Measured off the drawn wordmark: the moon is 181px tall against a 179px
     lowercase n, so it matches x-height exactly and does not overshoot. `ex` IS
     the font's x-height, so this stays right at any size. Baseline alignment
     puts the glyph bottom on the text baseline, where the real one sits. */
  width: 1.02ex;
  height: 1.02ex;
  align-self: baseline;
  margin: 0 0.17em 0 0.05em;
  flex: none;
}

/* --- Content -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--on-night-mut);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Deliberately not scoped to .badge: the footer status reuses it, and the pill
   chrome around it is what differs between the two, not the dot. */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dawn);
  box-shadow: 0 0 10px var(--dawn);
  flex: none;
}

h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(42px, 8.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-wrap: balance;
}

/* Only 404.html still opens on a badge. On the homepage the h1 is the first
   child and .main's padding already supplies the space. */
.badge + h1 {
  margin-top: 26px;
}

/* Cool to warm: night giving way to morning. background-clip needs the
   transparent fill, with `color` as the fallback if clipping is unsupported. */
.grad {
  color: var(--peri-lift);
  background: linear-gradient(104deg, var(--peri-soft) 2%, #B9BBFF 34%, #F3D19A 72%, #E9B978 98%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    color: transparent;
  }
}

/* The thesis line. Brighter and wider-set than .sub, which carries the
   mechanism underneath it. */
.lede {
  margin-top: 26px;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--on-night);
  max-width: 34ch;
  text-wrap: pretty;
}

/* Inter ships here as a latin subset with upright faces only, so a real italic
   would be a browser-synthesised oblique sitting next to genuine weights. Keep
   <em> for the semantics and render the emphasis as brightness instead. */
.lede em {
  font-style: normal;
  font-weight: 600;
  color: var(--on-night);
}

.lede + .sub {
  margin-top: 16px;
}

.sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--on-night-mut);
  max-width: 46ch;
  text-wrap: pretty;
}

/* What the device reads. No separator characters between items: a `·` in a
   ::before is announced as literal text by VoiceOver and NVDA on top of the
   "list, 5 items" the <ul> already gives, and a border-left leaves a stray rule
   on the first item of the second line once it wraps. Tracking plus gap is
   enough. */
.measures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin-top: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--on-night-mut);
}

/* ASCII 2 in the shipped face. The character CO₂ (U+2082) is not in the latin
   subset and would fall back to a system font mid-word. */
.measures sub {
  font-size: 0.78em;
  position: relative;
  bottom: -0.22em;
  vertical-align: baseline;
  letter-spacing: 0;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 38px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
    transform 0.16s var(--ease);
}

.btn--primary {
  background: #5A5ECB;
  color: #fff;
  box-shadow: 0 8px 30px rgba(90, 94, 203, 0.35);
}

.btn--primary:hover {
  background: #4B4FB8;
  transform: translateY(-1px);
}

.btn--ghost {
  color: var(--on-night);
  border-color: var(--line);
}

.btn--ghost:hover {
  border-color: var(--peri-lift);
  background: var(--card);
  transform: translateY(-1px);
}

.note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--on-night-mut);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  font-size: 13.5px;
  color: var(--on-night-mut);
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.foot-row a {
  color: var(--on-night);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.foot-row a:hover {
  text-decoration-color: var(--peri-lift);
}

.tagline {
  color: var(--peri-lift);
  letter-spacing: 0.02em;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Entrance -------------------------------------------------------------
   Time-based, not scroll-driven, and every rule uses `both` fill so the end
   state is the visible one. The reduced-motion block below collapses the
   duration, which lands on that same visible end state. Nothing here can
   leave content stranded at opacity 0. */

.rise {
  animation: rise 0.85s var(--ease) both;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.16s; }
.rise-3 { animation-delay: 0.27s; }
.rise-4 { animation-delay: 0.38s; }
.rise-5 { animation-delay: 0.5s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 768px) {
  h1 {
    max-width: 100%;
  }

  .glow {
    filter: blur(64px);
  }

  .btn {
    width: 100%;
  }

  .cta {
    flex-direction: column;
    align-items: stretch;
  }
}