/* ==========================================================================
   Beanola Technologies - Animation System
   Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7
   ========================================================================== */

/* ==========================================================================
   1. Keyframe Animations
   ========================================================================== */

/* Gradient Animation - Requirement 9.4 */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Fade-in Animation - Requirement 9.2 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-out-down Animation - Requirement 4.1, 4.3 (Page Transitions) */
@keyframes fade-out-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* Fade-out-up Animation - Alternative exit animation */
@keyframes fade-out-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Slide-up Animation */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Typing Effect - Requirement 9.5 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

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

@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Ripple Effect - Requirement 9.6 */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes ripple-expand {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.5;
  }
  to {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* Page Transition - Requirement 9.1 */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Floating Animation for Tech Icons */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(2deg);
  }
  50% {
    transform: translateY(-5px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-2deg);
  }
}

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

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 40px rgba(99, 102, 241, 0.3);
  }
}

/* Page Loader Pulse Animation - Requirement 3.1 */
@keyframes page-loader-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

/* Page Loader Fade Out Animation - Requirement 3.2 */
@keyframes page-loader-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Scale Animation */
@keyframes scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* Marquee Animation for Client Logos */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Spin Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Shake Animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* ==========================================================================
   2. Animation Utility Classes
   ========================================================================== */

/* Fade-in Animations */
.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-down {
  animation: fade-in-down 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
}

/* Slide Animations */
.animate-slide-up {
  animation: slide-up 0.5s ease-out forwards;
}

.animate-slide-down {
  animation: slide-down 0.5s ease-out forwards;
}

/* Scale Animations */
.animate-scale-in {
  animation: scale-in 0.4s ease-out forwards;
}

/* Float Animation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

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

/* Pulse Animation */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Spin Animation */
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Bounce Animation */
.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Marquee Animation */
.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* ==========================================================================
   3. Scroll-Triggered Animations - Requirements 1.8, 9.2
   ========================================================================== */

/* Initial state for scroll-triggered elements */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Staggered animation delays for sequential reveals */
.scroll-animate[data-delay="1"] { transition-delay: 0.1s; }
.scroll-animate[data-delay="2"] { transition-delay: 0.2s; }
.scroll-animate[data-delay="3"] { transition-delay: 0.3s; }
.scroll-animate[data-delay="4"] { transition-delay: 0.4s; }
.scroll-animate[data-delay="5"] { transition-delay: 0.5s; }
.scroll-animate[data-delay="6"] { transition-delay: 0.6s; }

