/* ============================================================
   MYSTICX - VIVID OVERRIDES v2.0
   Visual polish layer: film grain, diamond overlay, gate effects
   Loads LAST in cascade - minimal !important needed
   ============================================================ */

:root {
  /* Vivid accent variants */
  --gold: #d4af37;
  --gold-hot: #ffd36a;
  --gold-deep: #a87a14;
  --rose-gold-light: #e7b9a8;
  --rose-gold: #d79a86;
  --violet: #a855f7;
  --cyan: #22d3ee;
  --crimson: #ff2e63;

  /* Glow presets */
  --glow-gold: 0 0 22px rgba(212,175,55,0.28), 0 0 60px rgba(212,175,55,0.10);
  --glow-violet: 0 0 22px rgba(168,85,247,0.32), 0 0 60px rgba(168,85,247,0.12);

  /* Surface tokens */
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(212,175,55,0.22);
  --glass: rgba(255,255,255,0.035);
  --glass-2: rgba(255,255,255,0.06);
}

/* ============================================================
   GLOBAL: Nebula background (replaces flat color from global)
   ============================================================ */

html, body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 20, 60, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 30%, rgba(168, 85, 247, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(60, 15, 45, 0.18) 0%, transparent 50%),
    radial-gradient(900px 700px at 50% 90%, rgba(212,175,55,0.05), transparent 60%),
    linear-gradient(180deg, #060608 0%, #0a070a 50%, #060608 100%) !important;
  color: rgba(255,255,255,0.86);
  height: 100%;
}

body {
  position: relative;
}

/* ============================================================
   FILM GRAIN (premium texture)
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.12;
  z-index: 9999;
}

/* ============================================================
   NAVBAR: gold accent, subtle glow
   ============================================================ */

#navbar {
  border-bottom: 1px solid rgba(212,175,55,0.12);
  background: rgba(6,6,7,0.55);
  backdrop-filter: blur(10px);
}
#navbar.scrolled {
  background: rgba(6,6,7,0.78);
  border-bottom-color: rgba(212,175,55,0.18);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.nav-links a {
  color: rgba(255,255,255,0.72);
}
.nav-links a:hover {
  color: rgba(255,255,255,0.92);
  text-shadow: var(--glow-gold);
}

/* Logo glow */
.logo-container img {
  filter: drop-shadow(0 0 18px rgba(212,175,55,0.22));
}

/* ============================================================
   HERO: text and background
   ============================================================ */

.hero-bg {
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(212,175,55,0.08), transparent 60%),
    radial-gradient(800px 600px at 25% 30%, rgba(168,85,247,0.10), transparent 60%),
    radial-gradient(900px 700px at 80% 35%, rgba(34,211,238,0.06), transparent 60%);
  filter: saturate(1.12) contrast(1.05);
}

.hero-tagline {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 26px rgba(255,255,255,0.06);
}
.hero-description {
  color: rgba(255,255,255,0.66);
}

/* ============================================================
   BUTTONS: White Diamond style
   ============================================================ */

.btn-protocol {
  border: 1px solid rgba(255,255,255,0.30);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 0 15px rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  transition: all 0.4s ease;
}
.btn-protocol:hover {
  border-color: rgba(255,255,255,0.90);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.90));
  box-shadow:
    0 0 30px rgba(255,255,255,0.50),
    0 0 60px rgba(255,255,255,0.30),
    0 0 100px rgba(200,220,255,0.20),
    inset 0 0 20px rgba(255,255,255,0.10);
  color: #0a0a0a;
  transform: translateY(-2px);
  text-shadow: none;
}
.btn-protocol:hover *,
.btn-protocol:hover .btn-protocol__text,
.btn-protocol:hover .btn-protocol__arrow {
  color: #0a0a0a;
  text-shadow: none;
}

.btn-vip {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  transition: all 0.4s ease;
}
.btn-vip:hover {
  border-color: rgba(255,255,255,0.90);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.90));
  box-shadow:
    0 0 30px rgba(255,255,255,0.50),
    0 0 60px rgba(255,255,255,0.30),
    0 0 100px rgba(200,220,255,0.20),
    inset 0 0 20px rgba(255,255,255,0.10);
  color: #0a0a0a;
  text-shadow: none;
}
.btn-vip:hover *,
.btn-vip:hover .btn-vip__name,
.btn-vip:hover .btn-vip__price {
  color: #0a0a0a;
  text-shadow: none;
}

.vip-cta-btn {
  border: 1px solid rgba(255,255,255,0.30);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 0 15px rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  transition: all 0.4s ease;
}
.vip-cta-btn:hover {
  border-color: rgba(255,255,255,0.90);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,248,255,0.90));
  box-shadow:
    0 0 30px rgba(255,255,255,0.50),
    0 0 60px rgba(255,255,255,0.30),
    0 0 100px rgba(200,220,255,0.20),
    inset 0 0 20px rgba(255,255,255,0.10);
  color: #0a0a0a;
  text-shadow: none;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */

.section-title {
  color: rgba(255,255,255,0.92);
}
.section-subtitle {
  color: rgba(255,255,255,0.60);
}

/* ============================================================
   VIDEO CARDS: White Diamond style
   ============================================================ */

