/* The pegboard component: the board itself, its punched slots, and the
   pieces pinned to it. Laid out by js/pegboard.js, which sizes the slot
   pattern and positions items off the same grid. */

/* A SKÅDIS-style board: punched slots with a lit bottom chamfer, not printed
   dots. The hole pattern is generated in js/pegboard.js off the same grid the
   items are dealt onto, so a piece always covers the slots it hangs from. */

/* Matte black board, like a SKADIS. The holes read as the page showing through
   from behind, so they take their colour from the page background. */
.board__panel {
  --hole-shadow: #c6c6c4;
  --hole-mid: #e0e0de;
  --hole-lit: #f2f2f0;
  --hole-chamfer: rgba(255, 255, 255, 0.16);
  --board-tilt: -0.7deg;

  position: relative;
  width: 100%;
  /* Proportioned like a real board rather than pinned to viewport height --
     otherwise a narrower column turns it into a sliver. */
  aspect-ratio: 0.667;
  /* Never past the fold, though: it gets what is left of the first screenful
     once the bar and the hero's own padding are taken out, less some air so
     the tilt and the drop shadow don't graze the edge. A plain fraction of the
     window can't know about the bar, and on a short screen it runs over. */
  max-height: calc(
    100svh - var(--topbar-h) - var(--hero-pad-top) - var(--hero-pad-bottom) - 1.5rem
  );
  border: 1px solid #0c0c0e;
  border-radius: 10px;
  background: linear-gradient(174deg, #29292d 0%, #1c1c20 52%, #131316 100%);
  box-shadow:
    0 30px 54px -32px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.45);
  /* Hung slightly off square, the way it is in the sketch. Its entrance has to
     carry the tilt too -- a keyframe ending on `transform: none` would wipe it. */
  transform: rotate(var(--board-tilt));
  animation: board-in 0.85s var(--ease) 0.16s both;
}

@keyframes board-in {
  from { opacity: 0; transform: translateY(16px) rotate(var(--board-tilt)); }
  to { opacity: 1; transform: rotate(var(--board-tilt)); }
}

.peg-bore-shadow { stop-color: var(--hole-shadow); }
.peg-bore-mid { stop-color: var(--hole-mid); }
.peg-bore-lit { stop-color: var(--hole-lit); }
.peg-chamfer { fill: var(--hole-chamfer); }

.board__holes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.peg-item {
  position: absolute;
  margin: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  animation: peg-in 0.5s var(--ease) both;
  animation-delay: var(--enter-delay, 0s);
  will-change: transform;
}

.peg-item--sticker {
  transform-origin: 50% 50%;
  transform: rotate(var(--tilt, 0deg));
}

/* Tack items pivot on the peg at their top edge, so the swing reads as hanging. */
.peg-item--tack {
  transform-origin: 50% 0;
  transform: rotate(calc(var(--tilt, 0deg) + var(--swing, 0deg)));
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.5));
}

.peg-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.peg-item__tack {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f2f0ec, #b9b6b0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset -1px -1px 1.5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 62rem) {
  /* Taller than it is wide on a phone, so seven things still have room. */
  /* Taller than it needs to be for its own sake: the pieces keep a clear ring
     of holes at the edge, and at the old height there wasn't room for both
     that ring and all nine of them -- one would go undealt about three deals
     in four. The extra rows cost nothing on a page that scrolls. */
  .board__panel { height: clamp(460px, 126vw, 620px); }
}