Css hover animation

Появлются анимировано блоки. Очень интересно сделано, нигде не видел такого.

by akogch

HTML

<div class="container no_shift">
  <div class="every">
    <span></span>
  </div>
  <div class="every">
    <span></span>
  </div>
  <div class="every last">
    <span></span>
  </div>
</div>

CSS

/* полоски с помощью тени. полоски сворачиваются внутрь,
   дополнительно становятся прозрачными. единственные полоски не становящиеся прозрачными - предпоследние. именно из-за них и приходится регулировать полоски с помощью теней */

:root,
html {
  font-size: 62.5%;
  /*конкретный размер (например в px) не указываем, чтоб оставить возможность изменять в браузере шрифт по-умолчанию*/
}

body {
  font-size: 1.6rem;
  /*возвращаем стандартное значение в 16px. При этом rem везде, кроме медиазапросов, остаётся 10px, что удобно для назначения размеров */
}

.container {
  margin: 75px 100px;
  background: RGBA(235, 150, 88, 0.4);
  --fascia: 25px;
  padding: 0 var(--fascia);
}

.no_shift {
  font-size: 0;
}

.no_shift > *:not(.no_shift) {
  font-size: 1.6rem;
}

.every {
  display: inline-block;
  width: 200px;
  height: 100px;
  --border-radius: 25px;
  border-radius: var(--border-radius);
  position: relative;
  --first-color: RGBA(128, 240, 225, 1);
  --second-color: RGBA(210, 210, 160, 1);
  --transition: 1s;
  transition: var(--transition);
}

.every:hover {
  background: RGBA(128, 240, 232, 0.3);
}

.every::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: var(--transition);
  box-shadow:
    inset var(--fascia) 0 0 var(--second-color),
    calc(-1 * var(--fascia)) 0 0 var(--first-color);
}

.every:hover::before,
.every:hover + .every::before {
  opacity: 0;
  box-shadow: none;
}

.every.last::before {
  width: calc(100% - 2 * var(--fascia));
  left: var(--fascia);
  box-shadow:
    var(--fascia) 0 0 var(--first-color),
    calc(2 * var(--fascia)) 0 0 var(--second-color),
    calc(-1 * var(--fascia)) 0 0 var(--second-color),
    calc(-2 * var(--fascia)) 0 0 var(--first-color);
}

.every:hover + .every.last::before {
  opacity: 1;
  box-shadow:
    var(--fascia) 0 0 var(--first-color),
    calc(2 * var(--fascia))...