/* ─── TICKETHUB 3D IMMERSIVE v2 ──────────────────────────────────────────── */

html {
  background: #060511;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 4%,  rgba(34,211,238,.18), transparent 32rem),
    radial-gradient(circle at 14% 14%, rgba(236,72,153,.16),  transparent 28rem),
    linear-gradient(180deg, #0a0718 0%, #060511 48%, #080712 100%) !important;
  color: #f8fafc;
  overflow-x: hidden;
}

/* ─── DESIGN TOKENS ───────────────────────────────────────────────────────── */
:root {
  --th-bg:          #060511;
  --th-panel:       rgba(16,14,28,.78);
  --th-panel-strong:rgba(20,18,34,.94);
  --th-line:        rgba(255,255,255,.13);
  --th-muted:       #a8adbb;
  --th-pink:        #ec4899;
  --th-purple:      #8b5cf6;
  --th-cyan:        #22d3ee;
  --th-gold:        #f6c453;
  --th-ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ─── BACKGROUND GRID ─────────────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .20;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 36rem);
}

/* ─── PAGE LOADER ─────────────────────────────────────────────────────────── */
#page-loader {
  background: #060511 !important;
}

#page-loader .text-purple-300,
.text-brand-light,
.text-brand {
  color: #c4b5fd !important;
}

/* ─── BRAND COLORS ────────────────────────────────────────────────────────── */
.bg-brand {
  background: linear-gradient(135deg, var(--th-pink), var(--th-purple)) !important;
}

.bg-brand-dark,
.hover\:bg-brand-dark:hover,
.hover\:bg-brand:hover {
  background: linear-gradient(135deg, #d946ef, #6d28d9) !important;
}

.border-brand,
.focus\:border-brand:focus,
.hover\:border-brand:hover {
  border-color: rgba(196,181,253,.75) !important;
}

/* ─── NAVIGATION ──────────────────────────────────────────────────────────── */
nav.border-b {
  background: rgba(6,5,17,.72) !important;
  border-color: rgba(255,255,255,.09) !important;
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 38px rgba(0,0,0,.28);
}

nav a:hover {
  color: #fff !important;
}

nav .bg-brand {
  border-radius: 10px !important;
  box-shadow: 0 0 24px rgba(139,92,246,.36), 0 0 6px rgba(236,72,153,.26);
}

/* ─── INPUTS ──────────────────────────────────────────────────────────────── */
input,
select,
textarea {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s, box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(139,92,246,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              0 0 0 3px rgba(139,92,246,.12) !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #9da3b5 !important;
}

button,
a { text-decoration: none; }

/* ─── HERO SECTION ────────────────────────────────────────────────────────── */
.gradient-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 72% 20%, rgba(34,211,238,.18), transparent 24rem),
    radial-gradient(circle at 18% 40%, rgba(236,72,153,.20), transparent 26rem),
    radial-gradient(circle at 50% 80%, rgba(139,92,246,.14), transparent 22rem),
    linear-gradient(135deg, #100720 0%, #080714 50%, #071729 100%) !important;
}

/* scanlines */
.gradient-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .10;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 100% 4px;
}

#th-hero-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Floating orbs behind hero content */
.th-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
  will-change: transform;
  animation: th-orb-drift 14s ease-in-out infinite alternate;
}

.th-orb-1 {
  width: 520px; height: 520px;
  left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(139,92,246,.36), transparent 70%);
  animation-duration: 12s;
}

.th-orb-2 {
  width: 400px; height: 400px;
  right: -60px; bottom: -40px;
  background: radial-gradient(circle, rgba(34,211,238,.26), transparent 70%);
  animation-duration: 16s;
  animation-delay: -5s;
}

.th-orb-3 {
  width: 320px; height: 320px;
  right: 28%; top: 18%;
  background: radial-gradient(circle, rgba(236,72,153,.20), transparent 70%);
  animation-duration: 18s;
  animation-delay: -8s;
}

@keyframes th-orb-drift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(22px,-16px) scale(1.06); }
  66%  { transform: translate(-12px,20px) scale(.96); }
  100% { transform: translate(16px,-8px) scale(1.04); }
}

/* Hero glass card */
.gradient-hero > .max-w-3xl {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 32px)) !important;
  max-width: none !important;
  padding: 36px 40px !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(8,6,20,.52) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.44),
              0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

/* Gradient heading with animated shimmer */
.gradient-hero h1 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  color: transparent;
  background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 28%, #f6c453 55%, #22d3ee 90%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 200%;
  animation: th-h1-shift 7s ease infinite;
  letter-spacing: -.5px;
}

@keyframes th-h1-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.gradient-hero p {
  color: #c8ceda !important;
}

/* ─── TRUST TICKER ────────────────────────────────────────────────────────── */
.th-trust-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 14px 5px 7px;
  max-width: 340px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.07);
}

