.archive-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.archive-rain__card {
  --rain-card-size: min(var(--rain-size), 38vw);
  position: absolute;
  top: calc(-1 * var(--rain-card-size) - 20px);
  left: var(--rain-x);
  width: var(--rain-card-size);
  height: var(--rain-card-size);
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, .38);
  background: #f6f3ee;
  box-shadow: 4px 4px 0 rgba(10, 10, 10, .16);
  opacity: .5;
  animation: archive-fall var(--rain-duration) linear var(--rain-delay) infinite;
  will-change: transform;
}

.archive-rain__card.is-speaker,
.archive-rain__card.is-merch {
  background: #f9af5e;
}

.archive-rain__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.28) saturate(.72) contrast(.94);
}

@keyframes archive-fall {
  from { transform: translate3d(0, 0, 0) rotate(var(--rain-tilt)); }
  to { transform: translate3d(0, calc(100vh + var(--rain-card-size) + 40px), 0) rotate(calc(var(--rain-tilt) + 18deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .archive-rain { display: none; }
}

@media (max-width: 700px) {
  .archive-rain__card {
    --rain-card-size: min(var(--rain-size), 30vw);
    opacity: .36;
  }
}