@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Inter', sans-serif;
  }
  h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Space Grotesk', sans-serif;
  }
}

@layer components {
  .bento-card {
    @apply bg-surface-dark/40 backdrop-blur-md border border-white/10 rounded-2xl p-8 flex flex-col transition-all duration-300 hover:border-accent/40 hover:bg-surface-dark/60 hover:-translate-y-1 hover:shadow-[0_0_20px_rgba(0,229,255,0.2)];
    animation: border-pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .glass-card {
    @apply bg-surface-dark/40 backdrop-blur-md border border-white/5 rounded-3xl p-8 transition-all duration-300 hover:border-accent/30 hover:shadow-[0_0_15px_rgba(0,229,255,0.15)];
    animation: border-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes border-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 rgba(0, 229, 255, 0); }
    50% { border-color: rgba(0, 229, 255, 0.5); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
  }

  .tech-border {
    position: relative;
    overflow: hidden;
  }

  .tech-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: tech-shine 3s infinite;
  }

  @keyframes tech-shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
  }

  .glass-icon {
    @apply w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center mb-6 border border-primary/30 text-accent;
  }

  .active-link {
    @apply text-accent relative after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-accent;
  }

  .input-glow:focus {
    @apply outline-none border-accent ring-1 ring-accent/30;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
  }

  .topo-bg {
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 40px 40px;
  }

  .arch-placeholder {
    background: linear-gradient(135deg, rgba(26, 35, 58, 0.5) 0%, rgba(11, 15, 25, 0.8) 100%);
    position: relative;
    overflow: hidden;
  }

  .arch-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
  }
}