/* ═══════════════════════════════════════════════════════════════════════════
   VEXNILX™ — Visual Effects Layer
   Glassmorphism · animated background · 3D cursor tracking · chrome borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Animated dark-modern background ─────────────────────────── */
/* Layered: deep gradient + slow-drifting orbs + dot grid */

.vex-bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0A0A0B;
}

.vex-bg-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(120,120,140,0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(245,200,66,0.04), transparent 65%),
    radial-gradient(ellipse 50% 40% at 0% 70%, rgba(80,150,255,0.05), transparent 65%);
}

/* Soft drifting orbs */
.vex-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.vex-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(180,180,200,0.18), transparent 70%);
  top: -200px; left: -100px;
  animation: vex-orb-drift-1 32s ease-in-out infinite;
}
.vex-orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245,200,66,0.10), transparent 70%);
  bottom: -250px; right: -150px;
  animation: vex-orb-drift-2 38s ease-in-out infinite;
}
.vex-orb-3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(120,140,255,0.12), transparent 70%);
  top: 40%; left: 60%;
  animation: vex-orb-drift-3 28s ease-in-out infinite;
}
@keyframes vex-orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(160px, 80px) scale(1.15); }
  66%      { transform: translate(-80px, 200px) scale(0.9); }
}
@keyframes vex-orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-200px, -100px) scale(1.2); }
}
@keyframes vex-orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-120px, 60px) scale(1.1); }
  50%      { transform: translate(80px, -80px) scale(0.95); }
  75%      { transform: translate(60px, 100px) scale(1.05); }
}

/* Subtle dot grid */
.vex-bg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 1200px 800px at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 1200px 800px at 50% 30%, #000 30%, transparent 80%);
}

/* Mouse-tracker spotlight (lusion-inspired ambient cursor light) */
.vex-cursor-glow {
  position: fixed;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.06) 0%, rgba(120,140,255,0.04) 30%, transparent 60%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity 0.4s ease;
  opacity: 0;
  filter: blur(40px);
  mix-blend-mode: screen;
  will-change: left, top;
}
.vex-cursor-glow.active { opacity: 1; }

/* Reduced-motion: kill all animation on the bg */
@media (prefers-reduced-motion: reduce) {
  .vex-orb { animation: none !important; }
  .vex-cursor-glow { display: none !important; }
}

/* Make sure body content sits above the bg.
   We CANNOT force position:relative on all body children — it breaks
   position:fixed elements like .popup-overlay, modals, and the cursor glow.
   Instead, keep the bg pinned at z-index 0 and let everything else
   flow normally. The .vex-bg-stage and .vex-cursor-glow have explicit
   low z-indexes so content with no z-index naturally renders above. */

/* ─── Glassmorphism cards ─────────────────────────────────────── */
/* The .glass class adds frosted-glass treatment + chrome glow on hover */

.glass {
  position: relative;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  isolation: isolate;
  transform: translateZ(0); /* perspective base */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Top highlight — the glass "lit edge" */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0) 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* Hover spotlight that follows cursor — set via JS via --mx, --my */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.03) 30%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.glass:hover {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 60px rgba(200,210,230,0.08);
  transform: translateY(-2px) translateZ(0);
}
.glass:hover::before {
  opacity: 1;
  background: linear-gradient(135deg,
    rgba(220,225,240,0.45) 0%,    /* chrome silver */
    rgba(180,190,210,0.20) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(180,190,210,0.20) 75%,
    rgba(220,225,240,0.45) 100%);
  background-size: 200% 200%;
  animation: glass-chrome-shimmer 3s ease-in-out infinite;
}
.glass:hover::after { opacity: 1; }

@keyframes glass-chrome-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* Gold variant of glass — Best Value cards */
.glass.gold {
  background: linear-gradient(180deg,
    rgba(245,200,66,0.07),
    rgba(245,200,66,0.02) 60%,
    rgba(255,255,255,0.02)) !important;
  border-color: rgba(245,200,66,0.30) !important;
}
.glass.gold::before {
  background: linear-gradient(135deg,
    rgba(245,200,66,0.45) 0%,
    rgba(245,200,66,0.10) 35%,
    transparent 70%);
}
.glass.gold:hover {
  border-color: rgba(245,200,66,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(245,200,66,0.18),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 60px rgba(245,200,66,0.18);
}
.glass.gold:hover::before {
  background: linear-gradient(135deg,
    #f5c842 0%,
    rgba(245,200,66,0.4) 25%,
    rgba(255,235,180,0.6) 50%,
    rgba(245,200,66,0.4) 75%,
    #f5c842 100%);
  background-size: 200% 200%;
}

/* ─── 3D tilt — applied via JS to elements with .tilt ────────── */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.tilt-inner {
  transform-style: preserve-3d;
  transform: translateZ(0);
}
.tilt:hover .tilt-lift {
  transform: translateZ(20px);
}
.tilt-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Disable tilt on coarse pointers */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .tilt-lift { transform: none !important; }
  .glass::after { display: none; }
}

/* ─── Clean Dark Feature Card Style (site-wide) ──────────────
   Inspired by the reference: dark cards with subtle radial illustration
   areas in the upper region + crisp typography below. Applied via .glass
   and the card-illust illustration zone.                                  */

.glass {
  /* Re-base: deeper background, more atmospheric */
  background:
    linear-gradient(180deg,
      rgba(20,20,22,0.72) 0%,
      rgba(15,15,17,0.85) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.glass:hover {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 12px 40px rgba(0,0,0,0.5),
    0 0 80px rgba(200,210,230,0.04);
}

/* Optional illustration zone — put as first child of a glass card */
.card-illust {
  position: relative;
  height: 140px;
  margin: -1px -1px 18px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.01) 50%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(15,15,17,0.6),
      rgba(20,20,22,0.4));
}
.card-illust::before {
  /* Concentric rings illustration default */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 30%,
      rgba(255,255,255,0.04) 30.5%,
      rgba(255,255,255,0.04) 31%,
      transparent 31.5%,
      transparent 50%,
      rgba(255,255,255,0.03) 50.5%,
      rgba(255,255,255,0.03) 51%,
      transparent 51.5%,
      transparent 70%,
      rgba(255,255,255,0.02) 70.5%,
      rgba(255,255,255,0.02) 71%,
      transparent 71.5%);
  opacity: 0.7;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.glass:hover .card-illust::before {
  transform: translate(-50%, -50%) scale(1.05) rotate(15deg);
  opacity: 1;
}
.card-illust::after {
  /* Top-left highlight orb */
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}

/* Variant: dot-pattern illustration */
.card-illust.dots::before {
  background:
    radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  width: 100%; height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0; left: 0;
  transform: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}

/* Variant: connection-line illustration */
.card-illust.network::before {
  background:
    linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.06) 49.5%, rgba(255,255,255,0.06) 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(255,255,255,0.06) 49.5%, rgba(255,255,255,0.06) 50.5%, transparent 51%);
  background-size: 60px 60px;
  width: 100%; height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0; left: 0;
  transform: none;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
}

/* Card icon chip — for cards that have an icon glyph */
.card-icon-chip {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 1;
}
.glass:hover .card-icon-chip {
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}