/* The hourglass button: a dark Download pill on a black page. Pressed, it opens round a small glass hourglass on
   walnut caps whose sand runs grain by grain, as far as the download has gone; at the end it turns over and offers
   the file. */
:root {
  --page: #000000;          /* the page */
  --pill: #141416;          /* the button */
  --edge: #2a2a2f;          /* its edge */
  --text: #f3efe6;          /* the words */
  --muted: #8f8a80;         /* the size and the hints */
  --sand: #e2b36a;          /* the sand, and the accent of the button */
  --wood: #5a3a24;          /* the caps of the hourglass */
  --brass: #c9a25a;         /* its posts */
  --done: #8fd6a4;          /* the file ready */
}

* {
  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(--text);
  font-family: 'Instrument Sans 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;
}

/* the box keeps the room of the open button, so nothing round it moves when it grows */
.dl {
  position: relative;
  display: grid;
  place-items: center;
  width: min(340px, calc(100vw - 32px));
  height: 168px;
}

/* ---------------------------------------------------------------- the button */
.dl__btn {
  position: relative;
  width: 252px;             /* the script measures the real widths */
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%),
    var(--pill);
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -18px rgba(226, 179, 106, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.6);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .dl__btn:hover {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--sand) 45%, var(--edge)),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 22px 46px -18px rgba(226, 179, 106, 0.32),
      0 2px 6px rgba(0, 0, 0, 0.6);
  }

  .dl__btn:hover .dl__arrow {
    animation: dl-nudge 0.9s cubic-bezier(0.4, 0, 0.3, 1) infinite;
  }
}

@keyframes dl-nudge {
  0%,
  100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(2.5px);
  }
}

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

.dl__btn:active .dl__rest,
.dl__btn:active .dl__icon {
  translate: 0 1px;
}

/* ---------------------------------------------------------------- what is inside */
.dl__icon {
  position: absolute;
  left: 22px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  color: var(--sand);
}

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

.dl__rest,
.dl__busy,
.dl__done {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
}

.dl__rest {
  left: 60px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.dl__busy,
.dl__done {
  left: 128px;
  display: grid;
  gap: 3px;
  visibility: hidden;
}

.dl__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 620;
  font-stretch: 96%;
  letter-spacing: -0.01em;
}

.dl__size,
.dl__meta {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dl__meta {
  font-size: 14px;
}

.dl__hint {
  margin-top: 5px;
  color: color-mix(in srgb, var(--sand) 70%, var(--muted));
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.dl__file {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--done);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dl__done .dl__title {
  color: var(--text);
}

/* ---------------------------------------------------------------- the hourglass */
.dl__glass {
  position: absolute;
  left: 30px;
  top: 50%;
  width: 64px;
  height: 112px;
  margin-top: -56px;
  visibility: hidden;
  will-change: transform;
}

.dl__glass > * {
  position: absolute;
}

.dl__cap {
  left: 0;
  width: 64px;
  height: 8px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 5px),
    var(--wood);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.dl__cap--top {
  top: 0;
}

.dl__cap--bottom {
  bottom: 0;
}

.dl__post {
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b5124, var(--brass) 45%, #fff1c7 60%, #8a6a2c);
}

.dl__post--left {
  left: 2px;
}

.dl__post--right {
  right: 2px;
}

/* the sand: a low resolution grid, scaled up crisp, one cell for each grain */
.dl__sand,
.dl__back,
.dl__vial {
  left: 5px;
  top: 9px;
  width: 54px;
  height: 94px;
  overflow: visible;
}

.dl__sand {
  image-rendering: pixelated;
}

@media (max-width: 380px) {
  .dl__busy,
  .dl__done {
    left: 120px;
  }

  .dl__glass {
    left: 24px;
  }
}

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

  @media (hover: hover) {
    .dl__btn:hover .dl__arrow {
      animation: none;
    }
  }
}