/*
  menu.css — scroll-reveal hareket sistemi (`.reveal`, bkz. js/reveal.js
  ve docs/DESIGN_SYSTEM.md → "Motion"). index/hakkimizda(about)/iletisim
  (contact) sayfalarındaki statik split/cta panellerine uygulanır — menü
  artık interaktif bir akış (bkz. js/menu-quiz.js + css/quiz.css), bu
  dosyayı yüklemez.
*/

/* Orta hız: 0.8s "ağır çekim" okunuyordu, 0.3s ise hiç yokmuş gibi.
   Ease-out-expo eğrisi girişte hızlı yerleşir, sonda yumuşar — sadece
   transform + opacity (compositor işi, ana iş parçacığına maliyeti yok). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Görsel içi süzülme ----------
   Fotoğraf, `overflow:hidden` kabının içinde hafifçe büyütülür ve sayfa
   kaydırıldıkça çok az dikey kayar — parallax hissi verir ama parallax'ın
   maliyetini ödemez: `animation-timeline: view()` tamamen compositor'da,
   JS'siz. Desteklemeyen tarayıcıda (bugün Safari) görünürlükte tek seferlik
   yavaş bir Ken Burns yerleşmesi oynar — iki dünyada da JS yok, scroll
   dinleyicisi yok. Kapsayıcıların hepsinde `overflow:hidden` var
   (cf__card / fan__card / split__media), %10 büyütme ±%3,5 kaymayı örter. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cf__card img,
    .fan__card img,
    .split__media img {
      scale: 1.1;
      animation: ic-suzulme linear both;
      animation-timeline: view();
    }
  }

  @supports not (animation-timeline: view()) {
    .cf__card img,
    .fan__card img,
    .split__media img {
      scale: 1.12;
      transition: scale 6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal.is-visible .cf__card img,
    .reveal.is-visible .fan__card img,
    .reveal.is-visible .split__media img {
      scale: 1.03;
    }
  }
}

@keyframes ic-suzulme {
  from { translate: 0 3.5%; }
  to   { translate: 0 -3.5%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}