/* ===== TEXT ANIMATIONS ===== */

/* Typewriter effect for consulting text */
@keyframes typewriter {
  from { 
    width: 0; 
  }
  to { 
    width: 100%; 
  }
}

@keyframes blink-caret {
  from, to { 
    border-color: transparent; 
  }
  50% { 
    border-color: var(--color-blue); 
  }
}

.consulting-text {
  display: inline-block;
  overflow: hidden;
  border-right: 3px solid var(--color-blue);
  white-space: nowrap;
  animation: 
    typewriter 2s steps(40, end) 1s both,
    blink-caret 0.75s step-end infinite 1s;
}

/* Fade in animations for text elements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply animations to elements */
.hero-title .line:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-title .line:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

.hero-title .line:nth-child(3) {
  animation: fadeInUp 0.8s ease-out 1.8s both;
}

.hero-subtitle {
  animation: fadeInUp 0.8s ease-out 2.5s both;
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.loading-logo {
  animation: logoFloat 2s ease-in-out infinite;
}

/* Logo fade in animation */
@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.loading-logo .logo-image {
  animation: 
    logoFadeIn 1s ease-out 0.5s both,
    logoFloat 2s ease-in-out infinite 1.5s;
}

/* ===== ORBITAL ELEMENT ANIMATIONS ===== */
@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitCounter {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes spherePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}

@keyframes sphereGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

/* Apply orbital animations */
.outer-orbit {
  animation: orbitRotate 25s linear infinite;
}

.inner-orbit {
  animation: orbitCounter 20s linear infinite;
}

.center-sphere {
  animation: 
    spherePulse 4s ease-in-out infinite,
    sphereGlow 3s ease-in-out infinite;
}

/* Floating particles around orbits */
@keyframes particleFloat1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(240deg);
  }
}

@keyframes particleFloat2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-40px, -40px) rotate(180deg);
  }
}

/* ===== LOGO TRAVEL ANIMATION ===== */
.logo-travel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  transition: all 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  height: 300px;
}

/* Final position will be set via JavaScript for exact alignment */
.logo-travel.travel-to-navbar {
  /* Position calculated dynamically by JavaScript */
}

/* Hide original logos during travel */
.loading-screen.logo-traveling .loading-logo {
  opacity: 0;
}

.navbar.logo-traveling .logo {
  opacity: 0;
}
/* ===== NEXTSTEP INLINE LOGO ANIMATIONS ===== */
@keyframes nextStepPulse {
  0%, 100% {
    transform: scale(1) translateY(0px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.05) translateY(-3px);
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.4),
      0 4px 8px rgba(255, 255, 255, 0.2);
  }
}

@keyframes nextStepFloat {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1px);
  }
}

/* Inline NextStep logo styling */
.nextstep-logo-text {
  display: inline-block;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: #ffffff;
  animation: 
    nextStepPulse 2.5s ease-in-out infinite,
    nextStepFloat 3.5s ease-in-out infinite 0.5s;
  transform-origin: center;
  position: relative;
  z-index: 10;
  will-change: transform;
}

/* Hover effect for extra interactivity */
.nextstep-logo-text:hover {
  animation-duration: 1.8s, 2.2s;
  color: #f8f8f8;
}

/* ===== JOURNEY MAP ANIMATIONS ===== */
@keyframes stepReveal {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes numberPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(94, 156, 203, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(94, 156, 203, 0.5);
  }
}

@keyframes connectorGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 10px rgba(94, 156, 203, 0.3);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 0 20px rgba(94, 156, 203, 0.6);
  }
}

@keyframes pathDraw {
  0% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 100%
    );
  }
  100% {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--color-blue) 10%,
      var(--color-blue) 90%,
      transparent 100%
    );
  }
}

/* Enhanced Journey Animations */
@keyframes floatingOrb {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
}

@keyframes enhancedNumberPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 
      0 15px 35px rgba(94, 156, 203, 0.4),
      0 5px 15px rgba(0, 0, 0, 0.1);
  }
  25% {
    transform: scale(1.05) rotate(1deg);
  }
  50% {
    transform: scale(1.1) rotate(0deg);
    box-shadow: 
      0 20px 45px rgba(94, 156, 203, 0.6),
      0 10px 25px rgba(0, 0, 0, 0.15);
  }
  75% {
    transform: scale(1.05) rotate(-1deg);
  }
}

