/* ============================================================================
   Vibe: Berlin — INDUSTRIAL STROBE  (rebuilt 2026-07-06 v3 — EFFECTS SHOWCASE)
   Dark warehouse base LOADED with effects: animated chromatic-glitch title,
   moving scanlines + a sweeping light beam + breathing strobe glow, neon
   glow-bordered panels that intensify and lift on hover, SVG icon labels, a
   pulsing neon buy button and focus-glow inputs. Cold electric cyan + magenta.
   ============================================================================ */

body.vibe-berlin {
  --bln-bg:   #05070d;
  --bln-panel:#0a0e18;
  --bln-ink:  #eaf6ff;
  --bln-mid:  #7fa9c0;
  --bln-acc2: #ff2fb0;               /* hot magenta (glitch / secondary glow) */
  --bln-line: rgba(55, 230, 255, 0.28);

  background:
    linear-gradient(180deg, rgba(5,7,13,0.78) 0%, rgba(5,7,13,0.55) 45%, rgba(5,7,13,0.94) 100%),
    url('/assets/uploads/studio/berlin-bg.png') center top / cover no-repeat fixed,
    var(--bln-bg);
  color: var(--bln-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.vibe-berlin .site-header {
  background: rgba(5, 7, 13, 0.9) !important;
  border-bottom: 1px solid var(--bln-line);
}
body.vibe-berlin main { position: relative; z-index: 1; }

.vibe-berlin .event-berlin {
  --event-accent: #37e6ff;
  position: relative;
  min-height: calc(100vh - 80px);
  overflow: hidden;
}

/* ============================================================================
   Ambient FX layer — scanlines, sweeping beam, breathing glow
   ============================================================================ */
.vibe-berlin .bln-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.vibe-berlin .bln-fx::before {
  /* breathing radial strobe glow */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 18% 0%, rgba(55,230,255,0.16), transparent 60%),
    radial-gradient(55% 45% at 100% 100%, rgba(255,47,176,0.12), transparent 60%);
  animation: bln-breathe 5s ease-in-out infinite;
}
@keyframes bln-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.vibe-berlin .bln-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(55,230,255,0.035) 2px 3px);
  animation: bln-scandrift 8s linear infinite;
}
@keyframes bln-scandrift { to { background-position: 0 60px; } }
.vibe-berlin .bln-beam {
  position: absolute; top: -30%; left: -40%; width: 55%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(55,230,255,0.12), rgba(255,255,255,0.06), transparent);
  transform: rotate(14deg); filter: blur(6px);
  animation: bln-sweep 7s ease-in-out infinite;
}
@keyframes bln-sweep { 0% { left: -50%; opacity: 0; } 40% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

.vibe-berlin .bln-shell {
  position: relative; z-index: 2;
  max-width: 1360px; margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(70px, 10vw, 130px);
}

/* ============================================================================
   Masthead — glitch title
   ============================================================================ */
.vibe-berlin .bln-mast { padding-bottom: clamp(22px, 3.5vw, 40px); }
.vibe-berlin .bln-kick {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 1.3vw, 13px); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--event-accent);
  padding: 6px 12px; border: 1px solid var(--bln-line);
  box-shadow: 0 0 18px rgba(55,230,255,0.25), inset 0 0 12px rgba(55,230,255,0.08);
  margin-bottom: clamp(16px, 2vw, 24px);
  animation: bln-flicker 6s steps(1) infinite;
}
@keyframes bln-flicker { 0%,97%,100% { opacity: 1; } 98% { opacity: 0.55; } 99% { opacity: 0.85; } }
.vibe-berlin .bln-caret { color: var(--event-accent); animation: bln-blink 1.06s steps(1) infinite; }
@keyframes bln-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

