@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-color: #f8fafc;
  /* Very light cool gray */
}

/* --- Anti-Gravity & Glassmorphism Core --- */

.glass-nav {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 20px 25px -5px rgba(147, 51, 234, 0.05);
  /* Subtle purple tint in shadow */
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Bouncy spring transition */
}

/* Floating Animation Keyframes */
@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0);
  }

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

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

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

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

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

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

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

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

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover Lift Effect - "Anti-Gravity" feel */
.hover-levitate {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;
}

.hover-levitate:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
    0 10px 10px -5px rgba(0, 0, 0, 0.02),
    0 30px 60px -12px rgba(147, 51, 234, 0.15);
  /* Deep indigo glow */
}

/* Background Gradients */
.bg-gradient-soft {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(165, 180, 252, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}

/* Scroll Animations */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

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

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

::-webkit-scrollbar-thumb {
  background: rgba(147, 51, 234, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 51, 234, 0.6);
}

/* Decorative Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.5;
}

/* --- Infinite Marquee & Client Section --- */

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  padding: 20px 0;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: scroll-horizontal 50s linear infinite;
  padding-left: 3rem;
  /* Initial offset */
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* Ensure this works with duplicated content */
}

/* Client Logo Glass Card */
.client-logo-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1rem;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: auto;
  min-height: 140px;

  /* Anti-gravity shadows */
  box-shadow: 0 8px 32px -4px rgba(31, 38, 135, 0.05),
    0 4px 8px -4px rgba(31, 38, 135, 0.02);

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  user-select: none;
}

.client-logo-card:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px -5px rgba(31, 38, 135, 0.1),
    0 0 20px rgba(147, 51, 234, 0.2);
  /* Glow */
  z-index: 10;
}

.client-logo-content {
  filter: grayscale(100%) opacity(0.6);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: #64748b;
}

.client-logo-card:hover .client-logo-content {
  filter: grayscale(0%) opacity(1);
  color: #1e293b;
}

/* --- Salesforce Module System (Orbit Animation) --- */

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

/* Pulsing effect for the hub */
.animate-ping-slow {
  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Container Rotation (Orbit) */
.animate-spin-slow-3d {
  /* Removed container rotation to prevent double-rotation affecting text orientation */
  /* animation: orbit-rotate 40s linear infinite; */
}

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

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

/* Individual Nodes Positioned on the ring */
.module-node {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Calculate position based on angle and radius */
  transform: translate(-50%, -50%) rotate(var(--angle))
    translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
  /* The second rotate counteracts the orbit rotation if we were rotating the container, 
       but here we are placing them statically if we didn't animate the container.
       However, we ARE animating the container rotation. 
       To keep cards upright while orbiting:
       We need the card itself to counter-rotate against the container's rotation.
    */
}

/* 
   Correction: The previous logic is for static placement in a circle.
   If the container .animate-spin-slow-3d is rotating, the nodes will rotate with it.
   To keep the text upright, the node (or an inner wrapper) must rotate in reverse.
   
   Better approach for smooth orbit with upright text:
   1. The .module-node is fixed relative to the container.
   2. The container rotates.
   3. The .module-card rotates in reverse of the container.
*/

.module-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: rotate(var(--angle)) translate(var(--radius));
}

.module-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 12px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  /* Removed conflicting animation. The parent .module-node handles the orbit and upright rotation. */
}

/* Let's Try a simpler approach:
   No container rotation. 
   Each node has its OWN orbit animation.
*/
.animate-spin-slow-3d {
  animation: none;
  /* Disable container rotation */
}

.module-node {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Start at center */
  /* Animation moves them out and rotates */
  animation: orbit-sun 20s linear infinite;
  animation-delay: var(--delay);
}

@keyframes orbit-sun {
  0% {
    transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
  }
}

/* 
    The above keyframe moves the element in a circle (rotate + translateX) 
    AND counter-rotates the element itself (final rotate) to keep it upright.
*/

.module-card:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 25px rgba(147, 51, 234, 0.2);
  z-index: 50;
  cursor: pointer;
}