/* =====================================================================
 * motion.css — HAREKET, REVEAL, GEÇİŞ YARDIMCILARI (GÖREV 13)
 * ---------------------------------------------------------------------
 * Performans ilkeleri:
 *   1. Yalnızca transform + opacity animasyonları (layout yok)
 *   2. will-change sadece aktif hâlde, kaldırılır
 *   3. prefers-reduced-motion: tüm dekoratif hareket kapanır
 *   4. requestAnimationFrame zamanlaması JS'te
 *   5. Toplam animasyon süresi < 600ms (sürpriz hissi)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 0. SAYFA AÇILIŞI (top-level fade)
 * İlk yüklemede hafif fade-in — body level
 * --------------------------------------------------------------------- */
body {
  animation: be-page-in var(--dur-medium) var(--ease-out-soft) both;
}
@keyframes be-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------------
 * 0a. ÜST İLERLEME ÇUBUĞU (sayfa yüklenirken)
 * İnce, otomatik gizlenir — yalnızca gerçekten yavaş sayfalarda görünür
 * JS tarafından tetiklenir: window.addEventListener('beforeunload', ...)
 * --------------------------------------------------------------------- */
.be-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.be-progress::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
  transition: width var(--dur-medium) var(--ease-out-soft);
}
.be-progress.is-loading::after {
  width: 70%;
  transition: width 5s var(--ease-standard);
}
.be-progress.is-done::after {
  width: 100%;
  transition: width var(--dur-fast) var(--ease-out-soft);
}

/* ---------------------------------------------------------------------
 * 1. TEMEL REVEAL
 * Varsayılan: aşağıdan 16px yumuşak giriş.
 * --------------------------------------------------------------------- */
.be-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-medium) var(--ease-out-soft),
    transform var(--dur-medium) var(--ease-out-soft);
  will-change: opacity, transform;
}
.be-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Varyantlar */
.be-reveal--up   { transform: translateY(24px); }
.be-reveal--down { transform: translateY(-24px); }
.be-reveal--left { transform: translateX(24px); }
.be-reveal--right{ transform: translateX(-24px); }

.be-reveal--fade { transform: none; }
.be-reveal--zoom { transform: scale(0.96); }
.be-reveal--zoom.is-revealed { transform: scale(1); }

/* Gecikmeler */
.be-reveal--d1 { transition-delay: calc(var(--stagger) * 1); }
.be-reveal--d2 { transition-delay: calc(var(--stagger) * 2); }
.be-reveal--d3 { transition-delay: calc(var(--stagger) * 3); }
.be-reveal--d4 { transition-delay: calc(var(--stagger) * 4); }
.be-reveal--d5 { transition-delay: calc(var(--stagger) * 5); }
.be-reveal--d6 { transition-delay: calc(var(--stagger) * 6); }

/* ---------------------------------------------------------------------
 * 2. STAGGER LİSTESİ
 * Çocuklara otomatik gecikme. JS bağımsız çalışır.
 * --------------------------------------------------------------------- */
.be-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out-soft),
    transform var(--dur-base) var(--ease-out-soft);
}
.be-stagger.is-revealed > * { opacity: 1; transform: translateY(0); }
.be-stagger.is-revealed > *:nth-child(1)  { transition-delay: 0ms; }
.be-stagger.is-revealed > *:nth-child(2)  { transition-delay: 60ms; }
.be-stagger.is-revealed > *:nth-child(3)  { transition-delay: 120ms; }
.be-stagger.is-revealed > *:nth-child(4)  { transition-delay: 180ms; }
.be-stagger.is-revealed > *:nth-child(5)  { transition-delay: 240ms; }
.be-stagger.is-revealed > *:nth-child(6)  { transition-delay: 300ms; }
.be-stagger.is-revealed > *:nth-child(7)  { transition-delay: 360ms; }
.be-stagger.is-revealed > *:nth-child(8)  { transition-delay: 420ms; }
.be-stagger.is-revealed > *:nth-child(9)  { transition-delay: 480ms; }
.be-stagger.is-revealed > *:nth-child(10) { transition-delay: 540ms; }
.be-stagger.is-revealed > *:nth-child(n+11) { transition-delay: 600ms; }

