@import "tailwindcss";

@layer base {
  :root {
    --bg-dark: 15 23 42; /* slate-900 */
    --accent-glow: rgba(6, 182, 212, 0.4); /* cyan-500 */
    --futuristic-cyan: #06b6d4;
    --futuristic-pink: #ec4899;
    --futuristic-blue: #3b82f6;
    --font-outfit: 'Outfit', sans-serif;
    --font-inter: 'Inter', sans-serif;
  }
}

@layer utilities {
  .font-outfit {
    font-family: var(--font-outfit), sans-serif;
  }
  .font-inter {
    font-family: var(--font-inter), sans-serif;
  }

  .glass-panel {
    @apply bg-slate-900/40 backdrop-blur-xl border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)];
  }

  .holographic-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600;
  }

  /* Links futuristas */
  .futuristic-link {
    @apply relative overflow-hidden rounded-full px-5 py-2 font-medium tracking-wide border border-white/5 transition-all duration-300;
  }
  
  .futuristic-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
  }

  .futuristic-link:hover::before {
    transform: translateX(100%);
  }

  .futuristic-link:hover {
    @apply border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.3)] bg-cyan-500/10 text-cyan-300;
  }

  .futuristic-link.active {
    @apply border-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.5)] bg-cyan-500/20 text-white;
  }

  /* Hero effects */
  .mesh-bg {
    background-color: #020617;
    background-image: 
      radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
      radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
      radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
  }
}

/* Base keyframes para microanimaciones */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 20px 10px rgba(6, 182, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

.animate-glow {
  animation: pulseGlow 2s infinite;
}

/* Scrollbar futurista */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #06b6d4; /* Cyan */
  background: linear-gradient(180deg, #06b6d4 0%, #3b82f6 100%);
  border-radius: 10px;
  border: 2px solid #020617;
}
::-webkit-scrollbar-thumb:hover {
  background: #22d3ee;
}