.invert-chip {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 1px solid var(--fg);
  border-radius: 0;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--fg);
  text-transform: uppercase;
  transition:
    transform 0.1s linear,
    background 0.1s linear,
    color 0.1s linear;
}

.invert-chip:hover {
  background: var(--accent);
  color: var(--bg);
}

.invert-chip:active {
  transform: scale(0.96);
}

.decoy {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border: 1px dashed color-mix(in srgb, var(--muted) 70%, var(--fg));
  background: transparent;
  color: var(--muted);
  cursor: default;
}

.work-piece {
  position: relative;
  flex: 0 0 auto;
  width: min(82vw, 290px);
  /* 回転・影で隣やスクロール右端の線が欠けないよう */
  margin-left: 3px;
  margin-right: calc(0.5rem + 6px);
  border: 1px solid var(--fg);
  border-radius: 0;
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--card-edge);
}

.work-piece:nth-child(3n + 1) {
  transform: translateY(6px) rotate(-0.8deg);
}
.work-piece:nth-child(3n + 2) {
  transform: translateY(-4px) rotate(0.5deg);
}
.work-piece:nth-child(3n) {
  transform: translateY(2px) rotate(-0.3deg);
}

.work-piece:hover {
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 6px 6px 0 var(--accent);
  z-index: 3;
}

.work-piece:focus-within {
  z-index: 4;
  outline: none;
}

.work-piece__no {
  position: absolute;
  top: 0.45rem;
  left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: color-mix(in srgb, var(--fg) 10%, transparent);
  pointer-events: none;
}

.work-piece__body {
  display: block;
  padding: 2.75rem 1rem 1.1rem;
  min-height: 260px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s linear;
}

.work-piece__body:hover {
  background: var(--slab);
}

.work-piece__lang {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-piece__title {
  margin: 0.5rem 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.work-piece__text {
  margin: 0 0 0.95rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
}

.work-piece__body:hover .work-piece__text {
  color: color-mix(in srgb, var(--fg) 75%, var(--muted));
}

.work-piece__slug {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .work-piece:nth-child(3n + 1),
  .work-piece:nth-child(3n + 2),
  .work-piece:nth-child(3n) {
    transform: none;
  }

  .work-piece:hover {
    transform: none;
  }
}

.glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--error) 18%, transparent) 2px,
      color-mix(in srgb, var(--error) 18%, transparent) 3px
    ),
    color-mix(in srgb, var(--void) 55%, transparent);
  mix-blend-mode: screen;
  animation: glitch-party 1.6s steps(4, end) forwards;
}

@keyframes glitch-party {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  25% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(6px, -3px);
  }
  50% {
    transform: translate(-8px, 5px) skewX(3deg);
    filter: contrast(1.8) invert(0.15);
  }
  75% {
    transform: translate(3px, 2px);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-overlay {
    animation: none;
    opacity: 0;
  }
}