@keyframes numberGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Old highlight styles - keeping for any other uses */
.nextstep-highlight {
  display: inline-block;
  font-weight: 600;
  color: var(--color-blue);
  transition: all 0.3s ease;
  transform-origin: center;
}
}

@keyframes particleFloat3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(25px, 35px) rotate(90deg);
  }
  75% {
    transform: translate(-35px, -25px) rotate(270deg);
  }
}

/* Create floating particles */
.orbit-container::before,
.orbit-container::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-green-light);
  border-radius: 50%;
  opacity: 0.6;
}

.orbit-container::before {
  top: 20%;
  left: 20%;
  animation: particleFloat1 15s linear infinite;
}

.orbit-container::after {
  bottom: 20%;
  right: 20%;
  animation: particleFloat2 12s linear infinite;
}

/* ===== SCROLL-TRIGGERED ANIMATIONS ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

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

/* Staggered animations for stat items */
.stat-item:nth-child(1) {
  animation-delay: 0.1s;
}

.stat-item:nth-child(2) {
  animation-delay: 0.3s;
}

.stat-item:nth-child(3) {
  animation-delay: 0.5s;
}

/* Number counting animation */
@keyframes countUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.stat-number {
  animation: countUp 1s ease-out both;
}

.stat-number.animate {
  animation-delay: var(--animation-delay, 0s);
}

/* ===== HOVER ANIMATIONS ===== */

/* Premium button animations */
.cta-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}

.cta-button::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.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 1;
}

.cta-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: 0;
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover::after {
  width: 300px;
  height: 300px;
}

.cta-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(94, 156, 203, 0.2);
}

.cta-button:active {
  transform: translateY(-1px) scale(0.98);
}

/* Logo hover animation */
.logo:hover .logo-part-1,
.logo:hover .logo-part-2,
.logo:hover .logo-part-3 {
  animation: logoPartPulse 0.6s ease-in-out;
}

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

/* ===== MODAL ANIMATIONS ===== */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  animation: modalFadeIn 0.3s ease-out;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: modalSlideIn 0.4s ease-out;
}

/* ===== BACKGROUND ANIMATIONS ===== */

/* Advanced Floating Block Animations */
@keyframes floatDrift1 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateX(30px) translateY(-40px) rotate(5deg);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-20px) translateY(-80px) rotate(-3deg);
    opacity: 0.5;
  }
  75% {
    transform: translateX(-40px) translateY(-20px) rotate(8deg);
    opacity: 0.8;
  }
}

@keyframes floatDrift2 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  33% {
    transform: translateX(-60px) translateY(40px) rotate(-8deg) scale(1.1);
    opacity: 0.9;
  }
  66% {
    transform: translateX(20px) translateY(80px) rotate(12deg) scale(0.9);
    opacity: 0.4;
  }
}

@keyframes floatDrift3 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 0.8;
  }
  30% {
    transform: translateX(-50px) translateY(-30px) rotate(-10deg);
    opacity: 0.5;
  }
  70% {
    transform: translateX(40px) translateY(60px) rotate(15deg);
    opacity: 0.9;
  }
}

@keyframes floatDrift4 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateX(70px) translateY(-50px) scale(1.2);
    opacity: 0.4;
  }
  50% {
    transform: translateX(30px) translateY(-90px) scale(0.8);
    opacity: 0.9;
  }
  75% {
    transform: translateX(-30px) translateY(-30px) scale(1.1);
    opacity: 0.6;
  }
}

@keyframes floatDrift5 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
    opacity: 0.6;
  }
  40% {
    transform: translateX(-80px) translateY(20px) rotate(20deg);
    opacity: 0.8;
  }
  80% {
    transform: translateX(50px) translateY(-60px) rotate(-15deg);
    opacity: 0.4;
  }
}

