/* ============================================================
   VICE CITY THEME
   Color palette extracted from GTA VI official key art.
   Scoped to .vc-page on <main> to avoid bleed into nav/footer.
   ============================================================ */

:root {
  --vc-deep:      #0d0618;
  --vc-dark:      #160924;
  --vc-purple:    #2d0f5e;
  --vc-violet:    #6b1a6b;
  --vc-pink:      #e8177d;
  --vc-pink-lite: #f0387a;
  --vc-orange:    #f5832a;
  --vc-peach:     #f8c06a;
  --vc-mint:      #4ecdc4;
  --vc-lavender:  #c4a8e0;
  --vc-white:     #f9f4ff;
  --vc-sub:       rgba(196,168,224,.7);
  --vc-border:    rgba(232,23,125,.22);
  --vc-border-hover: rgba(232,23,125,.7);
  --vc-sunset:    linear-gradient(180deg, #6b1a6b 0%, #c2185b 40%, #f57c00 75%, #f8c06a 100%);
  --vc-bg-gradient: linear-gradient(135deg, #0d0618 0%, #2d0f5e 50%, #160924 100%);
}

/* ---- Base overrides ---- */
.vc-page { background-color: var(--vc-deep); }

/* Surfaces */
.vc-page .bg-surface                { background-color: var(--vc-deep) !important; }
.vc-page .bg-surface-container-low  { background-color: var(--vc-dark) !important; }
.vc-page .bg-surface-container      { background-color: var(--vc-purple) !important; }
.vc-page .bg-surface-bright         { background-color: #1e0c38 !important; }

/* Text */
.vc-page .text-on-surface           { color: var(--vc-white) !important; }
.vc-page .text-on-surface-variant   { color: var(--vc-lavender) !important; }
.vc-page h1, .vc-page h2, .vc-page h3, .vc-page h4 { color: var(--vc-white); }

/* Primary accent: swap HPG orange → VC pink */
.vc-page .text-primary-container    { color: var(--vc-pink) !important; }
.vc-page .bg-primary-container      { background-color: var(--vc-pink) !important; }
.vc-page .border-primary-container  { border-color: var(--vc-pink) !important; }
.vc-page .hover\:bg-primary:hover   { background-color: var(--vc-pink-lite) !important; }
.vc-page .hover\:text-primary:hover { color: var(--vc-pink-lite) !important; }

/* Outline / border variants */
.vc-page .border-outline-variant\/20 { border-color: rgba(232,23,125,.12) !important; }
.vc-page .border-outline-variant\/10 { border-color: rgba(232,23,125,.08) !important; }
.vc-page .bg-outline-variant\/10     { background-color: rgba(232,23,125,.06) !important; }
.vc-page .bg-outline-variant\/20     { background-color: rgba(232,23,125,.1) !important; }

/* Buttons */
.vc-page .bg-surface.text-on-surface {
  background-color: var(--vc-dark) !important;
  color: var(--vc-white) !important;
  border: 1px solid var(--vc-border);
}
.vc-page .hover\:bg-surface-bright:hover {
  background-color: #1e0c38 !important;
}

/* On-primary text (inside pink buttons) */
.vc-page .text-on-primary           { color: #fff !important; }
.vc-page .bg-primary-container .text-surface { color: var(--vc-deep) !important; }

/* Tag / label chips */
.vc-page .bg-surface.text-sm.font-medium {
  background-color: var(--vc-dark) !important;
  border-color: var(--vc-border) !important;
  color: var(--vc-lavender) !important;
}

/* Dividers / decorative lines */
.vc-page .bg-primary-container.h-1  { background-color: var(--vc-pink) !important; }
.vc-page .bg-primary-container.w-16 { background-color: var(--vc-pink) !important; }
.vc-page .border-t-2.border-primary-container { border-color: var(--vc-pink) !important; }

/* ---- Hero gradient ---- */
.vc-page .vc-gradient {
  background: var(--vc-bg-gradient);
}
.vc-page .vc-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 80%, rgba(232,23,125,.18), transparent),
              radial-gradient(ellipse 50% 40% at 80% 20%, rgba(245,131,42,.1), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ---- Sponsor tiers ---- */
.vc-page .sponsor-tier {
  border-color: var(--vc-border);
  background-color: var(--vc-dark);
  border-radius: 20px !important;
}
.vc-page .sponsor-tier:hover {
  border-color: var(--vc-pink);
}
.vc-page .sponsor-tier.title-tier {
  border-color: var(--vc-pink);
  background: linear-gradient(135deg, rgba(232,23,125,.1), rgba(232,23,125,.03));
  border-radius: 20px !important;
}

/* ---- Host cards ---- */
.vc-page [style*="clip-path"] {
  background-color: var(--vc-dark) !important;
}

.vc-page #hosts .group {
  transition: transform .3s ease;
}
@media (hover: hover) {
  .vc-page #hosts .group:hover {
    transform: translateY(-30px);
  }
}
.vc-page #hosts .group img {
  transition: filter .3s ease;
}
@media (hover: hover) {
  .vc-page #hosts .group img {
    filter: grayscale(100%);
  }
  .vc-page #hosts .group:hover img {
    filter: grayscale(0%);
  }
}

