/* The gold leaf button: a pill of polished red bole, the clay gilders lay under the gold, on a white page. The gold
   leaf, its shadows and the gilded words are drawn by script.js on the canvas (their colours come from here); the
   pill, its edge and its states are CSS. */
:root {
  --page: #ffffff;          /* the page */
  --bole: #933a27;          /* the red bole the gold is laid on, where the light falls */
  --bole-deep: #6b2417;     /* the bole at the lower edge of the pill */
  --bole-edge: #43140b;     /* the edge of the panel, under the pill */
  --gold: #d6a63a;          /* the gold leaf, half turned to the light */
  --gold-deep: #5e3d0d;     /* the gold leaf turned away from the light */
  --gold-light: #fbe6a2;    /* the gold leaf catching the window */
  --gold-edge: #7d5613;     /* the edge of the panel, once it is gilded */
  --scratch: #6e2416;       /* the words scratched through the gold, down to the bole */
  --focus: #6b2417;         /* the ring of the keyboard's 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(--bole-deep);
  font-family: 'Brygada 1918 Variable', 'Brygada 1918', 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;
}

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

/* ---------------------------------------------------------------- the pill */
.gilt__btn {
  position: relative;
  display: block;
  width: min(320px, calc(100vw - 32px));
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* polished bole: a soft sheen up at the left, deeper towards the lower edge */
  background:
    radial-gradient(90% 130% at 22% 0%, color-mix(in srgb, #ffd9c4 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bole), var(--bole-deep));
  /* the panel's edge underneath and its soft shadow on the page (the rims are drawn over the gold, in ::after) */
  box-shadow:
    0 2px 0 var(--bole-edge),
    0 3px 3px color-mix(in srgb, var(--bole-edge) 30%, transparent),
    0 16px 28px -16px color-mix(in srgb, var(--bole-edge) 75%, transparent);
  color: var(--bole-deep);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .gilt__btn:hover {
    box-shadow:
      0 2px 0 var(--bole-edge),
      0 4px 4px color-mix(in srgb, var(--bole-edge) 28%, transparent),
      0 20px 32px -16px color-mix(in srgb, var(--bole-edge) 80%, transparent);
  }
}

.gilt__btn:active {
  transform: scale(0.97);
  box-shadow:
    0 1px 0 var(--bole-edge),
    0 2px 2px color-mix(in srgb, var(--bole-edge) 30%, transparent),
    0 9px 18px -12px color-mix(in srgb, var(--bole-edge) 75%, transparent);
}

/* gilded, the edge of the panel is gold too */
.gilt__btn.is-gold {
  box-shadow:
    0 2px 0 var(--gold-edge),
    0 3px 3px color-mix(in srgb, var(--bole-edge) 26%, transparent),
    0 16px 28px -16px color-mix(in srgb, var(--gold-edge) 85%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .gilt__btn.is-gold:hover {
    box-shadow:
      0 2px 0 var(--gold-edge),
      0 4px 4px color-mix(in srgb, var(--bole-edge) 24%, transparent),
      0 20px 32px -16px color-mix(in srgb, var(--gold-edge) 90%, transparent);
  }
}

.gilt__btn.is-gold:active {
  box-shadow:
    0 1px 0 var(--gold-edge),
    0 2px 2px color-mix(in srgb, var(--bole-edge) 26%, transparent),
    0 9px 18px -12px color-mix(in srgb, var(--gold-edge) 85%, transparent);
}

.gilt__btn[aria-busy='true'] {
  cursor: progress;
}

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

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

/* the lit rim along the top of the panel and the dark one along its foot, over the gold as over the bole */
.gilt__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffe2cf 26%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--bole-edge) 34%, transparent);
  pointer-events: none;
  transition:
    box-shadow 420ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 200ms ease;
}

/* while gold is laid or lifted, the sheets are above the pill: its rims do not show over them */
.gilt__btn[aria-busy='true']::after {
  opacity: 0;
}

.gilt__btn.is-gold::after {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fffbea 62%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-edge) 55%, transparent);
}

/* the gold, its shadows and the words: the canvas reaches past the pill, for the sheets still in the air (the script
   sets its place and size) */
.gilt__art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the words are drawn on the canvas; this is their name for screen readers, and where the page keeps them */
.gilt__words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .gilt__btn,
  .gilt__btn:active {
    transform: none;
  }

  .gilt__btn:active {
    filter: brightness(0.95);
  }
}