@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

@property --bg-opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@keyframes borderAnimation {
  33% {
    --bg-opacity: 1;
    border-color: transparent;
  }
  66% {
    border-color: rgb(247 85 144);
  }
  80% {
    --bg-opacity: 1;
    border-color: rgb(247 85 144);
  }
  100% {
    --bg-angle: 720deg;
    --bg-opacity: 0;
    border-color: rgb(247 85 144);
  }
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.005);
    box-shadow:
      0px 3px 5px -1px rgba(0, 0, 0, 0.1),
      0px 6px 10px 0px rgba(0, 0, 0, 0.14),
      0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes fadeOut {
  100% {
    border-color: transparent;
    --bg-opacity: 0;
  }
}

body {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f5f9;

  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.card {
  position: relative;
  padding: 28px;
  width: 480px;

  animation:
    borderAnimation 3s normal forwards linear paused,
    zoom 1400ms normal forwards ease-in-out 2100ms paused,
    fadeOut 500ms normal forwards ease-in-out 4100ms paused;

  color: rgba(0, 0, 0, 0.87);

  background:
    linear-gradient(to bottom, white, white) padding-box,
    conic-gradient(
        from var(--bg-angle),
        rgb(187 222 240 / var(--bg-opacity)) 90deg,
        rgb(251 216 127 / var(--bg-opacity)) 90deg 180deg,
        rgb(0 166 166 / var(--bg-opacity)) 180deg 240deg,
        rgb(99 105 209 / var(--bg-opacity)) 240deg 360deg
      )
      border-box;

  background-opacity: 0;

  border: 3px solid transparent;
  border-radius: 4px;

  transition: all 1s;
}

.card:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  transition: all 0.25s;
}

.card:hover:after {
  box-shadow:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.run-animation {
  animation-play-state: running;
}

.btn-animate {
  display: inline-flex;
  margin-top: 24px;
  background: royalblue;
  padding: 12px;
  border-radius: 4px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  user-select: none;
}