/* =============================================================================
   Vibe: NOIR — black-tie / VIP luxury.
   Pure black + gold foil, Cinzel/Cormorant serif, sheen + sparkle + spotlight.
   Liquid, info-first, motion-aware.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap');

body.vibe-noir {
  --gold:  #d4af37;
  --gold-l:#f3e2a3;
  --black: #07070a;
  --black-2: #101016;
  --ink:   #efe9da;

  --evt-text: #efe9da;
  --evt-border: rgba(212,175,55,.30);
  --evt-input-bg: rgba(212,175,55,.05);
  --event-accent: #d4af37;
  --vx-pay-ink: #1a1505;

  background:
    linear-gradient(180deg, rgba(7,7,10,0.74) 0%, rgba(7,7,10,0.5) 45%, rgba(7,7,10,0.94) 100%),
    url('/assets/uploads/studio/noir-bg.png') center top / cover no-repeat fixed,
    var(--black);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow-x: hidden;
}
/* Spotlight + floating sparkle. */
body.vibe-noir::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60vmax 50vmax at 50% -10%, rgba(212,175,55,.12), transparent 60%);
}
body.vibe-noir .noir-sparkle {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 16% 24%, var(--gold) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 18%, var(--gold-l) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 64%, var(--gold) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 78%, var(--gold-l) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 40%, #fff 0 1px, transparent 2px);
  animation: noir-twinkle 3.2s ease-in-out infinite;
}
@keyframes noir-twinkle { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
body.vibe-noir .event-noir { position: relative; z-index: 1; }

.event-noir .noir-frame {
  margin: clamp(20px, 4vw, 44px) auto; width: min(1060px, 94vw);
  border: 1px solid var(--evt-border); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.08), 0 40px 90px -50px rgba(212,175,55,.4);
  background: linear-gradient(180deg, rgba(212,175,55,.04), transparent 30%);
}
.event-noir .noir-wrap { text-align: center; padding: clamp(36px, 7vw, 72px) clamp(20px, 5vw, 56px) clamp(70px, 11vw, 110px); }

/* Two-column body: flyer + bill + details on the left, gold ticket rail on the
   right (sticky on desktop). Collapses to a single column on phones. */
.event-noir .noir-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 52px); align-items: start; text-align: left;
  margin-top: clamp(30px, 5vw, 48px);
}
.event-noir .noir-col-side { position: sticky; top: clamp(16px, 3vw, 28px); }

.event-noir .noir-kicker { font-size: clamp(11px, 1.5vw, 13px); letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.event-noir .noir-title {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(34px, 7.5vw, 80px);
  line-height: 1.06; letter-spacing: .02em; margin: clamp(12px,2vw,18px) 0;
  background: linear-gradient(100deg, #9a7d20, var(--gold-l) 45%, var(--gold) 60%, #9a7d20);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: noir-sheen 6.5s linear infinite;
}
@keyframes noir-sheen { to { background-position: 220% center; } }
.event-noir .noir-rule {
  width: 0; height: 1px; margin: clamp(10px,2vw,16px) auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: noir-draw 1.8s ease forwards;
}
@keyframes noir-draw { to { width: min(200px, 56%); } }
.event-noir .noir-date { font-size: clamp(18px,2.6vw,24px); letter-spacing: .08em; color: var(--ink); }
.event-noir .noir-venue { font-size: clamp(15px,2vw,19px); font-weight: 500; margin: 8px 0 0; }
.event-noir .noir-presented { font-size: 13px; opacity: .7; margin: 6px 0 0; }
.event-noir .noir-presented a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--evt-border); }

