/* Venue card glow: retune with the CSS variables on .vcard. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vcard {
  --glow-a: #ff2e93; --glow-b: #28e7ff;
  --glow-soft: rgba(255,46,147,.55);
  --ring: 2px; --radius: 16px; --spin: 2.4s; --zoom: 1.06;
  --mx: 50%; --my: 50%;
  position: relative; display: block; overflow: hidden; isolation: isolate;
  min-width: 0; aspect-ratio: 4/5; border-radius: var(--radius);
  color: #fff; text-decoration: none; background: #1a0d28;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.6);
  transition: box-shadow .4s, transform .4s;
}
.vcard__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: scale(1); transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
/* Guarantees readable text on any photo, bright or dark. */
.vcard__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,rgba(14,5,24,.92) 0%,rgba(14,5,24,.55) 35%,rgba(14,5,24,0) 65%);
}
/* Light that follows the cursor. */
.vcard__spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s;
  mix-blend-mode: screen;
  background: radial-gradient(240px circle at var(--mx) var(--my),var(--glow-soft),transparent 70%);
}
/* Travelling border light. */
.vcard__ring {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: var(--ring); opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--a),transparent 0 55%,var(--glow-a) 78%,var(--glow-b) 94%,transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.vcard__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 18px 18px 20px;
  transform: translateY(0); transition: transform .4s;
}
.vcard__name { display: block; margin: 0; font-size: 22px; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.vcard__meta { display: block; margin-top: 4px; font-size: 14px; opacity: .85; }
.vcard:hover,.vcard:focus-visible,.vcard.is-lit {
  color: #fff; box-shadow: 0 14px 34px -10px var(--glow-soft); transform: translateY(-3px);
}
.vcard:hover .vcard__img,.vcard:focus-visible .vcard__img,.vcard.is-lit .vcard__img { transform: scale(var(--zoom)); }
.vcard:hover .vcard__spot,.vcard:hover .vcard__ring,
.vcard:focus-visible .vcard__spot,.vcard:focus-visible .vcard__ring,
.vcard.is-lit .vcard__spot,.vcard.is-lit .vcard__ring { opacity: 1; }
.vcard:hover .vcard__ring,.vcard:focus-visible .vcard__ring,.vcard.is-lit .vcard__ring { animation: vcard-spin var(--spin) linear infinite; }
.vcard:focus-visible { outline: 2px solid #ffb347; outline-offset: 3px; }
@keyframes vcard-spin { to { --a: 360deg; } }

/* Upscale theme (cool platinum): photo on top, text panel below. */
.vcard__desc {
  display: block; margin-top: 10px; font-size: 15px; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.vcard--upscale {
  --glow-a: #c6d2e2; --glow-b: #ffffff; --glow-soft: rgba(176,194,220,.26); --panel: #0e1118;
  --ring: 1px; --radius: 4px; --spin: 7s; --zoom: 1.03;
  --serif: "Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans: "Jost","Helvetica Neue",Arial,sans-serif;
  display: flex; flex-direction: column; aspect-ratio: auto; background: var(--panel); color: #eef1f6;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.vcard--upscale .vcard__img {
  position: relative; inset: auto; flex: none; width: 100%; height: auto; aspect-ratio: 4/3;
  transform-origin: top center; filter: saturate(.82) contrast(1.06);
  transition: transform 2.4s cubic-bezier(.2,.7,.2,1),filter 1.2s;
}
.vcard--upscale:hover .vcard__img,.vcard--upscale:focus-visible .vcard__img,.vcard--upscale.is-lit .vcard__img { filter: saturate(1.05) contrast(1.04); }
/* Fades the photo into the text panel. */
.vcard--upscale .vcard__shade {
  inset: 0 0 auto 0; aspect-ratio: 4/3;
  background: linear-gradient(to bottom,rgba(14,17,24,0) 55%,var(--panel) 100%);
}
.vcard--upscale .vcard__spot { background: radial-gradient(280px circle at var(--mx) var(--my),var(--glow-soft),transparent 72%); transition: opacity .8s; }
.vcard--upscale::after {
  content: ""; position: absolute; inset: 10px; z-index: 5; pointer-events: none; border: 1px solid rgba(198,210,226,.38); border-radius: 2px; opacity: 0; transition: opacity .8s;
}
.vcard--upscale:hover::after,.vcard--upscale:focus-visible::after,.vcard--upscale.is-lit::after { opacity: 1; }
.vcard--upscale .vcard__ring {
  z-index: 6; transition: opacity .8s;
  background: conic-gradient(from var(--a),transparent 0 72%,var(--glow-a) 90%,var(--glow-b) 97%,transparent);
}
.vcard--upscale .vcard__body { position: relative; left: auto; right: auto; bottom: auto; flex: 1; background: var(--panel); padding: 6px 24px 26px; }
.vcard--upscale .vcard__name { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: .01em; text-shadow: none; }
.vcard--upscale .vcard__name::after { content: ""; display: block; width: 0; height: 1px; margin-top: 10px; background: var(--glow-a); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.vcard--upscale:hover .vcard__name::after,.vcard--upscale:focus-visible .vcard__name::after,.vcard--upscale.is-lit .vcard__name::after { width: 44px; }
.vcard--upscale .vcard__meta { font-family: var(--sans); font-size: 13.5px; letter-spacing: .04em; opacity: .78; margin-top: 10px; }
.vcard--upscale .vcard__desc { font-family: var(--sans); color: rgba(238,241,246,.84); }
.vcard--upscale:hover,.vcard--upscale:focus-visible,.vcard--upscale.is-lit { color: #eef1f6; transform: none; box-shadow: 0 18px 40px -16px rgba(176,194,220,.38); }
.vcard__placeholder { display: grid; place-items: center; background: radial-gradient(ellipse at center,#343447,#191321); color: var(--glow-a); font-size: 38px; }

@media (prefers-reduced-motion: reduce) {
  .vcard,.vcard .vcard__img,.vcard .vcard__spot,.vcard .vcard__ring,.vcard .vcard__body { transition: none !important; animation: none !important; }
  .vcard:hover,.vcard:focus-visible,.vcard.is-lit,
  .vcard:hover .vcard__img,.vcard:focus-visible .vcard__img,.vcard.is-lit .vcard__img { transform: none; }
  .vcard__ring { background: linear-gradient(135deg,var(--glow-a),var(--glow-b)); }
  .vcard--upscale .vcard__ring { background: var(--glow-a); }
  .vcard--upscale .vcard__name::after,.vcard--upscale::after { transition: none; }
}