/* ---------------------------------------------------------------------
 * 3. VURGU ÇİZGİSİ ÇİZİMİ
 * Alt çizgi soldan sağa açılır.
 * --------------------------------------------------------------------- */
.be-underline {
  position: relative;
  display: inline-block;
}
.be-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-medium) var(--ease-out-soft);
}
.be-underline.is-revealed::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
 * 4. WORD / CHARACTER REVEAL
 * Uzun başlıkların kelime kelime yumuşak girişi.
 * - Eski sürüm: statik nth-child gecikmeleri (CSS-only fallback)
 * - Yeni sürüm (data-be-words + JS): --be-delay değişkeni kullanır
 * --------------------------------------------------------------------- */
.be-words > span,
.be-words > .be-word {
  display: inline-block;
  transform: translateY(0.4em);
  opacity: 0;
  transition:
    transform var(--dur-medium) var(--ease-out-soft),
    opacity var(--dur-medium) var(--ease-out-soft);
}

/* JS atadıysa --be-delay kullan; yoksa nth-child fallback'i */
.be-words > .be-word {
  transition-delay: var(--be-delay, 0ms);
}
.be-words.is-revealed > span { transform: translateY(0); opacity: 1; }
.be-words.is-revealed > span:nth-child(1)  { transition-delay: 0ms; }
.be-words.is-revealed > span:nth-child(2)  { transition-delay: 60ms; }
.be-words.is-revealed > span:nth-child(3)  { transition-delay: 120ms; }
.be-words.is-revealed > span:nth-child(4)  { transition-delay: 180ms; }
.be-words.is-revealed > span:nth-child(5)  { transition-delay: 240ms; }
.be-words.is-revealed > span:nth-child(6)  { transition-delay: 300ms; }
.be-words.is-revealed > span:nth-child(7)  { transition-delay: 360ms; }
.be-words.is-revealed > span:nth-child(8)  { transition-delay: 420ms; }
.be-words.is-revealed > span:nth-child(n+9){ transition-delay: 480ms; }

/* ---------------------------------------------------------------------
 * 5. KART HAFİF YÜKSELME
 * Hover'da 2-3px yükselme (8px'e kaçmaz).
 * --------------------------------------------------------------------- */
.be-lift {
  transition:
    transform var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-standard);
  will-change: transform;
}
.be-lift:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
 * 6. YATAY KAYMA (geçiş yardımcısı)
 * Banner gibi akan metinler için.
 * --------------------------------------------------------------------- */
@keyframes be-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.be-marquee {
  display: flex;
  gap: var(--space-7);
  animation: be-marquee 40s linear infinite;
  will-change: transform;
}

/* ---------------------------------------------------------------------
 * 7. MİKRO BAŞLIK ANİMASYONU
 * H2 ve H3'lerin görünürken alttaki ince çizgi soldan sağa açılır.
 * .be-heading-decorative sınıfı veya h2/h3 doğrudan kullanılabilir.
 * --------------------------------------------------------------------- */
.be-heading-decorative,
h2.be-heading-decorative {
  position: relative;
  display: inline-block;
}
.be-heading-decorative::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 1px;
  width: 32px;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-medium) var(--ease-out-soft) 100ms;
}
.be-reveal.is-revealed .be-heading-decorative::after,
.is-revealed .be-heading-decorative::after,
h2.is-revealed::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------------
 * 8. BUTON MİKRO ETKİLER
 * Hover'da hafif yükselme + iç parıltı.
 * --------------------------------------------------------------------- */
.be-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.be-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 700ms var(--ease-standard);
  pointer-events: none;
  z-index: -1;
}
.be-btn:hover::before {
  transform: translateX(110%);
}