/* pulsing live dot */
.th-live-dot {
  position: relative;
  width: 10px; height: 10px;
  background: #22d3ee;
  border-radius: 50%;
  flex-shrink: 0;
  animation: th-dot-pulse 2.4s ease-in-out infinite;
}

.th-live-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34,211,238,.35);
  animation: th-dot-ring 2.4s ease-out infinite;
}

@keyframes th-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,.55), 0 0 6px rgba(34,211,238,.45); }
  50%       { box-shadow: 0 0 0 5px rgba(34,211,238,0), 0 0 14px rgba(34,211,238,.55); }
}

@keyframes th-dot-ring {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ticker viewport + track */
.th-ticker-viewport {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
}

.th-ticker-track {
  display: flex;
  animation: th-ticker-scroll 20s linear infinite;
  width: max-content;
}

.th-ticker-track:hover {
  animation-play-state: paused;
}

.th-ticker-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #dde1ed;
  white-space: nowrap;
  letter-spacing: .3px;
}

.th-ticker-item i {
  color: var(--th-cyan);
  font-size: 9px;
}

.th-ticker-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

@keyframes th-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── HERO STATS ──────────────────────────────────────────────────────────── */
.th-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 22px;
}

.th-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.th-hero-stat strong {
  font-size: 21px;
  font-weight: 800;
  color: transparent;
  background: linear-gradient(135deg, #fff, var(--th-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
}

.th-hero-stat span {
  font-size: 11px;
  color: var(--th-muted);
  margin-top: 3px;
  letter-spacing: .3px;
}

.th-hero-stat-sep {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.14);
}

/* ─── SEARCH FORM ─────────────────────────────────────────────────────────── */
.gradient-hero form,
#search-form {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  padding: 8px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 20px 56px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  transition: border-color .2s, box-shadow .2s;
}

.gradient-hero form:focus-within,
#search-form:focus-within {
  border-color: rgba(139,92,246,.48) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.28),
              0 0 0 4px rgba(139,92,246,.10) !important;
}

.gradient-hero form input,
#search-form input {
  min-height: 52px;
}

.gradient-hero form button,
#search-form button,
aside a.bg-brand {
  min-height: 52px;
  border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(139,92,246,.28),
              0 0 0 1px rgba(255,255,255,.08) inset !important;
  transition: box-shadow .22s ease, transform .18s ease !important;
}

.gradient-hero form button:hover,
#search-form button:hover {
  box-shadow: 0 18px 48px rgba(139,92,246,.44),
              0 0 28px rgba(236,72,153,.2) !important;
  transform: translateY(-1px) !important;
}

/* ─── FILTER BAR ──────────────────────────────────────────────────────────── */
section.bg-gray-900.border-b {
  background: rgba(6,5,17,.82) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
}

#toggle-track {
  transition: background-color .2s !important;
}

/* ─── GENERAL OVERRIDES ───────────────────────────────────────────────────── */
section.bg-gray-900,
.bg-gray-900 {
  background-color: rgba(13,11,26,.82) !important;
}

.border-gray-800,
.border-gray-700 {
  border-color: rgba(255,255,255,.11) !important;
}

/* ─── CATEGORY PILLS ──────────────────────────────────────────────────────── */
.category-pill,
.genre-pill {
  position: relative;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e0e4f0 !important;
  transition: all .22s var(--th-ease-spring) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.category-pill::before,
.genre-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.category-pill:hover,
.genre-pill:hover,
.genre-pill.bg-brand {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(236,72,153,.88), rgba(139,92,246,.92)) !important;
  border-color: rgba(196,181,253,.38) !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 22px rgba(139,92,246,.28),
    0 0 18px rgba(236,72,153,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.category-pill:hover::before,
.genre-pill:hover::before {
  opacity: 1;
}

.category-pill:hover i,
.genre-pill:hover i,
.genre-pill.bg-brand i {
  color: #f6c453 !important;
  filter: drop-shadow(0 0 5px rgba(246,196,83,.5));
}

/* ─── EVENT CARDS ─────────────────────────────────────────────────────────── */
.card-hover {
  position: relative;
  border-color: rgba(255,255,255,.09) !important;
  background: rgba(11,9,24,.90) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.38);
  transform-style: preserve-3d;
  perspective: 900px;
  transition:
    transform .28s var(--th-ease-spring),
    box-shadow .28s ease,
    border-color .22s ease !important;
  will-change: transform;
  overflow: hidden;
}

/* glass gloss highlight */
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.11) 0%, transparent 36%, rgba(34,211,238,.05) 100%);
  z-index: 2;
  opacity: .55;
  transition: opacity .28s;
}

/* shimmer sweep on hover */
.card-hover::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.10) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0s;
}

.card-hover:hover {
  transform: translateY(-10px) rotateX(3deg) scale(1.014);
  border-color: rgba(196,181,253,.48) !important;
  box-shadow:
    0 28px 68px rgba(0,0,0,.52),
    0 0 38px rgba(139,92,246,.16),
    0 0 0 1px rgba(139,92,246,.20) !important;
}

