/* Hold button (js/hold-button.js): press and hold to confirm; the fill
   runs across with a wave crest, release early and it drains back. */
.hold-button {
  --hb-radius: 14px;
  --hb-bg: #27272a;
  --hb-fill: #f60303;
  --hb-text: #f5f5f5;
  --hb-fill-text: #ffffff;
  --hb-hold: 2000ms;
  --hb-release: 200ms;
  --hb-press: 0.97;
  --hb-wave: 6px;
  --hb-w: 0px;
  --hb-h: 0px;
  --hb-cycles: 2;
  --hb-p: 0;
  --hb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hb-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hb-glow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 32px -6px color-mix(in srgb, var(--hb-fill) 70%, transparent);
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  margin: 0;
  border: 0;
  border-radius: var(--hb-radius);
  background: var(--hb-bg);
  color: var(--hb-text);
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: var(--hb-shadow);
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms var(--hb-ease-out), background-color 160ms ease, box-shadow var(--hb-release) var(--hb-ease-out);
}
.hold-button--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.hold-button--md { height: 44px; padding: 0 22px; font-size: 15px; }
.hold-button--lg { height: 52px; padding: 0 28px; font-size: 17px; }
.hold-button--block { display: grid; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .hold-button:not(:disabled):hover { background: color-mix(in srgb, var(--hb-bg) 92%, #fff); }
}
.hold-button[data-phase='holding'][data-input='pointer'] { transform: scale(var(--hb-press)); }
.hold-button[data-glow='true'][data-phase='holding'],
.hold-button[data-glow='true'][data-phase='done'] { box-shadow: var(--hb-glow); }
.hold-button[data-glow='true'][data-phase='holding'] {
  transition: transform 160ms var(--hb-ease-out), background-color 160ms ease, box-shadow var(--hb-hold) linear;
}
.hold-button:focus-visible { outline: 2px solid var(--hb-fill); outline-offset: 3px; }
.hold-button:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.hold-button__pulse { position: absolute; inset: 0; z-index: 0; border-radius: var(--hb-radius); pointer-events: none; opacity: 0; }
.hold-button[data-glow='true'][data-phase='done'] .hold-button__pulse { animation: hb-pulse 600ms var(--hb-ease-out) forwards; }
@keyframes hb-pulse {
  from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--hb-fill) 55%, transparent); }
  to { opacity: 0; box-shadow: 0 0 0 14px color-mix(in srgb, var(--hb-fill) 0%, transparent); }
}
.hold-button__label { position: relative; z-index: 2; display: grid; place-items: center; }
.hold-button__label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity 200ms ease, filter 200ms ease; }
.hold-button__done { opacity: 0; filter: blur(2px); }
.hold-button[data-phase='done'] .hold-button__idle { opacity: 0; filter: blur(2px); }
.hold-button[data-phase='done'] .hold-button__done { opacity: 1; filter: blur(0); }
.hold-button__clip { position: absolute; inset: 0; z-index: 3; clip-path: inset(0 round var(--hb-radius)); pointer-events: none; }
.hold-button__fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--hb-fill);
  color: var(--hb-fill-text);
  clip-path: inset(0 calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0);
}
.hold-button__crest {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--hb-fill);
  color: var(--hb-fill-text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-size: var(--hb-wave) calc(var(--hb-h) * 2);
  mask-size: var(--hb-wave) calc(var(--hb-h) * 2);
  -webkit-mask-position-x: calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));
  mask-position-x: calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));
  -webkit-mask-position-y: calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));
  mask-position-y: calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));
}
.hold-button__label--fill { z-index: auto; }
.hold-button__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-contrast: more) { .hold-button { outline: 1px solid var(--hb-text); } }
@media (prefers-reduced-motion: reduce) {
  .hold-button { transition: background-color 160ms ease, box-shadow var(--hb-release) ease; transform: none !important; }
  .hold-button__fill { clip-path: inset(0); opacity: 0; transition: opacity var(--hb-release) ease; }
  .hold-button__crest { display: none; }
  .hold-button[data-phase='holding'] .hold-button__fill,
  .hold-button[data-phase='done'] .hold-button__fill { opacity: 1; transition: opacity var(--hb-hold) linear; }
  .hold-button__pulse { animation: none !important; }
  .hold-button__label > span { transition: opacity 200ms ease; filter: none !important; }
}