.vibe-berlin .bln-title {
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 11vw, 150px);
  line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase;
  color: #fff; margin: 0;
  text-shadow: 0 0 24px rgba(55,230,255,0.5), 0 0 60px rgba(55,230,255,0.25);
  overflow-wrap: anywhere;
  animation: bln-jitter 5.5s steps(1) infinite;
}
/* chromatic glitch layers */
.vibe-berlin .bln-title::before,
.vibe-berlin .bln-title::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  text-transform: uppercase; pointer-events: none;
}
.vibe-berlin .bln-title::before { color: var(--event-accent); mix-blend-mode: screen; animation: bln-glitch-a 3.2s infinite steps(2); }
.vibe-berlin .bln-title::after  { color: var(--bln-acc2);      mix-blend-mode: screen; animation: bln-glitch-b 2.6s infinite steps(2); }
@keyframes bln-glitch-a { 0%,92%,100% { transform: translate(0,0); opacity: 0; } 93% { transform: translate(-4px,2px); opacity: 0.9; } 96% { transform: translate(3px,-2px); opacity: 0.9; } }
@keyframes bln-glitch-b { 0%,90%,100% { transform: translate(0,0); opacity: 0; } 91% { transform: translate(4px,-2px); opacity: 0.85; } 95% { transform: translate(-3px,2px); opacity: 0.85; } }
@keyframes bln-jitter { 0%,96%,100% { transform: translate(0,0); } 97% { transform: translate(-2px,1px); } 98% { transform: translate(2px,-1px); } }

.vibe-berlin .bln-metabar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: clamp(22px, 3vw, 36px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--bln-line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(12px, 1.3vw, 14px); letter-spacing: 0.05em; color: var(--bln-mid);
}
.vibe-berlin .bln-metabar span { position: relative; }
.vibe-berlin .bln-metabar span + span:not(.bln-metabar__pres)::before {
  content: '//'; position: absolute; left: -14px; color: var(--event-accent); opacity: 0.6;
}
.vibe-berlin .bln-metabar__venue { color: var(--event-accent); text-shadow: 0 0 12px rgba(55,230,255,0.5); }
.vibe-berlin .bln-metabar__pres { margin-left: auto; }
.vibe-berlin .bln-metabar__pres a { color: var(--bln-ink); text-decoration: none; border-bottom: 1px solid var(--event-accent); transition: text-shadow 0.2s, color 0.2s; }
.vibe-berlin .bln-metabar__pres a:hover { color: var(--event-accent); text-shadow: 0 0 14px rgba(55,230,255,0.8); }

/* ============================================================================
   Two-column body — neon glow panels
   ============================================================================ */
.vibe-berlin .bln-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(22px, 3vw, 40px); margin-top: clamp(26px, 4vw, 48px); align-items: start;
}
.vibe-berlin .bln-left { display: grid; gap: clamp(22px, 3vw, 34px); }
.vibe-berlin .bln-right { display: grid; gap: clamp(22px, 3vw, 34px); }

.vibe-berlin .bln-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(12,18,30,0.9), rgba(8,12,22,0.9));
  border: 1px solid var(--bln-line);
  border-radius: 4px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 0 22px rgba(55,230,255,0.12), inset 0 0 0 1px rgba(55,230,255,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  animation: bln-panelglow 4.5s ease-in-out infinite;
}
@keyframes bln-panelglow { 0%,100% { box-shadow: 0 0 18px rgba(55,230,255,0.10), inset 0 0 0 1px rgba(55,230,255,0.05); } 50% { box-shadow: 0 0 30px rgba(55,230,255,0.20), inset 0 0 0 1px rgba(55,230,255,0.08); } }
/* animated corner brackets */
.vibe-berlin .bln-panel::before,
.vibe-berlin .bln-panel::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 2px solid var(--event-accent); filter: drop-shadow(0 0 6px var(--event-accent));
}
.vibe-berlin .bln-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.vibe-berlin .bln-panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.vibe-berlin .bln-panel:hover {
  transform: translateY(-4px);
  border-color: var(--event-accent);
  box-shadow: 0 12px 40px -8px rgba(55,230,255,0.45), 0 0 40px rgba(255,47,176,0.2);
}

