/* Posters voor optredens: echt papier en echte tape (img/materiaal),
   tekst uit data/agenda.json. Zie js/poster.js. */

@font-face { font-family: "Alfa Slab One"; src: url("/fonts/alfa-slab-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("/fonts/special-elite.woff2") format("woff2"); font-display: swap; }

.posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 48px 36px;
  padding: 24px 8px;
}

.poster {
  position: relative;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  display: block;
  color: var(--inkt);
  text-decoration: none;
  transform: rotate(var(--draai, 0deg));
  transition: transform .2s;
}
a.poster:hover { transform: rotate(0deg) scale(1.02); color: var(--inkt); }

.poster__papier { position: absolute; inset: 0; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .28)); }
.poster__vel {
  position: absolute; inset: 0;
  background-color: var(--bg);
  -webkit-mask-image: var(--vel); mask-image: var(--vel);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.poster__vel::after { /* kreukels en vezels van het echte papier */
  content: ""; position: absolute; inset: 0;
  background-image: var(--vel); background-size: 100% 100%;
  mix-blend-mode: multiply;
}

.poster__druk {
  position: absolute; inset: 0;
  -webkit-mask-image: var(--vel); mask-image: var(--vel);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.poster__inhoud {
  position: absolute; inset: 8% 11% 8%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; line-height: 1;
}
.poster--donker .poster__druk { mix-blend-mode: multiply; } /* inkt "in" het papier */

.p-dam { width: 100%; height: 4.6cqi; background: repeating-conic-gradient(var(--inkt) 0 25%, transparent 0 50%) 0 0 / 4.6cqi 4.6cqi; }
.p-logo {
  width: 74%; aspect-ratio: 900 / 320; background: var(--inkt);
  -webkit-mask: url("/img/logo-masker.png") center / contain no-repeat;
  mask: url("/img/logo-masker.png") center / contain no-repeat;
}
.p-klein { font-family: "Special Elite", "Courier New", monospace; font-size: 5.6cqi; text-transform: uppercase; letter-spacing: .1em; }
.p-plaats { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; color: var(--accent); white-space: pre; line-height: .92; font-size: 20cqi; }
.p-datum {
  font-family: "Anton", Impact, sans-serif; text-transform: uppercase; white-space: nowrap;
  background: var(--inkt); color: var(--bg); padding: 1.6cqi 3.4cqi 1.2cqi; font-size: 7.6cqi; letter-spacing: .02em;
}
.p-titel { font-family: "Alfa Slab One", Georgia, serif; white-space: nowrap; font-size: 9cqi; line-height: 1.05; }
.p-titel--lang { white-space: normal; font-size: 6.6cqi; max-width: 100%; text-wrap: balance; }
.p-waar { font-family: "Special Elite", "Courier New", monospace; font-size: 5cqi; line-height: 1.25; }
.p-scheef { transform: rotate(var(--r, 0deg)) translateX(var(--x, 0)); }

.poster__tape { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .3)); }

@media (prefers-reduced-motion: reduce) { .poster, a.poster:hover { transition: none; } }