/* The wax seal button: an ivory pill with a round well on its left, on a white page. Pressed, a stick of red wax
   drips into the well, a brass seal comes down and presses, and an ampersand stays raised in the wax. */
:root {
  --page: #ffffff;          /* the page */
  --paper: #f7f1e6;         /* the button: thick cotton paper */
  --paper-edge: #e3d6bf;    /* its edge */
  --well: #ece2cf;          /* the round well for the wax */
  --ink: #2a1c16;           /* the words and the nib */
  --muted: #8a7a6c;         /* the nib at rest */
  --wax: #8e1a22;           /* the sealing wax */
  --focus: #8e1a22;         /* the focus ring */
}

* {
  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: 'Fraunces Variable', Georgia, 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;
}

/* the seal: room above the button for the stick and the seal coming down */
.seal {
  position: relative;
  padding: 150px 34px 44px;
}

/* ---------------------------------------------------------------- the button */
.seal__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 88px;
  padding: 0 36px 0 12px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.85), transparent 55%),
    var(--paper);
  box-shadow:
    inset 0 0 0 1px var(--paper-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(120, 90, 50, 0.08),
    0 1px 1px rgba(70, 40, 10, 0.08),
    0 14px 28px -14px rgba(70, 40, 10, 0.38);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%;
  transition: box-shadow 0.35s ease, translate 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .seal__btn:hover {
    translate: 0 -1px;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--paper-edge) 70%, var(--wax)),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -2px 0 rgba(120, 90, 50, 0.08),
      0 1px 1px rgba(70, 40, 10, 0.08),
      0 20px 34px -16px rgba(70, 40, 10, 0.45);
  }

  .seal__btn:hover .seal__nib {
    color: var(--ink);
    transform: rotate(-14deg) translate(-1px, -1px);
  }
}

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

.seal__btn:active:not(.is-busy) {
  translate: 0 1px;
}

.seal__btn.is-busy {
  cursor: progress;
}

/* the round well where the wax goes */
.seal__well {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--well) 70%, #fff), var(--well) 70%);
  box-shadow:
    inset 0 2px 4px rgba(90, 60, 30, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8),
    0 1px 0 rgba(255, 255, 255, 0.9);
}

.seal__nib {
  width: 27px;
  height: 27px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* the wax, drawn round the middle of the well (12px of padding + half of the 64px well) */
.seal__wax {
  position: absolute;
  left: -56px;
  top: -56px;
  width: 200px;
  height: 200px;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.seal__shadow {
  fill: rgba(70, 20, 10, 0.3);
  filter: url(#wax-shadow);
}

.seal__mono {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  font-variation-settings: 'opsz' 72;
}

/* the words: the three of them in one cell, so the button keeps its width; one shows at a time */
.seal__words {
  display: grid;
  overflow: hidden;
  padding: 4px 0;
  font-size: 24px;
  font-weight: 560;
  font-variation-settings: 'opsz' 40;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.seal__word {
  grid-area: 1 / 1;
  visibility: hidden;
}

.seal__word.is-on {
  visibility: visible;
}

/* ---------------------------------------------------------------- the stick and the seal */
.seal__stick {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 156px;
  margin: -150px 0 0 -12px;  /* its tip is the element's origin, placed by the script */
  transform-origin: 12px 150px;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(10px 18px 10px rgba(60, 20, 10, 0.25));
  will-change: transform;
}

.seal__stick svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.seal__stamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.seal__stamp-shadow {
  fill: rgba(50, 25, 5, 0.5);
}

@media (max-width: 420px) {
  .seal {
    padding: 140px 8px 36px;
  }

  .seal__btn {
    gap: 14px;
    padding-right: 26px;
  }

  .seal__words {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seal__btn,
  .seal__nib {
    transition: none;
  }
}