/* Klasik sürüm: React/Motion animasyonlarının CSS karşılıkları (site.css'e ek). */

/* Görünüm alanına girerken beliren içerik — JavaScript yoksa içerik doğrudan görünür */
[data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(var(--ry, 18px));
}

/* Panel içerik değişimi */
.fade-in {
  animation: klasik-fade 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes klasik-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Mobil menü */
#mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
}
#mobile-menu li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.is-open li { opacity: 1; transform: none; }
#mobile-menu.is-open li:nth-child(1) { transition-delay: 0.15s; }
#mobile-menu.is-open li:nth-child(2) { transition-delay: 0.2s; }
#mobile-menu.is-open li:nth-child(3) { transition-delay: 0.25s; }
#mobile-menu.is-open li:nth-child(4) { transition-delay: 0.3s; }
#mobile-menu.is-open li:nth-child(5) { transition-delay: 0.35s; }
#mobile-menu.is-open li:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  [data-reveal], #mobile-menu, #mobile-menu li { transition: none; }
  .fade-in { animation: none; }
}