/* ===== SPOTLIGHT CARD EFFECT ===== */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(135,84,194,0.08), transparent 40%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

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

/* ===== BORDER BEAM ===== */
.border-beam {
  position: relative;
  overflow: hidden;
}

.border-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 60%, var(--accent) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.border-beam:hover::after {
  opacity: 1;
  animation: beam-spin 3s linear infinite;
}

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ===== TEXT SCRAMBLE ===== */
.scramble-text {
  display: inline-block;
  font-family: inherit;
}

/* ===== ANIMATED MESH GRADIENT BG ===== */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.mesh-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  animation: blob-float 12s ease-in-out infinite;
}

.mesh-bg .blob:nth-child(1) {
  width: 500px; height: 500px;
  background: #8754c2;
  top: -10%; left: -5%;
  animation-delay: 0s;
}

.mesh-bg .blob:nth-child(2) {
  width: 400px; height: 400px;
  background: #9554e2;
  bottom: 10%; right: -5%;
  animation-delay: -4s;
  animation-duration: 15s;
}

.mesh-bg .blob:nth-child(3) {
  width: 350px; height: 350px;
  background: #ff7ed4;
  top: 50%; left: 40%;
  animation-delay: -8s;
  animation-duration: 18s;
  opacity: 0.06;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.05); }
  50% { transform: translate(-20px, 40px) scale(0.95); }
  75% { transform: translate(30px, 20px) scale(1.03); }
}

/* ===== MAGNETIC BUTTON ===== */
.magnetic-btn {
  transition: transform 0.2s ease-out;
}

/* ===== TEXT GRADIENT SHIMMER ===== */
.shimmer-text {
  background: linear-gradient(90deg, var(--text) 0%, var(--accent) 50%, var(--text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s ease-in-out infinite;
}

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

/* ===== COUNTER ANIMATION ===== */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ===== TILT CARD ===== */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.15s ease-out;
}

/* ===== STAGGER CHILDREN ===== */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.3s; }

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== SMOOTH CURSOR GLOW (hero) ===== */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(135,84,194,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out;
  display: none;
}

body:hover .cursor-glow { display: block; }