body { overflow-x: hidden; }

.effect-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}

.liquid-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.site { position: relative; z-index: 1; }

.social-item {
  position: relative;
  isolation: isolate;
  margin-bottom: 6px;
}
.social-item.is-visible { z-index: 10; }
.social-item .social-row { position: relative; z-index: 2; margin-bottom: 0; }

.hover-figure {
  --figure-width: 164px;
  --figure-height: 195px;
  position: absolute;
  z-index: 1;
  bottom: var(--figure-bottom, -36px);
  left: var(--figure-x, 20px);
  display: block;
  width: var(--figure-width);
  height: var(--figure-height);
  opacity: 0;
  pointer-events: none;
  transform-origin: center bottom;
  transform: translate3d(0, 39px, 0) rotate(var(--figure-rotation, 0deg)) scale(.9);
  transition: transform .55s cubic-bezier(.17, 1.32, .32, 1), opacity .18s ease;
  will-change: transform;
}
.hover-figure::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--rust);
  opacity: .78;
  transform: translate(7px, 7px);
  -webkit-mask-image: var(--cutout);
  mask-image: var(--cutout);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.hover-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: grayscale(.48) sepia(.62) saturate(.75) contrast(1.1) brightness(1.03);
}
.figure-hoodie { --cutout: url("./assets/cutout-hoodie.webp"); --figure-width: 171px; --figure-height: 201px; }
.figure-autumn { --cutout: url("./assets/cutout-autumn.webp"); --figure-width: 155px; --figure-height: 211px; }
.figure-cat { --cutout: url("./assets/cutout-cat.webp"); --figure-width: 160px; --figure-height: 220px; }
.figure-man { --cutout: url("./assets/cutout-man.webp"); --figure-width: 146px; --figure-height: 184px; }

.social-item.is-visible .hover-figure {
  opacity: .98;
  transform: translate3d(0, -5px, 0) rotate(var(--figure-rotation, 0deg)) scale(1);
}

@media (max-width: 760px) {
  .social-item .hover-figure { --figure-width: 150px; --figure-height: 185px; }
  .hover-figure::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hover-figure { transition: none; }
}