#look-decon { animation: page-in .25s ease; }
.decon-item {
  opacity: 0;
  transform: translateY(36px) rotate(var(--r, 3deg)) scale(.85);
  animation: decon-pop .55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * .13s + .15s);
}
.decon-line {
  width: 2px; background: linear-gradient(180deg, rgba(239,68,68,.7), transparent);
  opacity: 0; animation: decon-pop .4s .1s forwards;
}
.look-hint {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-size: 9px; letter-spacing: 2px; font-weight: 700; color: #fff;
  background: rgba(239,68,68,.85); padding: 5px 10px; border-radius: 9999px;
  opacity: 0; transform: translateY(-6px); transition: all .25s;
}
.group:hover .look-hint { opacity: 1; transform: none; }
.decon-stage { position: relative; }
.decon-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
.decon-photo-wrap { position: relative; z-index: 2; }
.decon-pieces { z-index: 3; }
.decon-piece { display: block; padding: 0; background: none; border: 0; cursor: pointer; }
.decon-card {
  opacity: 0; transform: translateY(14px) scale(.9);
  animation: decon-pop .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--pi, 0) * .09s + .12s);
  transition: transform .2s;
}
.decon-piece:hover .decon-card { transform: translateY(-3px); }
.decon-piece:active .decon-card { transform: scale(.97); }