/* Landing page. Loads after assets/css/site.css, which owns the nav.
 *
 * Below 760px the nav links disappear and the burger takes over.
 */

html, body { margin: 0; padding: 0; height: 100%; background: var(--band, #FAFAF8); }
a:hover { color: #00629B; }
::selection { background: #00629B; color: #fff; }

.page {
  position: relative;
  height: 100vh; min-height: 600px;
  background: var(--band, #FAFAF8); color: #15171F;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform: translate(16%, -5%) scale(0.78);
  pointer-events: none;
  --edge: 90px;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  -webkit-mask-composite: source-in;
}
.hero-media--video { z-index: 1; }

main {
  position: absolute; left: 0; top: 56px; bottom: 0;
  display: flex; align-items: center; z-index: 2;
  padding: 24px 0 28px var(--page-inset);
}
.pitch { display: flex; flex-direction: column; align-items: flex-start; width: min(42vw, 600px); min-width: 300px; }
.chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500; font-size: 10px; letter-spacing: 0.14em;
  color: var(--chip-fg, #FFCD00); background: var(--chip-bg, #182B49);
  border-radius: 4px; padding: 4px 8px 3px;
  margin-bottom: clamp(12px, 2.8vh, 34px);
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(21,23,31,.3);
}
h1 {
  font-family: 'Pixelify Sans', 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(40px, min(5.1vw, 10vh), 82px);
  line-height: 1.04; letter-spacing: 0;
  color: #182B49;
  /* the project heroes' offset shadow, sized off the em so it holds at every
     step of the clamp */
  text-shadow: 0.055em 0.055em 0 rgba(24,43,73,.14);
  margin: 0 0 clamp(10px, 2vh, 24px) 0;
  white-space: nowrap;
}
/* the kit half carries the colourway, as on the kit pages */
h1 .kit { color: var(--accent, #00629B); }
/* the glyph is an image, so it takes the h1's offset shadow as a filter —
   same em ratio, so it lands where the type's shadow does */
.heart {
  height: 0.6em; width: auto; display: inline-block; vertical-align: -0.03em; margin-left: 0.06em;
  filter: drop-shadow(0.055em 0.055em 0 rgba(24,43,73,.14));
}
.sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(14px, 1.22vw, 17px);
  line-height: 1.55; letter-spacing: 0.01em;
  color: var(--muted, #6B7080);
  margin: 0 0 clamp(20px, 4.2vh, 52px);
  max-width: 520px;
}
.ctas { display: flex; align-items: center; flex-wrap: nowrap; width: max-content; gap: 10px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* one width for every kit, so the row holds still as the label changes; the
     tracking is dropped and the padding trimmed to keep "RetargetingKit" in it */
  width: 232px; box-sizing: border-box;
  height: 48px; white-space: nowrap; padding: 0 16px;
  background: var(--cta-bg, var(--accent, #00629B)); color: var(--cta-fg, #fff); border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 15px; letter-spacing: 0;
  box-shadow: 4px 4px 0 rgba(21,23,31,.85);
  transition: filter 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.cta:hover { filter: brightness(0.82); color: var(--cta-fg, #fff); transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(21,23,31,.85); }
.install {
  display: inline-flex; align-items: center; gap: 8px;
  /* fits every kit's command, so the row holds still; it still grows for "copied" */
  min-width: 224px; box-sizing: border-box;
  height: 48px; padding: 0 18px;
  border: 1px solid rgba(21,23,31,0.28); border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 15px;
  color: #15171F; white-space: nowrap;
  box-shadow: 4px 4px 0 rgba(21,23,31,.3);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.install:hover { border-color: rgba(21,23,31,0.5); background: rgba(21,23,31,0.04); transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(21,23,31,.3); }
.install .p { color: var(--accent, #00629B); }
.install .o { color: #8A8F9C; letter-spacing: 0.04em; }

/* A compact overview remains visible while the hero focuses on one kit. */
.overview {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px;
  /* 466px is the CTA row (232 + 10 + 224), so the grid ends where it does */
  width: 100%; max-width: 466px; margin-top: clamp(32px, 5vh, 64px);
}
/* four kits pair up rather than squeeze into one row */
.overview:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the second row costs a tile's height, so a short window gives the pairs
   flatter thumbnails rather than pushing the copy under the nav */
@media (min-width: 761px) and (max-height: 820px) and (orientation: landscape) {
  .overview:has(> :nth-child(4)) .demo-media { aspect-ratio: 16 / 7; }
}
.demo {
  display: flex; flex-direction: column; min-width: 0; padding: 0;
  border: 1px solid rgba(24,43,73,.13); border-radius: 9px;
  background: #FAFAF8; color: #56647A;
  font-family: 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer;
  overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.demo:hover { border-color: var(--demo-accent, #00629B); }
.demo:focus-visible { outline: 2px solid var(--demo-accent, #00629B); outline-offset: 4px; }
.demo[aria-pressed="true"] {
  border-color: var(--demo-accent, #00629B);
  box-shadow: 3px 3px 0 rgba(24,43,73,.3);
}
.demo-media {
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; background: #FAFAF8; opacity: .72; filter: saturate(.55);
  transition: opacity 180ms ease, filter 180ms ease;
}
.demo[aria-pressed="true"] .demo-media, .demo:hover .demo-media { opacity: 1; filter: none; }
.demo-media img, .demo-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.025); }
.demo-media:has(video.is-ready) img { visibility: hidden; }
.demo-caption {
  display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  container-type: inline-size;
  width: 100%; padding: 10px 12px 12px; line-height: 1.3;
}
.demo-label { font-size: 13px; color: var(--muted, #6B7080); white-space: nowrap; }
.demo-label .full { display: none; }
.demo-kit {
  font-family: 'Pixelify Sans', 'JetBrains Mono', monospace;
  font-size: clamp(15px, 12cqi, 20px); font-weight: 700; white-space: nowrap; line-height: 1.15;
}
.demo[aria-pressed="true"] .demo-label, .demo[aria-pressed="true"] .demo-kit { color: #182B49; }
.demo[aria-pressed="true"] .demo-kit .kit { color: var(--demo-accent, #00629B); }

@media (max-width: 760px) {
  nav .links { display: none; }
  nav .right button.burger { display: inline-flex; }
  .ctas { flex-wrap: wrap; width: auto; }
}

/* portrait: the clip takes the top of the column, the copy sits centred
   under it. The landscape framing offsets the render to clear the pitch
   column on its left; with the text below instead there is nothing to clear,
   so the offset is dropped and the clip is centred. Shape, not width,
   decides — the project pages switch on the same condition. */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  /* Column layout, matching the project pages row for row: the clip takes
     whatever height the copy leaves, but never less than a near-square share
     of the width, so a short window scrolls rather than shrinking the robot. */
  .page {
    height: auto; min-height: 100vh;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min(46vh, 100vw), 1fr) auto;
    padding: 56px 0 clamp(40px, 6vh, 88px);
  }
  /* size containment drops the clip's intrinsic height, which would otherwise
     size the 1fr row on its own; the row then fills what the copy leaves */
  .hero-media {
    position: relative; grid-area: 1 / 1; inset: auto; transform: none;
    width: 100%; height: 100%; min-height: 0; contain: size;
    object-fit: cover; object-position: 46% 45%; --edge: 32px;
  }
  main {
    position: relative; inset: auto; grid-row: 2;
    display: flex; justify-content: center;
    padding: 8px var(--page-inset) 0;
  }
  .pitch { width: 100%; min-width: 0; align-items: center; text-align: center; }
  .ctas { justify-content: center; }
  /* full width on a phone; on a large portrait screen the tiles stop growing */
  .overview { max-width: 720px; }
  h1 { white-space: normal; font-size: clamp(30px, min(9vw, 5.2vh), 82px); }
}

/* The square teaser plays the four kits back to back, 4 s each, and the page
   takes on each kit's colours as its shot comes up. It sits in the RoboKit
   page's hero space -- the same box and translate/scale -- nudged 3vh left and
   0.2vh down so the RoboKit shot's visual centre lands on that hero's robot
   (964,457 at 1440x900, the median over its clip). Multiply lets the clip's
   ground take whatever band is underneath; it is encoded a shade under white
   (249,249,246), which the brightness lifts back so no square shows. */
.hero-media--teaser {
  object-fit: contain; object-position: 50% 50%;
  transform: translate(calc(16% - 3vh), calc(-5% + 0.2vh + var(--teaser-lift, 0%))) scale(0.78);
  mix-blend-mode: multiply; filter: brightness(1.025);
}
/* blended, the still would show through the clip, so it steps aside once the clip plays */
.page:has(.hero-media--video.is-ready) img.hero-media--teaser { visibility: hidden; }

/* One centered caption for the current shot, with four small progress controls. */
.kit-tabs {
  position: absolute; z-index: 3;
  left: calc(66% - 3vh); transform: translateX(-50%);
  width: min(78vh, 54vw, 780px);
  bottom: clamp(24px, 5vh, 48px);
  display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; gap: 10px;
  padding-top: 34px;
}
.kit-tabs button {
  display: flex; align-items: center; width: 100%; min-width: 0; min-height: 44px;
  padding: 0; border: 0; border-radius: 4px;
  background: none; cursor: pointer; text-align: left;
  font-family: 'Inter', system-ui, sans-serif; color: #182B49; line-height: 1.4;
}
.kit-tabs button:focus-visible, .kit-tabs .name:focus-visible { outline: 2px solid var(--kit-accent, #00629B); outline-offset: 4px; }
.kit-tabs .name {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid rgba(24,43,73,.28); border-radius: 4px;
  background: transparent; box-shadow: 3px 3px 0 rgba(24,43,73,.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
  color: #182B49;
  opacity: 0; visibility: hidden;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.kit-tabs .name:hover {
  border-color: rgba(24,43,73,.5); background: rgba(24,43,73,.04);
  transform: translateX(-50%) translate(2px, 2px); box-shadow: 1px 1px 0 rgba(24,43,73,.3);
}
.kit-tabs .name .kit { color: var(--kit-accent, #00629B); }
.kit-tabs [data-current="true"] .name { opacity: 1; visibility: visible; }
.kit-tabs .bar {
  position: relative; width: 100%; height: 2px;
  overflow: hidden; background: rgba(24,43,73,.14);
}
.kit-tabs [data-current="true"] .bar { background: color-mix(in srgb, var(--kit-accent, #00629B) 20%, transparent); }
.kit-tabs .bar i {
  position: absolute; inset: 0; background: var(--kit-accent, #00629B);
  transform-origin: left; transform: scaleX(0);
}
.kit-tabs [data-current="true"] .bar i { transform: scaleX(var(--p, 0)); }

@media (min-width: 761px) and (max-width: 1360px) {
  .hero-media--teaser { transform: translate(calc(20% - 3vh), calc(-5% + 0.2vh + var(--teaser-lift, 0%))) scale(0.72); }
  .kit-tabs { left: calc(70% - 3vh); }
}
/* on a wide screen the clip steps further right, clear of the pitch column */
@media (min-width: 1800px) {
  .hero-media--teaser { transform: translate(calc(21% - 3vh), calc(-5% + 0.2vh + var(--teaser-lift, 0%))) scale(0.78); }
  .kit-tabs { left: calc(71% - 3vh); }
}
/* with the height to spare, the tiles pair up and grow, and the wider captions
   take the full labels; the grid still ends with the CTAs */
@media (min-width: 1800px) and (min-height: 880px) and (orientation: landscape) {
  .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-label .brief { display: none; }
  .demo-label .full { display: inline; }
}

/* the playing tile carries the shot's progress where the tiles stand in for the tabs */
.demo-bar { display: none; }
/* Portrait: the square fills the row's height, a touch over so the robot
   reads at the size of the landscape hero; the multiply hides the overhang.
   The tiles sit right under the CTAs, so they take over from the tabs. */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hero-media--teaser { transform: scale(1.2); }
  .kit-tabs { display: none; }
  .demo { position: relative; }
  .demo-bar { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 3px; overflow: hidden; }
  .demo[aria-pressed="true"] .demo-bar { background: color-mix(in srgb, var(--demo-accent, #00629B) 20%, transparent); }
  .demo-bar i {
    position: absolute; inset: 0; background: var(--demo-accent, #00629B);
    transform-origin: left; transform: scaleX(0);
  }
  .demo[aria-pressed="true"] .demo-bar i { transform: scaleX(var(--p, 0)); }
}
/* a phone stacks the buttons and lists the kits, thumbnail beside caption */
@media (max-width: 560px) {
  .ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .cta, .install { width: 100%; justify-content: center; }
  .overview, .overview:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; margin-top: 36px; }
  .demo { flex-direction: row; align-items: center; }
  .demo-media { width: 96px; }
  .demo-caption { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-tabs .name, .kit-tabs .name .kit, .kit-tabs .bar i { transition: none; }
  .demo, .demo-media { transition: none; }
}