/* =============================================================================
   Vibe: STUB — the event as a physical admission ticket.
   Archetype: ticket-stub motif (perforated tear-off). Light cream ticket on a
   warm dark stage. Foil sweep + animated barcode. Liquid + motion-aware.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

body.vibe-stub {
  --cream:  #f6efe0;
  --cream-2:#efe5d2;
  --ink:    #1a1714;
  --stamp:  #d8402f;
  --foil:   #c8a24a;
  --stage:  #0e0c0a;

  --evt-text:   #1a1714;
  --evt-border: rgba(26,23,20,.18);
  --evt-input-bg: #fffdf7;
  --event-accent: #d8402f;
  --vx-pay-ink: #fff7f0;

  background: var(--stage);
  color: var(--cream);
  font-family: 'Space Mono', ui-monospace, monospace;
  overflow-x: hidden;
}
/* Warm drifting stage spotlight. */
body.vibe-stub::before {
  content: ""; position: fixed; inset: -25vmax; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45vmax 45vmax at 50% -5%, rgba(200,162,74,.16), transparent 60%),
    radial-gradient(40vmax 40vmax at 80% 110%, rgba(216,64,47,.10), transparent 60%);
  animation: stub-glow 18s ease-in-out infinite alternate;
}
@keyframes stub-glow { 0% { transform: translateY(0); } 100% { transform: translateY(-3%) scale(1.05); } }
body.vibe-stub .event-stub { position: relative; z-index: 1; }

.event-stub .stub-wrap {
  width: min(820px, 94vw); margin: 0 auto;
  padding: clamp(26px, 5vw, 56px) 0 clamp(80px, 12vw, 120px);
}

/* The ticket. */
.event-stub .stub-ticket {
  position: relative; display: flex; align-items: stretch; overflow: hidden;
  background: linear-gradient(135deg, var(--cream), var(--cream-2));
  color: var(--ink); border-radius: 16px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(26,23,20,.06);
}
/* Foil sheen sweeping across the whole ticket. */
.event-stub .stub-ticket::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size: 300% 300%; animation: stub-foil 7s ease-in-out infinite;
}
@keyframes stub-foil { 0% { background-position: 160% 0; } 60%,100% { background-position: -60% 0; } }

.event-stub .stub-main { flex: 1; padding: clamp(22px, 4vw, 40px); min-width: 0; }
.event-stub .stub-stamp {
  display: inline-block; color: var(--stamp); border: 2px solid var(--stamp);
  font-family: 'Archivo Black', sans-serif; font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: .18em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px;
  transform: rotate(-4deg); margin-bottom: clamp(14px, 2.5vw, 22px);
  box-shadow: inset 0 0 0 1px rgba(216,64,47,.25); animation: stub-pulse 3.4s ease-in-out infinite;
}
@keyframes stub-pulse { 0%,100% { opacity: .82; } 50% { opacity: 1; } }

.event-stub .stub-flyer { border-radius: 10px; overflow: hidden; margin-bottom: clamp(16px,3vw,24px); box-shadow: 0 14px 34px -16px rgba(0,0,0,.4); }
.event-stub .stub-flyer img { width: 100%; display: block; }
.event-stub .stub-date { font-weight: 700; letter-spacing: .14em; font-size: clamp(11px,1.5vw,13px); color: var(--stamp); }
.event-stub .stub-title {
  font-family: 'Archivo Black', sans-serif; font-size: clamp(30px, 6.5vw, 64px);
  line-height: .96; letter-spacing: -.015em; margin: 8px 0 10px; color: var(--ink); word-break: break-word;
}
.event-stub .stub-venue { font-weight: 700; font-size: clamp(14px,1.9vw,18px); margin: 0; }
.event-stub .stub-presented { font-size: 13px; opacity: .72; margin: 6px 0 0; }
.event-stub .stub-presented a { color: var(--stamp); text-decoration: none; border-bottom: 1px solid rgba(216,64,47,.4); }
.event-stub .stub-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin: clamp(18px,3vw,26px) 0 6px; font-weight: 700; }
.event-stub .stub-lineup { font-family: 'Archivo Black', sans-serif; font-size: clamp(17px,3.2vw,26px); line-height: 1.15; margin: 0; }
.event-stub .stub-prose { line-height: 1.7; margin: 0; white-space: pre-line; }
.event-stub .stub-blurb { font-style: italic; opacity: .8; line-height: 1.6; margin: clamp(16px,3vw,22px) 0 0; }

/* Perforated tear line. */
.event-stub .stub-perf {
  flex: 0 0 2px; position: relative; background:
    repeating-linear-gradient(180deg, var(--ink) 0 7px, transparent 7px 15px);
  opacity: .35;
}
.event-stub .stub-perf::before, .event-stub .stub-perf::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--stage);
}
.event-stub .stub-perf::before { top: -13px; } .event-stub .stub-perf::after { bottom: -13px; }

/* Tear-off stub. */
.event-stub .stub-side {
  flex: 0 0 clamp(120px, 22vw, 170px); padding: clamp(18px,3vw,28px) clamp(12px,2vw,18px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--cream-2), var(--cream)); text-align: center;
}
.event-stub .stub-side__no { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.event-stub .stub-side__code { font-family: 'Archivo Black', sans-serif; font-size: clamp(13px,2vw,16px); letter-spacing: .08em; }
.event-stub .stub-barcode {
  width: 100%; height: 56px; border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 8px, transparent 8px 11px);
  position: relative;
}
.event-stub .stub-barcode::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(246,239,224,.85), transparent);
  background-size: 220% 100%; animation: stub-scan 2.6s linear infinite;
}
@keyframes stub-scan { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.event-stub .stub-side__scan { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* Ticket form panel (cream, matches the ticket). */
.event-stub .stub-panel {
  margin-top: clamp(18px,3vw,26px); background: linear-gradient(135deg, var(--cream), var(--cream-2));
  color: var(--ink); border-radius: 16px; padding: clamp(20px,4vw,34px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.7);
}
.event-stub .stub-panel .vx-tickets__head { font-family: 'Archivo Black', sans-serif; color: var(--ink); }
.event-stub .stub-panel .vx-tier__low { color: var(--stamp); }
.event-stub .stub-panel .vx-pay { box-shadow: 0 12px 30px -12px rgba(216,64,47,.6); }

.event-stub .stub-sticky {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: none;
  text-decoration: none; font-family: 'Archivo Black', sans-serif; font-size: 15px;
  color: var(--vx-pay-ink); background: var(--stamp); padding: 13px 30px; border-radius: 999px;
  box-shadow: 0 12px 36px -10px rgba(216,64,47,.7);
}

/* Mobile: ticket stacks, perforation goes horizontal. */
@media (max-width: 640px) {
  .event-stub .stub-ticket { flex-direction: column; }
  .event-stub .stub-perf { flex-basis: 2px; width: 100%;
    background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 15px); }
  .event-stub .stub-perf::before { top: 50%; left: -13px; transform: translateY(-50%); }
  .event-stub .stub-perf::after { top: 50%; left: auto; right: -13px; bottom: auto; transform: translateY(-50%); }
  .event-stub .stub-side { flex-basis: auto; flex-direction: row; gap: 16px; }
  .event-stub .stub-barcode { width: 50%; }
  .event-stub .stub-sticky { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  body.vibe-stub::before, .event-stub .stub-ticket::after, .event-stub .stub-stamp,
  .event-stub .stub-barcode::after { animation: none; }
}