/* ==========================================================================
   Animations & Transitions
   Performance-Optimized & Accessibility-Focused
   ========================================================================== */

/* ========================================
   Fade-in on Scroll Animation
   Uses transform and opacity for GPU acceleration
   ======================================== */
.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--animation-duration) var(--animation-easing),
              transform var(--animation-duration) var(--animation-easing);
}

.section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   Language Switch Fade Animation
   ======================================== */
[data-lang] {
  transition: opacity var(--transition-base);
}

.language-switching [data-lang] {
  opacity: 0;
}

/* ========================================
   Button Animations
   GPU-accelerated with transform and opacity only
   ======================================== */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base),
              background-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Ripple effect using pseudo-element */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
  pointer-events: none;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:active {
  transform: scale(0.98);
}

/* ========================================
   Card Hover Effects
   Optimized for performance
   ======================================== */
.card,
.expertise__card,
.philosophy__card {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
  /* Use will-change sparingly and remove after animation */
  will-change: auto;
}

.card:hover,
.expertise__card:hover {
  transform: translateY(-4px);
}

/* Add will-change only during hover */
.card:hover,
.expertise__card:hover,
.philosophy__card:hover {
  will-change: transform;
}

/* Remove will-change after transition */
.card,
.expertise__card,
.philosophy__card {
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              will-change 0s var(--transition-base);
}

/* ========================================
   Link Underline Animation
   ======================================== */
.link-animated {
  position: relative;
  text-decoration: none;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent-primary);
  transition: width var(--transition-base);
}

.link-animated:hover::after {
  width: 100%;
}

/* ========================================
   Form Input Focus Animation
   ======================================== */
.form-input,
.form-textarea {
  transition: border-color var(--transition-base),
              border-width var(--transition-fast);
}

/* ========================================
   Loading Spinner
   Performant rotation using transform
   ======================================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 166, 147, 0.2);
  border-radius: 50%;
  border-top-color: var(--color-accent-primary);
  animation: spin 0.8s linear infinite;
  /* Optimize rotation performance */
  will-change: transform;
}

/* ========================================
   Success Message Fade In
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-success {
  animation: fadeIn 0.4s ease-out;
}

/* ========================================
   Hero Illustration Pulse Animation
   Subtle, non-distracting effect
   ======================================== */
@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

.hero__illustration::before,
.hero__illustration::after {
  animation: pulse 3s ease-in-out infinite;
  will-change: opacity, transform;
}

.hero__illustration::after {
  animation-delay: 1.5s;
}

/* ========================================
   Navbar Logo Animation
   Subtle opacity change on hover
   ======================================== */
.navbar-logo {
  transition: opacity var(--transition-base);
}

.navbar-logo:hover {
  opacity: 0.8;
}

/* ========================================
   Language Switcher Button Animation
   ======================================== */
.lang-btn {
  transition: color var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base);
}

/* ========================================
   Smooth Scroll Behavior
   ======================================== */
html {
  scroll-behavior: smooth;
}

/* Scroll padding to account for fixed header */
html {
  scroll-padding-top: 120px;  /* Account for 100px logo + header padding */
}

/* ========================================
   Performance Optimization
   Use will-change sparingly
   ======================================== */

/* Only add will-change to actively animating elements */
.section.is-animating {
  will-change: opacity, transform;
}

.section:not(.is-animating) {
  will-change: auto;
}

/* ========================================
   ACCESSIBILITY: Reduced Motion
   Critical for users with vestibular disorders
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove fade-in effects */
  .section {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Disable smooth scroll */
  html {
    scroll-behavior: auto !important;
  }
  
  /* Remove hover effects */
  .btn:hover,
  .card:hover,
  .expertise__card:hover {
    transform: none !important;
  }
  
  /* Disable all keyframe animations */
  .loading-spinner,
  .hero__illustration::before,
  .hero__illustration::after,
  .form-success {
    animation: none !important;
  }
  
  /* Remove will-change to save resources */
  * {
    will-change: auto !important;
  }
}

/* ========================================
   Print Optimization
   Disable all animations for print
   ======================================== */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  
  .section {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   Mobile Performance Optimization
   ======================================== */
@media (max-width: 767px) {
  /* Reduce animation complexity on mobile */
  .btn::before {
    display: none;  /* Disable ripple effect on mobile */
  }
  
  /* Simplify hover effects on mobile */
  .card:hover,
  .expertise__card:hover {
    transform: translateY(-2px);  /* Smaller transform */
  }
}

/* ========================================
   High Performance Mode
   For devices with limited resources
   ======================================== */
@media (prefers-reduced-data: reduce) {
  /* Disable heavy animations when data saver is on */
  .hero__illustration::before,
  .hero__illustration::after {
    animation: none;
  }
  
  .btn::before {
    display: none;
  }
}