/* =========================================================================
   Homepage hero: a humanoid robot walking, built from 205 photographs of the
   places robots work. First scroll zooms into the photographs ("in any
   industry"); the next scroll continues to the coverage section.
   Everything here is scoped to .rh so it cannot touch the rest of the page.
   Driven by hero-robot.js.
   ========================================================================= */
@font-face {
  font-family: "Boop Roobert";
  src: url("./Roobert-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

.rh {
  --rh-ink: #141413;
  --rh-grey: #8a8984;
  --rh-bg: #f9f9f9;
  --rh-line: #e6ded4;
  --rh-display: "Boop Roobert", Roobert, ui-sans-serif, system-ui, sans-serif;
  --rh-in: cubic-bezier(.45,0,.55,1);
  --rh-out: cubic-bezier(.22,1,.36,1);
  --rh-peek: 64px;
  --rh-hd: 66px;                        /* header height, measured by the script */
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  margin-top: calc(-1 * var(--rh-hd));  /* run under the transparent sticky header */
  overflow: hidden;
  background: var(--rh-bg);
  color: var(--rh-ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) { .rh { --rh-peek: 58px; } }
.rh.is-top { touch-action: none; overscroll-behavior: none; }

.rh__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: default; }
.rh[data-step="1"] .rh__canvas { cursor: grab; }

/* keeps the header readable over the photographs */
.rh__topfade {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rh-hd) * 2.15);
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg,#f9f9f9,#f9f9f9fc 8.1%,#f9f9f9f3 15.5%,#f9f9f9e4 22.5%,#f9f9f9d2 29%,#f9f9f9bd 35.3%,#f9f9f9a5,#f9f9f98c 47.1%,#f9f9f973 52.9%,#f9f9f95a,#f9f9f942 64.7%,#f9f9f92d 71%,#f9f9f91b 77.5%,#f9f9f90c 84.5%,#f9f9f903 91.9%,#f9f9f900);
}
.rh[data-step="1"] .rh__topfade { opacity: 1; }

/* soft fade rising from the bottom behind the text: no box, the gallery stays edge to edge */
.rh__plate {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(0deg,var(--rh-bg) 0,var(--rh-bg) var(--solid,40%),rgba(249,249,249,.86) calc(var(--solid,40%) + (100% - var(--solid,40%))*.3),
    rgba(249,249,249,.55) calc(var(--solid,40%) + (100% - var(--solid,40%))*.6),rgba(249,249,249,.18) calc(var(--solid,40%) + (100% - var(--solid,40%))*.85),rgba(249,249,249,0) 100%);
}
.rh[data-step="1"] .rh__plate { opacity: 1; }

/* ---- text column, centred under the robot ---- */
.rh__tag, .rh__title, .rh__act {
  position: absolute; left: 0; width: 100%; margin: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s ease, transform 1.3s cubic-bezier(.2,.7,0,1);
}
.rh.on .rh__tag, .rh.on .rh__title, .rh.on .rh__act { opacity: 1; transform: none; }
.rh.on .rh__title { transition-delay: .12s; }
.rh.on .rh__act { transition-delay: .4s; }

.rh__tag {
  text-align: center; font-family: var(--rh-display); font-weight: 400; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.2;
  letter-spacing: -.01em; color: var(--rh-ink); -webkit-font-smoothing: antialiased;
}
.rh.on .rh__tag { transition: opacity .5s ease, transform .7s var(--rh-out); }
.rh[data-step="1"] .rh__tag { opacity: 0; transform: translateY(-6px); }

.rh__title {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--rh-display); font-weight: 400; font-size: 100px; line-height: 1.02; letter-spacing: -.042em; color: var(--rh-ink);
  font-kerning: normal; text-wrap: initial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.rh__title .ln.g { color: var(--rh-grey); }

/* swap lines: "Deploy robots" never changes; the grey line(s) trade words in the same slot.
   Leaving words drop out (ease-in), arriving words settle slowly (ease-out), word by word,
   and the direction follows the scroll: down pushes words up, up pulls them back down. */
.rh .ln { display: grid; justify-items: center; width: max-content; overflow: clip; padding-bottom: .2em; margin-bottom: -.2em; }
.rh .ln > span { grid-area: 1/1; display: block; width: max-content; white-space: nowrap; }
.rh .ln .w { display: inline-block; will-change: transform; }
.rh .ln.sw > .a .w { transition: transform 1.2s var(--rh-out) calc(520ms + var(--l)*90ms + var(--i)*60ms), opacity .9s ease calc(520ms + var(--l)*90ms + var(--i)*60ms); }
.rh .ln.sw > .b .w { transform: translateY(105%); opacity: 0; transition: transform .7s var(--rh-in) calc(var(--l)*50ms + var(--i)*35ms), opacity .55s ease calc(var(--l)*50ms + var(--i)*35ms); }
.rh[data-step="1"] .ln.sw > .a .w { transform: translateY(-105%); opacity: 0; transition: transform .7s var(--rh-in) calc(var(--l)*50ms + var(--i)*35ms), opacity .55s ease calc(var(--l)*50ms + var(--i)*35ms); }
.rh[data-step="1"] .ln.sw > .b .w { transform: none; opacity: 1; transition: transform 1.2s var(--rh-out) calc(520ms + var(--l)*90ms + var(--i)*60ms), opacity .9s ease calc(520ms + var(--l)*90ms + var(--i)*60ms); }

