/* Product page styles. Colors and font stacks come from brand.css, shared with the docs. */

/* The site build copies these files from the docs' @fontsource packages. */
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/sora-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

:root {
  --page-width: 70rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Alerting devices and warnings; the darker light-mode amber keeps 3:1 contrast on the page. */
  --alert: #c77700;
  color-scheme: light;
}

[data-theme='dark'] {
  --alert: #f5b54a;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-ink);
  font: 400 1.125rem/1.6 var(--brand-font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--brand-font-heading);
  font-weight: 600;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.3125rem;
}

p {
  margin: 0;
}

a {
  color: var(--brand-accent-text);
  text-underline-offset: 0.18em;
}

code,
pre {
  font-family: var(--brand-font-mono);
  font-size: 0.875em;
}

:not(pre) > code {
  color: var(--brand-code);
}

pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--brand-line);
  border-radius: 0.4rem;
  background: var(--brand-surface);
  line-height: 1.55;
}

:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--brand-bg);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Header, sized like the docs navbar. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.75rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--brand-line);
  background: var(--brand-header);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-ink);
  font: 600 1.125rem var(--brand-font-heading);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.75rem);
}

.site-nav a {
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--brand-accent-text);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brand-ink);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--brand-surface);
}

.theme-icon {
  display: none;
}

[data-theme-choice='system'] .theme-icon--system,
[data-theme-choice='light'] .theme-icon--light,
[data-theme-choice='dark'] .theme-icon--dark {
  display: block;
}

/* Hero: the copy beside the fleet map, the page's one bold element. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 34em;
  margin-top: 1.5rem;
  color: var(--brand-ink-muted);
  font-size: 1.25rem;
}

.lede--small {
  margin-top: 1rem;
  font-size: 1.0625rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button {
  padding: 0.7rem 1.3rem;
  border: 2px solid var(--brand-accent);
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.button--primary {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
}

.button--secondary {
  color: var(--brand-accent-text);
}

.button--secondary:hover {
  background: var(--brand-surface);
}

/* Fleet map. Device states are drawn the same way in the map, the legend, and the ability rows. */
.fleet {
  margin: 0;
}

.fleet__map {
  position: relative;
  aspect-ratio: 540 / 320;
}

.fleet__map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hex {
  fill: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  stroke: var(--brand-accent);
  stroke-width: 1.5;
}

.hex--waiting {
  fill: none;
  stroke: var(--brand-ink-muted);
  stroke-dasharray: 3 3;
}

.hex--alert {
  fill: var(--alert);
  stroke: var(--alert);
}

.hex--offline {
  fill: color-mix(in srgb, var(--brand-ink-muted) 22%, transparent);
  stroke: none;
}

.hex--open {
  fill: url(#fleet-gradient);
  stroke: none;
}

.hex-ring {
  fill: none;
  stroke: url(#fleet-gradient);
  stroke-width: 2.5;
}

/* The fleet comes online once on load. In a scattered order (each device's --d), devices register
   (dashed), get approved (outlined), then report in with their final state. One device becomes
   reachable early, its tunnel draws, and its terminal opens while the rest keep joining. */
.fleet__map .hex {
  animation: hex-join 1s ease-out var(--d, 0s) both;
}

.fleet__map .hex--waiting {
  animation: none;
}

@keyframes hex-join {
  0%,
  20% {
    fill: transparent;
    stroke: var(--brand-ink-muted);
    stroke-dasharray: 3 3;
  }

  55% {
    fill: transparent;
    stroke: var(--brand-accent);
    stroke-dasharray: none;
  }
}

.hex-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ring-open 0.8s ease-out 2.6s both;
}

@keyframes ring-open {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* A page-colored halo keeps the tunnel readable where it crosses other devices. */
.fleet__halo {
  stroke: var(--brand-bg);
  stroke-width: 11;
}

/* The tunnel from the open device to your browser draws in once it opens. */
.fleet__halo,
.fleet__tunnel {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: tunnel-open 1.2s cubic-bezier(0.3, 0.6, 0.2, 1) 2.7s both;
}

.fleet__tunnel {
  stroke: url(#fleet-gradient);
  stroke-width: 5;
}

@keyframes tunnel-open {
  from {
    stroke-dashoffset: 1;
  }
}

/* A terminal window, anchored so its bottom-left corner meets the tunnel's end, at (360, 112) in the
   map's 540 x 320 view box. It stays dark in both themes, like a real terminal, and plays a short
   session once: the tunnel status, a typed command, its output, then a waiting prompt. */
.terminal {
  --term-bg: #0b1117;
  --term-bar: #161e27;
  --term-ink: #d6e2ea;
  --term-muted: #8fa3b1;
  --term-accent: #53ffc1;

  position: absolute;
  left: 66.67%;
  bottom: 65%;
  overflow: hidden;
  border: 1px solid #2a3b48;
  border-radius: 0.5rem;
  background: var(--term-bg);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.35);
  color: var(--term-ink);
  white-space: nowrap;
  transform-origin: bottom left;
  animation: terminal-open 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 3.6s both;
}

@keyframes terminal-open {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.94);
  }
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid #22303c;
  background: var(--term-bar);
}