@keyframes floatDrift6 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  35% {
    transform: translateX(40px) translateY(70px) rotate(-12deg) scale(1.3);
    opacity: 0.3;
  }
  65% {
    transform: translateX(-60px) translateY(30px) rotate(25deg) scale(0.7);
    opacity: 0.9;
  }
}

/* Glowing Wisp Animations */
@keyframes wispFloat1 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(94, 156, 203, 0.4);
  }
  33% {
    transform: translateX(150px) translateY(-80px);
    opacity: 1;
    box-shadow: 0 0 20px rgba(94, 156, 203, 0.8);
  }
  66% {
    transform: translateX(-100px) translateY(120px);
    opacity: 0.3;
    box-shadow: 0 0 15px rgba(94, 156, 203, 0.6);
  }
}

@keyframes wispFloat2 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-200px) translateY(-150px);
    opacity: 0.4;
  }
}

@keyframes wispFloat3 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.5;
  }
  25% {
    transform: translateX(80px) translateY(100px);
    opacity: 0.9;
  }
  75% {
    transform: translateX(-120px) translateY(-80px);
    opacity: 0.2;
  }
}

@keyframes wispFloat4 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.7;
  }
  40% {
    transform: translateX(-180px) translateY(60px);
    opacity: 0.3;
  }
  80% {
    transform: translateX(100px) translateY(-140px);
    opacity: 1;
  }
}

@keyframes wispFloat5 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.6;
  }
  30% {
    transform: translateX(220px) translateY(-40px);
    opacity: 0.9;
  }
  70% {
    transform: translateX(50px) translateY(180px);
    opacity: 0.2;
  }
}

@keyframes wispFloat6 {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-150px) translateY(-200px);
    opacity: 0.4;
  }
}

/* Elegant Star Animations */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
  }
}

@keyframes starDrift1 {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(80px) translateY(-60px); }
  50% { transform: translateX(-40px) translateY(-120px); }
  75% { transform: translateX(-100px) translateY(-40px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes starDrift2 {
  0% { transform: translateX(0px) translateY(0px); }
  33% { transform: translateX(-120px) translateY(80px); }
  66% { transform: translateX(60px) translateY(140px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes starDrift3 {
  0% { transform: translateX(0px) translateY(0px); }
  20% { transform: translateX(150px) translateY(-30px); }
  40% { transform: translateX(200px) translateY(-100px); }
  60% { transform: translateX(50px) translateY(-150px); }
  80% { transform: translateX(-80px) translateY(-80px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes starDrift4 {
  0% { transform: translateX(0px) translateY(0px); }
  30% { transform: translateX(-180px) translateY(120px); }
  70% { transform: translateX(100px) translateY(200px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes starDrift5 {
  0% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(90px) translateY(-180px); }
  75% { transform: translateX(-150px) translateY(-100px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes starDrift6 {
  0% { transform: translateX(0px) translateY(0px); }
  40% { transform: translateX(-200px) translateY(-60px); }
  100% { transform: translateX(0px) translateY(0px); }
}

/* Dynamic Object Animations */
@keyframes objectFloat1 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translateX(120px) translateY(-80px) rotate(90deg) scale(1.3);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-80px) translateY(-160px) rotate(180deg) scale(0.7);
    opacity: 0.9;
  }
  75% {
    transform: translateX(-200px) translateY(-40px) rotate(270deg) scale(1.1);
    opacity: 0.4;
  }
}

@keyframes objectFloat2 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.7;
  }
  33% {
    transform: translateX(-150px) translateY(100px) rotate(-120deg) scale(1.4);
    opacity: 0.9;
  }
  66% {
    transform: translateX(80px) translateY(180px) rotate(240deg) scale(0.6);
    opacity: 0.5;
  }
}

@keyframes objectFloat3 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  20% {
    transform: translateX(180px) translateY(-120px) rotate(72deg) scale(1.2);
    opacity: 0.6;
  }
  40% {
    transform: translateX(300px) translateY(-200px) rotate(144deg) scale(0.8);
    opacity: 0.9;
  }
  60% {
    transform: translateX(150px) translateY(-280px) rotate(216deg) scale(1.5);
    opacity: 0.3;
  }
  80% {
    transform: translateX(-100px) translateY(-150px) rotate(288deg) scale(0.9);
    opacity: 0.7;
  }
}

@keyframes objectFloat4 {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-250px) translateY(150px) rotate(180deg) scale(1.6);
    opacity: 0.9;
  }
}

/* Elegant Smoke Animations */
@keyframes elegantSmoke1 {
  0% {
    transform: translateX(-50px) translateY(0px) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translateX(100px) translateY(-30px) scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: translateX(250px) translateY(-60px) scale(1.5);
    opacity: 0;
  }
}

@keyframes elegantSmoke2 {
  0% {
    transform: translateX(50px) translateY(0px) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-80px) translateY(40px) scale(1.3);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-200px) translateY(80px) scale(1.1);
    opacity: 0;
  }
}

@keyframes elegantSmoke3 {
  0% {
    transform: translateX(0px) translateY(50px) scale(0.9);
    opacity: 0.3;
  }
  50% {
    transform: translateX(120px) translateY(-20px) scale(1.4);
    opacity: 0.5;
  }
  100% {
    transform: translateX(300px) translateY(-90px) scale(1.2);
    opacity: 0;
  }
}

@keyframes elegantSmoke4 {
  0% {
    transform: translateX(20px) translateY(0px) scale(1.1);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-100px) translateY(-50px) scale(1.3);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-280px) translateY(-120px) scale(0.8);
    opacity: 0;
  }
}

/* Elegant Background System - Inspired by Morningside.ai */
.floating-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
}

