.b-head {
  --width: 24.4583rem;
  --height: calc(var(--width) / 2);
  --eye-width: calc(var(--width) * 0.4617);
  --eye-height: calc(var(--height) * 0.4428);
  position: relative;
  width: var(--width);
  height: auto;
  background: var(--color-brand-3);
  border-radius: 999rem 999rem 0 0;
}
.b-head:before {
  display: block;
  padding-top: 50%;
  content: "";
}
.b-head .b__eye {
  position: absolute;
  top: 29.1%;
  left: 26.7%;
  z-index: 2;
  width: 46.6%;
  height: 41.4%;
}
.b-head .b__eye:before {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background: inherit;
  content: "";
}
.b-head .b__eye.is-set {
  background: #fff;
  clip-path: var(--path-open);
  animation: eye-blink 6s infinite;
  transition: clip-path 0.6s cubic-bezier(0.34, 1.5, 0.34, 1);
}
.b-head .b__pupil {
  --x-move: calc(
    (
        calc(
            var(--mouse-progress-x) * var(--mouse-progress-x) *
              (3 - 2 * var(--mouse-progress-x))
          ) - 0.5
      ) * 50%
  );
  --y-move: calc(
    (
        calc(
            var(--mouse-progress-y) * var(--mouse-progress-y) *
              (3 - 2 * var(--mouse-progress-y))
          ) - 0.5
      ) * 30%
  );
  position: absolute;
  top: 0;
  left: 27.6%;
  width: 44.8%;
  height: 100%;
  border-radius: 50%;
  transform: translate3d(var(--x-move), var(--y-move), 0);
}
.b-head .b__pupil__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-brand-9);
  border-radius: 50%;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.1, 1.6);
  will-change: transform;
}
.b-head .b__pupil__inner--secondary {
  background: var(--color-brand-2);
  transform: translate3d(0, -120%, 0);
}
.b-head .b__pupil.is-alternate .b__pupil__inner--main {
  transform: translate3d(0, 120%, 0);
}
.b-head .b__pupil.is-alternate .b__pupil__inner--secondary {
  transform: translate3d(0, 0, 0);
}