/* Şık ve uzun fade-in + aşağıdan kayma efektleri */
:root {
  --fade-distance: 32px;
  --fade-duration: 1200ms;
  --fade-ease: cubic-bezier(.16,.84,.21,1);
  --fade-blur: 3px;
  --fade-delay: 0ms;         /* JS ile img bazında değiştirilecek */
  --fade-stagger-step: 70ms; /* JS ile katmanlı gecikme */
}

/* JS aktifken başlangıç halleri */
.fade-ready img:not([data-no-fade]) {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  filter: blur(var(--fade-blur));
  transition:
    opacity var(--fade-duration) var(--fade-ease),
    transform var(--fade-duration) var(--fade-ease),
    filter calc(var(--fade-duration) - 150ms) var(--fade-ease);
  transition-delay: var(--fade-delay);
  will-change: opacity, transform, filter;
}

/* Görünür olduğunda yumuşak şekilde yerine otursun */
.fade-ready img.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Motion tercihleri */
@media (prefers-reduced-motion: reduce) {
  .fade-ready img:not([data-no-fade]) {
    transition: none !important;
    transition-delay: 0ms !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}