/**
 * Safe Animation Styles - Progressive Enhancement Approach
 * 
 * Content is visible by default. Animations enhance the experience
 * but never break the functionality if JavaScript fails.
 */

/* ===== BASE STYLES (Always Visible) ===== */

.safe-fade-in {
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

.safe-parallax {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.safe-card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.safe-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===== ENHANCED ANIMATIONS (Only When JS is Ready) ===== */

.safe-animations-ready .safe-fade-in {
  opacity: 0;
}

.safe-animations-ready .safe-fade-in.fade-in-active {
  opacity: 1;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.safe-optimized {
  contain: layout style;
  transform: translateZ(0);
}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
  .safe-parallax {
    transform: none !important;
    will-change: auto !important;
  }
  
  .safe-card-hover:hover {
    transform: translateY(-2px);
  }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .safe-parallax {
    transform: none !important;
  }
}