/* Flyer panel */
.vibe-berlin .bln-flyerpanel { padding: 8px; overflow: hidden; }
.vibe-berlin .bln-flyerpanel img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 2px; transition: transform 0.4s ease, filter 0.4s ease; }
.vibe-berlin .bln-flyerpanel:hover img { transform: scale(1.03); filter: saturate(1.15) contrast(1.05); }
/* scanline sweep over flyer */
.vibe-berlin .bln-flyerpanel > img + span, .vibe-berlin .bln-flyerpanel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(55,230,255,0.18), transparent);
  pointer-events: none; animation: bln-flyerscan 4.5s linear infinite;
}
@keyframes bln-flyerscan { 0% { top: -45%; } 100% { top: 105%; } }
.vibe-berlin .bln-flyer--empty {
  aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  color: var(--event-accent); font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3em; text-transform: uppercase; font-size: 12px;
}

/* Labels + SVG icon */
.vibe-berlin .bln-label {
  display: flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--event-accent); margin-bottom: clamp(14px, 2vw, 20px);
  text-shadow: 0 0 12px rgba(55,230,255,0.5);
}
.vibe-berlin .bln-ico { width: 16px; height: 16px; fill: var(--bln-acc2); filter: drop-shadow(0 0 5px var(--bln-acc2)); animation: bln-flicker 4s steps(1) infinite; }

/* Lineup index */
.vibe-berlin .bln-index { list-style: none; margin: 0; padding: 0; }
.vibe-berlin .bln-index li {
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 24px);
  padding: clamp(10px, 1.4vw, 14px) 10px;
  border-bottom: 1px solid rgba(55,230,255,0.14);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.vibe-berlin .bln-index li:last-child { border-bottom: 0; }
