@import url("fonts.css");

:root {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}

body {
  color: #ffffff;
  background-color: #08030f;
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.font-serif {
  font-family: var(--font-serif) !important;
}

/* Glassmorphism custom components */
.liquid-glass {
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(155, 61, 214, 0.05);
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(155, 61, 214, 0.2), 0 4px 24px rgba(155, 61, 214, 0.08);
}

.liquid-glass::before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    rgba(155, 61, 214, 0.5), 
    rgba(155, 61, 214, 0.2) 20%, 
    rgba(155, 61, 214, 0) 40% 60%, 
    rgba(155, 61, 214, 0.2) 80%, 
    rgba(155, 61, 214, 0.5)
  );
  padding: 1.4px;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Scroll Entrance Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.active {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #08030f;
}
::-webkit-scrollbar-thumb {
  background: rgba(155, 61, 214, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 61, 214, 0.5);
}

/* Spline container override sizing */
spline-viewer {
  width: 100%;
  height: 100%;
}

/* Hero Scroll Down Mouse Wheel Animation */
@keyframes scrollWheel {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}
.animate-scroll-wheel {
  animation: scrollWheel 1.8s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite;
}