.event-noir .noir-photo {
  width: 100%; aspect-ratio: 4/5; overflow: hidden;
  margin: 0; border: 1px solid var(--gold); border-radius: 3px;
  box-shadow: 0 30px 70px -40px rgba(212,175,55,.5);
}
.event-noir .noir-col-main > .noir-label:first-child { margin-top: 0; }
.event-noir .noir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.event-noir .noir-label { font-family: 'Cinzel', serif; font-size: clamp(13px,1.8vw,15px); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: clamp(28px,5vw,40px) 0 8px; }
.event-noir .noir-lineup { font-size: clamp(20px,3.4vw,30px); line-height: 1.25; margin: 0; }
.event-noir .noir-prose { line-height: 1.8; opacity: .9; white-space: pre-line; margin: 0; font-size: clamp(15px,2vw,18px); overflow-wrap: anywhere; word-break: break-word; }
.event-noir .noir-prose a { color: var(--gold); overflow-wrap: anywhere; word-break: break-all; }
.event-noir .noir-blurb { font-style: italic; font-size: clamp(18px,2.4vw,22px); opacity: .85; margin: clamp(20px,3vw,28px) 0 0; }

.event-noir .noir-panel {
  text-align: left; margin-top: 0;
  border: 1px solid var(--evt-border); border-radius: 6px; padding: clamp(20px,4vw,34px);
  background: linear-gradient(180deg, rgba(212,175,55,.05), rgba(7,7,10,.6));
  box-shadow: 0 30px 70px -40px rgba(212,175,55,.4);
}
.event-noir .noir-panel .vx-tickets__head { font-family: 'Cinzel', serif; letter-spacing: .04em; color: var(--gold); }
.event-noir .noir-panel .vx-pay {
  background: linear-gradient(100deg, #b9962b, var(--gold-l), #b9962b); background-size: 200% auto;
  animation: noir-sheen 6s linear infinite; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(13px,1.7vw,15px);
}
.event-noir .noir-panel .vx-tier__low { color: var(--gold-l); }

/* Larger, more legible ticket text over the busy backdrop (Shock: bump size). */
.event-noir .noir-panel {
  background: linear-gradient(180deg, rgba(16,16,22,0.74), rgba(7,7,10,0.84));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.event-noir .noir-panel .vx-tickets__head { font-size: clamp(22px, 2.8vw, 28px); }
.event-noir .noir-panel .vx-tier { padding: clamp(13px, 2vw, 17px) 0; }
.event-noir .noir-panel .vx-tier__name { font-family: 'Cinzel', serif; font-size: clamp(17px, 2.2vw, 21px); color: var(--ink); }
.event-noir .noir-panel .vx-tier__desc { font-size: clamp(13px, 1.7vw, 15px); opacity: .8; }
.event-noir .noir-panel .vx-tier__price { font-size: clamp(15px, 1.9vw, 18px); color: var(--gold-l); }
.event-noir .noir-panel .vx-qty { font-size: 15px; }
.event-noir .noir-panel .vx-field label { font-size: 13px; }
.event-noir .noir-panel .vx-field input { font-size: 15px; }
.event-noir .noir-panel .vx-help,
.event-noir .noir-panel .vx-secure { font-size: 12.5px; }
.event-noir .noir-panel .vx-pay { font-size: clamp(15px, 1.9vw, 17px); }
/* Nudge the rest of the vibe up a touch too, for legibility over the art. */
.event-noir .noir-presented { font-size: 14px; }

.event-noir .noir-sticky {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: none;
  text-decoration: none; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vx-pay-ink); background: linear-gradient(100deg, #b9962b, var(--gold-l), #b9962b); background-size: 200% auto;
  padding: 13px 30px; border-radius: 999px; box-shadow: 0 12px 36px -10px rgba(212,175,55,.7); animation: noir-sheen 6s linear infinite;
}
@media (max-width: 860px) {
  .event-noir .noir-frame { width: min(720px, 92vw); }
  .event-noir .noir-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 6vw, 36px); }
  .event-noir .noir-col-side { position: static; }
  .event-noir .noir-photo { width: min(360px, 78vw); margin: 0 auto; }
  .event-noir .noir-col-main { text-align: center; }
}
@media (max-width: 768px) { .event-noir .noir-sticky { display: inline-block; } }

@media (prefers-reduced-motion: reduce) {
  body.vibe-noir .noir-sparkle, .event-noir .noir-title, .event-noir .noir-rule,
  .event-noir .noir-panel .vx-pay, .event-noir .noir-sticky { animation: none; }
  .event-noir .noir-title { background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); }
  .event-noir .noir-rule { width: min(200px, 56%); }
}