/* ==========================================================================
   DEMO BRANCH — Lab experiment aesthetic
   Dark purple canvas · orbital circles · pixel icons · specimen card layout
   Loaded after style.css as overrides.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --d-bg:        #48326f;
  --d-bg2:       #3a2759;
  --d-bg3:       #5a3d85;
  --d-fg:        #f0edf8;
  --d-fg-dim:    rgba(240,237,248,0.45);
  --d-fg-faint:  rgba(240,237,248,0.09);
  --d-accent:    #ffcc00;
  --d-accent2:   #c084fc;   /* soft purple highlight */
  --d-hair:      rgba(240,237,248,0.1);
  --d-hair2:     rgba(240,237,248,0.05);
  --d-pad:       clamp(24px, 4vw, 52px);
  --d-bracket:   18px;
  --d-frame:     18px;
}

/* ── Global ────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--d-bg) !important;
  color: var(--d-fg) !important;
}
body { font-family: "DotGothic16", monospace !important; }

/* ── Corner bracket frame ──────────────────────────────────────────────── */
.site-frame {
  position: fixed;
  inset: var(--d-frame);
  z-index: 9000;
  pointer-events: none;
}
.site-frame::before, .site-frame::after,
.site-frame > span::before, .site-frame > span::after {
  content: "";
  position: absolute;
  width: var(--d-bracket);
  height: var(--d-bracket);
  border-color: var(--d-fg);
  border-style: solid;
  border-width: 0;
  opacity: 0.25;
}
.site-frame::before        { top:0; left:0;  border-top-width:1.5px; border-left-width:1.5px; }
.site-frame::after         { top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
.site-frame > span::before { bottom:0; left:0;  border-bottom-width:1.5px; border-left-width:1.5px; }
.site-frame > span::after  { bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }


/* ── Nav ───────────────────────────────────────────────────────────────── */
.navbar {
  background: rgba(72,50,111,0.75) !important;
  border-bottom: 1px solid var(--d-hair) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dropdown-menu {
  background: var(--d-bg2) !important;
  border: 1px solid var(--d-hair) !important;
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  background: var(--d-bg) !important;
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

/* video — natural colour, slightly dimmed for text legibility */
.hero-video {
  z-index: 0 !important;
  filter: brightness(0.55);
}

/* dot grid */
.hero-grid {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--d-hair2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--d-hair2) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* grain */
.hero-grain {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 1  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* vignette */
.video-overlay {
  z-index: 3 !important;
  background: rgba(72, 50, 111, 0.5) !important;
}

/* ── Orbital circles ───────────────────────────────────────────────────── */
.hero-orbits {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--d-hair);
}
.orbit-1 { width: 340px; height: 340px; border-style: dashed; opacity: 0.4; animation: spin 80s linear infinite; }
.orbit-2 { width: 560px; height: 560px; opacity: 0.25; animation: spin 120s linear infinite reverse; }
.orbit-3 { width: 780px; height: 780px; border-style: dashed; opacity: 0.15; animation: spin 160s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Orbit dot markers */
.orbit::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--d-accent);
  border-radius: 50%;
  opacity: 0.8;
}

/* ── Scattered pixel icons ─────────────────────────────────────────────── */
.hero-icons {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.px-icon {
  position: absolute;
  font-size: 20px;
  opacity: 0.18;
  color: var(--d-fg);
  font-family: "Press Start 2P", monospace;
  user-select: none;
  line-height: 1;
}
/* positions mirroring the social post scatter */
.px-icon:nth-child(1) { top: 12%; left:  8%; font-size: 28px; }
.px-icon:nth-child(2) { top: 22%; left:  6%; font-size: 16px; }
.px-icon:nth-child(3) { top: 65%; left:  6%; font-size: 24px; }
.px-icon:nth-child(4) { top: 78%; left:  9%; font-size: 18px; }
.px-icon:nth-child(5) { top: 10%; right: 8%; font-size: 26px; }
.px-icon:nth-child(6) { top: 30%; right: 6%; font-size: 20px; }
.px-icon:nth-child(7) { top: 62%; right: 7%; font-size: 28px; }
.px-icon:nth-child(8) { top: 80%; right: 9%; font-size: 16px; }

/* ── Hero content ──────────────────────────────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: var(--d-pad);
  max-width: 860px;
  width: 100%;
}

.hero-logo {
  display: block;
  margin: 0 auto clamp(14px, 2.2vh, 28px);
  height: clamp(56px, 10vh, 100px);
  width: auto;
}

/* experiment label — "THE LAB CON EXPERIMENT · 13/06/2026" */
.hero-experiment {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d-fg-dim);
  margin-bottom: clamp(10px, 1.8vh, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-experiment .exp-dot {
  width: 4px; height: 4px;
  background: var(--d-accent);
  border-radius: 50%;
  display: inline-block;
  animation: kpulse 2s ease-in-out infinite;
}
@keyframes kpulse {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 var(--d-accent); }
  50%      { opacity:0.4; box-shadow: 0 0 0 5px transparent; }
}

/* kicker badge */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-fg-dim);
  margin-bottom: clamp(14px, 2.2vh, 26px);
}
.kicker-badge {
  color: var(--d-accent);
  border: 1px solid var(--d-accent);
  padding: 4px 9px;
  font-size: 8px;
}

/* main heading */
.hero h2 {
  font-family: "Press Start 2P", monospace !important;
  font-size: clamp(16px, 3.8vw, 48px) !important;
  line-height: 1.65 !important;
  color: var(--d-fg) !important;
  margin: 0 0 clamp(10px, 1.8vh, 18px) !important;
  text-wrap: balance;
}

/* strapline */
.hero-strapline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--d-fg);
  margin-bottom: clamp(18px, 2.8vh, 32px);
}
.strap-line { flex: 0 1 55px; height: 1px; background: var(--d-hair); }
.strap-sep  { color: var(--d-accent); }

