/* ===================== PRO-LEVEL SERVICE ANIMATIONS ===================== */

/* Animation Variables */
:root {
  --animation-fast: 0.3s;
  --animation-medium: 0.6s;
  --animation-slow: 1s;
  --animation-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Global Animation Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-medium) var(--animation-smooth);
}

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

/* Staggered Animation Delays */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }
.animate-delay-6 { transition-delay: 0.6s; }
.animate-delay-7 { transition-delay: 0.7s; }
.animate-delay-8 { transition-delay: 0.8s; }

/* Hero Section Animations */
.service-hero {
  position: relative;
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.service-hero-content {
  animation: heroFadeIn 1s var(--animation-smooth) forwards;
}

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

.breadcrumb {
  animation: slideInLeft 0.8s var(--animation-smooth) 0.2s both;
}

.service-hero h1 {
  animation: slideInLeft 0.8s var(--animation-smooth) 0.4s both;
}

.service-hero p {
  animation: slideInLeft 0.8s var(--animation-smooth) 0.6s both;
}

.service-hero-buttons {
  animation: slideInLeft 0.8s var(--animation-smooth) 0.8s both;
}

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

/* Enhanced Button Animations */
.service-hero-buttons .btn-blue,
.service-hero-buttons .btn-outline-white {
  position: relative;
  overflow: hidden;
  transition: all var(--animation-fast) var(--animation-smooth);
}

.service-hero-buttons .btn-blue::before,
.service-hero-buttons .btn-outline-white::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.service-hero-buttons .btn-blue:hover::before,
.service-hero-buttons .btn-outline-white:hover::before {
  width: 300px;
  height: 300px;
}

.service-hero-buttons .btn-blue:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.service-hero-buttons .btn-outline-white:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

/* Service Section Animations */
.service-section {
  position: relative;
}

.service-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
  opacity: 0;
  animation: lineAppear 1s var(--animation-smooth) forwards;
}

@keyframes lineAppear {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

.section-title {
  position: relative;
  animation: titleReveal 0.8s var(--animation-bounce) both;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
  animation: underlineGrow 0.6s var(--animation-smooth) 0.3s forwards;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes underlineGrow {
  to { width: 60px; }
}

.section-subtitle {
  animation: fadeInUp 0.8s var(--animation-smooth) 0.4s both;
}

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

/* Enhanced Grid Item Animations */
.included-item,
.benefit-card,
.tech-item {
  position: relative;
  overflow: hidden;
  animation: itemFadeIn 0.6s var(--animation-smooth) both;
}

.included-item::before,
.benefit-card::before,
.tech-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  transition: left 0.6s;
}

.included-item:hover::before,
.benefit-card:hover::before,
.tech-item:hover::before {
  left: 100%;
}

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

.included-item:hover,
.benefit-card:hover,
.tech-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
}

/* Icon Animations */
.included-icon,
.benefit-icon,
.tech-icon {
  position: relative;
  animation: iconBounce 0.6s var(--animation-spring) both;
}

.included-icon:hover,
.benefit-icon:hover,
.tech-icon:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}

@keyframes iconBounce {
  0% { transform: scale(0) rotate(-180deg); }
  50% { transform: scale(1.1) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Work Item Animations */
.work-item {
  position: relative;
  overflow: hidden;
  animation: workItemSlide 0.8s var(--animation-smooth) both;
}

@keyframes workItemSlide {
  from {
    opacity: 0;
    transform: translateX(-50px) rotateY(15deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

.work-item img {
  transition: all var(--animation-medium) var(--animation-smooth);
}

.work-item:hover img {
  transform: scale(1.08) rotate(2deg);
  filter: brightness(1.1);
}

.work-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(99, 102, 241, 0.3), transparent);
  transition: all var(--animation-medium) var(--animation-smooth);
}

.work-item:hover .work-overlay {
  transform: translateY(0);
}

/* CTA Section Animations */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

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

.cta-button {
  position: relative;
  overflow: hidden;
  animation: ctaButtonBounce 1s var(--animation-bounce) both;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.8s, height 0.8s;
}

.cta-button:hover::before {
  width: 400px;
  height: 400px;
}

.cta-button:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}

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

/* Parallax Scroll Effects */
.parallax-slow {
  transition: transform 0.1s ease-out;
}

.parallax-medium {
  transition: transform 0.15s ease-out;
}

.parallax-fast {
  transition: transform 0.2s ease-out;
}

/* Loading Animation */
.loading-animation {
  position: relative;
  overflow: hidden;
}

.loading-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Floating Animation */
.floating {
  animation: float 3s ease-in-out infinite;
}

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

/* Glow Effect */
.glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
  to { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(139, 92, 246, 0.5); }
}

/* Responsive Animations */
@media (max-width: 768px) {
  .service-hero h1 {
    animation: mobileTitleSlide 0.8s var(--animation-smooth) both;
  }
  
  @keyframes mobileTitleSlide {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .included-item:hover,
  .benefit-card:hover,
  .tech-item:hover {
    transform: translateY(-5px) scale(1.01);
  }
  
  .cta-button:hover {
    transform: translateY(-2px) scale(1.02);
  }
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* GPU Acceleration */
.animate-on-scroll,
.included-item,
.benefit-card,
.tech-item,
.work-item,
.cta-button {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}