/* Futuristic Animations & Effects */

/* 1. Spotlight Hover Effect (requires JS to set --mouse-x, --mouse-y) */
.spotlight-card {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.spotlight-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(132, 75, 222, 0.1),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

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

/* 2. Blur Reveal Effect (No layout shift) */
.blur-reveal {
  animation: blur-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
}

@keyframes blur-in {
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* 3. Border Beam / Moving Gradient Border */
.border-beam {
  position: relative;
}

.border-beam::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(34, 204, 183, 0.6) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: border-beam-anim 4s linear infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes border-beam-anim {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* 4. Scanning Line (for mock interfaces) */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-teal), transparent);
  opacity: 0.5;
  animation: scan-vertical 3s linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes scan-vertical {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* 5. Button Shine */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.btn-shine:hover::before {
  left: 100%;
  transition: left 0.7s ease-in-out;
}