/* nano.me's styles, on top of tokens.css (nanoco-design). Serg's coming-soon page, 5–6 Oct: one screen, the headline
   behind the sandbox, the tray showing the words it covers in mint (the x-ray), the "Coming soon" seal on the tray's
   corner, and the form floating over the asset. Every value is a DS token unless marked [OFF-SYSTEM] or written as
   Serg's own number. Run: see index.html. */

/* DM Sans, self-hosted (fonts/, SIL Open Font License: fonts/OFL.txt). Latin and Latin Extended, four weights. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/dm-sans-latin-800-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext-800-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- the page base ---- */

:root {
  --page-max: 1120px;
  --gutter: var(--space-5);
}

@media (max-width: 640px) {
  :root {
    --gutter: var(--space-2);
  }
}

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

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

/* A warmer ground than paper: the DS surface-2 (ink-50). The tray's plate follows through --color-bg. */
body {
  --color-bg: var(--color-surface-2);
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
}

h1,
p {
  margin: 0;
}

/* One screen: a fixed height, so the middle row takes what is left and clips the asset's empty bands. */
.soon {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the column is the screen: nothing inside can widen it */
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* ---- the top bar: the typed logo on the left, Member login on the right ---- */

.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}

.site-bar__logo {
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: var(--tracking-xl);
  font-weight: var(--font-weight-extrabold);
  text-decoration: none;
}

/* Serg, 5 Oct: "Member login", a text button at 14 (the DS --text-sm) on every size. Its box is 44px tall, the usual
   smallest tap target, while the words stay small. */
.login {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  padding: 13px 0;
  margin-block: -6px; /* the 44px tap area overhangs, so the bar keeps the logo's height */
}

.login:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
  border-radius: var(--radius-half);
}

/* ---- the asset: the Hairline sandbox, in the DS palette through Hairline's --hairline-* hooks ---- */

.sandbox {
  --hairline-stroke: 1.4; /* Hairline's 0.9 + 0.5 (Serg, 5 Oct: more presence) */
  --hairline-plate: var(--color-bg);
  --hairline-hi: var(--color-mint-400); /* Serg, 8 Oct: the brand mint, as the button and the x-ray words (was teal) */
  --hairline-edge: var(--color-text-disabled);
  --hairline-mid: var(--color-border-strong);
  --hairline-lo: var(--color-border);
  /* the window holds Andy, a square clip: square, and half the 56 the figure's own screen uses (Serg, 6 Oct) */
  --sandbox-aspect: 1;
  --sandbox-window: 28;
}

/* Where nobody can hover (a phone, a tablet, a narrow window), the window roams on its own, bouncing from wall to wall
   like a screensaver (Serg, 5 Oct), and Andy is 15% bigger (Serg, 6 Oct; the tray keeps its size, page.js). */
@media (hover: none), (max-width: 640px) {
  .sandbox {
    --sandbox-roam: 22;
    --sandbox-window: 32.2;
  }
}

/* With Andy on the window, the figure's own line-art screen and its three dots are hidden: at this window size they
   would stick out past it and follow it around (6 Oct). */
.sandbox g:has(> .face) > .ui,
.sandbox g:has(> .face) > ellipse {
  display: none;
}

/* ---- the stage: the headline, the asset and the x-ray share one cell, centred on each other ---- */

.stage {
  position: relative;
  display: grid;
  grid-template-rows: minmax(
      0,
      1fr
    ); /* the row is the stage, not the asset's box, so the headline centres on the screen */
  align-items: center;
  justify-items: center;
  padding-inline: var(--gutter);
  overflow: visible; /* the asset may run on under the bar and the form; the page clips at the screen (.soon) */
}

h1,
.xray,
.stage .sandbox {
  grid-area: 1 / 1;
}

h1,
.xray text {
  font-family: var(--font-sans);
  font-size: clamp(52px, 6.6vw, 128px); /* [OFF-SYSTEM] the DS 5xl stops at 72px; the hero's own size */
  letter-spacing: var(--tracking-5xl);
  font-weight: var(--font-weight-extrabold);
}

h1 {
  width: 80%;
  line-height: calc(74 / 72);
  text-align: center;
  text-wrap: balance;
}

.stage .sandbox {
  width: min(100%, 1100px, calc((100dvh - 220px) * 5 / 4 * 1.2));
  z-index: 1;
}

/* The x-ray: the words the tray covers, drawn again over it in solid mint (Serg, 5 Oct), cut to the tray's outline by
   page.js. The window lies under them, so it never blocks the words. */
.xray {
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.xray text {
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--color-mint-400); /* the brand mint, a primitive: no semantic token carries it in light */
}

/* ---- the seal, as on allstamps.club: a 120-unit circle of text, spinning once in 26 s, a thin ring inside ---- */

.seal {
  position: absolute;
  z-index: 3;
  width: clamp(84px, 6.8vw, 100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.seal svg {
  width: 100%;
  height: 100%;
  animation: spin 26s linear infinite;
}

.seal__text {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--font-weight-medium);
  fill: var(--color-text);
  text-transform: uppercase;
}

.seal__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 61%;
  height: 61%;
  border: 1px solid var(--color-text);
  border-radius: 50%;
}

.seal__sr,
.notify__done .notify__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seal svg {
    animation: none;
  }
}

/* ---- the action: "Powered by" the NanoClaw pill, then the call to action; it floats over the asset, as does the bar ---- */

