/* ==========================================================================
   Animations - Fade In, Reveals, Transitions
   ========================================================================== */

/* Smooth loading animation */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

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

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(4px);
  animation: fadeUp 360ms ease forwards;
}

.reveal.delay-1 {
  animation-delay: 80ms;
}

.reveal.delay-2 {
  animation-delay: 140ms;
}

.reveal.delay-3 {
  animation-delay: 200ms;
}

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

/* Accessibility and Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: opacity 1.5s ease;
    transform: none;
  }
  
  .slide.active {
    transform: none;
  }
  
  .hero .btn:hover {
    transform: none;
  }
  
  .card:hover {
    transform: none;
  }
  
  .about-figure .avatar:hover {
    transform: none;
  }
  
  .gallery img:hover {
    transform: none;
  }
  
  .contact-list > div:hover {
    transform: none;
  }
  
  .kv .kv-item:hover {
    transform: none;
  }
  
  .pub:hover {
    transform: none;
  }
  
  .navlinks { transition: none !important; transform: none !important; opacity: 1 !important; }
  
  .reveal,
  .meta-card,
  .icon-badge {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Focus states for accessibility */
.hero .btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.hero .btn.ghost:focus {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.6) 40%,
      rgba(0, 0, 0, 0.3) 70%
    );
  }
  
  .hero h1,
  .hero p {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  }
}