/* ===== NIFSEN VVIP pass card =====
   Every size is in em, so the whole card scales from the one font-size on .vpass.
   25em wide = 400px at 16px (the export size). */

@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-display: swap;
  src: url("/static/fonts/playfair-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("/static/fonts/playfair-display-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap;
  src: url("/static/fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root {
  --page-bg: #0f0d1a;           /* brochure background hsl(250 30% 8%) */
  --violet: #8b3dea;            /* brochure primary hsl(262 83% 58%) */
  --gold: #d9a63f;              /* brochure gold hsl(40 70% 55%) */
  --gold-light: #f0cd6b;
  --gold-dark: #b8862b;
  --ink: #f6f1ff;
  --muted: #b9addb;
  --foil: linear-gradient(100deg, #8a6a1f 0%, #f7e7a1 18%, #d4a73c 32%, #fff6d0 48%,
          #b8862b 62%, #f3d77a 78%, #8a6a1f 100%);
  --brand-grad: linear-gradient(90deg, #1ba1e2, #6a5cd6 40%, #b44bb8 70%, #e2269c);
}

.vpass {
  --notch-bg: var(--page-bg);
  font-size: min(16px, calc((100vw - 32px) / 25));
  width: 25em;
  position: relative;
  border-radius: 1.75em;
  border: 0.125em solid transparent;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(139, 61, 234, .55), transparent 60%) padding-box,
    radial-gradient(80% 50% at 110% 60%, rgba(226, 38, 156, .22), transparent 60%) padding-box,
    radial-gradient(80% 50% at -10% 75%, rgba(27, 161, 226, .18), transparent 60%) padding-box,
    linear-gradient(165deg, #2b1a63 0%, #1b1244 45%, #110b2a 100%) padding-box,
    linear-gradient(140deg, #fff3c4, #d9a63f 25%, #7a5a1c 45%, #f5dc8e 60%, #b8862b 80%, #fff3c4) border-box;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
  box-shadow: 0 1.8em 4em -1em rgba(0, 0, 0, .7), 0 0 3em rgba(139, 61, 234, .35);
  isolation: isolate;
  text-align: center;
}

/* Fine guilloche lines, like security printing on a banknote */
.vpass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    repeating-radial-gradient(circle at 50% 30%, transparent 0 0.9em, rgba(240, 205, 107, .07) 0.9em 0.97em),
    repeating-radial-gradient(circle at 15% 90%, transparent 0 1.3em, rgba(180, 75, 184, .08) 1.3em 1.37em);
}

/* Holographic sheen sweeping across the card */
.vp-foil {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(27, 161, 226, .16) 42%,
    rgba(255, 246, 208, .22) 48%, rgba(180, 75, 184, .18) 54%, rgba(226, 38, 156, .14) 60%, transparent 70%);
  background-size: 260% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  animation: vp-sweep 5.5s ease-in-out infinite;
}
@keyframes vp-sweep { 0%, 15% { background-position: 100% 0; } 60%, 100% { background-position: -60% 0; } }

/* Diagonal ALL-ACCESS ribbon */
.vp-ribbon {
  position: absolute; top: 2.45em; right: -3.55em; z-index: 2;
  width: 13em; padding: .34em 0; transform: rotate(40deg);
  background: var(--foil); color: #2a1a05;
  font-weight: 800; font-size: .62em; letter-spacing: .22em;
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .45);
}

.vp-top { padding: 1.4em 1.5em 0; position: relative; }

.vp-logo {
  display: inline-block; background: rgba(255, 255, 255, .96);
  border-radius: 1em; padding: .5em .95em .45em;
  box-shadow: 0 .4em 1.4em rgba(0, 0, 0, .35), inset 0 0 0 .08em rgba(217, 166, 63, .6);
}
.vp-logo img { display: block; height: 3.9em; width: auto; }

.vp-presents {
  margin-top: 1.05em; font-size: .62em; letter-spacing: .42em; font-weight: 600;
  color: var(--gold-light); text-transform: uppercase;
}
.vp-event {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 1.32em; line-height: 1.18; margin-top: .3em; letter-spacing: .01em;
}
.vp-event em { font-style: italic; color: var(--gold-light); }

.vp-vvip {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900;
  font-size: 5.4em; line-height: .95; margin-top: .12em; letter-spacing: .04em;
  background: var(--foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .18em rgba(217, 166, 63, .45));
  animation: vp-gold 4s linear infinite;
}
@keyframes vp-gold { to { background-position: 200% 0; } }

.vp-passtag {
  display: flex; align-items: center; justify-content: center; gap: .8em;
  font-weight: 800; letter-spacing: .6em; font-size: .78em; color: var(--gold-light);
  margin-top: .15em; padding-left: .6em;
}
.vp-passtag::before, .vp-passtag::after {
  content: ""; height: .09em; width: 3.2em; background: var(--foil);
}

.vp-stars { color: var(--gold-light); font-size: .7em; letter-spacing: .5em; margin-top: .55em; opacity: .9; }

.vp-holder {
  margin: 1.1em 1.4em 0; padding: .9em 1em 1em;
  border-radius: 1.1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: .06em solid rgba(240, 205, 107, .35);
  box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .12);
}
.vp-label {
  font-size: .58em; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.vp-name {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: 1.9em; line-height: 1.12; margin-top: .18em;
  overflow-wrap: anywhere;
}
.vp-name.long { font-size: 1.5em; }
.vp-name.xlong { font-size: 1.22em; }
.vp-place { margin-top: .35em; font-size: .9em; color: #e7dcff; font-weight: 500; }
.vp-place svg { width: .9em; height: .9em; vertical-align: -.1em; margin-right: .25em; fill: var(--gold-light); }

.vp-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7em .8em;
  margin: 1em 1.4em 0; text-align: left;
}
.vp-details .full { grid-column: 1 / -1; }
.vp-details .v { font-size: .84em; font-weight: 600; margin-top: .22em; line-height: 1.3; }

/* Tear line with notches cut out of both edges */
.vp-perf { position: relative; height: 1.6em; margin-top: 1.1em; }
.vp-perf::before {
  content: ""; position: absolute; left: 1.6em; right: 1.6em; top: 50%;
  border-top: .12em dashed rgba(240, 205, 107, .55);
}
.vp-notch {
  position: absolute; top: 50%; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--notch-bg); transform: translateY(-50%);
  box-shadow: inset 0 0 0 .125em var(--gold-dark);
}
.vp-notch.l { left: -0.95em; }
.vp-notch.r { right: -0.95em; }

