@import "tailwindcss";

/* Enable dark mode */
@variant dark (.dark &);

:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #06b6d4;
  --bg-color: rgb(255 255 255);
  --text-color: rgb(17 24 39);
  --border-color: rgb(229 231 235);
  --card-bg: rgb(255 255 255);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.dark {
  --bg-color: rgb(15 23 42);
  --text-color: rgb(248 250 252);
  --border-color: rgb(51 65 85);
  --card-bg: rgb(30 41 59);
  color-scheme: dark;
}

/* Modern typography and spacing */
* {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent transition on page load */
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  transition: none !important;
  animation: none !important;
}

/* GPU acceleration for heavy elements */
.bg-gradient-to-r,
.bg-gradient-to-br,
[class*="bg-gradient"],
[class*="backdrop-blur"],
[class*="shadow-"],
[data-framer-name] {
  transform: translateZ(0);
  will-change: background;
  backface-visibility: hidden;
}

/* Optimize motion elements */
[class*="motion"] {
  transform: translateZ(0);
  will-change: transform;
  contain: layout style paint;
}

/* Exclude animations from theme transitions */
.animate-pulse,
.animate-pulse *,
.animate-spin,
.animate-spin *,
.animate-bounce,
.animate-bounce *,
[class*="animate-"],
[class*="animate-"] *,
[data-framer-name],
[data-framer-name] * {
  transition: none !important;
}

/* Optimize particles and floating elements */
.particle,
[class*="absolute"][class*="rounded-full"] {
  transform: translateZ(0);
  will-change: transform, opacity;
  contain: strict;
}

/* Section-level containment for better performance */
section {
  contain: layout style;
}

/* Heavy backdrop elements containment */
[class*="backdrop-blur"] {
  contain: layout style paint;
  isolation: isolate;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  line-height: 1.6;
}

/* Modern scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(156 163 175);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(107 114 128);
}

.dark ::-webkit-scrollbar-thumb {
  background: rgb(75 85 99);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgb(107 114 128);
}

/* Custom animations */
@keyframes gradient-x {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

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

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  }
}

.animate-gradient-x {
  animation: gradient-x 4s ease infinite;
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out;
}

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

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.bg-size-200 {
  background-size: 200% 200%;
}

/* Modern glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom utilities */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern button styles */
.btn-primary {
  @apply bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
}

.btn-secondary {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 font-medium px-6 py-3 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700;
}

/* Modern card styles */
.card {
  @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-lg border border-gray-100 dark:border-gray-700 transition-all duration-300;
}

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

/* Modern input styles */
.input-modern {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300;
}

/* Focus styles */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
}

/* Selection styles */
::selection {
  background: rgba(59, 130, 246, 0.2);
  color: inherit;
}

.dark ::selection {
  background: rgba(59, 130, 246, 0.3);
}

/* Testimonials Carousel Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.testimonials-scroll {
  animation: scroll 30s linear infinite;
  width: max-content;
  display: flex;
}

.testimonials-scroll:hover {
  animation-play-state: paused;
}