/* ---- CTA: stays put on hover; the arrow slot opens while the side padding shrinks by the same amount ---- */
.rh__act { display: flex; justify-content: center; pointer-events: none; }
.rh__cta {
  --arrow: 26px;
  display: inline-flex; align-items: center; justify-content: center; pointer-events: auto;
  background: var(--rh-ink); color: var(--rh-bg); border-radius: 4px;
  font-family: var(--rh-display); font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: -.005em; -webkit-font-smoothing: antialiased;
  padding: 18px calc(28px + var(--arrow) / 2) 19px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(20,20,19,.18), 0 6px 14px -4px rgba(20,20,19,.28), 0 18px 40px -12px rgba(20,20,19,.38);
  transition: background .35s ease, padding .45s cubic-bezier(.22,1,.36,1);
}
.rh__cta:hover, .rh__cta:focus-visible { color: var(--rh-bg); }
.rh__arr {
  display: inline-block; overflow: hidden; width: 0; opacity: 0; transform: translateX(-6px); text-align: right; white-space: nowrap;
  transition: width .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .rh__cta:hover { background: #3b3b39; padding-left: 28px; padding-right: 28px; }
  .rh__cta:hover .rh__arr { width: var(--arrow); opacity: 1; transform: none; transition-delay: 0s, .08s, 0s; }
}
.rh__cta:focus-visible { background: #3b3b39; padding-left: 28px; padding-right: 28px; outline: 1px solid var(--rh-ink); outline-offset: 3px; }
.rh__cta:focus-visible .rh__arr { width: var(--arrow); opacity: 1; transform: none; }

/* ---- the top edge of the next section, waiting at the bottom of the gallery view ---- */
.rh__peek {
  all: unset; box-sizing: border-box; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rh-peek);
  display: flex; align-items: center; justify-content: center; gap: .3em; padding: 0 20px;
  cursor: pointer; background: var(--rh-bg); border-top: 1px solid var(--rh-line);
  font-family: var(--rh-display); font-size: 19px; letter-spacing: -.02em; color: var(--rh-ink); -webkit-font-smoothing: antialiased;
  transform: translateY(100%); transition: transform .8s var(--rh-out);
}
.rh[data-step="1"] .rh__peek { transform: none; transition-delay: .9s; }
.rh__peek i { font-style: normal; margin-left: .5em; display: inline-block; transition: transform .3s var(--rh-out); }
@media (hover: hover) { .rh__peek:hover i { transform: translateY(2px); } }
.rh__peek:focus-visible { outline: 1px solid var(--rh-ink); outline-offset: -4px; }
@media (max-width: 768px) { .rh__peek { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .rh__tag, .rh__title, .rh__act, .rh .ln .w, .rh__plate, .rh__topfade, .rh__peek { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---- newsletter sign-up: one connected piece, a white field with the dark button flush on its
   right end, the Boop mark's corners throughout.
   Submit (one continuous path, nothing re-lays out):
     1. the button glides from the field's right end to its centre, narrowing to a square,
        while the white field shrinks into it;
     2. once saved, the mark's two bars and notch punch in;
     3. the mark slides left by half the thanks' width while "You're on the list." unrolls,
        so the pair ends centred.
   Only the button's offset, its own width and transforms animate. ---- */
.rh__act { flex-direction: column; align-items: center; gap: 12px; }
.rh__sub {
  --h: 56px; --mark: 56px; --r: calc(var(--mark) * .2);       /* the Boop mark's corner, used from the start */
  --ease: cubic-bezier(.65,0,.35,1); --fold: .7s;
  pointer-events: auto; position: relative; width: min(440px, calc(100vw - 40px)); height: var(--h);
}
/* the white field, drawn as its own layer so it can shrink into the button */
.rh__sub::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px #dcd9d2;
  transform-origin: 50% 50%;
  transition: box-shadow .2s ease, transform var(--fold) var(--ease), opacity .45s ease .2s;
}
@media (hover: hover) { .rh__sub:hover::before { box-shadow: inset 0 0 0 1px #c4c1b9; } }
.rh__sub:focus-within::before { box-shadow: inset 0 0 0 1px var(--rh-ink); }
.rh__field { position: absolute; inset: 0; transition: opacity .25s ease; }
.rh__email {
  all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; padding: 0 140px 0 18px;
  font-family: var(--rh-display); font-size: 17px; letter-spacing: -.005em; color: var(--rh-ink);
  -webkit-user-select: text; user-select: text; cursor: text;
}
.rh__email::placeholder { color: #9a9893; }

.rh__go {
  all: unset; box-sizing: border-box; position: absolute; top: 0; right: 0; overflow: hidden; cursor: pointer;
  height: var(--h); width: var(--go-w, 124px); border-radius: var(--r); text-align: center;
  background: var(--rh-ink); color: var(--rh-bg); font-family: var(--rh-display); font-size: 17px; letter-spacing: -.005em;
  transition: background .3s ease, right var(--fold) var(--ease), width var(--fold) var(--ease);
}
@media (hover: hover) { .rh__go:not(:disabled):hover { background: #3b3b39; } }
.rh__go:focus-visible { outline: 1px solid var(--rh-ink); outline-offset: 3px; }
.rh__go-t { display: inline-block; white-space: nowrap; line-height: var(--h); transition: opacity .2s ease, transform .35s var(--ease); }
/* a soft breath on the square while the request runs: light, not movement */
.rh__go::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* the mark, waiting inside the button: two bars and a notch, collapsed */
.rh__mark { position: absolute; inset: 0; pointer-events: none; }
.rh__bar { position: absolute; left: 35%; width: 30%; height: 14%; border-radius: 999px; background: var(--rh-bg);
  transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.rh__bar--1 { top: 28%; }
.rh__bar--2 { top: 58%; }
.rh__bite { position: absolute; right: -11%; top: 39%; width: 22%; height: 22%; border-radius: 50%; background: var(--rh-bg);
  transform: scale(0); transition: transform .5s cubic-bezier(.22,1,.36,1); }

/* the thanks: placed beside where the mark will end up, revealed left to right */
.rh__done {
  position: absolute; top: 0; left: var(--done-left, 50%); height: var(--h); display: flex; align-items: center;
  white-space: nowrap; font-family: var(--rh-display); font-size: 20px; letter-spacing: -.015em; color: var(--rh-ink);
  clip-path: inset(0 100% 0 0); opacity: 0; pointer-events: none;
  transition: clip-path .8s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

/* 1. sending */
.rh__sub.is-sending::before, .rh__sub.is-done::before { transform: scale(var(--shrink, .13), 1); opacity: 0; }
.rh__sub.is-sending .rh__field, .rh__sub.is-done .rh__field { opacity: 0; }
.rh__sub.is-sending .rh__go, .rh__sub.is-done .rh__go { right: calc(50% - var(--mark) / 2); width: var(--mark); cursor: default; }
.rh__sub.is-sending .rh__go-t, .rh__sub.is-done .rh__go-t { opacity: 0; transform: translateY(-6px); }
.rh__sub.is-sending .rh__go::after { animation: rhBreath 1.2s ease-in-out .7s infinite; }
@keyframes rhBreath { 50% { opacity: .1; } }
.rh__sub.is-done .rh__go::after { animation: none; opacity: 0; }   /* stop the waiting breath once saved */

/* 2. done: the mark punches in */
.rh__sub.is-done .rh__bar { transform: none; transition-delay: .05s; }
.rh__sub.is-done .rh__bar--2 { transition-delay: .13s; }
.rh__sub.is-done .rh__bite { transform: none; transition-delay: .2s; }
.rh__sub.is-done .rh__mark { animation: rhNod .7s cubic-bezier(.22,1,.36,1) .05s both; }
@keyframes rhNod { 0% { transform: none; } 40% { transform: rotate(-5deg) scale(1.04); } 100% { transform: none; } }

/* 3. done: slide over and unroll the thanks */
.rh__sub.is-done .rh__go { right: var(--done-right, calc(50% - var(--mark) / 2)); transition: right .8s cubic-bezier(.22,1,.36,1) .45s, width 0s; }
.rh__sub.is-done .rh__done { clip-path: inset(0 0 0 0); opacity: 1; transition-delay: .55s, .5s; }

/* what the field is for, read before the field: ink, not a grey footnote */
.rh__lead {
  margin: 0; pointer-events: auto; font-family: var(--rh-display); font-size: 18px; letter-spacing: -.01em; color: var(--rh-ink);
  -webkit-user-select: text; user-select: text; transition: opacity .4s ease, transform .6s var(--rh-out);
}
.rh__lead.is-done { opacity: 0; transform: translateY(-4px); }
@media (max-width: 768px) { .rh__lead { font-size: 17px; } }
/* the line under the field only speaks up for errors; it keeps its height so nothing shifts */
.rh__note {
  min-height: 1.4em; margin: 0; pointer-events: auto; font-family: var(--rh-display); font-size: 15px; letter-spacing: -.005em; color: var(--rh-grey);
  -webkit-user-select: text; user-select: text;
}
.rh__hint { transition: opacity .3s ease; }
.rh__hint.is-bad { color: #a2361f; }
.rh__note.is-done .rh__hint { opacity: 0; }
.rh__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) {
  .rh__sub { --h: 52px; --mark: 52px; }
  .rh__email { font-size: 16px; padding-left: 16px; padding-right: 124px; }
  .rh__go { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh__sub::before, .rh__field, .rh__go, .rh__go-t, .rh__bar, .rh__bite, .rh__done { transition-duration: .01s !important; transition-delay: 0s !important; }
  .rh__sub.is-sending .rh__go::after, .rh__sub.is-done .rh__mark { animation: none; }
}