.crowd,
.trance {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.watcher {
  position: absolute;
  filter: drop-shadow(0 0 14px rgba(182, 255, 59, 0.35));
}

.watcher svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.trance {
  opacity: 0;
  background: radial-gradient(
    circle at var(--eye-x, 50%) var(--eye-y, 30%),
    transparent 90px,
    rgba(0, 0, 0, 0.9) 380px
  );
  transition: opacity 1.4s ease;
}

.hypno .trance {
  opacity: 1;
}

:is(main > :not(.eye-button), .marquee, footer) {
  transition: filter 1.4s ease;
}

.hypno :is(main > :not(.eye-button), .marquee, footer) {
  filter: brightness(0.18) blur(1px);
}

.molt-dull .skin-shed {
  opacity: 0.95;
  transition: opacity 1.1s ease;
}

.molt-peel .skin-shed {
  mask-image: linear-gradient(
    176deg,
    transparent calc(var(--peel) - 1%),
    #000 calc(var(--peel) + 6%)
  );
  animation: peel var(--peel-time) cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

.molt-peel .skin-fresh {
  opacity: 1;
  mask-image: linear-gradient(176deg, #000 calc(var(--peel) - 8%), transparent var(--peel));
  animation: peel var(--peel-time) cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

.molt-after .skin-fresh {
  opacity: 0;
  transition: opacity 2.4s ease;
}

.peel-edge {
  position: fixed;
  left: -5vw;
  width: 110vw;
  height: 90px;
  top: calc(var(--peel) - 45px);
  opacity: 0;
  pointer-events: none;
  rotate: -4deg;
  background: linear-gradient(
    to bottom,
    transparent 28%,
    rgba(226, 234, 218, 0.22) 40%,
    rgba(246, 250, 240, 0.5) 49%,
    rgba(120, 130, 115, 0.3) 56%,
    rgba(0, 0, 0, 0.4) 64%,
    transparent 74%
  );
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cpath d='M0 30C40 18 80 42 120 30S200 18 240 30V62C200 74 160 50 120 62S40 74 0 62Z' fill='%23000'/%3E%3C/svg%3E");
  mask-size: 240px 90px;
  mask-repeat: repeat-x;
  filter: blur(1.5px);
}

.molt-peel .peel-edge {
  opacity: 1;
  animation: peel var(--peel-time) cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

.flash {
  opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255, 36, 16, 0.3), transparent 70%);
}

.flash.on {
  animation: flash 1.6s ease-out;
}

.spiral {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 1.2s ease;
}

.eye-button.hypnotized .spiral {
  opacity: 0.6;
  animation: spin 2.6s linear infinite;
}

.eye-button.hypnotized .eye {
  filter: drop-shadow(0 0 60px rgba(182, 255, 59, 0.6));
}

.eye-button.annoyed .pupil,
.eye-button.angry .pupil {
  transform: scale(0.3, 1.05);
}

.eye-button.angry {
  animation: shake 0.45s linear 3;
}

.eye-button.angry .eye {
  filter: drop-shadow(0 0 42px rgba(255, 50, 24, 0.7));
}

.eye-button.angry .lids > path {
  stroke: #ff4d2e;
}

.eye-button.angry stop:nth-child(1) {
  stop-color: #ffd9a0;
}

.eye-button.angry stop:nth-child(2) {
  stop-color: #ff5a1f;
}

.eye-button.angry stop:nth-child(3) {
  stop-color: #c3140b;
}

.eye-button.angry stop:nth-child(4) {
  stop-color: #3a0404;
}

.eye-button.cloudy stop:nth-child(1) {
  stop-color: #eef3f6;
}

.eye-button.cloudy stop:nth-child(2) {
  stop-color: #bccad3;
}

.eye-button.cloudy stop:nth-child(3) {
  stop-color: #8e9fab;
}

.eye-button.cloudy stop:nth-child(4) {
  stop-color: #4f5d68;
}

.eye-button.cloudy .pupil {
  fill: #5d6b75;
}

.eye-button.cloudy .eye {
  filter: drop-shadow(0 0 30px rgba(190, 210, 225, 0.35));
}

.whisper {
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--lime);
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 0.4s ease,
    translate 0.4s ease;
}

.whisper.shown {
  opacity: 1;
  translate: 0 0;
}

.whisper.hot {
  color: #ff5a3c;
}

@keyframes peel {
  from {
    --peel: -10%;
  }
  to {
    --peel: 115%;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes flash {
  15% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes shake {
  25% {
    translate: -5px 0;
  }
  75% {
    translate: 5px 0;
  }
}