/* specimen meta — Date / Time / Venue columns */
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.5vw, 44px);
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3.2vh, 38px);
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.meta-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.meta-label { color: var(--d-accent); font-size: 7px; letter-spacing: 0.22em; }
.meta-val   { color: var(--d-fg); font-size: 9px; }
.meta-sep   { width: 1px; height: 26px; background: var(--d-hair); }

/* CTA */
.hero .btn {
  font-family: "Press Start 2P", monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  padding: 14px 28px !important;
  background: var(--d-fg) !important;
  color: var(--d-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
.hero .btn:hover {
  background: var(--d-accent) !important;
  color: #000 !important;
}

/* sponsors strip */
.hero-sponsors-label {
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: var(--d-fg-dim);
  margin-top: clamp(22px, 3.5vh, 44px);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.hero-sponsors-label::before,
.hero-sponsors-label::after {
  content: "";
  flex: 1; max-width: 44px;
  height: 1px; background: var(--d-hair);
}

/* sponsor links — no visual effects on anchor whatsoever */
.sponsor-item a {
  display: block;
  text-decoration: none !important;
  color: transparent !important;
  background: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.sponsor-item a:hover,
.sponsor-item a:focus,
.sponsor-item a:active,
.sponsor-item a:visited {
  text-decoration: none !important;
  color: transparent !important;
  background: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  --bs-link-color-rgb: 0,0,0,0 !important;
  --bs-link-hover-color-rgb: 0,0,0,0 !important;
}
/* scale on the image only, triggered from parent div */
.sponsor-item {
  overflow: hidden;
}
.sponsor-item img {
  display: block;
  pointer-events: none;
  transition: transform 0.25s ease;
}
.sponsor-item:hover img {
  transform: scale(1.08);
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { background: var(--d-bg) !important; }

h1,h2,h3,h4,h5 {
  font-family: "Press Start 2P", monospace !important;
  color: var(--d-fg) !important;
}

.framed-light {
  border: 1px solid var(--d-hair) !important;
  background: var(--d-bg2) !important;
  color: var(--d-fg) !important;
}

/* ── About page — white bg section needs dark text ─────────────────────── */
.info h2, .info h3, .info h4, .info h5 {
  color: #48326f !important;
}
.info p, .info b { color: #48326f !important; }

/* ── Footer — restore original bg image ────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--d-hair) !important;
}
.footer-overlay { background: rgba(0,0,0,0.55) !important; }

/* ── Eventbrite widget wrapper ─────────────────────────────────────────── */
.eb-widget-wrap {
  background: #fff;
  border: 1px solid var(--d-hair);
  overflow: visible;
}
.eb-widget-wrap iframe {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* ── Tickets section ───────────────────────────────────────────────────── */
.tickets-sub {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--d-fg-dim);
  line-height: 2;
}

/* Step container */
.ticket-step {
  border: 1px solid var(--d-hair);
  padding: 28px 28px 24px;
  background: var(--d-bg2);
}

.ticket-step__label {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--d-accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticket-step__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--d-hair);
}

.ticket-step__body {
  color: var(--d-fg-dim);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* Ticket type info cards */
.ticket-type-card {
  border: 1px solid var(--d-hair);
  padding: 20px;
  background: var(--d-bg);
  height: 100%;
  transition: border-color 0.2s;
}
.ticket-type-card:hover { border-color: var(--d-accent2); }
.ticket-type-card--vip {
  border-color: rgba(255,204,0,0.4);
  background: linear-gradient(135deg, var(--d-bg) 0%, rgba(255,204,0,0.04) 100%);
}
.ticket-type-card--vip:hover { border-color: var(--d-accent); }

.ttc-badge {
  display: inline-block;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  background: var(--d-accent);
  color: #000;
  margin-bottom: 12px;
}
.ttc-badge--general {
  background: transparent;
  border: 1px solid var(--d-fg-dim);
  color: var(--d-fg-dim);
}

.ttc-name {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  color: var(--d-fg);
  line-height: 1.7;
  margin-bottom: 8px;
}

.ttc-desc {
  font-size: 13px;
  color: var(--d-fg-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}

.ttc-price {
  font-family: "Press Start 2P", monospace;
  font-size: 20px;
  color: var(--d-accent);
  margin-bottom: 8px;
}
.ttc-price span {
  font-size: 9px;
  color: var(--d-fg-dim);
}

.ttc-note {
  font-size: 11px;
  color: var(--d-fg-dim);
  opacity: 0.65;
  border-top: 1px solid var(--d-hair);
  padding-top: 10px;
  margin-top: 4px;
}

/* ── Ticket section ────────────────────────────────────────────────────── */
.ticket-group-label {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--d-fg-dim);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticket-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--d-hair);
}

.ticket-card {
  background: var(--d-bg2);
  border: 1px solid var(--d-hair);
  transition: border-color 0.2s;
}
.ticket-card:hover { border-color: var(--d-accent2); }

.ticket-card--featured {
  border-color: var(--d-accent);
  background: linear-gradient(135deg, var(--d-bg2) 0%, rgba(255,204,0,0.06) 100%);
}
.ticket-card--featured:hover { border-color: var(--d-accent); }

.ticket-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}

.ticket-card__left { flex: 1; }

.ticket-card__name {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  color: var(--d-fg);
  margin-bottom: 8px;
  line-height: 1.6;
}
.ticket-card--featured .ticket-card__name { font-size: 12px; }

.ticket-card__desc {
  font-size: 13px;
  color: var(--d-fg-dim);
  line-height: 1.5;
}
.ticket-card__sub {
  font-size: 11px;
  color: var(--d-fg-dim);
  margin-top: 6px;
  opacity: 0.65;
}

.ticket-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.ticket-card__price {
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: var(--d-accent);
  white-space: nowrap;
}
.ticket-card__price.free { color: var(--d-accent2); font-size: 14px; }

.ticket-btn {
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--d-fg);
  color: var(--d-fg);
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ticket-btn:hover {
  background: var(--d-fg);
  color: var(--d-bg);
}
.ticket-btn--primary {
  background: var(--d-accent);
  border-color: var(--d-accent);
  color: #000;
}
.ticket-btn--primary:hover {
  background: #e6b800;
  border-color: #e6b800;
  color: #000;
}

/* ── Event photo strip ─────────────────────────────────────────────────── */
.event-photo-wrap {
  overflow: hidden;
  border: 1px solid var(--d-hair);
  aspect-ratio: 4 / 5;
}
.event-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.85) saturate(0.9);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.event-photo-wrap:hover .event-photo {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--d-bg); }
::-webkit-scrollbar-thumb { background: var(--d-bg3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--d-accent); }