.vibe-berlin .bln-index li:hover {
  background: rgba(55,230,255,0.07); transform: translateX(6px);
  box-shadow: inset 3px 0 0 var(--event-accent), 0 0 22px rgba(55,230,255,0.15);
}
.vibe-berlin .bln-index__n { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--bln-acc2); flex: 0 0 auto; padding-top: 5px; text-shadow: 0 0 8px rgba(255,47,176,0.6); }
.vibe-berlin .bln-index__name { font-family: 'Archivo Black', sans-serif; font-size: clamp(19px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: -0.01em; color: #fff; line-height: 1.05; }
.vibe-berlin .bln-index li:first-child .bln-index__name { color: var(--event-accent); text-shadow: 0 0 18px rgba(55,230,255,0.6); }
.vibe-berlin .bln-index-flat { font-family: 'Archivo Black', sans-serif; font-size: clamp(20px, 2.6vw, 32px); text-transform: uppercase; color: var(--event-accent); text-shadow: 0 0 18px rgba(55,230,255,0.5); }

/* About + blurb */
.vibe-berlin .bln-about { font-size: 15.5px; line-height: 1.8; color: #c7dbe8; margin: 0; white-space: pre-line; overflow-wrap: anywhere; word-wrap: break-word; }
.vibe-berlin .bln-about a { color: var(--event-accent); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 10px rgba(55,230,255,0.4); overflow-wrap: anywhere; word-break: break-all; }
.vibe-berlin .bln-blurbpanel { border-color: rgba(255,47,176,0.35); }
.vibe-berlin .bln-blurb { font-size: 14.5px; line-height: 1.75; color: #d9c7e8; font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }

/* ============================================================================
   Shared checkout form (_ticket_form.php .vx-*) — neon glow
   ============================================================================ */
.vibe-berlin .vx-tickets { --evt-border: rgba(55,230,255,0.18); color: var(--bln-ink); }
.vibe-berlin .vx-tickets__head { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: clamp(20px,2.4vw,26px); text-transform: uppercase; color: #fff; text-shadow: 0 0 16px rgba(55,230,255,0.5); margin: 0 0 clamp(12px,1.6vw,18px); }
.vibe-berlin .vx-tier { border-bottom: 1px solid rgba(55,230,255,0.16); padding: clamp(11px,1.6vw,15px) 6px; transition: background 0.2s, box-shadow 0.2s; }
.vibe-berlin .vx-tier:hover { background: rgba(55,230,255,0.06); box-shadow: inset 3px 0 0 var(--event-accent); }
.vibe-berlin .vx-tier__name { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.vibe-berlin .vx-tier__desc { color: var(--bln-mid); text-transform: none; }
.vibe-berlin .vx-tier__price { font-family: 'JetBrains Mono', monospace; color: var(--event-accent); }
.vibe-berlin .vx-tier__low { color: var(--bln-acc2); text-shadow: 0 0 8px rgba(255,47,176,0.6); }
.vibe-berlin .vx-qty { min-width: 70px; border: 1px solid rgba(55,230,255,0.4); border-radius: 0; background: rgba(5,7,13,0.9); color: var(--bln-ink); padding: 9px 10px; font-family: 'JetBrains Mono', monospace; transition: box-shadow 0.2s, border-color 0.2s; }
.vibe-berlin .vx-qty:focus { outline: none; border-color: var(--event-accent); box-shadow: 0 0 16px rgba(55,230,255,0.5); }
.vibe-berlin .vx-sold { background: rgba(255,47,176,0.12); color: var(--bln-acc2); border: 1px solid var(--bln-acc2); border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.vibe-berlin .vx-fields { gap: 16px; margin-top: clamp(18px,2.5vw,26px); }
.vibe-berlin .vx-field label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--event-accent); }
.vibe-berlin .vx-field input { border: 1px solid rgba(55,230,255,0.3); border-radius: 0; background: rgba(5,7,13,0.9); color: var(--bln-ink); padding: 11px 12px; transition: box-shadow 0.2s, border-color 0.2s; }
.vibe-berlin .vx-field input::placeholder { color: #4d6577; }
.vibe-berlin .vx-field input:focus { outline: none; border-color: var(--event-accent); box-shadow: 0 0 16px rgba(55,230,255,0.5); }
.vibe-berlin .vx-help { color: var(--bln-mid); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
/* Buy button — pulsing neon slab */
.vibe-berlin .vx-pay {
  margin-top: clamp(24px,3.5vw,34px);
  background: linear-gradient(100deg, var(--event-accent), #6bf0ff);
  color: #04121a; border: 0; border-radius: 2px;
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; padding: 18px;
  box-shadow: 0 0 24px rgba(55,230,255,0.5);
  animation: bln-btnpulse 2.4s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
@keyframes bln-btnpulse { 0%,100% { box-shadow: 0 0 20px rgba(55,230,255,0.4); } 50% { box-shadow: 0 0 34px rgba(55,230,255,0.7), 0 0 60px rgba(255,47,176,0.25); } }
.vibe-berlin .vx-pay:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 10px 40px -6px rgba(55,230,255,0.8), 0 0 50px rgba(255,47,176,0.4); }
.vibe-berlin .vx-pay:active { transform: translateY(0); }
.vibe-berlin .vx-secure { color: var(--bln-mid); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.vibe-berlin .vx-closed { border: 1px solid var(--event-accent); border-radius: 0; background: rgba(55,230,255,0.06); color: var(--event-accent); text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 20px rgba(55,230,255,0.2); }

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .vibe-berlin .bln-grid { grid-template-columns: minmax(0, 1fr); }
  .vibe-berlin .bln-metabar__pres { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-berlin .bln-fx *, .vibe-berlin .bln-fx::before,
  .vibe-berlin .bln-title, .vibe-berlin .bln-title::before, .vibe-berlin .bln-title::after,
  .vibe-berlin .bln-panel, .vibe-berlin .bln-caret, .vibe-berlin .bln-ico,
  .vibe-berlin .bln-kick, .vibe-berlin .vx-pay,
  .vibe-berlin .bln-flyerpanel::after { animation: none !important; }
}