@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

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

@layer base {
  :root {
    --primary: #38caf3;
    --primary-dark: #2bb3dc;
    --background: #f8fafc;
    --text: #1a1a1a;
  }

  body {
    @apply font-sans text-gray-900 overflow-x-hidden;
    font-family: 'Montserrat', sans-serif;
  }

  html {
    @apply antialiased;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }

  p {
    margin-bottom: 1rem;
  }

  img {
    @apply select-none;
    -webkit-user-drag: none;
  }
}

@layer components {
  .btn {
    @apply inline-block px-6 py-3 rounded-lg font-semibold transition-all duration-300 cursor-pointer relative overflow-hidden;
  }

  .btn-primary {
    @apply bg-gradient-to-r from-[#38caf3] to-[#2bb3dc] text-white shadow-lg hover:-translate-y-1;
  }

  .card {
    @apply bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl transition-all duration-300;
  }

  .card:hover {
    @apply -translate-y-2 shadow-2xl;
  }

  .container {
    @apply w-full max-w-7xl mx-auto px-4;
  }

  .grid-auto-fit {
    @apply grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
  }

  .feature-card {
    @apply flex items-start gap-6 bg-white/40 backdrop-blur-sm p-6 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-white/20;
  }

  .feature-icon {
    @apply w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 flex-shrink-0 shadow-sm;
  }

  .feature-title {
    @apply text-xl font-semibold text-gray-900 mb-3;
  }

  .feature-description {
    @apply text-gray-600 leading-relaxed;
  }

  .section-title {
    @apply text-3xl font-bold bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 bg-clip-text text-transparent mb-4;
  }

  .section-description {
    @apply text-lg text-gray-600 max-w-2xl mx-auto;
  }

  .animated-bg {
    @apply fixed inset-0 overflow-hidden pointer-events-none;
  }

  .animated-sphere {
    @apply absolute rounded-full opacity-50 animate-float;
    filter: blur(80px);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  }

  .sphere-1 {
    @apply w-[50%] h-[50%] -top-[25%] -left-[25%];
    animation: float 20s infinite ease-in-out;
  }

  .sphere-2 {
    @apply w-[40%] h-[40%] top-[60%] -right-[20%];
    animation: float 20s infinite ease-in-out;
    animation-delay: -5s;
  }

  .sphere-3 {
    @apply w-[45%] h-[45%] -bottom-[25%] left-[30%];
    animation: float 20s infinite ease-in-out;
    animation-delay: -10s;
  }

  .glass-overlay {
    @apply fixed inset-0 bg-white/10 backdrop-blur-lg pointer-events-none;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-[#38caf3] to-[#2bb3dc] bg-clip-text text-transparent;
  }

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

  .animate-fade-in {
    animation: fadeIn 0.5s ease-in;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 8s linear infinite;
  }

  .animate-pulse-soft {
    animation: pulse-soft 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-bounce-soft {
    animation: bounce-soft 3s infinite;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  25% { 
    transform: translate(2%, 2%) rotate(5deg); 
  }
  50% { 
    transform: translate(0, 4%) rotate(0deg); 
  }
  75% { 
    transform: translate(-2%, 2%) rotate(-5deg); 
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce-soft {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* RTL Support */
[dir="rtl"] .feature-card {
  @apply flex-row-reverse;
}

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .btn {
  margin-left: 0;
  margin-right: 1rem;
}

/* Glassmorphism */
.glass {
  @apply bg-white/70 backdrop-blur-xl border border-white/20;
}

/* Scrollbar */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary-200 rounded-full hover:bg-primary-300 transition-colors duration-200;
}

/* Touch Interactions */
@media (hover: none) {
  .feature-card:hover {
    transform: none;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  
  .card {
    padding: 1.5rem;
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}