/* The press-and-hold button: a graphite pill on a black page. The fill that grows under the finger is a copy of the
   face in amber, cut by a circle; open, the copy turns green. */
:root {
  --page: #000000;          /* the page */
  --pill: #17181c;          /* the button at rest */
  --ink: #f2f0ea;           /* its words and the lock */
  --muted: #8d8b94;         /* the line under it */
  --fill: #ffb21e;          /* the fill that grows while you hold */
  --fill-ink: #241703;      /* the words and the lock on the fill */
  --open: #2ee39a;          /* the button once the lock is open */
  --open-ink: #04281a;      /* the words and the lock on it */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Host Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.hold {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
}

/* ---------------------------------------------------------------- the button */
.hold__btn {
  position: relative;
  display: block;
  width: min(300px, calc(100vw - 48px));
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  overflow: hidden;
  cursor: pointer;
  /* a long press is not a selection, a callout or a scroll */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.hold__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 12px;
  border-radius: inherit;
  pointer-events: none;
}

/* the copy in the other colours: the script cuts it with a circle that grows from the finger */
.hold__face--fill {
  background: var(--fill);
  color: var(--fill-ink);
  clip-path: circle(0px at 50% 50%);
  transition: background-color 0.35s ease, color 0.35s ease;
}

.hold.is-open .hold__face--fill {
  background: var(--open);
  color: var(--open-ink);
}

.hold__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

.hold__face--fill .hold__icon {
  background: rgba(0, 0, 0, 0.09);
}

.hold__icon svg {
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hold__label {
  display: block;
  height: 1.3em;
  overflow: hidden;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hold__word {
  display: block;
  white-space: nowrap;
}

/* the ring that leaves the button when it opens */
.hold__ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(300px, calc(100vw - 48px));
  height: 72px;
  margin-left: calc(min(300px, calc(100vw - 48px)) / -2);
  border: 2px solid var(--open);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.hold__hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.hold__hint span {
  display: inline-block;
}

.hold__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

html[data-using='pointer'] .hold__btn:focus-visible {
  outline: none;
}