/* NEXUS Gaming Lounge — custom styles on top of Tailwind */

/* ===== Theme palette (override per variant) =====
   Values are space-separated RGB channels so Tailwind's /opacity
   modifiers work via rgb(var(--token) / <alpha-value>). */
:root {
  --brand: 56 189 248;       /* arctic sky */
  --brand-dark: 14 165 233;
  --brand-light: 125 211 252;
  --cyber: 165 243 252;      /* frost accent */
  --ink: 8 13 24;            /* deep arctic navy */
  --surface: 13 22 38;       /* section gradient base */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: rgb(var(--ink));
}

h1, h2, h3, .display {
  font-family: 'Orbitron', sans-serif;
}

/* ===== Section surface gradient ===== */
.bg-surface-grad {
  background: linear-gradient(to bottom, rgb(var(--ink)), rgb(var(--surface)));
}

/* ===== Hero overlay gradient ===== */
.hero-overlay {
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(var(--brand-dark) / 0.25) 0%, transparent 55%),
    linear-gradient(to bottom, rgb(var(--ink) / 0.55) 0%, rgb(var(--ink) / 0.75) 55%, rgb(var(--ink) / 0.98) 100%);
}

/* ===== Neon gradient text ===== */
.text-gradient {
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--cyber)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Neon glow utilities ===== */
.glow {
  box-shadow: 0 0 0 1px rgb(var(--brand) / 0.35), 0 0 24px rgb(var(--brand) / 0.35);
}
.glow-cyan {
  box-shadow: 0 0 0 1px rgb(var(--cyber) / 0.35), 0 0 24px rgb(var(--cyber) / 0.30);
}
.text-glow {
  text-shadow: 0 0 18px rgb(var(--brand) / 0.55);
}

/* ===== Animated grid backdrop ===== */
.grid-bg {
  background-image:
    linear-gradient(rgb(var(--brand-dark) / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--brand-dark) / 0.10) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ===== Card hover lift ===== */
.card-lift {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 55px -15px rgb(var(--brand-dark) / 0.45);
  border-color: rgb(var(--brand) / 0.6);
}

/* ===== Image zoom on hover ===== */
.img-zoom {
  transition: transform 0.6s ease;
}
.img-zoom-wrap:hover .img-zoom {
  transform: scale(1.08);
}

/* ===== Gradient button ===== */
.btn-grad {
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--cyber)));
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-grad:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 26px rgb(var(--brand) / 0.55);
}

/* ===== Fade-up entrance animation ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.visible { animation: fadeUp 0.7s ease forwards; }

/* ===== Filter pills ===== */
.filter-active {
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--cyber)));
  color: rgb(var(--ink));
  border-color: transparent !important;
}

/* ===== Live pulse dot ===== */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--cyber) / 0.6); }
  50%      { box-shadow: 0 0 0 8px rgb(var(--cyber) / 0); }
}
.pulse-dot { animation: pulseDot 1.8s infinite; }

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--ink)); }
::-webkit-scrollbar-thumb { background: rgb(var(--brand-dark)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand)); }