/* Rails 8 Reveal Animation - 최종 검증 버전 */

/* 기본 상태 */
.opacity-0 {
  opacity: 0;
  /* GPU 가속 */
  will-change: opacity, transform;
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

.opacity-100 {
  opacity: 1;
}

.translate-y-8 {
  transform: translateY(2rem);
}

.translate-y-4 {
  transform: translateY(1rem);
}

.translate-y-0 {
  transform: translateY(0);
}

/* Transition 클래스들 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  /* iOS Safari 스크롤 성능 향상 */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 모바일에서 더 짧은 애니메이션 거리 */
  .translate-y-8 {
    transform: translateY(1.5rem);
  }
  
  .translate-y-4 {
    transform: translateY(0.75rem);
  }
  
  /* 더 빠른 애니메이션 */
  .transition-all,
  .transition-opacity,
  .transition-transform {
    transition-duration: 500ms;
  }
}

/* JavaScript 실패 시 2초 후 자동 표시 */
.opacity-0 {
  animation: auto-show 0s ease-out 2s forwards;
}

@keyframes auto-show {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 접근성: 애니메이션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
  .opacity-0,
  .transition-all,
  .transition-opacity,
  .transition-transform {
    animation: none !important;
    transition: none !important;
  }
  
  .opacity-0 {
    opacity: 1 !important;
    transform: none !important;
  }
}