.video-card {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 18px 55px rgba(0,0,0,0.52);
}
.video-card:hover {
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

/* Filter buttons */
.filter-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
}
.filter-btn:hover {
  border-color: rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.90);
}
.filter-btn.active {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 0 15px rgba(255,255,255,0.10);
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: rgba(231,185,168,0.92);
}
a:hover {
  color: rgba(231,185,168,1);
  text-shadow: 0 0 18px rgba(231,185,168,0.12);
}

/* ============================================================
   GATES: Visual effects (video filter, glow border, 3D hover)
   ============================================================ */

/* Video in gates: dimmed at rest, bright on hover */
.world-gate video,
.world-gate__media video {
  filter: saturate(50%) brightness(70%) contrast(112%);
  transition: filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.world-gate:hover video,
.world-gate:hover .world-gate__media video {
  filter: saturate(110%) brightness(105%) contrast(108%);
}

/* Gate title/cta: white diamond on hover */
.world-gate__title {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 25px rgba(255,255,255,0.20);
}

.world-gate__cta {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}
.world-gate:hover .world-gate__cta {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.8);
  color: #0a0a0a;
  box-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* Veil transition */
.world-gate__veil {
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.world-gate:hover .world-gate__veil {
  opacity: 0.4;
}

/* Inner glow on hover */
.world-gate__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255,240,220,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.world-gate:hover .world-gate__media::after {
  opacity: 1;
}

/* Hover title/desc brightness */
.world-gate:hover .world-gate__title {
  text-shadow: 0 0 30px rgba(255,255,255,0.35);
}
.world-gate:hover .world-gate__desc {
  color: rgba(255,255,255,0.90);
}

/* 3D perspective + transforms */
.world-gates--hero {
  perspective: 1200px;
}

.world-gate {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s ease;
  transform-style: preserve-3d;
  border: none;
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* Clip content inside border-radius */
.world-gate__media,
.world-gate__veil,
.world-gate__content {
  border-radius: 16px;
  overflow: hidden;
}

/* Glowing border - gradient behind gate */
.world-gate::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10),
    rgba(212,175,55,0.06),
    rgba(200,170,255,0.06),
    rgba(255,255,255,0.10)
  );
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  filter: blur(0px);
}

/* Hover - border lights up */
.world-gate:hover::before {
  inset: -3px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.70) 0%,
    rgba(212,175,55,0.50) 25%,
    rgba(200,170,255,0.45) 50%,
    rgba(212,175,55,0.50) 75%,
    rgba(255,255,255,0.70) 100%
  );
  filter: blur(4px);
  opacity: 1;
  background-size: 200% 200%;
  animation: borderShimmer 3s ease-in-out infinite;
}

@keyframes borderShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gate hover: 3D lift */
.world-gate:hover,
.world-gate[data-gate="muse"]:hover,
.world-gate[data-gate="mistress"]:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.65),
    0 0 30px rgba(255,255,255,0.15),
    0 0 60px rgba(200,210,255,0.10);
}

/* ============================================================
   ICE DIAMOND UNDERGLOW (glow beneath gates)
   ============================================================ */

.world-gate::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: min(520px, 90%);
  height: 140px;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0.55) 0%,
      rgba(235,245,255,0.32) 22%,
      rgba(205,230,255,0.18) 45%,
      rgba(170,210,255,0.10) 62%,
      rgba(120,180,255,0.00) 78%
    );
  filter: blur(18px) saturate(1.05) contrast(1.02);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
  animation: iceBreath 4.2s ease-in-out infinite;
}

@keyframes iceBreath {
  0%, 100% { transform: translateX(-50%) scale(1.00); opacity: 0.78; }
  50%      { transform: translateX(-50%) scale(1.06); opacity: 0.92; }
}

/* ============================================================
   DIAMOND OVERLAY (prestige layer over entire site)
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.22'/%3E%3C/svg%3E") center/320px 320px repeat,
    radial-gradient(1200px 900px at 50% 35%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 58%),
    linear-gradient(45deg,
      rgba(255,255,255,0.018) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.018) 50%,
      rgba(255,255,255,0.018) 75%, transparent 75%,
      transparent 100%
    );
  background-size: 320px 320px, 100% 100%, 100% 100%, 6px 6px;
  background-blend-mode: soft-light, normal, screen, overlay;
  opacity: 0.12;
}

/* Logo ABOVE overlay */
.logo-container,
.hero-logo-large,
.hero-logo-large img {
  position: relative;
  z-index: 10000;
}
.logo-container img,
.hero-logo-large img {
  filter: brightness(1.15) saturate(1.3) contrast(1.05);
}

/* ============================================================
   START HERE + FOOTER: Nebula backgrounds
   ============================================================ */

.start-about-section {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 20, 60, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(60, 15, 45, 0.20) 0%, transparent 50%),
    linear-gradient(180deg, #060608 0%, #0a070a 50%, #060608 100%) !important;
}

.start-about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(120, 40, 80, 0.10) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.start-about-section > * {
  position: relative;
  z-index: 1;
}

footer,
.footer,
.site-footer {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(90, 20, 60, 0.20) 0%, transparent 50%),
    linear-gradient(180deg, #0a070a 0%, #050507 100%) !important;
}