/* The stamped passport button: a deep teal pill on a white page, with a navy leather passport standing in its round
   left end. The passport and the rubber stamp are an inline SVG (their colours come from here); the pill, the words,
   the timer and the little plane are CSS. */
:root {
  --page: #ffffff;          /* the page */
  --pill: #0f6b6c;          /* the teal of the pill */
  --pill-deep: #08413f;     /* the teal in its shadow */
  --cream: #fdf6e7;         /* the words */
  --sand: #f2c97d;          /* the small words, the timer and the plane */
  --leather: #1d3456;       /* the navy leather of the passport */
  --leather-light: #2f4d78; /* the leather where the light falls */
  --leather-deep: #0f1d33;  /* the leather in its shadow */
  --gold: #d6a84f;          /* the gold foil and the stitching */
  --gold-light: #f6dc98;    /* the foil where the light falls */
  --gold-deep: #9a7128;     /* the foil in its shadow */
  --paper: #f6eedb;         /* the visa page */
  --paper-light: #fffaf0;   /* the page where the light falls */
  --paper-shade: #ddcfae;   /* the page by the spine */
  --endpaper: #eef0e6;      /* the inside of the cover */
  --guilloche: #79aeb0;     /* the fine security lines printed on the pages */
  --ink-print: #42566a;     /* the printing inside the cover */
  --ink-pen: #23366b;       /* the holder's signature */
  --ink: #c3354a;           /* the stamp ink */
  --rubber: #6d2a2c;        /* the rubber of the stamp */
  --ribbon: #b8323f;        /* the silk bookmark ribbon */
  --wood: #a86d3e;          /* the wood of the stamp */
  --wood-light: #d29a62;    /* the wood where the light falls */
  --wood-deep: #6a3f1e;     /* the wood in its shadow */
  --focus: #0f1d33;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--leather-deep);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

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

/* the whole thing: the passport stands at the left, its foot on the pill; the stamp comes down from above */
.pp {
  position: relative;
  width: 330px;
  max-width: calc(100vw - 32px);
  height: 179px;
}

/* the passport sits over the left end of the pill; it takes no pointer, the click goes to the button under it */
.pp__art {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.pp__foil {
  font: 760 3.9px/1 'Mona Sans Variable', system-ui, sans-serif;
  font-stretch: 118%;
  letter-spacing: 0.32em;
  fill: url(#pp-gold);
}

.pp__foil-small {
  font: 640 2.3px/1 'Mona Sans Variable', system-ui, sans-serif;
  letter-spacing: 0.28em;
  fill: url(#pp-gold);
}

.pp__tiny {
  font: 680 2.3px/1 'Mona Sans Variable', system-ui, sans-serif;
  letter-spacing: 0.34em;
  fill: var(--guilloche);
}

.pp__mrz {
  font: 500 2.6px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  fill: var(--ink-print);
}

.pp__stamp-label {
  font: 800 3.6px/1 'Mona Sans Variable', system-ui, sans-serif;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  fill: var(--rubber);
}

.pp__mark-big {
  font: 820 6.4px/1 'Mona Sans Variable', system-ui, sans-serif;
  font-stretch: 112%;
  letter-spacing: 0.06em;
}

.pp__mark-small {
  font: 700 2.1px/1 'Mona Sans Variable', system-ui, sans-serif;
  letter-spacing: 0.22em;
}

/* ---------------------------------------------------------------- the pill */
.pp__btn {
  position: absolute;
  left: 46px;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.pp__btn[aria-disabled='true'] {
  cursor: progress;
}

.pp__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(70% 150% at 40% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, var(--pill), var(--pill-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(8, 65, 63, 0.25),
    0 14px 28px -14px rgba(8, 65, 63, 0.8);
}

/* the timer: a band of sand that grows from the left while the passport is checked */
.pp__timer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242, 201, 125, 0), rgba(242, 201, 125, 0.24) 70%, rgba(250, 226, 170, 0.42));
  border-right: 2px solid rgba(250, 226, 170, 0.7);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.pp__btn:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 5px;
}

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

/* the little plane and its dotted trail, flying over the words once the stamp is down */
.pp__sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.pp__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--sand);
  opacity: 0;
}

.pp__plane {
  position: absolute;
  left: 0;
  top: 0;
  fill: var(--sand);
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* ---------------------------------------------------------------- the words */
.pp__faces {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 74px;
  right: 18px;
  pointer-events: none;
}

.pp__face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* at rest the small words sit under the big ones, so both fit in the pill */
.pp__face[data-face='rest'] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.pp__face--busy,
.pp__face--done {
  opacity: 0;
  visibility: hidden;
}

.pp__word {
  display: inline-block;
  padding-bottom: 1px;
  font-size: 16px;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.006em;
  line-height: 1;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.pp__note {
  padding-bottom: 1px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--sand);
}

@media (hover: hover) {
  .pp__btn:hover .pp__word {
    font-stretch: 112%;
  }
}

.pp__btn:focus-visible .pp__word {
  font-stretch: 112%;
}

/* while the passport is checked a sand sheen runs through the words */
.pp__shine {
  padding-bottom: 1px;
  font-size: 16px;
  font-weight: 640;
  line-height: 1;
  background: linear-gradient(100deg, var(--cream) 30%, var(--sand) 50%, var(--cream) 70%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pp__done {
  padding-bottom: 1px;
  font-size: 16px;
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1;
}

.pp__tick {
  flex: none;
  color: var(--sand);
}

@media (max-width: 360px) {
  .pp__word,
  .pp__shine,
  .pp__done {
    font-size: 15px;
  }
}