/* ===== ENHANCED ANIMATIONS & MOBILE OPTIMIZATIONS ===== */

/* ===== ANIMATED GRADIENT TITLES ===== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-text {
  background: linear-gradient(
    45deg,
    #D05214 0%,
    #FF6B35 25%,
    #FF8C42 50%,
    #FF6B35 75%,
    #D05214 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
}

/* Apply to all section titles - optimized */
.section-title {
  background: linear-gradient(
    45deg,
    #D05214 0%,
    #FF6B35 50%,
    #D05214 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
  animation-play-state: running;
}

/* Pause gradient animations when off-screen */
.section-title.off-screen {
  animation-play-state: paused;
  will-change: auto;
}

/* Only apply will-change during active animation */
.section-title.animating {
  will-change: background-position;
}

/* ===== REALISTIC STARFIELD EFFECT ===== */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes twinkleSlow {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes twinkleFast {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Shooting star animation */
@keyframes shootingStar {
  0% {
    transform: translateX(-100px) translateY(100px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100vw) translateY(-100px);
    opacity: 0;
  }
}

/* Slow moving star (satellite) */
@keyframes slowMove {
  0% {
    transform: translateX(-50px) translateY(0px);
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(50px) translateY(-20px);
    opacity: 0.3;
  }
}

/* Drift animation for distant stars */
@keyframes drift {
  0%, 100% {
    transform: translateX(0px) translateY(0px);
  }
  25% {
    transform: translateX(2px) translateY(-1px);
  }
  50% {
    transform: translateX(1px) translateY(-2px);
  }
  75% {
    transform: translateX(-1px) translateY(-1px);
  }
}

.enhanced-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  content-visibility: auto;
  transform: translateZ(0);
  isolation: isolate;
}

.star {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Static stars (distant stars) - only twinkle - optimized timing */
.star:nth-child(1) { 
  top: 15%; left: 8%; width: 1px; height: 1px; 
  animation: twinkleSlow 6s ease-in-out infinite;
  animation-delay: 0s;
}
.star:nth-child(2) { 
  top: 25%; left: 85%; width: 2px; height: 2px; 
  animation: twinkle 7s ease-in-out infinite;
  animation-delay: 1.2s;
}
.star:nth-child(3) { 
  top: 45%; left: 15%; width: 1px; height: 1px; 
  animation: twinkleSlow 8s ease-in-out infinite;
  animation-delay: 2.4s;
}
.star:nth-child(4) { 
  top: 65%; left: 75%; width: 2px; height: 2px; 
  animation: twinkle 6.5s ease-in-out infinite;
  animation-delay: 3.6s;
}
.star:nth-child(5) { 
  top: 35%; left: 45%; width: 1px; height: 1px; 
  animation: twinkleFast 5s ease-in-out infinite;
  animation-delay: 1.8s;
}

/* Moving stars (satellites) - slower movement for performance */
.star:nth-child(6) { 
  top: 75%; left: 90%; width: 1px; height: 1px; 
  animation: slowMove 25s linear infinite, twinkleSlow 8s ease-in-out infinite;
  animation-delay: 2s, 0s;
}
.star:nth-child(7) { 
  top: 10%; left: 55%; width: 2px; height: 2px; 
  animation: slowMove 30s linear infinite, twinkle 9s ease-in-out infinite;
  animation-delay: 4s, 1.5s;
}
.star:nth-child(8) { 
  top: 55%; left: 25%; width: 1px; height: 1px; 
  animation: slowMove 28s linear infinite, twinkleSlow 7s ease-in-out infinite;
  animation-delay: 6s, 3s;
}

/* Drifting stars (atmospheric) - subtle movement */
.star:nth-child(9) { 
  top: 80%; left: 40%; width: 2px; height: 2px; 
  animation: drift 8s ease-in-out infinite, twinkle 2.8s ease-in-out infinite;
  animation-delay: 0.3s, 0.3s;
}
.star:nth-child(10) { 
  top: 20%; left: 70%; width: 1px; height: 1px; 
  animation: drift 12s ease-in-out infinite, twinkleFast 1.8s ease-in-out infinite;
  animation-delay: 2s, 1.5s;
}

/* More moving stars (satellites) */
.star:nth-child(11) { 
  top: 40%; left: 95%; width: 1px; height: 1px; 
  animation: slowMove 22s linear infinite, twinkleSlow 5.5s ease-in-out infinite;
  animation-delay: 7s, 2.2s;
}
.star:nth-child(12) { 
  top: 85%; left: 10%; width: 2px; height: 2px; 
  animation: drift 10s ease-in-out infinite, twinkle 3.2s ease-in-out infinite;
  animation-delay: 4s, 0.7s;
}
.star:nth-child(13) { 
  top: 5%; left: 30%; width: 1px; height: 1px; 
  animation: slowMove 16s linear infinite, twinkleSlow 4.8s ease-in-out infinite;
  animation-delay: 9s, 1.7s;
}
.star:nth-child(14) { 
  top: 60%; left: 60%; width: 1px; height: 1px; 
  animation: drift 14s ease-in-out infinite, twinkleFast 2.2s ease-in-out infinite;
  animation-delay: 6s, 0.9s;
}
.star:nth-child(15) { 
  top: 30%; left: 5%; width: 2px; height: 2px; 
  animation: slowMove 19s linear infinite, twinkle 3.8s ease-in-out infinite;
  animation-delay: 11s, 2.8s;
}

/* More moving stars (satellites) */
.star:nth-child(16) { 
  top: 12%; left: 35%; width: 1px; height: 1px; 
  animation: slowMove 25s linear infinite, twinkleSlow 6s ease-in-out infinite;
  animation-delay: 13s, 3.5s;
}
.star:nth-child(17) { 
  top: 70%; left: 65%; width: 2px; height: 2px; 
  animation: slowMove 17s linear infinite, twinkle 4s ease-in-out infinite;
  animation-delay: 2s, 1.2s;
}
.star:nth-child(18) { 
  top: 50%; left: 80%; width: 1px; height: 1px; 
  animation: slowMove 21s linear infinite, twinkleSlow 5.2s ease-in-out infinite;
  animation-delay: 8s, 2.8s;
}
.star:nth-child(19) { 
  top: 25%; left: 15%; width: 2px; height: 2px; 
  animation: slowMove 23s linear infinite, twinkle 3.8s ease-in-out infinite;
  animation-delay: 15s, 0.5s;
}
.star:nth-child(20) { 
  top: 90%; left: 45%; width: 1px; height: 1px; 
  animation: slowMove 19s linear infinite, twinkleFast 2.8s ease-in-out infinite;
  animation-delay: 6s, 1.8s;
}

/* More drifting stars */
.star:nth-child(21) { 
  top: 18%; left: 50%; width: 2px; height: 2px; 
  animation: drift 11s ease-in-out infinite, twinkle 3.5s ease-in-out infinite;
  animation-delay: 3s, 2.1s;
}
.star:nth-child(22) { 
  top: 65%; left: 25%; width: 1px; height: 1px; 
  animation: drift 9s ease-in-out infinite, twinkleSlow 4.5s ease-in-out infinite;
  animation-delay: 7s, 0.8s;
}
.star:nth-child(23) { 
  top: 35%; left: 70%; width: 2px; height: 2px; 
  animation: drift 13s ease-in-out infinite, twinkleFast 2.2s ease-in-out infinite;
  animation-delay: 5s, 1.5s;
}
.star:nth-child(24) { 
  top: 80%; left: 85%; width: 1px; height: 1px; 
  animation: drift 7s ease-in-out infinite, twinkle 3.2s ease-in-out infinite;
  animation-delay: 1s, 2.5s;
}

/* More static stars */
.star:nth-child(25) { 
  top: 8%; left: 75%; width: 1px; height: 1px; 
  animation: twinkleSlow 5.8s ease-in-out infinite;
  animation-delay: 3.2s;
}
.star:nth-child(26) { 
  top: 42%; left: 5%; width: 2px; height: 2px; 
  animation: twinkle 4.2s ease-in-out infinite;
  animation-delay: 1.8s;
}
.star:nth-child(27) { 
  top: 88%; left: 30%; width: 1px; height: 1px; 
  animation: twinkleSlow 6.2s ease-in-out infinite;
  animation-delay: 4.5s;
}
.star:nth-child(28) { 
  top: 55%; left: 95%; width: 2px; height: 2px; 
  animation: twinkleFast 2.8s ease-in-out infinite;
  animation-delay: 0.3s;
}
.star:nth-child(29) { 
  top: 22%; left: 40%; width: 1px; height: 1px; 
  animation: twinkleSlow 5.5s ease-in-out infinite;
  animation-delay: 2.7s;
}
.star:nth-child(30) { 
  top: 75%; left: 15%; width: 2px; height: 2px; 
  animation: twinkle 3.8s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Shooting stars (appears occasionally) */
.star:nth-child(31) { 
  top: 20%; left: 0%; width: 2px; height: 1px; 
  background: linear-gradient(45deg, rgba(255,255,255,0.8), transparent);
  border-radius: 0;
  animation: shootingStar 3s ease-out infinite;
  animation-delay: 8s;
}
.star:nth-child(32) { 
  top: 60%; left: 0%; width: 1px; height: 1px; 
  background: linear-gradient(45deg, rgba(255,255,255,0.6), transparent);
  border-radius: 0;
  animation: shootingStar 2.5s ease-out infinite;
  animation-delay: 15s;
}
.star:nth-child(33) { 
  top: 40%; left: 0%; width: 2px; height: 1px; 
  background: linear-gradient(45deg, rgba(255,255,255,0.7), transparent);
  border-radius: 0;
  animation: shootingStar 2.8s ease-out infinite;
  animation-delay: 22s;
}
.star:nth-child(34) { 
  top: 80%; left: 0%; width: 1px; height: 1px; 
  background: linear-gradient(45deg, rgba(255,255,255,0.5), transparent);
  border-radius: 0;
  animation: shootingStar 3.2s ease-out infinite;
  animation-delay: 28s;
}

/* Larger stars for more impact */
.star.large {
  width: 3px;
  height: 3px;
  background: rgba(208, 82, 20, 0.6);
}

.star.medium {
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
}

.star.small {
  width: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

/* ===== VALIDATION PHONE OPTIMIZATION ===== */
.validation-phone-container {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  perspective: 1000px;
}

.validation-phone {
  position: relative;
  width: 200px;
  height: 400px;
  margin: 0 auto;
  background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
  border-radius: 25px;
  padding: 20px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.validation-phone:hover {
  transform: rotateY(5deg) rotateX(5deg);
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-radius: 15px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.validation-flow {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  justify-content: center;
}

.flow-step {
  background: rgba(208, 82, 20, 0.1);
  border: 1px solid rgba(208, 82, 20, 0.3);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.flow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(208, 82, 20, 0.2), transparent);
  transition: left 0.5s ease;
}

.flow-step.active::before {
  left: 100%;
}

.flow-step.active {
  background: rgba(208, 82, 20, 0.2);
  border-color: rgba(208, 82, 20, 0.6);
  box-shadow: 0 0 20px rgba(208, 82, 20, 0.3);
}

.flow-step.pivot {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.flow-step.pivot.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.flow-step.build {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.flow-step.build.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  /* Disable heavy animations on mobile */
  .card-tilt,
  .card-shine,
  .hover-lift {
    transform: none !important;
    transition: none !important;
  }
  
  /* Optimize timeline cards for mobile */
  .timeline-item {
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .timeline-details {
    margin-top: 1rem;
  }
  
  .timeline-details ul {
    padding-left: 1rem;
  }
  
  .timeline-details li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  /* Reduce animation complexity */
  .animated-gradient-text,
  .section-title {
    animation-duration: 6s; /* Slower on mobile */
  }
  
  /* Optimize validation phone */
  .validation-phone-container {
    max-width: 250px;
  }
  
  .validation-phone {
    width: 150px;
    height: 300px;
    padding: 15px;
  }
  
  .phone-screen {
    padding: 15px;
  }
  
  .flow-step {
    padding: 8px;
    font-size: 10px;
  }
  
  /* Reduce stars count on mobile for better performance */
  .enhanced-stars .star:nth-child(n+20) {
    display: none;
  }
  
  /* Disable shooting stars on mobile */
  .enhanced-stars .star:nth-child(31),
  .enhanced-stars .star:nth-child(32),
  .enhanced-stars .star:nth-child(33),
  .enhanced-stars .star:nth-child(34) {
    display: none;
  }
  
  /* Optimize app carousel for mobile */
  .app-carousel-track {
    animation-duration: 20s; /* Slower animation */
  }
  
  .app-card {
    min-width: 280px;
    margin-right: 1rem;
  }
  
  /* Improve scroll performance */
  .timeline-container,
  .services-grid,
  .testimonials-carousel {
    will-change: auto;
    transform: translateZ(0);
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Reduce motion for better performance */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient-text,
  .section-title {
    animation: none;
    background: linear-gradient(45deg, #D05214, #FF6B35);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .enhanced-stars .star {
    animation: none;
    opacity: 0.5;
  }
  
  .validation-phone:hover {
    transform: none;
  }
}

/* ===== LOW POWER MODE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce), 
       (max-width: 768px) and (hover: none) {
  
  /* Disable complex animations */
  .card-tilt,
  .card-shine,
  .hover-lift,
  .btn-spring,
  .btn-glow {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  /* Simplify gradients */
  .animated-gradient-text,
  .section-title {
    background: #D05214;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: none;
  }
  
  /* Reduce stars for low power mode */
  .enhanced-stars .star:nth-child(n+8) {
    display: none;
  }
  
  /* Disable all moving stars in low power mode */
  .enhanced-stars .star:nth-child(6),
  .enhanced-stars .star:nth-child(7),
  .enhanced-stars .star:nth-child(8),
  .enhanced-stars .star:nth-child(9),
  .enhanced-stars .star:nth-child(10),
  .enhanced-stars .star:nth-child(11),
  .enhanced-stars .star:nth-child(12),
  .enhanced-stars .star:nth-child(13),
  .enhanced-stars .star:nth-child(14),
  .enhanced-stars .star:nth-child(15),
  .enhanced-stars .star:nth-child(16),
  .enhanced-stars .star:nth-child(17),
  .enhanced-stars .star:nth-child(18),
  .enhanced-stars .star:nth-child(19),
  .enhanced-stars .star:nth-child(20),
  .enhanced-stars .star:nth-child(21),
  .enhanced-stars .star:nth-child(22),
  .enhanced-stars .star:nth-child(23),
  .enhanced-stars .star:nth-child(24),
  .enhanced-stars .star:nth-child(31),
  .enhanced-stars .star:nth-child(32),
  .enhanced-stars .star:nth-child(33),
  .enhanced-stars .star:nth-child(34) {
    display: none;
  }
}

/* ===== SCROLL OPTIMIZATION ===== */
/* Improve scroll performance on mobile */
.timeline-container {
  contain: layout style paint;
}

.services-grid {
  contain: layout style paint;
}

.testimonials-carousel {
  contain: layout style paint;
}

/* ===== VALIDATION ANIMATION STATES ===== */
.validation-flow-container {
  position: relative;
}

.validation-flow-container.pivot-mode .flow-step:nth-child(3) {
  animation: pulseRed 2s ease-in-out infinite;
}

.validation-flow-container.build-mode .flow-step:nth-child(3) {
  animation: pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseRed {
  0%, 100% {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
  }
  50% {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
  }
}

@keyframes pulseGreen {
  0%, 100% {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
  }
  50% {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
  }
}

/* ===== ENHANCED BUTTON EFFECTS ===== */
.btn-enhanced {
  position: relative;
  overflow: hidden;
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

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

/* ===== IMPROVED FOCUS STATES ===== */
.focus-enhanced:focus-visible {
  outline: 2px solid #D05214;
  outline-offset: 4px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(208, 82, 20, 0.2);
}

/* ===== LOADING STATES ===== */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}