.action {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter) var(--space-3); /* Serg, 8 Oct: the whole group lower (was 40 below) */
}

.soon .site-bar,
.action {
  position: relative;
  z-index: 4;
}

.powered {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-sm);
  color: var(--color-text-soft);
}

/* NanoCo's Terms and Privacy Policy under the call to action: quiet, as the sign-in's own legal line. */
.legal {
  display: flex;
  gap: var(--space-1);
  margin: calc(-1 * var(--space-1)) 0 0; /* 8 under the pill, not 16: it belongs to the call to action (Serg, 8 Oct) */
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--tracking-xs);
  color: var(--color-text-soft);
}

.legal a {
  color: inherit;
  text-decoration: none; /* Serg, 8 Oct: two underlined links read as clutter under the pill */
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The NanoClaw GitHub pill: the live star count, linking to the repository. */
.stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--size-control-sm);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg); /* it floats over the tray on a short phone, so it gets the ground behind it */
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.stars:hover {
  border-color: var(--color-border-strong);
}

.stars:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.stars__count {
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- the call to action, from Serg's Figma (Nano-platform, 1474:28325, 8 Oct): just a button, mint, 4px inside a
   paper ring. Back from a sign-in on the waitlist, the ring keeps its shape and says one line in the success colour
   (Serg's success state, 1278:33560). ---- */

.notify {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: min(263px, 100%); /* the Figma's ring, never wider than the column; the waitlist line widens it */
  max-width: 100%;
  height: 56px; /* Serg, 5 Oct: 8 smaller than his Figma's 64 (the DS --size-control-lg) */
  margin-inline: auto;
  padding: 4px;
  background: var(--color-paper);
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-3);
}

.notify__button {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-mint-400); /* Serg's Figma: mint/400 with the text colour on it */
  box-shadow: var(--elevation-1);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  text-decoration: none;
  white-space: nowrap;
}

/* Hover (Serg, 8 Oct): a soft glow of the button's own mint, blurred, spilling past the ring. Pointer devices only, so a
   tap on a phone doesn't leave it lit. */
.notify__button {
  transition: box-shadow var(--motion-base) var(--ease-standard);
}

@media (hover: hover) {
  .notify__button:hover {
    box-shadow:
      var(--elevation-1),
      0 0 14px 2px color-mix(in srgb, var(--color-mint-400) 41%, transparent),
      0 6px 32px 6px color-mix(in srgb, var(--color-mint-400) 34%, transparent); /* Serg, 8 Oct: 25% softer (was 55/45) */
  }
}

/* Keyboard only: a neutral ring, so the button can still be found without a mouse. */
.notify__button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* On the waitlist the button is gone from the first paint (the person has just been through it), so the ring takes the
   line's width at once and never jumps; the line writes in a beat later. */
.notify:not([data-state="idle"]) .notify__button {
  display: none;
}

/* ...and the line writes itself in: each letter fades up out of a soft blur, 16ms after the one before. One line, the
   only place the page says it (Serg, 8 Oct), in medium (one weight up from regular). It never breaks: where a screen
   is too narrow for it at 1rem, it gets smaller. Its room on a phone is the screen less 72px (the gutters, the ring's
   4 and the line's 16 each side); the line is 14.41em wide in medium, so 14.6 keeps a hair of air. Change 14.6 with
   the copy. */
.notify__done {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-inline: 20px; /* 24 from the ring's edge to the words */
  margin: 0;
  font-size: min(1rem, calc((100vw - 72px) / 14.6));
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  color: var(--color-success);
  white-space: nowrap;
}

.notify:not([data-state="idle"]) .notify__done {
  display: flex;
}

.notify__done:focus {
  outline: 0;
}

.notify__done .notify__word {
  display: inline-block;
  white-space: nowrap;
}

.notify__done .notify__word > span {
  display: inline-block;
  opacity: 0;
}

.notify[data-state="done"] .notify__done .notify__word > span {
  animation: notify-write var(--motion-slow) var(--ease-enter) both;
  animation-delay: calc(var(--motion-fast) + var(--i) * 16ms);
}

@keyframes notify-write {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(0.3em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes notify-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced motion: the whole line fades in at once. */
@media (prefers-reduced-motion: reduce) {
  .notify[data-state="done"] .notify__done .notify__word > span {
    animation: notify-fade var(--motion-base) linear both;
    animation-delay: 0s;
  }
}

/* ---- phones ---- */

@media (max-width: 640px) {
  /* Nothing overlaps: the headline, then the asset right under it, centred as a pair (page.js sets --pair). */
  h1,
  .xray text {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-4xl);
  }

  h1 {
    width: 100%;
    line-height: calc(60 / 56);
  }

  h1,
  .xray {
    transform: translateY(var(--pair, 0px));
  }

  /* Serg, 5 Oct: the tray wider than the screen, its edges past both sides, then 20% bigger again so it reaches
     further down. The box is 163% of the screen; the tray is drawn across 79.5% of it. */
  .stage .sandbox {
    width: 163vw;
    max-width: none;
    margin-inline: calc(50% - 81.5vw);
  }

  /* Serg, 5 Oct: smaller at common mobile sizes, a 52px ring around a 44px button, 44 being the usual smallest tap
     target. */
  .notify {
    height: 52px;
  }

  .notify__done {
    padding-inline: 16px;
  }

  .action {
    padding-bottom: var(--space-2); /* Serg, 8 Oct: the group lower on a phone */
  }
}