/* ============================================================
   w-soft — giriş animasyonları (framer-motion'ın saf CSS/JS karşılığı)
   js/main.js bu dosyadaki sınıfları tetikler.
   ============================================================ */

/* --- Scroll'da belirme (fadeUp) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s),
    transform 0.55s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s);
}

/* Proje kartları: hafif küçülerek gelir */
[data-reveal="card"] {
  transform: translateY(20px) scale(0.97);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
}

/* Hizmet kartları */
[data-reveal="service"] {
  transition:
    opacity 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s),
    transform 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Hero: sayfa yüklenince oynayan giriş --- */
[data-hero] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease var(--reveal-delay, 0s),
    transform 0.5s ease var(--reveal-delay, 0s);
}

[data-hero="badge"] {
  transform: translateY(12px);
}

/* Başlık kelimeleri: bulanıklıktan netleşerek gelir */
[data-hero="word"] {
  transform: translateY(28px);
  filter: blur(10px);
  transition:
    opacity 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s),
    transform 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s),
    filter 0.6s cubic-bezier(0.21, 0.47, 0.32, 0.98) var(--reveal-delay, 0s);
}

.hero-in [data-hero] {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --- Mobil menü: yükseklik + opaklık geçişi --- */
#mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease-out, opacity 0.25s ease-out;
}

#mobile-menu.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

#mobile-menu > div {
  overflow: hidden;
  min-height: 0;
}

@media (min-width: 768px) {
  #mobile-menu {
    display: none;
  }
}