/*
 * zero.armorcode.ai: the homepage on ac-desktop.mocks.armorcode.ai (armor-code/ui-for-pm, branch ac-desktop:
 * src/views/DesktopHome, src/components/ZeroPage), as a static page. The app's dark scheme, its type and one
 * centered column (the icon, the name, the tagline, the download) above the horizon. Values are the app's tokens
 * (ac-desktop packages/ui tokens.css), as on the mocks page. Dark only, like the app's onboarding it follows.
 */

/* Where San Francisco isn't installed (Windows, Linux, Android), Inter stands in for it, as on the mocks site. */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --z-bg: #101216;
  --z-fg: #eceef2;
  --z-muted: #9ea1a8;
  --z-accent: #7c6bff;
  --z-accent-hover: #8d7eff;
  --z-ring: rgba(124, 107, 255, 0.55);
  --z-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', InterVariable, 'Inter', system-ui, sans-serif;
  --z-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', InterVariable, 'Inter', system-ui, sans-serif;
  color-scheme: dark;
  background: var(--z-bg);
}

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

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--z-bg);
  color: var(--z-fg);
  font-family: var(--z-sans);
  font-size: 14px;
  /* The mocks site's (its stylesheet's body), which sets the tagline's and the note's spacing. */
  line-height: 1.5715;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

/*
 * One centered column above the horizon, which sits 65% of the way down. The bottom padding keeps the column
 * above it.
 */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(56px, 12vh) 24px 32vh;
  text-align: center;
}

/* The icon is the tile itself, glass finish included; the shadow lifts it off the page. */
.page__icon {
  display: block;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  margin-bottom: 24px;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* The app's name and tagline, as on its start screen. */
.brand__title {
  margin: 0;
  color: var(--z-fg);
  font-family: var(--z-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.brand__lead {
  margin: 8px 0 0;
  color: var(--z-muted);
  font-size: 17px;
  font-weight: 500;
  text-wrap: balance;
}

/*
 * The name's reveal (home.js): the first time, ArmorCode grows into ArmorCode Zero. Until it plays, Zero takes no
 * room and can't be seen; it's still in the heading for screen readers.
 */
.name {
  white-space: nowrap;
}

.name__zero {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}

.name__zero > span {
  display: inline-block;
}

[data-reveal] .name__zero {
  width: 0;
}

[data-reveal] .name__zero > span {
  opacity: 0;
}

/* The download, centered under the tagline. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

/* The app's large primary button (packages/ui Button). */
.button {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 150ms,
    color 150ms,
    transform 150ms;
}

.button:active {
  transform: scale(0.98);
}

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

.button--primary {
  background: var(--z-accent);
  color: #fff;
}

.button--primary:hover {
  background: var(--z-accent-hover);
}

.button__icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.note {
  margin: 16px 0 0;
  color: var(--z-muted);
  font-size: 13px;
  text-wrap: balance;
}

/*
 * The horizon fills the window behind the page and stays put as it scrolls. home.js draws it with WebGL; before
 * it starts (html.js) the window is the page's color, and without WebGL or JavaScript it's a still of the horizon.
 */
.art {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--z-bg) url('/horizon.webp') center 65% / cover no-repeat;
  pointer-events: none;
}

.js .art {
  background-image: none;
}

.js .art.art--still {
  background-image: url('/horizon.webp');
}

.art canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* At phone width the column starts higher and its icon and titles step down, so it stays above the horizon. */
@media (max-width: 560px) {
  .page {
    padding-top: 80px;
  }

  .page__icon {
    width: 88px;
    height: 88px;
    margin-bottom: 20px;
  }

  .brand__title {
    font-size: 32px;
  }

  .brand__lead {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:active {
    transform: none;
  }
}