claude-mnemonic/docs/src/style.css

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

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply font-sans text-slate-300;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-bold tracking-tight;
  }

  code, pre {
    @apply font-mono;
  }
}

@layer components {
  /* Animated gradient background */
  .bg-animated-gradient {
    background: linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.1) 0%,
      transparent 50%,
      rgba(245, 158, 11, 0.05) 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 8s ease-in-out infinite;
  }

  /* Floating particles */
  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(245, 158, 11, 0.4);
    border-radius: 50%;
    pointer-events: none;
  }

  /* Glass effect */
  .glass {
    @apply bg-slate-900/60 backdrop-blur-xl border border-slate-700/50;
  }

  /* Glow effect */
  .glow-amber {
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
  }

  /* Animated underline */
  .animated-underline {
    position: relative;
  }
  .animated-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width 0.3s ease;
  }
  .animated-underline:hover::after {
    width: 100%;
  }

  /* Animated border */
  .animated-border {
    position: relative;
    overflow: hidden;
  }
  .animated-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
    animation: borderSlide 3s linear infinite;
  }

  @keyframes borderSlide {
    0% { left: -100%; }
    100% { left: 100%; }
  }
}

@layer utilities {
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }
  .animation-delay-500 { animation-delay: 0.5s; }

  /* Text gradient */
  .text-gradient {
    @apply bg-gradient-to-r from-amber-400 to-amber-500 bg-clip-text text-transparent;
  }

  /* Opacity starting state for animations */
  .opacity-0-start {
    opacity: 0;
  }
}