.vp-stub {
  display: flex; align-items: center; gap: 1.1em; text-align: left;
  padding: .6em 1.4em 1.4em;
}
.vp-qr {
  flex: none; width: 8.6em; height: 8.6em; padding: .55em; border-radius: .9em;
  background: #fff;
  box-shadow: 0 0 0 .16em var(--gold), 0 0 0 .32em rgba(217, 166, 63, .25), 0 .6em 1.6em rgba(0, 0, 0, .45);
}
.vp-qr svg { display: block; width: 100%; height: 100%; }
.vp-qr svg path { fill: #150d33; }
.vp-no {
  font-weight: 800; font-size: 1.45em; letter-spacing: .06em; line-height: 1.1;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vp-admit { font-size: .66em; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-top: .45em; }
.vp-hint { font-size: .7em; color: var(--muted); margin-top: .5em; line-height: 1.4; }
.vp-phone { font-size: .7em; color: var(--muted); margin-top: .35em; letter-spacing: .06em; }

.vp-foot {
  height: .35em; background: var(--brand-grad);
}

/* Cancelled passes get a VOID stamp */
.vpass.cancelled .vp-qr { filter: grayscale(1) opacity(.35); }
.vp-void {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: .2em solid #ff4d6d; color: #ff4d6d; border-radius: .4em;
  font-weight: 800; font-size: 2.6em; letter-spacing: .12em; padding: .05em .4em;
  background: rgba(15, 13, 26, .75);
}

/* Export mode: no animation; the foil sits at a flattering fixed position */
.export .vpass { font-size: 16px; }
.export .vp-foil { animation: none; background-position: 40% 0; }
.export .vp-vvip { animation: none; background-position: 30% 0; }
#export { padding: 20px; width: 440px; box-sizing: border-box; background: var(--page-bg); }