/* Elegant Twinkling Stars */
.floating-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  animation: starTwinkle 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.floating-star:nth-child(1) {
  top: 8%;
  left: 12%;
  animation: starTwinkle 2.5s ease-in-out infinite, starDrift1 40s linear infinite;
}

.floating-star:nth-child(2) {
  top: 25%;
  left: 88%;
  animation: starTwinkle 2s ease-in-out infinite -0.8s, starDrift2 35s linear infinite;
  transform: scale(1.5);
}

.floating-star:nth-child(3) {
  top: 45%;
  left: 15%;
  animation: starTwinkle 3.2s ease-in-out infinite -1.2s, starDrift3 45s linear infinite;
  transform: scale(0.8);
}

.floating-star:nth-child(4) {
  top: 65%;
  left: 82%;
  animation: starTwinkle 2.8s ease-in-out infinite -0.5s, starDrift4 38s linear infinite;
}

.floating-star:nth-child(5) {
  top: 85%;
  left: 25%;
  animation: starTwinkle 2.2s ease-in-out infinite -1.8s, starDrift5 42s linear infinite;
  transform: scale(1.2);
}

.floating-star:nth-child(6) {
  top: 18%;
  left: 65%;
  animation: starTwinkle 3.5s ease-in-out infinite -2.1s, starDrift6 39s linear infinite;
}

.floating-star:nth-child(7) {
  top: 38%;
  left: 45%;
  animation: starTwinkle 2.6s ease-in-out infinite -1s, starDrift1 36s linear infinite;
  transform: scale(0.9);
}

.floating-star:nth-child(8) {
  top: 72%;
  left: 58%;
  animation: starTwinkle 3.1s ease-in-out infinite -0.3s, starDrift2 41s linear infinite;
}


/* Subtle Atmospheric Smoke */
.floating-smoke {
  position: absolute;
  background: radial-gradient(ellipse at center, 
    rgba(160, 160, 160, 0.08) 0%, 
    rgba(120, 120, 120, 0.04) 40%, 
    rgba(94, 156, 203, 0.02) 80%, 
    transparent 100%);
  border-radius: 50px;
  filter: blur(4px);
  opacity: 0.4;
}

.floating-smoke:nth-child(9) {
  top: 12%;
  left: 25%;
  width: 150px;
  height: 80px;
  animation: elegantSmoke1 60s linear infinite;
}

.floating-smoke:nth-child(10) {
  top: 55%;
  left: 75%;
  width: 120px;
  height: 60px;
  animation: elegantSmoke2 65s linear infinite -20s;
}