/* Primary buton: hover'da hafif "nefes alma" efekti */
.be-btn--primary:not(:disabled):hover {
  animation: be-pulse var(--dur-medium) var(--ease-out-soft) 1;
}
@keyframes be-pulse {
  0%   { transform: translateY(-1px) scale(1); }
  50%  { transform: translateY(-2px) scale(1.012); }
  100% { transform: translateY(-1px) scale(1); }
}

/* ---------------------------------------------------------------------
 * 9. KART HOVER — YUMUŞAK ÇERÇEVE AÇILMASI
 * Çerçeve rengini transparandan ink'e yumuşak geçiş.
 * --------------------------------------------------------------------- */
.be-card-anim {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-standard);
}
.be-card-anim:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px -8px rgba(20, 20, 19, 0.12);
}

/* ---------------------------------------------------------------------
 * 10. ESER KART BÜYÜTME (kontrollü)
 * Hover'da 1.04x scale + 2px yükselme. 8px'e kaçmaz.
 * --------------------------------------------------------------------- */
.be-artwork-zoom {
  transition: transform var(--dur-base) var(--ease-out-soft);
  will-change: transform;
}
.be-artwork-zoom:hover { transform: scale(1.04); }

/* ---------------------------------------------------------------------
 * 11. METİN BAĞLANTISI — soldan sağa alt çizgi açılması
 * --------------------------------------------------------------------- */
.be-link-line {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
}
.be-link-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-medium) var(--ease-out-soft);
}
.be-link-line:hover { color: var(--gold); }
.be-link-line:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
 * 12. TOGGLE / RADIO MİKRO ETKİ
 * Özel checkbox / radio geçiş efekti.
 * --------------------------------------------------------------------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  transition: background-color var(--dur-fast) var(--ease-standard);
}

/* ---------------------------------------------------------------------
 * 13. FORM ALANLARI — odak mikro animasyon
 * Alt çizgi soldan sağa açılır.
 * --------------------------------------------------------------------- */
.be-field:focus-within .be-input,
.be-field:focus-within .be-textarea,
.be-field:focus-within .be-select {
  border-bottom-color: var(--gold);
}
.be-input,
.be-textarea,
.be-select {
  transition:
    border-bottom-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

/* ---------------------------------------------------------------------
 * 14. STAGGER BLOK — JS-Enhanced
 * reveal.js `.be-stagger.is-revealed` durumunda gecikmeli giriş.
 * Verilen varyant: --be-stagger-index (set by JS).
 * --------------------------------------------------------------------- */
.be-stagger > * {
  --be-stagger-index: 0;
  --be-stagger-delay: calc(var(--be-stagger-index, 0) * 60ms);
  transition-delay: var(--be-stagger-delay);
}

/* ---------------------------------------------------------------------
 * 15. PREFERS-REDUCED-MOTION
 * Tüm dekoratif hareketi kapat; sadece işlevsel state geçişleri.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Sadece dekoratif efektleri kapat; state geçişleri korunur. */
  .be-reveal,
  .be-stagger > *,
  .be-words > span,
  .be-heading-decorative::after {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Buton parıltı ve pulse animasyonları kapat */
  .be-btn::before { display: none !important; }
  .be-btn--primary:hover { animation: none !important; }

  /* Kart yükselme/zoom kapat */
  .be-artwork-zoom:hover,
  .be-card-anim:hover,
  .be-lift:hover,
  .be-award-card:hover,
  .be-pub-card:hover,
  .be-post-card:hover,
  .be-award:hover {
    transform: none !important;
  }

  .be-marquee { animation: none !important; }
  .be-progress { display: none !important; }

  body { animation: none !important; }
}

/* Kullanıcı "motion: off" sınıfını manuel eklerse de aynı davranış */
html.be-reduce-motion *,
html.be-reduce-motion *::before,
html.be-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}