@font-face {
  font-family: "Inter Asset";
  src: url("assets/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --check-spring: linear(
    0, 0.0242, 0.0871, 0.1757, 0.2793, 0.3892, 0.4987, 0.6028,
    0.6982, 0.7827, 0.8552, 0.9156, 0.9641, 1.0017, 1.0295, 1.0486,
    1.0606, 1.0666, 1.068, 1.0659, 1.0613, 1.0551, 1.048, 1.0405,
    1.0331, 1.026, 1.0197, 1.014, 1.0092, 1.0052, 1.002, 0.9996,
    0.9978, 0.9965, 0.9958, 0.9954, 0.9954, 0.9955, 0.9959, 0.9963,
    0.9968, 0.9973, 0.9978, 0.9983, 0.9987, 0.9991, 0.9994, 0.9997,
    0.9999, 1.0001, 1.0002
  );
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: #4c4c4c;
  color: #ffffff;
  font-family: "Inter Asset", sans-serif;
  font-synthesis: none;
}

.demo-stage {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.motion-canvas {
  position: relative;
  width: 542px;
  height: 290px;
  overflow: hidden;
}

.snackbar {
  position: absolute;
  z-index: 1;
  top: 76px;
  left: 93px;
  display: flex;
  width: 340px;
  height: 56px;
  align-items: center;
  padding: 0 8px;
  border-radius: 12px;
  background: #1e1e1f;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  will-change: opacity, translate;
  animation:
    snackbar-opacity 8s linear infinite,
    snackbar-translate 8s linear infinite;
}

.leading-content {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}

.leading-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.check-mark {
  position: absolute;
  inset: 2px;
  width: 20px;
  height: 20px;
  transform-origin: center;
  will-change: opacity, scale;
  animation:
    check-opacity 8s linear infinite,
    check-scale 8s linear infinite;
}

.check-mark img {
  display: block;
  width: 20px;
  height: 20px;
}

.text-box {
  display: flex;
  min-width: 0;
  height: 56px;
  flex: 1 1 auto;
  align-items: center;
  padding: 16px 8px 16px 12px;
}

.text-box p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  font-feature-settings: "ss07" 1;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.particle-burst {
  position: absolute;
  z-index: 2;
  top: 56px;
  left: 73px;
  width: 96px;
  height: 96px;
  pointer-events: none;
}

.particle {
  position: absolute;
  display: block;
  opacity: 0;
  scale: 0;
  transform-origin: center;
  will-change: opacity, translate, scale;
}

.particle-large {
  top: 46px;
  left: 46px;
  width: 4px;
  height: 4px;
}

.particle-small {
  top: 46.75px;
  left: 46.75px;
  width: 2.5px;
  height: 2.5px;
}

.particle img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
}

.particle.timing-a {
  animation:
    particle-opacity-a 8s linear infinite,
    particle-translate-a 8s linear infinite,
    particle-scale-a 8s linear infinite;
}

.particle.timing-b {
  animation:
    particle-opacity-b 8s linear infinite,
    particle-translate-b 8s linear infinite,
    particle-scale-b 8s linear infinite;
}

.particle.timing-c {
  animation:
    particle-opacity-c 8s linear infinite,
    particle-translate-c 8s linear infinite,
    particle-scale-c 8s linear infinite;
}

@keyframes snackbar-opacity {
  0% { animation-timing-function: ease-out; opacity: 0; }
  1.875% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes snackbar-translate {
  0% { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); translate: 0 -96px; }
  5.625% { translate: 0 0; }
  100% { translate: 0 0; }
}

@keyframes check-opacity {
  0%, 3.75% { opacity: 0; }
  4.375%, 100% { opacity: 1; }
}

@keyframes check-scale {
  0% { scale: 0; }
  3.75% { animation-timing-function: var(--check-spring); scale: 0; }
  8.125%, 100% { scale: 1; }
}

@keyframes particle-opacity-a {
  0%, 6.875% { opacity: 0; }
  7.625% { animation-timing-function: ease-in-out; opacity: 1; }
  10.2% { animation-timing-function: ease-in-out; opacity: 0.5; }
  11.625%, 100% { opacity: 0; }
}

@keyframes particle-opacity-b {
  0%, 7.25% { opacity: 0; }
  8% { animation-timing-function: ease-in-out; opacity: 1; }
  10.575% { animation-timing-function: ease-in-out; opacity: 0.5; }
  12%, 100% { opacity: 0; }
}

@keyframes particle-opacity-c {
  0%, 7.625% { opacity: 0; }
  8.375% { animation-timing-function: ease-in-out; opacity: 1; }
  10.95% { animation-timing-function: ease-in-out; opacity: 0.5; }
  12.375%, 100% { opacity: 0; }
}

@keyframes particle-translate-a {
  0%, 6.875% { animation-timing-function: ease-out; translate: 0 0; }
  11.625%, 100% { translate: var(--tx) var(--ty); }
}

@keyframes particle-translate-b {
  0%, 7.25% { animation-timing-function: ease-out; translate: 0 0; }
  12%, 100% { translate: var(--tx) var(--ty); }
}

@keyframes particle-translate-c {
  0%, 7.625% { animation-timing-function: ease-out; translate: 0 0; }
  12.375%, 100% { translate: var(--tx) var(--ty); }
}

@keyframes particle-scale-a {
  0%, 6.875% { animation-timing-function: ease-out; scale: 0; }
  7.875% { animation-timing-function: ease-in-out; scale: 1; }
  11.625%, 100% { scale: 0.15; }
}

@keyframes particle-scale-b {
  0%, 7.25% { animation-timing-function: ease-out; scale: 0; }
  8.25% { animation-timing-function: ease-in-out; scale: 1; }
  12%, 100% { scale: 0.15; }
}

@keyframes particle-scale-c {
  0%, 7.625% { animation-timing-function: ease-out; scale: 0; }
  8.625% { animation-timing-function: ease-in-out; scale: 1; }
  12.375%, 100% { scale: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .snackbar,
  .check-mark,
  .particle {
    animation: none;
    will-change: auto;
  }

  .snackbar {
    opacity: 1;
    translate: 0 0;
  }

  .check-mark {
    opacity: 1;
    scale: 1;
  }

  .particle {
    opacity: 0;
  }
}