.floating-smoke:nth-child(11) {
  top: 80%;
  left: 8%;
  width: 110px;
  height: 55px;
  animation: elegantSmoke3 58s linear infinite -35s;
}

.floating-smoke:nth-child(12) {
  top: 30%;
  left: 85%;
  width: 130px;
  height: 70px;
  animation: elegantSmoke4 62s linear infinite -15s;
}

/* ===== PREMIUM SECTION ANIMATIONS ===== */
@keyframes elegantSlideUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes subtleFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathingEffect {
  0%, 100% {
    transform: scale(1) translateY(0px);
  }
  50% {
    transform: scale(1.01) translateY(-2px);
  }
}

/* Section entrance animations */
.hero-section {
  animation: elegantSlideUp 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s both;
}

.mission-section {
  animation: subtleFadeIn 1s cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

.process-section {
  animation: subtleFadeIn 1s cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

.partnership-section {
  animation: breathingEffect 8s ease-in-out infinite;
}

/* Micro-interactions for sections */
section {
  transition: transform 0.3s ease;
}

section:hover {
  transform: translateY(-2px);
}

/* ===== PREMIUM TEXT EFFECTS ===== */

/* Sophisticated highlight animations */
.highlight-blue {
  position: relative;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.highlight-blue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue), rgba(94, 156, 203, 0.6));
  transition: width 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.highlight-blue:hover::after {
  width: 100%;
}

.highlight-blue.animate::after {
  width: 100%;
  transition: width 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.1s;
}

.highlight-blue:hover {
  transform: translateY(-1px);
  color: var(--color-blue);
}

/* AI text special effect */
.highlight-ai {
  position: relative;
  display: inline-block;
  color: var(--color-blue);
  transition: all 0.4s ease;
}

.highlight-ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  bottom: 0;
  background: rgba(94, 156, 203, 0.1);
  border-radius: 4px;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: -1;
}

.highlight-ai:hover::before {
  transform: scale(1);
}

.highlight-ai.animate::before {
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
}

.highlight-ai:hover {
  transform: translateY(-1px) scale(1.02);
}

/* Gradient text shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.highlight-green {
  background: linear-gradient(
    90deg,
    var(--color-green) 0%,
    var(--color-green-light) 50%,
    var(--color-green) 100%
  );
  background-size: 200px 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

/* Letter-by-letter reveal animation */
@keyframes letterReveal {
  from {
    opacity: 0;
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.process-title.animate .highlight-green {
  display: inline-block;
}

.process-title.animate .highlight-green::before {
  content: attr(data-text);
  display: inline-block;
  animation: letterReveal 0.5s ease-out both;
}

/* ===== FLOATING DECORATIVE ELEMENTS ===== */
.floating-element {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(94, 156, 203, 0.3);
  border-radius: 50%;
  pointer-events: none;
  animation: gentleFloat 8s ease-in-out infinite;
}

.floating-element:nth-child(odd) {
  animation-delay: -2s;
  animation-duration: 10s;
}

.floating-element:nth-child(even) {
  animation-delay: -4s;
  animation-duration: 12s;
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px) scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-10px) translateX(-5px) scale(0.8);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-30px) translateX(15px) scale(1.1);
    opacity: 0.5;
  }
}

/* Section decorative overlays */
.section-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.section-decoration::before,
.section-decoration::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(94, 156, 203, 0.1), transparent);
  animation: verticalFlow 15s ease-in-out infinite;
}

.section-decoration::before {
  left: 10%;
  animation-delay: 0s;
}

.section-decoration::after {
  right: 15%;
  animation-delay: -7s;
}

@keyframes verticalFlow {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100px));
    opacity: 0;
  }
}

/* ===== RESPONSIVE ANIMATION CONTROLS ===== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Disable animations on mobile for performance */
@media (max-width: 768px) {
  .outer-orbit,
  .inner-orbit {
    animation: none;
  }
  
  .center-sphere {
    animation: spherePulse 6s ease-in-out infinite;
  }
  
  .orbit-container::before,
  .orbit-container::after {
    display: none;
  }
}