/* [project]/openstack_cloud_platform/frontend/app/landing.css [app-client] (css) */
:root {
  --background: #050a15;
  --foreground: #e2e8f0;
}

* {
  scroll-behavior: smooth;
}

.landing-page {
  color: var(--foreground);
  background: var(--background);
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  background: #0a1020;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#3b82f6, #8b5cf6);
  border-radius: 3px;
}

.glass {
  -webkit-backdrop-filter: blur(12px);
  background: #ffffff05;
  border: 1px solid #ffffff0d;
}

.text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.glow-blue {
  box-shadow: 0 0 20px #3b82f64d, 0 0 60px #3b82f61a;
}

.glow-purple {
  box-shadow: 0 0 20px #8b5cf64d, 0 0 60px #8b5cf61a;
}

.glow-text {
  text-shadow: 0 0 30px #60a5fa80, 0 0 60px #60a5fa4d;
}

.bg-grid {
  background-image: linear-gradient(#3b82f608 1px, #0000 1px), linear-gradient(90deg, #3b82f608 1px, #0000 1px);
  background-size: 50px 50px;
}

.bg-radial {
  background: radial-gradient(at 50% 0, #3b82f626 0%, #0000 50%);
}

.bg-radial-purple {
  background: radial-gradient(at 80%, #8b5cf61a 0%, #0000 40%);
}

.card-hover {
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.card-hover:hover {
  border-color: #3b82f64d;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0000004d, 0 0 30px #3b82f61a;
}

.card-hover:hover .card-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px #3b82f666;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px #3b82f666, 0 0 60px #3b82f633;
  }

  50% {
    box-shadow: 0 0 30px #3b82f699, 0 0 80px #3b82f64d;
  }
}

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

  to {
    transform: rotate(360deg);
  }
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes counter-orbit {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-360deg);
  }
}

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

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

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

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

.animate-slide-in-left {
  animation: .8s ease-out forwards slide-in-left;
}

.animate-slide-in-right {
  animation: .8s ease-out forwards slide-in-right;
}

.animate-counter-orbit {
  animation: 20s linear infinite counter-orbit;
}

.stagger-1 {
  opacity: 0;
  animation-delay: .1s;
}

.stagger-2 {
  opacity: 0;
  animation-delay: .2s;
}

.stagger-3 {
  opacity: 0;
  animation-delay: .3s;
}

.stagger-4 {
  opacity: 0;
  animation-delay: .4s;
}

.stagger-5 {
  opacity: 0;
  animation-delay: .5s;
}

.stagger-6 {
  opacity: 0;
  animation-delay: .6s;
}

.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

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

.btn-glow:hover {
  box-shadow: 0 0 20px #3b82f680, 0 0 40px #3b82f64d;
}

.border-gradient {
  background: linear-gradient(var(--background), var(--background)) padding-box, linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
  border: 1px solid #0000;
  position: relative;
}

.hover-line {
  position: relative;
}

.hover-line:after {
  content: "";
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  width: 0;
  height: 2px;
  transition: width .3s;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.hover-line:hover:after {
  width: 100%;
}

/*# sourceMappingURL=openstack_cloud_platform_frontend_app_landing_934573a3.css.map*/