.terminal__dots {
  display: flex;
  gap: 0.3rem;
}

.terminal__dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ff5f57;
}

.terminal__dots i:nth-child(2) {
  background: #febc2e;
}

.terminal__dots i:nth-child(3) {
  background: #28c840;
}

.terminal__title {
  color: var(--term-muted);
  font: 600 0.75rem var(--brand-font-heading);
}

.terminal__body {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem 0.65rem;
  font-size: 0.8125rem;
  white-space: pre;
}

.terminal__body code {
  color: inherit;
}

.terminal .terminal__status {
  color: var(--term-accent);
}

.terminal .terminal__output {
  color: var(--term-muted);
}

.terminal__user {
  color: var(--term-accent);
}

/* Each line stays hidden until its moment in the session. */
.terminal__status {
  animation: hide-until 3.95s;
}

.terminal__line {
  animation: hide-until 4.2s;
}

.terminal__output {
  animation: hide-until 5.1s;
}

.terminal__prompt {
  animation: hide-until 5.3s;
}

@keyframes hide-until {
  from,
  to {
    opacity: 0;
  }
}

/* Typed one character at a time; ends unclipped, so it never depends on the font's width. */
.terminal__typed {
  display: inline-block;
  vertical-align: bottom;
  animation: type 0.6s steps(6) 4.35s both;
}

@keyframes type {
  from {
    clip-path: inset(0 100% 0 0);
  }

  /* An explicit inset end, because inset() cannot step toward the implicit none. */
  to {
    clip-path: inset(0);
  }
}

.terminal__cursor {
  color: var(--term-accent);
  animation: blink 1.1s step-end 5.3s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.fleet figcaption {
  max-width: 36em;
  margin-top: 1.25rem;
  color: var(--brand-ink-muted);
  font-size: 0.9375rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.9rem 0 0;
  padding: 0;
  color: var(--brand-ink-muted);
  font-size: 0.875rem;
  list-style: none;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.glyph {
  flex: none;
  overflow: visible;
}

/* What you can do: one row per verb. */
.abilities {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

.ability {
  display: grid;
  grid-template-columns: minmax(11rem, 2fr) minmax(0, 5fr);
  gap: 0.75rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--brand-line);
}

.ability__verb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--brand-accent-text);
  font: 600 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.1 var(--brand-font-heading);
  letter-spacing: -0.02em;
}

.ability__verb .glyph {
  width: 1.1em;
  height: 1.1em;
}

.ability h2 {
  font-size: clamp(1.3125rem, 1.1rem + 0.6vw, 1.5rem);
  letter-spacing: 0;
}

.ability p:not(.ability__verb) {
  max-width: 38em;
  margin-top: 0.5rem;
  color: var(--brand-ink-muted);
}

/* "No way in but yours": a band in the dark tokens in both color modes. */
.closed {
  border-block: 1px solid var(--brand-line);
  background: var(--brand-surface);
  color: var(--brand-ink);
}

.closed__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
}

.closed h2 {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  letter-spacing: -0.025em;
}

.closed ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem clamp(2rem, 5vw, 4rem);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.closed li {
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand-accent);
  color: var(--brand-ink-muted);
}

.closed strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--brand-ink);
  font: 600 1.25rem/1.3 var(--brand-font-heading);
}

/* Get started */
.start {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}

.start__intro {
  max-width: 40em;
  margin-top: 0.75rem;
  color: var(--brand-ink-muted);
}

/* Warning callout, marked with the fleet map's alerting hexagon. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 46em;
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--alert);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--alert) 10%, var(--brand-bg));
  font-size: 1rem;
}

.callout .glyph {
  margin-top: 0.1rem;
}

.callout__title {
  font: 600 1.0625rem/1.4 var(--brand-font-heading);
}

.callout__title + p {
  margin-top: 0.3rem;
  color: var(--brand-ink-muted);
}

.steps {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 46rem);
  column-gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--brand-line);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  grid-row: span 20;
  color: var(--brand-accent-text);
  font: 600 2.25rem/1 var(--brand-font-heading);
}

.steps > li > * + * {
  margin-top: 0.9rem;
}

.more {
  font-size: 1rem;
}

.site-footer {
  border-top: 1px solid var(--brand-line);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  font-size: 1rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.credit {
  color: var(--brand-ink-muted);
}

/* Below this width the page margin can no longer hold the part of the terminal that runs past the map,
   so the window is pinned to the map's right edge instead of the tunnel's end. */
@media (max-width: 75rem) {
  .terminal {
    left: auto;
    right: 0;
  }
}

/* Narrow screens: one column. */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .ability {
    grid-template-columns: minmax(0, 1fr);
  }

  .closed ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .terminal__body {
    padding: 0.4rem 0.55rem;
    font-size: 0.6875rem;
  }

  /* Keeps the window inside a phone-width screen with the shortest session. */
  .terminal__user,
  .terminal__status,
  .terminal__output {
    display: none;
  }

  .steps > li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .steps > li::before {
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fleet__map .hex,
  .hex-ring,
  .fleet__halo,
  .fleet__tunnel,
  .terminal,
  .terminal * {
    animation: none;
  }
}