/* ---- Partner placeholders ---- */
.vc-page .border-outline-variant\/20.aspect-\[3\/2\] {
  background-color: var(--vc-dark) !important;
  border-color: var(--vc-border) !important;
}
.vc-page .border-outline-variant\/20.aspect-\[3\/2\]:hover {
  border-color: var(--vc-border-hover) !important;
}

/* ---- CTA section ---- */
.vc-page section.bg-primary-container {
  background: linear-gradient(135deg, #8b1a6b 0%, #e8177d 40%, #f5832a 100%) !important;
}
.vc-page section.bg-primary-container h2 { color: #fff !important; }
.vc-page section.bg-primary-container p  { color: rgba(255,255,255,.8) !important; }
.vc-page section.bg-primary-container .text-surface\/70 { color: rgba(255,255,255,.7) !important; }
.vc-page section.bg-primary-container .text-surface\/60 { color: rgba(255,255,255,.6) !important; }
.vc-page section.bg-primary-container .text-surface\/80 { color: rgba(255,255,255,.8) !important; }
.vc-page section.bg-primary-container .border-surface\/40 { border-color: rgba(255,255,255,.4) !important; }
.vc-page section.bg-primary-container .hover\:border-surface:hover { border-color: #fff !important; }
.vc-page section.bg-primary-container a.bg-surface {
  background-color: var(--vc-deep) !important;
  color: var(--vc-white) !important;
}
.vc-page section.bg-primary-container a.bg-surface:hover {
  background-color: var(--vc-dark) !important;
}

/* ---- Decorative corner brackets ---- */
.vc-page .border-t-4.border-l-4.border-primary-container,
.vc-page .border-b-4.border-r-4.border-primary-container {
  border-color: var(--vc-pink) !important;
}

/* ---- Check icons ---- */
.vc-page .material-symbols-outlined.text-primary-container {
  color: var(--vc-pink) !important;
}

/* ---- Float-up scroll animation ---- */
@keyframes floatUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vc-float {
  opacity: 0;
  transform: translateY(50px);
}

.vc-float.vc-visible {
  animation: floatUp .6s cubic-bezier(.22,1,.36,1) forwards;
}

/* ---- Scrollbar (optional) ---- */
.vc-page::-webkit-scrollbar { width: 6px; }
.vc-page::-webkit-scrollbar-track { background: var(--vc-deep); }
.vc-page::-webkit-scrollbar-thumb { background: var(--vc-pink); border-radius: 3px; }

/* ---- Sunset accent bar (decorative) ---- */
.vc-sunset-bar {
  height: 3px;
  background: linear-gradient(90deg, #6b1a6b, #e8177d, #f5832a, #f8c06a);
  width: 100%;
}