/* Tomorrow.io Terminal landing: the design tokens, then the component.
   The tokens are the Terminal's own (terminal-design-system/terminal.css, dark set; spacing and radii from the
   Terminal design system), so this page reads as part of the product. Everything below the tokens uses them; no
   colour, family, step or radius is written twice.

   One master scale drives the layout: --nm, TERMINAL's width. The lockup, the line, the bar and the keys all size
   from it through --u (1px at the 520px design width), so the page grows and shrinks as one piece, from a 375px phone
   to a 2560px monitor. */

:root {
  /* colour: the Terminal's dark set */
  --bg: #000000;
  --hi: #FFFFFF;
  --ink: #EDEEF2;
  --prose: #C9CDD6;
  --dim: #8B909C;
  --faint: #565B68;
  --rule: #23262E;
  --alert: #FF9D8F;                                     /* the one error line */
  --veil: rgba(255, 255, 255, .035);                    /* the bar's fill */
  --veil-hi: rgba(255, 255, 255, .06);
  --edge: rgba(255, 255, 255, .16);                     /* the bar's hairline */
  --edge-mid: rgba(255, 255, 255, .28);
  --edge-hi: rgba(255, 255, 255, .6);
  --halo: rgba(255, 255, 255, .05);                     /* the light behind the mark */
  --shade: rgba(0, 0, 0, .78);                          /* behind the welcome, over the map */
  --shade-soft: rgba(0, 0, 0, .45);
  --floor: rgba(0, 0, 0, .88);                          /* under the quiet line, over the map: a solid floor */

  /* type: Roboto to read, Roboto Condensed for names, Roboto Mono for the quiet lines */
  --sans: "Roboto", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cond: "Roboto Condensed", "Arial Narrow", var(--sans);
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;

  /* space and shape: the Terminal's steps */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-input: 2px;
  --r-chip: 2px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-quick: .2s;
  --t-step: .6s;
  --t-arrive: .8s;

  /* layers */
  --z-sky: 0;
  --z-page: 1;
  --z-message: 2;

  /* the master scale */
  --mark: min(84vw, 43svh, 760px);                      /* the live mark's square */
  --nm: min(86vw, 56svh, 720px);                        /* TERMINAL's width */
  --u: calc(var(--nm) / 520);                           /* 1px at the 520px design width */
}

/* ---- the page ---- */
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: var(--bg); color: var(--hi);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the sky and the world sit behind the page; the message sits over everything */
#space, #world, #worldfx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: var(--z-sky); }
main, footer { position: relative; z-index: var(--z-page); }

main {
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: clip;
  padding: clamp(var(--s-4), 4svh, 40px) var(--s-4) clamp(20px, 3svh, 36px);
  transition: opacity var(--t-step) var(--ease), visibility 0s;
}

/* ---- the mark ---- */
.stage { position: relative; width: var(--mark); aspect-ratio: 1; margin-bottom: calc(var(--mark) * -.06); }
.stage::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo), transparent 72%);
}
#mark { position: relative; display: block; width: 100%; height: 100%; }

/* ---- the lockup: WELCOME TO THE, the white logo, TERMINAL ---- */
.kicker, .lockup, .after { position: relative; z-index: 1; }   /* above the mark's square, which they tuck into */
.kicker {
  margin: 0 0 calc(var(--nm) * .05); padding-left: .32em; color: var(--dim);
  font: 500 clamp(11px, calc(12.5 * var(--u)), 16px)/1 var(--mono); letter-spacing: .32em; text-transform: uppercase;
}
.lockup { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--nm) * .0539); }
.lockup .wm { display: block; width: calc(var(--nm) * .7035); height: auto; }   /* the text-only wordmark at the kit's stacked-lockup width */
.lockup .nm { display: block; width: var(--nm); height: auto; overflow: visible; }
.lockup .nm g { fill: var(--hi); }
.lockup .nm path { opacity: 0; }
.lockup .nm path.on { opacity: 1; }
.lockup .nm .cur { fill: var(--hi); opacity: 0; }
.lockup .nm .cur.on { opacity: 1; }
/* the beta mark: a quiet tag at TERMINAL's top right, beside the wordmark (MKT-1750). TERMINAL is 30/185.65 of its width tall. */
.lockup .beta {
  position: absolute; right: 0; bottom: calc(var(--nm) * (30 / 185.65) + var(--nm) * .022); padding: .3em .4em .28em .58em;
  color: var(--prose); border: 1px solid var(--edge-hi); border-radius: var(--r-chip);
  font: 500 clamp(9px, calc(11.5 * var(--u)), 15px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}

/* arrival: the words come up as the mark forms, then TERMINAL types itself out */
.kicker, .lockup .wm, .lockup .beta, .after { opacity: 0; transform: translateY(10px); transition: opacity var(--t-arrive) var(--ease), transform var(--t-arrive) var(--ease); }
.ready .kicker { opacity: 1; transform: none; }
.ready .lockup .wm, .ready .lockup .beta { opacity: 1; transform: none; transition-delay: .12s; }
.ready .after { opacity: 1; transform: none; transition-delay: 1.3s; }

/* ---- the line and the bar ---- */
.after { display: grid; width: min(100%, calc(480 * var(--u))); margin-top: calc(var(--nm) * .06); text-align: center; }
.hello { grid-area: 1 / 1; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; }
.sub { margin: 0; color: var(--prose); font: 300 clamp(17px, calc(19.5 * var(--u)), 28px)/1.35 var(--sans); letter-spacing: .005em; }
[data-step="join"] .hello { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, .7s; }

form { margin: calc(26 * var(--u)) auto 0; }
.bar {
  display: flex; align-items: center; gap: var(--s-2); height: clamp(52px, calc(56 * var(--u)), 72px);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); border: 1px solid var(--edge); border-radius: var(--r-input);
  background: var(--veil); transition: border-color var(--t-quick), background var(--t-quick);
}
.bar:hover { border-color: var(--edge-mid); }
.bar:focus-within { border-color: var(--edge-hi); background: var(--veil-hi); }
.bar input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--hi);
  font: 400 clamp(16px, calc(16.5 * var(--u)), 21px) var(--sans);
}
.bar input::placeholder { color: var(--dim); }
.bar button {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2); height: 100%; padding: 0 var(--s-4) 0 var(--s-5);
  border: 0; border-radius: var(--r-input); background: var(--hi); color: var(--bg); cursor: pointer;
  font: 700 clamp(13px, calc(14 * var(--u)), 18px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--t-quick), transform var(--t-quick);
}
.bar button svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.bar button:hover { background: var(--ink); }
.bar button:hover svg { transform: translateX(3px); }
.bar button:active { transform: scale(.98); }
.bar button:disabled { cursor: default; background: var(--prose); }
.bar button:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
.bar button .wait, .sending .bar button .go { display: none; }
.sending .bar button .wait { display: inline; }

