/* The crumbling button: a red Delete project button on a white page. The script paints the button on a canvas to
   break it into grains, and the note that takes its place is painted the same way to gather it: the colours of both
   come from here. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #18181b;           /* the words */
  --red-top: #ef5a5f;       /* the button, at the top */
  --red: #d9363d;           /* the button, at the bottom */
  --red-edge: #b92a31;      /* the button's edge */
  --on-red: #ffffff;        /* the words on the button */
  --toast-top: #26262b;     /* the note that takes its place, at the top */
  --toast: #18181b;         /* the note, at the bottom */
  --on-toast: #f4f4f5;      /* the words on the note */
  --ok: #3ccf8e;            /* the tick on the note */
}

* {
  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: 'Geist 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;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 56px 16px;
}

/* ---------------------------------------------------------------- the cell */
/* the button and the note share one cell, centred on each other */
.action {
  display: grid;
  justify-items: center;
  align-items: center;
  outline: none;
}

.action__item {
  position: relative;
  grid-area: 1 / 1;
  pointer-events: none;
}

/* while the canvas paints them, the real button and note are hidden (their shadows are not) */
.del,
.toast {
  pointer-events: auto;
}

.del.is-gone,
.toast.is-gone {
  visibility: hidden;
}

/* the drop shadows stand apart from what the canvas paints, so that they can fade while the grains fly */
.action__shadow {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  pointer-events: none;
}

.action__shadow--del {
  /* the mask the script moves runs over the shadow too, which reaches below and around the button */
  inset: -14px -20px -30px;
  border-radius: 0;
  background: none;
}

.action__shadow--del::before {
  content: '';
  position: absolute;
  inset: 14px 20px 30px;
  border-radius: 11px;
  box-shadow:
    0 1px 2px rgba(185, 42, 49, 0.28),
    0 8px 18px -8px rgba(217, 54, 61, 0.65);
  transition: box-shadow 0.25s;
}

.action__shadow--toast {
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.2),
    0 14px 30px -12px rgba(24, 24, 27, 0.5);
  opacity: 0;
}

/* ---------------------------------------------------------------- the button */
.del {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 17px 0 14px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--red-top), var(--red));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px var(--red-edge);
  color: var(--on-red);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* the light of the hover: a white veil the canvas paints too, at the same strength */
.del::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.del__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* the lid of the bin lifts on its left hinge under the pointer */
.del__icon [data-lid] {
  transform-box: view-box;
  transform-origin: 4px 6.5px;
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.del__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.del:active {
  transform: scale(0.965);
  transition-duration: 0.1s;
}

@media (hover: hover) {
  .del:hover::before {
    opacity: 0.08;
  }

  .del:hover [data-lid] {
    transform: translateY(-1.2px) rotate(-14deg);
  }

  .action__item:hover .action__shadow--del::before {
    box-shadow:
      0 1px 2px rgba(185, 42, 49, 0.28),
      0 12px 24px -8px rgba(217, 54, 61, 0.75);
  }
}

.del:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- the note */
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 6px 0 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--toast-top), var(--toast));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--on-toast);
  white-space: nowrap;
}

.toast__icon {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* a hairline between the words and Undo */
.toast__rule {
  flex: none;
  width: 1px;
  height: 18px;
  background: var(--on-toast);
  opacity: 0.16;
}

.undo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.undo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.undo__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* the arrow of Undo winds back a little under the pointer */
.undo__icon g {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.undo__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.undo:active::before {
  opacity: 0.14;
}

@media (hover: hover) {
  .undo:hover::before {
    opacity: 0.08;
  }

  .undo:hover .undo__icon g {
    transform: rotate(-24deg);
  }
}

.undo:focus-visible {
  outline: 2px solid var(--on-toast);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------------- the grains */
.dust {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* reduced motion: nothing moves; the press and the hover show in the light alone */
@media (prefers-reduced-motion: reduce) {
  .del:active {
    transform: none;
  }

  .del:active::before {
    opacity: 0.14;
  }

  .del [data-lid],
  .undo__icon g {
    transform: none !important;
  }
}