:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #1b142b;
}

.scene {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 71% 57% at 50% 50%, #291c43 0%, #21172f 55%, #191323 100%);
}

.button-stage {
  width: min(380px, calc(100vw - 28px));
  aspect-ratio: 10 / 3;
  position: relative;
  container-type: inline-size;
}

.delete-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100cqw;
  height: 30cqw;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: .55cqw solid rgba(210, 176, 255, .56);
  border-radius: 100cqw;
  color: #fff;
  background: linear-gradient(115deg, #8e5af3 0%, #7d42eb 51%, #6d2edc 100%);
  box-shadow: 0 1.4cqw 3.5cqw rgba(109, 47, 221, .22), 0 0 5cqw rgba(120, 64, 239, .19), inset 0 .25cqw .8cqw rgba(255,255,255,.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  touch-action: manipulation;
  transition: transform .22s cubic-bezier(.2,.75,.3,1), filter .22s ease, box-shadow .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .delete-button:not(.deleting):hover {
    transform: translate(-50%, -50%) translateY(-.8cqw) scale(1.02);
    filter: brightness(1.08);
    box-shadow: 0 2cqw 4.5cqw rgba(109, 47, 221, .32), 0 0 7cqw rgba(139, 78, 249, .31), inset 0 .25cqw .8cqw rgba(255,255,255,.17);
  }
}

.delete-button:not(.deleting):active {
  transform: translate(-50%, -50%) scale(.985);
  transition-duration: .1s;
}
.delete-button:focus-visible {
  outline: .7cqw solid #e6d3ff;
  outline-offset: 1.3cqw;
}

.button-contents {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqw;
  height: 30cqw;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.trash-wrapper {
  position: absolute;
  left: 26.6cqw;
  top: 6.8cqw;
  width: 11.6cqw;
  height: 13.7cqw;
  display: block;
  filter: drop-shadow(0 0 .25cqw rgba(255,255,255,.28));
}

.trash-tilt, .trash {
  display: block;
  width: 100%;
  height: 100%;
}

.trash-tilt { transform-origin: 50% 55%; }

.trash { overflow: visible; }

.trash-outline, .trash-lines, .trash-lid {
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trash-lines { stroke-width: 1.7; opacity: .95; }
.trash-fill { clip-path: inset(100% 0 0 0); }
.trash-lid { transform-origin: 22px 15px; }

.word {
  position: absolute;
  left: 45.1cqw;
  top: 50%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 8cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-shadow: 0 0 .45cqw rgba(255,255,255,.18);
}

.letter { display: inline-block; transform-origin: 50% 50%; }

.ring-halo, .success-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.ring-halo {
  width: 52cqw;
  border: 2.6cqw solid rgba(143, 103, 218, .16);
  box-shadow: 0 0 6cqw 1.3cqw rgba(174, 123, 255, .25), inset 0 0 4cqw rgba(177, 118, 255, .2);
  transform: translate(-50%, -50%) scale(.7);
}

.success-ring {
  width: 52cqw;
  background: conic-gradient(from 10deg,
    transparent 0 6%, #55d9ff 9% 19%, transparent 22% 45%,
    #fff 49% 61%, transparent 64% 72%, #7355f4 76% 84%, transparent 87% 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 85%, #000 87% 89%, transparent 91%);
  mask: radial-gradient(circle closest-side, transparent 0 85%, #000 87% 89%, transparent 91%);
  transform: translate(-50%, -50%) scale(.7) rotate(-80deg);
  filter: drop-shadow(0 0 1.2cqw #a882ff);
}

.delete-button.deleting {
  cursor: default;
  transition: none;
  animation: button-cycle 4.2s linear both;
}

.deleting .trash-wrapper { animation: trash-travel 4.2s linear both; }
.deleting .trash-tilt { animation: trash-rock 4.2s linear both; }
.deleting .trash-lid { animation: lid-cycle 4.2s linear both; }
.deleting .trash-fill { animation: fill-cycle 4.2s linear both; }
.deleting .trash-lines { animation: line-cycle 4.2s linear both; }
.deleting .ring-halo { animation: halo-cycle 4.2s linear both; }
.deleting .success-ring { animation: ring-cycle 4.2s linear both; }
.deleting .letter { animation: letter-fly .45s var(--delay) cubic-bezier(.18,.72,.42,1) both; }
.deleting.restoring .letter { animation: letter-return .34s var(--return-delay) cubic-bezier(.18,.75,.33,1) both; }

@keyframes button-cycle {
  0% { width: 100cqw; height: 30cqw; box-shadow: 0 1.4cqw 3.5cqw rgba(109,47,221,.22), 0 0 5cqw rgba(120,64,239,.19), inset 0 .25cqw .8cqw rgba(255,255,255,.12); }
  45% { width: 100cqw; height: 30cqw; animation-timing-function: cubic-bezier(.64,.04,.28,1); }
  55%, 76% { width: 30cqw; height: 30cqw; box-shadow: 0 1.7cqw 5cqw rgba(117,48,231,.3), 0 0 7cqw rgba(136,74,255,.26), inset 0 .25cqw .8cqw rgba(255,255,255,.12); }
  76% { animation-timing-function: cubic-bezier(.22,.74,.32,1); }
  89%, 100% { width: 100cqw; height: 30cqw; box-shadow: 0 1.4cqw 3.5cqw rgba(109,47,221,.22), 0 0 5cqw rgba(120,64,239,.19), inset 0 .25cqw .8cqw rgba(255,255,255,.12); }
}

@keyframes trash-travel {
  0%, 31% { transform: translateX(0); }
  39%, 79% { transform: translateX(18cqw); }
  88%, 100% { transform: translateX(0); }
}

@keyframes trash-rock {
  0%, 2% { transform: rotate(0); }
  8% { transform: rotate(46deg) translateY(-.4cqw); }
  14% { transform: rotate(43deg) translateY(-.3cqw); }
  17% { transform: rotate(46deg) translateY(-.1cqw); }
  20% { transform: rotate(42deg) translateY(-.3cqw); }
  23% { transform: rotate(45deg) translateY(-.1cqw); }
  27% { transform: rotate(42deg) translateY(-.3cqw); }
  31% { transform: rotate(43deg); }
  38% { transform: rotate(-8deg); }
  41%, 100% { transform: rotate(0); }
}

@keyframes lid-cycle {
  0%, 3% { transform: translate(0, 0) rotate(0); }
  9%, 30% { transform: translate(4px, -5px) rotate(-26deg); }
  38% { transform: translate(1px, -1px) rotate(8deg); }
  41%, 100% { transform: translate(0, 0) rotate(0); }
}

@keyframes fill-cycle {
  0%, 12% { clip-path: inset(100% 0 0 0); }
  15% { clip-path: inset(83% 0 0 0); }
  18% { clip-path: inset(65% 0 0 0); }
  21% { clip-path: inset(50% 0 0 0); }
  25% { clip-path: inset(32% 0 0 0); }
  29% { clip-path: inset(15% 0 0 0); }
  34%, 79% { clip-path: inset(0 0 0 0); }
  87%, 100% { clip-path: inset(100% 0 0 0); }
}

@keyframes line-cycle {
  0%, 19% { opacity: .95; }
  33%, 79% { opacity: 0; }
  87%, 100% { opacity: .95; }
}

@keyframes ring-cycle {
  0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(.68) rotate(-80deg); }
  65% { opacity: .9; transform: translate(-50%, -50%) scale(.96) rotate(-20deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.07) rotate(40deg); }
  75% { opacity: .9; transform: translate(-50%, -50%) scale(1.08) rotate(115deg); }
  79%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(145deg); }
}

@keyframes halo-cycle {
  0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(.68); }
  65% { opacity: .7; transform: translate(-50%, -50%) scale(.96); }
  70%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
  79%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes letter-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  22% { opacity: 1; transform: translate(calc(var(--fly-x) * .35), calc(var(--peak-y) * .55)) rotate(-14deg) scale(1); }
  53% { opacity: 1; transform: translate(calc(var(--fly-x) * .68), var(--peak-y)) rotate(-34deg) scale(.91); }
  82% { opacity: .9; transform: translate(calc(var(--fly-x) * .82), -6cqw) rotate(-65deg) scale(.66); }
  100% { opacity: 0; transform: translate(var(--fly-x), 1cqw) rotate(-95deg) scale(.15); }
}

@keyframes letter-return {
  0% { opacity: 0; transform: translate(-8cqw, -2cqw) rotate(-25deg) scale(.65); }
  60% { opacity: 1; transform: translate(1cqw, -.5cqw) rotate(6deg) scale(1.05); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .delete-button { transition: none; }
  .delete-button:not(.deleting):hover { transform: translate(-50%, -50%); }
  .delete-button.deleting,
  .deleting .trash-wrapper,
  .deleting .trash-tilt,
  .deleting .trash-lid,
  .deleting .trash-fill,
  .deleting .trash-lines,
  .deleting .ring-halo,
  .deleting .success-ring,
  .deleting .letter,
  .deleting.restoring .letter { animation: none; }
}