/* Professional Animations CSS
 * Perspektif Metal - Kurumsal Animasyon Sistemi
 * Page transitions, scroll reveal, easing functions
 */

/* ============================================
   Animation Custom Properties
   ============================================ */
:root {
  /* Transition Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  
  /* Easing Functions */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================
   Page Transitions
   ============================================ */
.page-transition-enter {
  opacity: 0;
}

.page-transition-enter-active {
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

/* Body fade transition */
body {
  transition: opacity var(--duration-normal) var(--ease-default);
}

body.page-loading {
  opacity: 0;
}

body.page-loaded {
  opacity: 1;
}

/* ============================================
   Scroll Reveal Animations
   ============================================ */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Reveal variants */
[data-reveal="fade"] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

[data-reveal="fade"].reveal-visible {
  opacity: 1;
}

[data-reveal="slide-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal="slide-up"].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal="slide-left"].reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal="slide-right"].reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal="scale"].reveal-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   Stagger Animation Delays
   ============================================ */
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }

/* ============================================
   Reduced Motion Support
   ============================================ */
@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;
  }
  
  .reveal-hidden,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  body {
    transition: none !important;
  }
  
  .page-transition-enter-active,
  .page-transition-exit-active {
    transition: none !important;
  }
}

/* ============================================
   GPU Acceleration Hints
   ============================================ */
.will-animate {
  will-change: transform, opacity;
}

[data-reveal] {
  will-change: transform, opacity;
}

/* Clean up will-change after animation */
.reveal-visible {
  will-change: auto;
}