/* The velvet button: a padded board covered in bordeaux velvet on a black page. The velvet is drawn by a WebGL
   shader on a canvas the size of the button; its colours come from here. The words are HTML, on top. */
:root {
  --page: #000000;          /* the page */
  --deep: #1d030b;          /* the bottom of the pile, where the light does not reach */
  --body: #771430;          /* the colour of the velvet */
  --sheen: #dba2ad;         /* the sheen on the sides of the fibres when they lie down */
  --thread: #f2e1c2;        /* the words and the icon, stamped in champagne */
  --thread-lit: #fff3dc;    /* the words under the mouse */
  --focus: #f2e1c2;         /* the ring of the keyboard focus */
}

* {
  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(--thread);
  font-family: 'Bodoni Moda Variable', 'Didot', 'Bodoni 72', 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: 72px 16px;
}

.velvet {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the button */
.velvet__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: min(320px, calc(100vw - 48px));
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--thread);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* a finger dragged across brushes the pile; up and down it still scrolls the page */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

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

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

.velvet__btn[aria-busy='true'] {
  cursor: default;
}

/* the velvet: the whole button, under the words */
.velvet__cloth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* the two faces sit on top of each other; the words are stamped in champagne, with the pile a little crushed round
   them (the soft dark halo) */
.velvet__face {
  grid-area: 1 / 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-left: 0.24em;
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(20, 0, 6, 0.6), 0 0 9px rgba(20, 0, 6, 0.55);
  pointer-events: none;
  transition: letter-spacing 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

/* under the mouse the words open up a little, like a shop window seen closer */
@media (hover: hover) {
  .velvet__btn:hover .velvet__face {
    letter-spacing: 0.29em;
    color: var(--thread-lit);
  }
}

@media (prefers-reduced-motion: reduce) {
  .velvet__face {
    transition: color 0.4s ease;
  }

  @media (hover: hover) {
    .velvet__btn:hover .velvet__face {
      letter-spacing: 0.24em;
    }
  }
}

.velvet__face[data-face='done'] {
  opacity: 0;
}

.velvet__icon {
  width: 17px;
  height: 17px;
  margin-top: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(20, 0, 6, 0.6)) drop-shadow(0 0 4px rgba(20, 0, 6, 0.5));
}

.velvet__icon [data-check] {
  stroke-width: 1.7;
  stroke-dasharray: 1;
}

/* without WebGL: still velvet, painted with gradients, and everything else works the same */
.is-flat .velvet__btn {
  background:
    radial-gradient(120% 160% at 28% 0%, rgba(228, 154, 170, 0.32), rgba(228, 154, 170, 0) 55%),
    radial-gradient(140% 120% at 50% 50%, var(--body), var(--deep));
  box-shadow: inset 0 1px 0 rgba(228, 154, 170, 0.35), inset 0 -3px 8px rgba(0, 0, 0, 0.5);
}

.is-flat .velvet__cloth {
  display: none;
}

/* combed, the painted velvet turns a shade lighter */
.is-flat .velvet__btn {
  transition: filter 0.5s ease;
}

.is-flat.is-combed .velvet__btn {
  filter: brightness(1.25) saturate(0.92);
}