body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.hero-pattern {
  background-color: #0f172a;
  background-image:
    radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(37, 99, 235, 0.1) 0px, transparent 50%);
}

.grid-pattern {
  background-size: 60px 60px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

:root {
  --ease-silky: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-premium: 2.4s;
}

.animate-on-scroll {
  opacity: 0;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

@keyframes maskUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.96) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-80px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(80px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-150%) skewX(-15deg); }
  50% { transform: translateX(150%) skewX(-15deg); }
  100% { transform: translateX(150%) skewX(-15deg); }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -20px); }
  66% { transform: translate(-10px, 15px); }
}

@keyframes floatDelayed {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-15px, 20px); }
  66% { transform: translate(15px, -10px); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 60s linear infinite;
}

.animate-spin-reverse-slow {
  animation: spin-slow 80s linear infinite reverse;
}

.animate-mask-up.is-visible { animation: maskUp var(--duration-premium) var(--ease-silky) forwards; }
.animate-fade-up.is-visible { animation: fadeUp var(--duration-premium) var(--ease-silky) forwards; }
.animate-scale-in.is-visible { animation: scaleIn var(--duration-premium) var(--ease-silky) forwards; }
.animate-slide-left.is-visible { animation: slideInLeft var(--duration-premium) var(--ease-silky) forwards; }
.animate-slide-right.is-visible { animation: slideInRight var(--duration-premium) var(--ease-silky) forwards; }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-float { animation: float 20s ease-in-out infinite; }
.animate-float-delayed { animation: floatDelayed 25s ease-in-out infinite; }
.reveal-text-container { display: block; }

.delay-100 { transition-delay: 0.1s; animation-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; animation-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; animation-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; animation-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; animation-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; animation-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; animation-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; animation-delay: 0.8s; }