/* Alternative scroll animation variants */
.scroll-fade {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.scroll-fade.animate-in {
  opacity: 1;
}

/* Fade-in from below (same as scroll-animate but explicit naming) */
.scroll-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in from above */
.scroll-fade-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-down.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in from left */
.scroll-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Fade-in from right */
.scroll-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-slide-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-slide-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.scroll-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-scale.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays for all scroll animation variants */
.scroll-fade[data-delay="1"],
.scroll-fade-up[data-delay="1"],
.scroll-fade-down[data-delay="1"],
.scroll-fade-left[data-delay="1"],
.scroll-fade-right[data-delay="1"],
.scroll-slide-left[data-delay="1"],
.scroll-slide-right[data-delay="1"],
.scroll-scale[data-delay="1"] { transition-delay: 0.1s; }

.scroll-fade[data-delay="2"],
.scroll-fade-up[data-delay="2"],
.scroll-fade-down[data-delay="2"],
.scroll-fade-left[data-delay="2"],
.scroll-fade-right[data-delay="2"],
.scroll-slide-left[data-delay="2"],
.scroll-slide-right[data-delay="2"],
.scroll-scale[data-delay="2"] { transition-delay: 0.2s; }

.scroll-fade[data-delay="3"],
.scroll-fade-up[data-delay="3"],
.scroll-fade-down[data-delay="3"],
.scroll-fade-left[data-delay="3"],
.scroll-fade-right[data-delay="3"],
.scroll-slide-left[data-delay="3"],
.scroll-slide-right[data-delay="3"],
.scroll-scale[data-delay="3"] { transition-delay: 0.3s; }

.scroll-fade[data-delay="4"],
.scroll-fade-up[data-delay="4"],
.scroll-fade-down[data-delay="4"],
.scroll-fade-left[data-delay="4"],
.scroll-fade-right[data-delay="4"],
.scroll-slide-left[data-delay="4"],
.scroll-slide-right[data-delay="4"],
.scroll-scale[data-delay="4"] { transition-delay: 0.4s; }

.scroll-fade[data-delay="5"],
.scroll-fade-up[data-delay="5"],
.scroll-fade-down[data-delay="5"],
.scroll-fade-left[data-delay="5"],
.scroll-fade-right[data-delay="5"],
.scroll-slide-left[data-delay="5"],
.scroll-slide-right[data-delay="5"],
.scroll-scale[data-delay="5"] { transition-delay: 0.5s; }

.scroll-fade[data-delay="6"],
.scroll-fade-up[data-delay="6"],
.scroll-fade-down[data-delay="6"],
.scroll-fade-left[data-delay="6"],
.scroll-fade-right[data-delay="6"],
.scroll-slide-left[data-delay="6"],
.scroll-slide-right[data-delay="6"],
.scroll-scale[data-delay="6"] { transition-delay: 0.6s; }

/* ==========================================================================
   4. Page Transitions - Requirements 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 9.1
   ========================================================================== */

/* Page wrapper for transitions */
.page-transition {
  animation: page-enter 0.4s ease-out forwards;
}

/* TransitionManager exit animation - Requirement 4.1, 4.3 (300ms) */
.page-transition-exit {
  animation: fade-out-down 300ms ease-in forwards;
  pointer-events: none; /* Prevent interactions during exit */
}

/* TransitionManager enter animation - Requirement 4.2, 4.4 (400ms) */
.page-transition-enter {
  animation: fade-in-up 400ms ease-out forwards;
}

/* Legacy page-exit animation for backwards compatibility */
.page-exit-legacy {
  animation: page-exit 0.3s ease-in forwards;
}

/* Main content area transition */
main {
  animation: fade-in-up 0.5s ease-out;
}

/* Utility classes for manual transition control */
.animate-fade-out-down {
  animation: fade-out-down 300ms ease-in forwards;
}

.animate-fade-out-up {
  animation: fade-out-up 300ms ease-in forwards;
}

/* ==========================================================================
   5. Animated Gradient Backgrounds - Requirement 9.4
   ========================================================================== */

.gradient-animated {
  background: linear-gradient(
    -45deg,
    var(--color-background, #0F0F0F),
    var(--color-surface, #1A1A1A),
    var(--color-primary, #6366F1),
    var(--color-secondary, #10B981)
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.gradient-hero {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(15, 15, 15, 1) 50%,
    rgba(16, 185, 129, 0.1) 100%
  );
  background-size: 200% 200%;
  animation: gradient-shift 10s ease infinite;
}

.gradient-subtle {
  background: linear-gradient(
    180deg,
    var(--color-background, #0F0F0F) 0%,
    rgba(99, 102, 241, 0.05) 50%,
    var(--color-background, #0F0F0F) 100%
  );
  background-size: 100% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Gradient orb effect */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: float-slow 10s ease-in-out infinite;
}

.gradient-orb-primary {
  background: var(--color-primary, #6366F1);
}

.gradient-orb-secondary {
  background: var(--color-secondary, #10B981);
}

/* ==========================================================================
   6. Typing Effect - Requirement 9.5
   ========================================================================== */

.typing-effect {
  display: inline-block;
  min-height: 1.2em;
  font-family: inherit;
  text-align: center;
  width: 100%;
}

/* Cursor after text - added by JS or CSS */
.typing-effect::after {
  content: '|';
  display: inline-block;
  color: var(--color-primary, #6366F1);
  animation: cursor-blink 0.8s step-end infinite;
  margin-left: 2px;
  font-weight: 100;
}

.typing-effect-fast {
  animation: 
    typing 2s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}

/* Typing cursor only (for after typing completes) */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: var(--color-primary, #6366F1);
  margin-left: 2px;
  animation: cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
}

/* Multi-line typing effect container */
.typing-container {
  display: inline-block;
}

/* ==========================================================================
   7. Hover Effects - Requirement 9.3
   ========================================================================== */

/* Card Tilt Effect */
.hover-tilt {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  transform-style: preserve-3d;
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-5px);
  box-shadow: 
    10px 10px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(99, 102, 241, 0.2);
}

/* Card Scale Effect */
.hover-scale {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hover-scale:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card Lift Effect */
.hover-lift {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(99, 102, 241, 0.15);
}

/* Combined Tilt and Scale */
.hover-tilt-scale {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  transform-style: preserve-3d;
}

.hover-tilt-scale:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale(1.02) translateY(-5px);
  box-shadow: 
    10px 10px 30px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(99, 102, 241, 0.25);
}

/* Glow Effect on Hover */
.hover-glow {
  transition: box-shadow 0.3s ease-out;
}

.hover-glow:hover {
  box-shadow: 
    0 0 20px rgba(99, 102, 241, 0.4),
    0 0 40px rgba(99, 102, 241, 0.2);
}

.hover-glow-secondary:hover {
  box-shadow: 
    0 0 20px rgba(16, 185, 129, 0.4),
    0 0 40px rgba(16, 185, 129, 0.2);
}

/* Border Glow Effect */
.hover-border-glow {
  position: relative;
  transition: border-color 0.3s ease-out;
}

.hover-border-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary, #6366F1), var(--color-secondary, #10B981));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease-out;
}

.hover-border-glow:hover::before {
  opacity: 1;
}

/* Image Zoom on Hover */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform 0.5s ease-out;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

/* Link Underline Animation */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary, #6366F1), var(--color-secondary, #10B981));
  transition: width 0.3s ease-out;
}

.hover-underline:hover::after {
  width: 100%;
}

/* ==========================================================================
   8. Button Ripple Effect - Requirement 9.6
   Material Design-style ripple that expands from click point
   ========================================================================== */

/* Base ripple container - add to any button */
.btn-ripple {
  position: relative;
  overflow: hidden;
  /* Ensure ripple stays within button bounds */
  isolation: isolate;
}

/* The ripple element created by JavaScript */
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple-material 0.6s ease-out forwards;
  pointer-events: none;
  /* Ensure ripple is behind button content but visible */
  z-index: 0;
}

/* Material Design ripple animation - expands from click point */
@keyframes ripple-material {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Ripple color variants for different button types */
.btn-primary .ripple,
.btn-secondary .ripple {
  background: rgba(255, 255, 255, 0.35);
}

.btn-outline .ripple,
.btn-ghost .ripple {
  background: rgba(99, 102, 241, 0.25);
}

/* Dark ripple for light backgrounds */
.ripple-dark .ripple {
  background: rgba(0, 0, 0, 0.15);
}

/* Ensure button content stays above ripple */
.btn-ripple > *:not(.ripple) {
  position: relative;
  z-index: 1;
}

/* Alternative CSS-only ripple using pseudo-element (no JS required) */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.ripple-effect:active::after {
  animation: ripple-expand 0.5s ease-out;
}

/* ==========================================================================
   9. Navigation Hover Effects - Requirement 11.3
   ========================================================================== */

.nav-link-animated {
  position: relative;
  transition: color 0.3s ease-out;
}

.nav-link-animated::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary, #6366F1);
  transition: width 0.3s ease-out, left 0.3s ease-out;
}

.nav-link-animated:hover::before,
.nav-link-animated.active::before {
  width: 100%;
  left: 0;
}

.nav-link-animated:hover {
  color: var(--color-primary, #6366F1);
}

/* ==========================================================================
   10. WhatsApp Widget Animation - Requirement 12.3
   ========================================================================== */

.whatsapp-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-fixed, 300);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.whatsapp-widget:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}

.whatsapp-widget-bounce {
  animation: bounce 2s ease-in-out infinite;
}

.whatsapp-widget-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ==========================================================================
   11. Floating Tech Icons Animation
   ========================================================================== */

.floating-icon {
  animation: float 6s ease-in-out infinite;
}

.floating-icon:nth-child(1) { animation-delay: 0s; }
.floating-icon:nth-child(2) { animation-delay: 0.5s; }
.floating-icon:nth-child(3) { animation-delay: 1s; }
.floating-icon:nth-child(4) { animation-delay: 1.5s; }
.floating-icon:nth-child(5) { animation-delay: 2s; }
.floating-icon:nth-child(6) { animation-delay: 2.5s; }

/* ==========================================================================
   12. Client Logos Marquee
   ========================================================================== */

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

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

/* ==========================================================================
   13. Animation Timing Utilities
   ========================================================================== */

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* Animation Durations */
.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.4s; }
.duration-slow { animation-duration: 0.6s; }
.duration-slower { animation-duration: 1s; }

/* Animation Fill Modes */
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }

/* Animation Play State */
.paused { animation-play-state: paused; }
.running { animation-play-state: running; }

/* ==========================================================================
   14. Reduced Motion Support - Requirement 9.7 (Performance)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .scroll-animate,
  .scroll-fade,
  .scroll-slide-left,
  .scroll-slide-right,
  .scroll-scale {
    opacity: 1;
    transform: none;
  }
  
  .typing-effect {
    animation: none;
    border-right: none;
    width: auto;
  }
  
  .animate-marquee {
    animation: none;
  }
}

/* ==========================================================================
   15. Service Card Specific Animations
   ========================================================================== */

.service-card {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.service-card:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(99, 102, 241, 0.2);
  border-color: var(--color-primary, #6366F1);
}

.service-card .service-icon {
  transition: transform 0.3s ease-out, color 0.3s ease-out;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  color: var(--color-primary, #6366F1);
}

/* ==========================================================================
   16. Project Card Specific Animations
   ========================================================================== */

.project-card {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(99, 102, 241, 0.15);
}

.project-card .project-preview {
  overflow: hidden;
}

.project-card .project-preview img {
  transition: transform 0.5s ease-out;
}

.project-card:hover .project-preview img {
  transform: scale(1.1);
}

/* ==========================================================================
   17. Form Input Focus Animations
   ========================================================================== */

.input-animated {
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.2s ease-out;
}

.input-animated:focus {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* ==========================================================================
   18. Loading States
   ========================================================================== */

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-surface-border, #2A2A2A);
  border-top-color: var(--color-primary, #6366F1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary, #6366F1);
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Skeleton loading animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface, #1A1A1A) 25%,
    var(--color-surface-hover, #252525) 50%,
    var(--color-surface, #1A1A1A) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md, 0.5rem);
}


/* ==========================================================================
   Light Theme Animation Overrides
   ========================================================================== */

[data-theme="light"] .gradient-hero {
  background: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.08) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(16, 185, 129, 0.06) 100%
  );
}

[data-theme="light"] .gradient-subtle {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(79, 70, 229, 0.03) 50%,
    #ffffff 100%
  );
}

[data-theme="light"] .gradient-orb {
  opacity: 0.2;
  filter: blur(100px);
}

[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    #f8f9fc 25%,
    #eef0f5 50%,
    #f8f9fc 75%
  );
  background-size: 200% 100%;
}