/* interactions.css: alles wat beweegt. potlood: niet aankomen (wel aankomen) */

/* ---------- frame-tilt ---------- */

#straightCount { display: inline-block; }
#straightCount.bump { animation: bump .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); color: #7a1d00; }
  100% { transform: scale(1); }
}

.nail.strain .nail-head { animation: strain .45s ease-in-out; }
@keyframes strain {
  0%, 100% { transform: rotate(18deg) scaleY(.82); }
  25% { transform: rotate(24deg) scaleY(.75) translateY(1px); }
  60% { transform: rotate(14deg) scaleY(.85); }
}

/* ---------- staples ---------- */

.staple {
  position: absolute;
  z-index: 3;
  width: max(30px, 4.6cqw);
  height: max(30px, 4.6cqw);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.staple::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(13px, 2.4cqw);
  height: max(3px, .5cqw);
  border-radius: 1px;
  background: linear-gradient(180deg, #f4f6f8, #9aa1a8 55%, #6b7178);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .45), inset 2px 0 0 #5c6268, inset -2px 0 0 #5c6268;
  transform: translate(-50%, -50%);
}
.staple.vertical::before { transform: translate(-50%, -50%) rotate(90deg); }
.staple:hover::before, .staple:focus-visible::before {
  background: linear-gradient(180deg, #fff, #c8cdd2 55%, #8a9097);
  box-shadow: 0 0 0 2px rgba(255, 245, 154, .9), 0 1px 1px rgba(0, 0, 0, .45);
}
.staple:focus-visible { outline: 2px dashed var(--pencil); }
.staple:hover { animation: wiggle .3s ease-in-out; }
@keyframes wiggle {
  25% { translate: 0 -1px; }
  75% { translate: 0 1px; }
}

.canvas.falling .face, .canvas.falling .wrap { box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .4); }

/* ---------- dust ---------- */

.dustzone canvas.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  transition: opacity 1.2s;
}
.dustzone canvas.dust.gone { opacity: 0; pointer-events: none; }

.dust-puff {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(150, 142, 126, .7);
  pointer-events: none;
  animation: puff .9s ease-out forwards;
}
@keyframes puff {
  to { transform: translate(var(--dx), var(--dy)) scale(3); opacity: 0; }
}

.dustbunny { cursor: pointer; }
.dustbunny.blown {
  opacity: 0;
  transform: translate(8cqw, -3cqw) rotate(200deg) scale(.4);
  pointer-events: none;
}

/* ---------- peek ---------- */

.peek {
  --s: 20px;
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  width: var(--s);
  height: var(--s);
  pointer-events: none;
}
.peek.animate { transition: width .45s cubic-bezier(.3, 1.6, .5, 1), height .45s cubic-bezier(.3, 1.6, .5, 1); }

.peek-hole { /* waar het hoekje zat: muur */
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, var(--wall) 40%, var(--wall-dark));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.peek-flap {
  position: absolute;
  inset: 0;
  filter: drop-shadow(-.5cqw -.5cqw .8cqw rgba(0, 0, 0, .35));
}
.peek-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background:
    linear-gradient(-45deg, rgba(255, 255, 255, .55), transparent 12%),
    radial-gradient(circle at 20% 30%, #ffd23f 0 14%, transparent 15%),
    radial-gradient(circle at 70% 15%, #e0592a 0 18%, transparent 19%),
    radial-gradient(ellipse at 15% 85%, #3fb6a8 0 20%, transparent 21%),
    conic-gradient(from 30deg at 40% 40%, #1a2a6c, #6b3fa0, #e0592a, #ffd23f, #3fb6a8, #1a2a6c);
}
.peek-front span {
  position: absolute;
  left: 6%;
  top: 22%;
  color: #fff;
  font: 800 calc(var(--k) * 3cqw) / 1 var(--f-sans);
  letter-spacing: -.03em;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transform: rotate(-12deg);
}

.peek-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: max(44px, calc(var(--s) * .9));
  height: max(44px, calc(var(--s) * .9));
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: nwse-resize;
  touch-action: none;
}
.peek-handle:focus-visible { outline: 2px dashed var(--pencil); }
.peek:not(.dragging) .peek-handle:hover ~ .peek-flap,
.peek:not(.dragging):hover .peek-flap { animation: flutter .6s ease-in-out; }
@keyframes flutter {
  50% { transform: translate(-3px, -3px); }
}

.painting.scold { animation: scold .4s; }
@keyframes scold {
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}

/* ---------- flip ---------- */

.btn.spinning { animation: btnspin .8s ease-in-out; }
@keyframes btnspin { to { transform: rotate(360deg); } }
.btn.tired-1 { transform: rotate(-3deg); }
.btn.tired-2 { transform: rotate(6deg) scale(.94); background: #f3ead8; }
.btn-giveup { background: #fff59a; animation: giveup .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes giveup { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }

.stage.refuse { animation: scold .4s; }