/* The lower corner of the poster folds into the white ticket stock. */
.bn-event {
  --fold-ink: var(--gold);
  --fold-size: clamp(28px, 3.4vw, 48px);
  --fold-rest: .54;
  background: white;
}

.bn-event[href$="/poznan"] { --fold-ink: var(--pink); }
.bn-event[href$="/hamburg"] { --fold-ink: var(--blue); }

.gig.bn-event { animation: none; }
.bn-event .art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: var(--fold-size);
  aspect-ratio: 1;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 49%, var(--fold-ink) 50% 73%, white 74%);
  transform-origin: right bottom;
  transform: scale(var(--fold-rest));
}

.bn-event .bn-event-tail {
  border-top-style: dashed;
}

@media (max-width: 600px) {
  .bn-event { --fold-size: 29px; }
}

@media (prefers-reduced-motion: no-preference) {
  .bn-event {
    --poster-ease: cubic-bezier(.18,.78,.22,1);
    transition: border-color .22s ease;
  }

  .bn-event .art::after,
  .bn-event .bn-event-tail svg {
    transition: transform .32s var(--poster-ease);
  }

  .bn-event .art img {
    transition: transform .55s var(--poster-ease);
  }

  .bn-event.bn-poster-arrival .art {
    animation: bn-poster-print .62s var(--poster-ease) var(--arrival-delay, 0s) backwards;
  }

  .bn-event.bn-poster-arrival .cardmeta {
    animation: bn-poster-settle .49s var(--poster-ease) var(--arrival-delay, 0s) backwards;
  }

  .bn-event.bn-poster-arrival .art::after {
    animation: bn-fold-open .64s var(--poster-ease) var(--arrival-delay, 0s) backwards;
  }

  @keyframes bn-poster-print {
    from { translate: 0 7px; scale: 1.035; }
    to { translate: 0 0; scale: 1; }
  }

  @keyframes bn-poster-settle {
    from { translate: 0 13px; opacity: .86; }
    to { translate: 0 0; opacity: 1; }
  }

  @keyframes bn-fold-open {
    0% { scale: .35; }
    45% { scale: 1.85; }
    100% { scale: 1; }
  }

  @supports (animation-timeline: view()) {
    .bn-event .art img {
      animation: bn-poster-drift auto linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes bn-poster-drift {
      from { translate: 0 2%; scale: 1.055; }
      to { translate: 0 -2%; scale: 1.055; }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .bn-event:hover .art::after { transform: scale(1); }
    .bn-event:hover .bn-event-tail svg { transform: translate(2px,-2px) rotate(-36deg); }
    .gig.bn-event:hover { transform: none; border-color: #a9bced; }
  }

  .bn-event:focus-visible .art::after,
  .bn-event:active .art::after { transform: scale(1); }

  .bn-event:focus-visible .bn-event-tail svg,
  .bn-event:active .bn-event-tail svg { transform: translate(2px,-2px) rotate(-36deg); }

  .bn-event:active .bn-event-tail i {
    background: var(--blue);
    color: white;
    transform: scale(.91);
    transition-duration: .08s;
  }
}

@media (hover: none) {
  .bn-event:hover:not(:active):not(:focus-visible) .art img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-event:focus-visible .art img,
  .bn-event:hover .art img { transform: none; }
}