/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #f8fafc, #e0e7ff);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #ec4899);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f46e5, #db2777);
}

/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Neomorphism */
.neo {
  background: linear-gradient(145deg, #ffffff, #f0f4f8);
  box-shadow:
    20px 20px 60px #d1d9e6,
    -20px -20px 60px #ffffff;
}

.neo-inset {
  background: linear-gradient(145deg, #f0f4f8, #ffffff);
  box-shadow:
    inset 20px 20px 60px #d1d9e6,
    inset -20px -20px 60px #ffffff;
}

/* Animated gradient backgrounds */
.bg-gradient-animated {
  background: linear-gradient(
    -45deg,
    #6366f1,
    #8b5cf6,
    #ec4899,
    #f59e0b,
    #06b6d4
  );
  background-size: 400% 400%;
  animation: gradient-xy 15s ease infinite;
}

.bg-mesh-gradient {
  background:
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.2) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.2) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgba(6, 182, 212, 0.2) 0, transparent 50%);
}

/* Button hover effects */
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s;
}

.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px rgba(99, 102, 241, 0.3),
    0 0 60px rgba(236, 72, 153, 0.2);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-outline {
  background: white;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

/* Card hover effects */
.card-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.12),
    0 0 40px rgba(99, 102, 241, 0.1);
}

/* Floating elements */
.floating {
  animation: float 6s ease-in-out infinite;
}

.floating-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* Text gradient */
.text-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient-x 5s ease infinite;
}

.text-gradient-static {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Loading spinner */
.spinner {
  border: 3px solid rgba(99, 102, 241, 0.1);
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

/* Success checkmark animation */
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #10b981;
  animation:
    fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #10b981;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #10b981;
  }
}

/* Form states */
.form-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Intersection Observer animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Mesh gradient orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  top: -250px;
  right: -250px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  bottom: -200px;
  left: -200px;
  animation-delay: -10s;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -5s;
}

/* Typography classes */
.title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

.subtitle {
  font-family: "Inter", sans-serif;
  font-style: italic;
}

.body-text {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
}

/* Morphing blob */
.blob {
  animation: morph 8s ease-in-out infinite;
  will-change: border-radius;
}

/* 3D card effect */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d:hover {
  transform: rotateX(5deg) rotateY(-5deg);
}

/* Holographic effect */
.holographic {
  position: relative;
  overflow: hidden;
}

.holographic::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

/* Particle system */
.particle-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  filter: blur(1px);
}

/* Grid pattern overlay */
.grid-overlay {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}