.card-hover:hover::after {
  transform: translateX(220%);
  transition: transform .52s ease;
}

.card-hover:hover::before {
  opacity: 1;
}

.card-hover .aspect-video {
  border-bottom: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}

.card-hover img {
  filter: saturate(1.08) contrast(1.02);
  transition: transform .4s ease, filter .3s ease !important;
}

.card-hover:hover img {
  transform: scale(1.06) !important;
  filter: saturate(1.22) contrast(1.04) !important;
}

.card-hover h3 {
  font-size: 15px;
  line-height: 1.25;
}

/* genre badge */
.card-hover .absolute.top-2.left-2 {
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.14);
}

/* price badge */
.card-hover .absolute.bottom-2.right-2 {
  background: linear-gradient(135deg, var(--th-pink), var(--th-purple)) !important;
  box-shadow: 0 4px 14px rgba(139,92,246,.36);
}

/* Get Tickets button */
.card-hover .bg-brand {
  box-shadow: 0 3px 14px rgba(139,92,246,.28) !important;
  transition: box-shadow .2s ease, transform .18s ease !important;
}

.card-hover:hover .bg-brand {
  box-shadow: 0 6px 20px rgba(139,92,246,.50),
              0 0 12px rgba(236,72,153,.22) !important;
  transform: translateX(2px);
}

/* ─── SECTION HEADINGS ────────────────────────────────────────────────────── */
.max-w-7xl > section h2 i,
.max-w-7xl h2 i {
  filter: drop-shadow(0 0 8px currentColor);
}

/* ─── WHY BOOK FEATURE CARDS ──────────────────────────────────────────────── */
.max-w-5xl .rounded-2xl {
  position: relative;
  background: rgba(14,11,28,.85) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
  transition:
    transform .30s var(--th-ease-spring),
    box-shadow .30s ease,
    border-color .22s ease !important;
  overflow: hidden;
}

.max-w-5xl .rounded-2xl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.10) 0%, transparent 44%);
  z-index: 0;
}

.max-w-5xl .rounded-2xl > * {
  position: relative;
  z-index: 1;
}

.max-w-5xl .rounded-2xl:hover {
  transform: translateY(-7px) rotateX(2deg);
  border-color: rgba(196,181,253,.36) !important;
  box-shadow:
    0 28px 62px rgba(0,0,0,.44),
    0 0 26px rgba(139,92,246,.12) !important;
}

/* glowing icons */
.max-w-5xl .text-brand-light {
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(167,139,250,.44));
  animation: th-icon-glow 3.2s ease-in-out infinite alternate;
}

@keyframes th-icon-glow {
  0%   { filter: drop-shadow(0 0 7px rgba(167,139,250,.36)); }
  100% { filter: drop-shadow(0 0 18px rgba(167,139,250,.72))
                 drop-shadow(0 0 34px rgba(236,72,153,.18)); }
}

/* ─── MAIN ARTICLE + ASIDE ────────────────────────────────────────────────── */
main article,
aside > div,
details,
.max-w-5xl .bg-gray-900,
.max-w-7xl .bg-gray-900 {
  background: var(--th-panel) !important;
  border-color: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
}

main article {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  padding: 26px;
}

main article h1 {
  color: transparent;
  background: linear-gradient(135deg, #fff 8%, #f6c453 52%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

details {
  transition: border-color .2s, transform .2s;
}

details:hover {
  border-color: rgba(196,181,253,.52) !important;
  transform: translateY(-2px);
}

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
footer {
  background: rgba(6,5,17,.92) !important;
  border-color: rgba(255,255,255,.09) !important;
}

footer a:hover {
  color: var(--th-cyan) !important;
}

/* ─── TEXT UTILITIES ──────────────────────────────────────────────────────── */
.text-gray-400 { color: #aeb4c4 !important; }
.text-gray-500 { color: #858da2 !important; }

.line-clamp-1,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gradient-hero {
    min-height: 600px;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .gradient-hero > .max-w-3xl {
    padding: 24px 18px !important;
    border-radius: 22px;
  }

  .th-orb-1 { width: 280px; height: 280px; }
  .th-orb-2 { width: 220px; height: 220px; }
  .th-orb-3 { display: none; }

  .gradient-hero form,
  #search-form { padding: 6px; }

  .th-trust-wrap { max-width: 260px; }

  .th-hero-stat { padding: 0 12px; }
  .th-hero-stat strong { font-size: 17px; }

  main article { padding: 18px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .th-orb,
  .th-ticker-track,
  .th-live-dot,
  .th-live-dot::before,
  .gradient-hero h1,
  .max-w-5xl .text-brand-light {
    animation: none !important;
  }

  .card-hover,
  .category-pill,
  .genre-pill,
  .max-w-5xl .rounded-2xl,
  details {
    transition: none !important;
  }
}