TeamBy-Landing/app/globals.css

@import "tailwindcss";

:root {
  --background: #03070D;
  --foreground: #ffffff;
  --font-inter: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-poppins: var(--font-poppins), "Poppins", sans-serif;
  background-color: #03070D;
}


@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
}

* {
  box-sizing: border-box;
}

html {
  background-color: #03070D !important;
  color-scheme: dark;
}

body {
  background-color: #03070D !important;
  color: #ffffff;
  font-family: var(--font-inter);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Custom Gradients & Glass Styles from Figma Spec */
.btn-primary-gradient {
  position: relative;
  background: linear-gradient(180deg, #0029b2 0%, #0038bf 10%, #0e4acc 20%, #255cd9 30%, #3d6fe5 40%, #487eff 50%, #4b80ff 65%, #5d8bff 100%, #adbfff 100%);
  isolation: isolate;
  border-radius: 8px;
}

.btn-primary-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(74deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50.46%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.nav-bar-glass {
  position: relative;
  background: rgba(8, 15, 26, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 48px;
  isolation: isolate;
}

.nav-bar-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(50deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.03) 10%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.tab-active-gradient {
  position: relative;
  background: linear-gradient(180deg, #0029b2 0%, #0038bf 10%, #0e4acc 20%, #255cd9 30%, #3d6fe5 40%, #487eff 62%, #4b80ff 75%, #5d8bff 100%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  isolation: isolate;
}

.tab-active-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 43.27%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.tab-active-text {
  background: linear-gradient(180deg, #ffffff 0%, #d0deff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* AI Copilot Orb Real Vector Animations - Continuous & Fabric Motion */

/* 1. Orbiting Ring: Uninterrupted continuous 360-degree orbital rotation (No stops, constant velocity) */
@keyframes orbitRingMotion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* 2. Contour Rings: Continuous silky spin around the orb */
@keyframes contourRingsMotion {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 3. Color & Gradient Flow: Continuous fluid color transition through Figma states (Blue -> Purple -> Cyan -> Blue) */
@keyframes orbColorCycleMotion {
  0% {
    filter: hue-rotate(0deg) saturate(100%) brightness(1);
  }
  25% {
    filter: hue-rotate(42deg) saturate(125%) brightness(1.06);
  }
  50% {
    filter: hue-rotate(-20deg) saturate(115%) brightness(1.04);
  }
  75% {
    filter: hue-rotate(20deg) saturate(110%) brightness(1.02);
  }
  100% {
    filter: hue-rotate(0deg) saturate(100%) brightness(1);
  }
}

/* 4. Refracting Starlight: Unbroken continuous circular orbit inside star */
@keyframes starSpotlightMotion {
  0% {
    transform: rotate(0deg) translate(38px, 0) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(38px, 0) rotate(-360deg);
  }
}

/* 5. Radiating Energy Waves: Smooth harmonic wave breathing */
@keyframes energyWavesMotion {
  0%, 100% {
    transform: translateY(0px) scaleY(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-16px) scaleY(1.05);
    opacity: 1;
  }
}

/* 6. Core Sphere subtle breath */
@keyframes spherePulseMotion {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* 7. Liquid Blob continuous drift */
@keyframes blobDriftMotion {
  0% {
    transform: rotate(0deg) translate(22px, 0) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translate(22px, 0) rotate(-360deg);
  }
}

/* 8. Ambient Backdrop Glow smooth pulse */
@keyframes ambientGlowMotion {
  0%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.025);
  }
}


/* Animation Utility Classes - Constant velocity & uninterrupted flow */
.animate-orbit-ring {
  animation: orbitRingMotion 12s linear infinite;
  will-change: transform;
}

.animate-contour-rings {
  animation: contourRingsMotion 18s linear infinite;
  will-change: transform;
}

.animate-orb-color-cycle {
  animation: orbColorCycleMotion 12s linear infinite;
  will-change: filter;
}

.animate-star-spotlight {
  animation: starSpotlightMotion 8s linear infinite;
  transform-origin: 636.929px 420.938px;
  will-change: transform;
}

.animate-energy-waves {
  animation: energyWavesMotion 6s ease-in-out infinite;
  will-change: transform, opacity;
}

.animate-sphere-pulse {
  animation: spherePulseMotion 6s ease-in-out infinite;
  will-change: transform;
}

.animate-blob-drift {
  animation: blobDriftMotion 10s linear infinite;
  transform-origin: 637.492px 421.5px;
  will-change: transform;
}

.animate-ambient-glow {
  animation: ambientGlowMotion 6s ease-in-out infinite;
  transform-origin: 637.492px 421.5px;
  will-change: transform, opacity;
}