/* Animated KRP smile placeholder: subtle left-eye wink. */
.krp-smilie-placeholder {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.krp-smilie-placeholder > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft patch conceals the static left eye from the JPEG. */
.krp-smilie-placeholder::after {
  position: absolute;
  z-index: 2;
  top: 36.5%;
  left: 37.2%;
  width: 6.8%;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  background: #EEEEEE;
  border-radius: 50%;
}

/* Recreated eye briefly compresses into a natural wink. */
.krp-smilie-placeholder::before {
  position: absolute;
  z-index: 3;
  top: 39.2%;
  left: 38.5%;
  width: 4.4%;
  aspect-ratio: 1;
  content: "";
  pointer-events: none;
  background: #B2B2B2;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .78);
  transform-origin: 50% 50%;
  animation: krp-smilie-left-eye-wink 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform;
}

@keyframes krp-smilie-left-eye-wink {
  0%, 68%, 76%, 100% {
    transform: scaleY(1) rotate(0deg);
  }
  71%, 73% {
    transform: scaleY(.13) rotate(-7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .krp-smilie-placeholder::before {
    animation: none;
  }
}