/* =============================================
   BlackOnVibe UK — Global CSS
   Dark/light mode, animations, glassmorphism
   ============================================= */

/* ---------- Theme Transition ---------- */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
/* But NOT transitions for transforms/opacity (breaks animations) */
[class*="transition-"], [class*="duration-"], [class*="ease-"] {
  transition-property: initial;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Light Mode Overrides ---------- */
html:not(.dark) .glass,
html:not(.dark) .glass-card,
html:not(.dark) .glass-panel {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(188, 6, 249, 0.2) !important;
  color: #1e1e2e;
}

html:not(.dark) header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(188, 6, 249, 0.15) !important;
}

html:not(.dark) body {
  color: #1a0a20;
}

html:not(.dark) .text-slate-400 { color: #64748b; }
html:not(.dark) .text-slate-500 { color: #475569; }
html:not(.dark) .text-slate-100,
html:not(.dark) .dark\:text-slate-100 { color: #1a0a20 !important; }
html:not(.dark) .text-white { color: #1a0a20 !important; }
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3,
html:not(.dark) h4, html:not(.dark) h5 { color: #1a0a20; }

/* Keep white text on dark/primary backgrounds in light mode */
html:not(.dark) .bg-primary .text-white,
html:not(.dark) .bg-primary h1,
html:not(.dark) .bg-primary p,
html:not(.dark) button.bg-primary,
html:not(.dark) a.bg-primary { color: #ffffff !important; }

/* ---------- Glassmorphism (consistent) ---------- */
.glass {
  background: rgba(188, 6, 249, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 6, 249, 0.2);
}

.glass-card {
  background: rgba(30, 15, 35, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 6, 249, 0.2);
}

.glass-panel {
  background: rgba(30, 15, 35, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(188, 6, 249, 0.2);
}

/* ---------- Scroll Animations ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}

[data-animate="fade-left"] {
  transform: translateX(-40px);
}

[data-animate="fade-right"] {
  transform: translateX(40px);
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

[data-animate="fade-up"],
[data-animate="fade-left"],
[data-animate="fade-right"],
[data-animate="scale-in"] {
  opacity: 0;
}

[data-animate].visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }

/* ---------- Keyframes ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(188,6,249,0.35); }
  50%       { box-shadow: 0 0 28px rgba(188,6,249,0.75), 0 0 60px rgba(188,6,249,0.25); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-float   { animation: float 4s ease-in-out infinite; }
.neon-pulse      { animation: neon-pulse 2.4s ease-in-out infinite; }

/* ---------- Utility Classes ---------- */
.gradient-text {
  background: linear-gradient(135deg, #bc06f9, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(188, 6, 249, 0.2) !important;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Mobile Menu ---------- */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

#mobile-menu .menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

#mobile-menu .menu-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #120a15;
  border-left: 1px solid rgba(188,6,249,0.2);
  padding: 2rem 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

#mobile-menu.open .menu-panel {
  transform: translateX(0);
}

#mobile-menu .menu-panel a,
#mobile-menu .menu-panel button {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: #e2e8f0;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
  transition: background 0.2s, color 0.2s;
}

#mobile-menu .menu-panel a:hover,
#mobile-menu .menu-panel button:hover {
  background: rgba(188,6,249,0.12);
  color: #bc06f9;
}

#mobile-menu .menu-close {
  align-self: flex-end;
  background: rgba(188,6,249,0.1);
  border: 1px solid rgba(188,6,249,0.2);
  color: #bc06f9;
  border-radius: 9999px;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

/* ---------- Theme Toggle Button ---------- */
#theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(188,6,249,0.3);
  background: rgba(188,6,249,0.1);
  cursor: pointer;
  color: #bc06f9;
  transition: background 0.2s, box-shadow 0.2s !important;
  flex-shrink: 0;
}

#theme-toggle:hover {
  background: rgba(188,6,249,0.25);
  box-shadow: 0 0 12px rgba(188,6,249,0.35);
}

.theme-icon-dark  { display: block; }
.theme-icon-light { display: none; }

html:not(.dark) .theme-icon-dark  { display: none; }
html:not(.dark) .theme-icon-light { display: block; }

/* ---------- Lightbox ---------- */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

#lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 0.75rem;
  border: 1px solid rgba(188,6,249,0.3);
  animation: slide-down 0.3s ease;
}

#lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(188,6,249,0.2);
  border: 1px solid rgba(188,6,249,0.4);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  text-align: center;
  max-width: 60ch;
}

#lightbox-prev, #lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(188,6,249,0.2);
  border: 1px solid rgba(188,6,249,0.4);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-prev { left: 1.5rem; }
#lightbox-next { right: 1.5rem; }

/* ---------- Back to Top ---------- */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #bc06f9;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(188,6,249,0.4);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#back-to-top:hover {
  box-shadow: 0 0 30px rgba(188,6,249,0.7);
}

/* ---------- Filter Pills (Events) ---------- */
.filter-pill {
  cursor: pointer;
  transition: background 0.2s, color 0.2s !important;
}

.event-card {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.event-card.filtered-out {
  display: none;
}

/* ---------- Gallery Cursor ---------- */
[data-lightbox] {
  cursor: zoom-in;
}