.china-eye-system__page {
  opacity: 0;
  transition: opacity 0.16s linear;
}

.china-eye-system__page.is-active {
  opacity: 1;
}

.china-eye-system__arrow {
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.2, 0.88, 0.26, 1), filter 0.18s cubic-bezier(0.2, 0.88, 0.26, 1);
}

.china-eye-system__arrow.is-pulsing {
  transform: scale(1.16);
  filter: drop-shadow(0 0 12px rgba(146, 226, 255, 0.6)) drop-shadow(0 0 28px rgba(146, 226, 255, 0.38));
}

.china-eye-beauty__item {
  opacity: 0;
  z-index: 1;
  transform: translateX(0) scale(0.96);
  transition:
    left 0.26s cubic-bezier(0.2, 0.88, 0.26, 1),
    top 0.26s cubic-bezier(0.2, 0.88, 0.26, 1),
    width 0.26s cubic-bezier(0.2, 0.88, 0.26, 1),
    height 0.26s cubic-bezier(0.2, 0.88, 0.26, 1),
    transform 0.26s cubic-bezier(0.2, 0.88, 0.26, 1),
    opacity 0.18s linear,
    filter 0.26s cubic-bezier(0.2, 0.88, 0.26, 1);
}

.china-eye-beauty__item.is-left,
.china-eye-beauty__item.is-right,
.china-eye-beauty__item.is-center {
  opacity: 1;
}

.china-eye-beauty__item.is-left {
  z-index: 2;
  transform: translateX(0) scale(0.98);
}

.china-eye-beauty__item.is-right {
  z-index: 2;
  transform: translateX(0) scale(0.98);
}

.china-eye-beauty__item.is-center {
  z-index: 3;
  transform: translateX(0) scale(1);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.32));
}

.china-eye-beauty__item {
  transition: left 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), top 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), width 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), height 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), transform 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), filter 0.32s cubic-bezier(0.2, 0.88, 0.26, 1), opacity 0.32s linear;
}

.china-eye-beauty__item.is-side {
  z-index: 2;
  opacity: 0.88;
  transform: scale(0.98);
}

.china-eye-beauty__item.is-center {
  z-index: 3;
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.26));
}

.china-eye-quiz,
.china-eye-quiz__layer,
.china-eye-quiz__success,
.china-eye-quiz__success-scrim {
  position: absolute;
  inset: 0;
}

.china-eye-quiz__option {
  transition: transform 0.12s cubic-bezier(0.2, 0.88, 0.26, 1), filter 0.12s cubic-bezier(0.2, 0.88, 0.26, 1);
}

.china-eye-quiz__option.is-active {
  transform: scale(1.02);
  filter: drop-shadow(0 0 10px rgba(255, 228, 128, 0.45));
}

.china-eye-quiz__option.is-error {
  animation: china-eye-quiz-bounce 0.42s ease-in-out;
}

.china-eye-quiz__success {
  z-index: 20;
  display: grid;
  place-items: center;
}

.china-eye-quiz__success-scrim {
  background: rgba(0, 0, 0, 0.5);
}

.china-eye-quiz__success-card {
  position: relative;
  z-index: 21;
  width: min(1400px, 78%);
  max-height: 78%;
  display: grid;
  place-items: center;
}

.china-eye-quiz__success-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.38));
}

@keyframes china-eye-quiz-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1.02);
  }

  20% {
    transform: translateY(-16px) scale(1.02);
  }

  45% {
    transform: translateY(10px) scale(1.02);
  }

  70% {
    transform: translateY(-8px) scale(1.02);
  }
}