/* ⌘E: the keys that take you to the email, a first taste of the Terminal's keyboard */
.keys { flex: none; display: inline-flex; gap: var(--s-1); transition: opacity var(--t-quick); }
.keys kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  color: var(--dim); background: var(--veil); border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: var(--r-chip);
  font: 500 clamp(11px, calc(11.5 * var(--u)), 15px)/1 var(--mono);
  transition: transform .12s, border-color .12s, color .12s, border-bottom-width .12s;
}
.keys.press kbd { transform: translateY(1px); border-bottom-width: 1px; color: var(--hi); border-color: var(--edge-hi); }
.bar:focus-within .keys, .bar.filled .keys { opacity: 0; pointer-events: none; }
@media (hover: none), (pointer: coarse) { .keys { display: none; } }

#error { min-height: 1.5em; margin: var(--s-3) 0 0; color: var(--alert); font: 400 13.5px/1.5 var(--sans); }

/* ---- the quiet line at the bottom: what the colours are and when they are from ---- */
footer {
  display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) clamp(var(--s-4), 4vw, 40px) 20px;
  color: var(--dim); font: 400 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
footer a { color: inherit; text-decoration: underline; text-decoration-color: var(--edge-mid); text-underline-offset: 3px; }
footer a:hover, footer a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* ---- joined: the middle clears, and the welcome lands in the centre of the world ---- */
.cleared main { opacity: 0; visibility: hidden; transition: opacity var(--t-step) var(--ease), visibility 0s var(--t-step); }
.cleared footer { background: var(--floor); }
.welcomed #world, .welcomed #worldfx { opacity: .62; transition: opacity 1.4s var(--ease); }   /* the map steps back behind the welcome */
.listed {
  position: fixed; inset: 0; z-index: var(--z-message); display: grid; place-items: center; padding: var(--s-5);
  pointer-events: none; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s .9s;
}
.welcomed .listed { opacity: 1; visibility: visible; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s; }
.listed .in { position: relative; max-width: min(92vw, 980px); }
.listed .in::before {
  content: ""; position: absolute; inset: -110% -60%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--shade), var(--shade-soft) 60%, transparent);
}
.listed h2 { margin: 0; font: 700 clamp(34px, 5vw, 72px)/1.02 var(--cond); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.listed p { margin: var(--s-3) auto 0; color: var(--prose); font: 300 clamp(18px, 2vw, 26px)/1.4 var(--sans); text-wrap: balance; }

/* without WebGL the Earth stays a globe in the mark's square: keep it, clear only the words */
.no-gl.cleared main { opacity: 1; visibility: visible; }
.no-gl.cleared .kicker, .no-gl.cleared .lockup, .no-gl.cleared .after { opacity: 0; visibility: hidden; transition: opacity var(--t-step) var(--ease), visibility 0s var(--t-step); }

/* ---- small and short screens ---- */
@media (max-width: 520px) {
  :root { --mark: min(86vw, 40svh); --nm: 84vw; }
  .bar { height: auto; flex-wrap: wrap; padding: var(--s-1); }
  .bar input { height: 46px; padding: 0 var(--s-3); }
  .bar button { width: 100%; height: 46px; justify-content: center; }
  footer { flex-direction: column-reverse; align-items: center; text-align: center; gap: var(--s-1); }
}
@media (max-height: 700px) { :root { --mark: min(80vw, 31svh, 760px); } }

@media (prefers-reduced-motion: reduce) {
  .kicker, .lockup .wm, .lockup .beta, .after, .hello, .listed, main { transition: none !important; }
}