@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@700&display=swap');

:root {
  --primary: #5E17EB;
  --primary-light: #8A4FFF;
  --primary-dark: #3D00B8;
  --secondary: #FF5F9E;
  --dark: #1A1A2E;
  --light: #F8F9FA;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--dark);
  scroll-behavior: smooth;
  line-height: 1.6;
}

h1, h2, h3, h4, .display {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.display {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
/* Custom purple theme for Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .vanta-bg {
        @apply absolute inset-0 bg-gradient-to-r from-purple-800 to-purple-600 opacity-90;
    }
}
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animate] {
  opacity: 0;
}

.animate-fadeIn {
  animation: fadeIn 1s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* Delay animations */
[data-animate-delay="100"] { animation-delay: 0.1s }
[data-animate-delay="200"] { animation-delay: 0.2s }
[data-animate-delay="300"] { animation-delay: 0.3s }
[data-animate-delay="400"] { animation-delay: 0.4s }

/* Custom utilities */
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.03);
}

.text-gradient {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}