/* Custom UI Enhancements */

/* Glassmorphism utility */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
}

/* Animations */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-up {
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-left {
    animation: slide-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-right {
    animation: slide-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Base state for scroll reveal */
[data-animate] {
    opacity: 0;
}

/* Mesh gradient background (animated) */
.mesh-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, var(--gradient-teal), transparent 50%),
              radial-gradient(circle at 70% 70%, var(--gradient-orange), transparent 50%);
  animation: meshMove 20s infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes meshMove {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Custom reactive cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,102,204,0.4);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out, background 0.3s ease;
  mix-blend-mode: difference;
  z-index: 9999;
}
.interactive:hover .custom-cursor {
  transform: translate(-50%, -50%) scale(2);
  background: rgba(0,102,204,0.8);
}

/* Dark mode refinements */
html.dark .glass-card {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255,255,255,0.1);
}

/* Utility for fade-up animation using Tailwind classes */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate="fade-up"].animated {
  opacity: 1;
  transform: translateY(0);
}