.reaction-hunt {
  --rh-z-index: 9999;
  --rh-portal-top: #d9d9d9;
  --rh-portal-bottom: #b79fe0;
  position: fixed;
  inset: 0;
  z-index: var(--rh-z-index);
  display: block;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  contain: layout style paint;
}

.reaction-hunt--contained {
  position: absolute;
}

.reaction-hunt,
.reaction-hunt * {
  box-sizing: border-box;
}

.reaction-hunt .rh-critter {
  --rh-cell-x: 2;
  --rh-cell-y: 2;
  --rh-critter-size: clamp(73px, min(10.5vw, 12.6vh), 147px);
  --rh-portal-height: calc(var(--rh-critter-size) * 0.1703);
  --rh-portal-half-height: calc(var(--rh-critter-size) * 0.08515);
  position: absolute;
  top: calc((var(--rh-cell-y) + 0.5) * 20%);
  left: calc((var(--rh-cell-x) + 0.5) * 20%);
  width: var(--rh-critter-size);
  height: calc(var(--rh-critter-size) * 1.04);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@supports (width: 1cqw) {
  .reaction-hunt .rh-critter {
    --rh-critter-size: clamp(73px, min(10.5cqw, 12.6cqh), 147px);
  }
}

.reaction-hunt .rh-mouse-window {
  position: absolute;
  top: 0;
  right: 1%;
  bottom: 5.5%;
  left: 1%;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(ellipse at center, #000 99%, transparent 100%);
  -webkit-mask-position:
    top center,
    center bottom;
  -webkit-mask-size:
    100% calc(100% - var(--rh-portal-half-height)),
    94% var(--rh-portal-height);
  -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(ellipse at center, #000 99%, transparent 100%);
  mask-position:
    top center,
    center bottom;
  mask-size:
    100% calc(100% - var(--rh-portal-half-height)),
    94% var(--rh-portal-height);
  mask-repeat: no-repeat;
}

.reaction-hunt .rh-mouse-figure {
  position: absolute;
  bottom: calc(var(--rh-critter-size) * -0.31);
  left: calc(50% + 4px);
  width: 100%;
  aspect-ratio: 1120 / 1405;
  opacity: 0;
  transform: translate(-50%, 72%) scale(0.88);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.reaction-hunt .rh-mouse-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.reaction-hunt .rh-reaction {
  position: absolute;
  top: 11.8%;
  left: 27.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif;
  font-size: calc(var(--rh-critter-size) * 0.1305);
  line-height: 1;
  opacity: 1;
}

.reaction-hunt .rh-portal {
  position: absolute;
  bottom: 5.5%;
  left: 50%;
  z-index: 1;
  width: 92%;
  aspect-ratio: 493.63 / 91.41;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    var(--rh-portal-top) 0%,
    var(--rh-portal-bottom) 100%
  );
  opacity: 0;
  transform: translateX(-50%) scaleX(0.04) scaleY(0.16);
  transform-origin: center;
  will-change: transform, opacity;
}

.reaction-hunt .rh-is-opening .rh-portal,
.reaction-hunt .rh-is-visible .rh-portal,
.reaction-hunt .rh-is-hiding .rh-portal {
  opacity: 1;
  animation: rh-portal-open 310ms cubic-bezier(0.18, 0.9, 0.34, 1)
    forwards;
}

.reaction-hunt .rh-is-visible .rh-mouse-figure {
  animation: rh-mouse-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reaction-hunt .rh-is-visible:not(.rh-is-fleeing) .rh-mouse-figure {
  animation:
    rh-mouse-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    rh-mouse-idle 1.8s 560ms ease-in-out infinite;
}

.reaction-hunt .rh-is-hiding .rh-mouse-figure {
  animation: rh-mouse-drop 306ms cubic-bezier(0.65, 0, 0.86, 0.2) forwards;
}

.reaction-hunt .rh-is-hiding .rh-portal {
  animation: rh-portal-close 340ms 306ms cubic-bezier(0.65, 0, 0.86, 0.2)
    both;
}

.reaction-hunt .rh-is-fleeing .rh-mouse-figure {
  animation: rh-mouse-flee 289ms cubic-bezier(0.7, 0, 1, 0.6) forwards;
}

@keyframes rh-portal-open {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.04) scaleY(0.16);
  }
  65% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.08) scaleY(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }
}

@keyframes rh-portal-close {
  0% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.08) scaleY(0.86);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.02) scaleY(0.08);
  }
}

@keyframes rh-mouse-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 72%) scale(0.88);
  }
  18% {
    opacity: 1;
  }
  74% {
    transform: translate(-50%, -2.5%) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes rh-mouse-idle {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -2.5%);
  }
}

@keyframes rh-mouse-drop {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 80%) scale(0.88);
  }
}

@keyframes rh-mouse-flee {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  24% {
    transform: translate(-50%, -8%) scale(1.02);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 86%) scale(0.84);
  }
}

/* На тач-экранах мышь и портал на 30% меньше */
@media (pointer: coarse) {
  .reaction-hunt .rh-critter {
    --rh-critter-size: clamp(51px, min(7.35vw, 8.82vh), 103px);
  }
}
@media (pointer: coarse) and (min-width: 1px) {
  @supports (width: 1cqw) {
    .reaction-hunt .rh-critter {
      --rh-critter-size: clamp(51px, min(7.35cqw, 8.82cqh), 103px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reaction-hunt .rh-critter,
  .reaction-hunt .rh-mouse-figure,
  .reaction-hunt .rh-portal {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}