/* ============================================================================
 * E-4 DİJİTAL — KAYDIRMAYA BAĞLI HAREKET (SCROLL MOTION)
 * ----------------------------------------------------------------------------
 * Dosya   : assets/css/motion.css
 * Bağımlı : site.css'teki renk / yumuşatma belirteçleri
 *
 * TASARIM İLKESİ — "fark edilir ama yormaz"
 *   Referans alınan sitelerde efektler güçlüdür: bölüm sabitlenir (pin), sayfa
 *   3 ekran boyu kaydırılırken video maskesi büyür, metin kelime kelime yanar.
 *   Gösterişlidir ama okumayı yavaşlatır ve kaydırma hissini ele geçirir.
 *
 *   Burada bilinçli olarak daha ölçülü bir yol izlendi:
 *     - Sayfa AKIŞI ASLA ele geçirilmez: pin yok, scroll-jacking yok,
 *       kaydırma hızı değiştirilmez. Kullanıcı ne kadar kaydırırsa o kadar iner.
 *     - Hareket MİKTARI küçük tutulur (ölçek %4, kayma 18px).
 *     - Efektler ERKEN tamamlanır: içerik ekranın ortasına geldiğinde animasyon
 *       bitmiştir; okurken hâlâ oynayan bir şey kalmaz.
 *     - Metin hiçbir anda okunamaz hâle gelmez (bkz. --e4-off kontrastı).
 *
 * TEKNİK
 *   Harici kütüphane (GSAP/ScrollTrigger vb.) KULLANILMAZ — projenin "sıfır
 *   üçüncü taraf" ilkesi ve CSP'deki script-src 'self' korunur.
 *   Modern tarayıcılarda tamamen CSS scroll-driven animation kullanılır
 *   (animation-timeline: view()); bu, ana iş parçacığını hiç meşgul etmez,
 *   kaydırma takılmaz. Desteklemeyen tarayıcılarda metin efekti için
 *   site.js küçük bir rAF yedeği devreye alır (html.e4-motion-js).
 *
 * ERİŞİLEBİLİRLİK
 *   prefers-reduced-motion: reduce  -> tüm bu dosya devre dışı kalır,
 *   içerik son hâliyle (tam görünür, tam kontrast) gösterilir.
 *
 * Bölümler: 1 Değişkenler  2 Metin aydınlanması  3 Büyüme  4 Yön varyantları
 * ========================================================================== */

/* ===== 1. Değişkenler ===== */

/*
 * --e4-lit, gradyanın dönüm noktasıdır (0% = hiç yanmamış, 100% = tamamen yanmış).
 * @property ile kaydedilmesi ŞART: aksi hâlde tarayıcı özel değişkeni "metin"
 * sayar ve yüzdeler arasında yumuşak geçiş yapmaz, animasyon zıplar.
 */
@property --e4-lit {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

:root{
  /* Aydınlanma hızı: küçük değer = daha keskin sınır, büyük = daha yumuşak geçiş */
  --e4-feather: 38%;
}


/* ===== 2. Metin aydınlanması (satır satır) =====
 *
 * Kaydırdıkça paragraf yukarıdan aşağıya "yanar". Kelime kelime değil SATIR
 * satır ilerler; okuma yönüyle aynı olduğu için göz takip etmek zorunda kalmaz.
 *
 * Yöntem: tek bir dikey gradyan + background-clip:text. Metni kelimelere bölüp
 * onlarca <span> üretmeye gerek yok — tek elemanda tek özellik değişir, bu
 * yüzden çok ucuzdur.
 *
 * --e4-on  : yanmış (nihai) renk — elemanın normal tasarım rengi olmalı
 * --e4-off : henüz yanmamış renk — okunabilirliği korumak için --text-mute'tan
 *            daha soluk bir değer KULLANILMAZ.
 */
[data-text-reveal]{
  --e4-on: var(--text);
  --e4-off: var(--text-mute);
}

/* Lead paragrafları zaten --text-dim ile tasarlandı; efekt bittiğinde
   kendi özgün rengine dönmeli, daha parlak bir yerde kalmamalı. */
.hero-lead[data-text-reveal],
.section-lead[data-text-reveal],
.article-lead[data-text-reveal],
.page-hero-lead[data-text-reveal]{
  --e4-on: var(--text-dim);
}

@media (prefers-reduced-motion: no-preference){
  @supports ((background-clip: text) or (-webkit-background-clip: text)) and (animation-timeline: view()){
    [data-text-reveal]{
      background-image:linear-gradient(
        180deg,
        var(--e4-on) var(--e4-lit),
        var(--e4-off) calc(var(--e4-lit) + var(--e4-feather))
      );
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      -webkit-text-fill-color:transparent;

      animation:e4-text-lit linear both;
      animation-timeline:view();
      /* Ekrana girerken başlar, ortasına varmadan biter */
      animation-range:entry 18% cover 48%;
    }
  }

  /* Scroll-driven animation desteklemeyen tarayıcılar için JS yedeği.
     Sınıfı site.js ekler; yalnızca gerçekten gerekliyse eklenir. */
  .e4-motion-js [data-text-reveal]{
    background-image:linear-gradient(
      180deg,
      var(--e4-on) var(--e4-lit),
      var(--e4-off) calc(var(--e4-lit) + var(--e4-feather))
    );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

@keyframes e4-text-lit{
  from{ --e4-lit:0%; }
  /* 100%'ü aşar: son satır da tam yansın, tepede soluk kalıntı kalmasın */
  to{ --e4-lit:112%; }
}

/* Metin seçildiğinde gradyan yüzünden görünmez olmasın */
[data-text-reveal]::selection{
  -webkit-text-fill-color:var(--text);
  color:var(--text);
  background:var(--brand-a45);
}
[data-text-reveal] ::selection{
  -webkit-text-fill-color:var(--text);
  color:var(--text);
  background:var(--brand-a45);
}


/* ===== 3. Büyüme (kapak görselleri) =====
 *
 * Görsel ekrana girerken %4 büyür. Referans sitedeki gibi ekranı kaplayan bir
 * büyüme DEĞİL; sadece "canlandı" hissi veren küçük bir hareket.
 *
 * Yalnızca büyük kapak görsellerine uygulanır. Kartlara uygulanmaz: kartlarda
 * zaten hover'da büyüme var ve CSS animasyonu hover transform'unu ezerdi.
 */
[data-grow]{
  display:block;
  /* Büyüyen görsel kabın dışına taşmasın */
  overflow:hidden;
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    [data-grow] > img,
    [data-grow] > picture > img,
    [data-grow] > picture{
      animation:e4-grow linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 45%;
      transform-origin:center;
      will-change:transform;
    }
  }
}

@keyframes e4-grow{
  from{ transform:scale(.96); }
  to{ transform:scale(1); }
}


/* ===== 4. Yön varyantları (mevcut data-reveal sistemine ek) =====
 *
 * site.css'teki [data-reveal] yukarıdan aşağıya kayar. Bazı yerleşimlerde
 * yandan gelmek ya da yalnızca yumuşakça belirmek daha doğaldır.
 * Davranış (IntersectionObserver + .is-revealed) aynıdır; yalnızca başlangıç
 * dönüşümü değişir.
 */
@media (prefers-reduced-motion: no-preference){
  [data-reveal="left"]{ transform:translate3d(-22px, 0, 0); }
  [data-reveal="right"]{ transform:translate3d(22px, 0, 0); }
  [data-reveal="zoom"]{ transform:scale(.965); }
  [data-reveal="fade"]{ transform:none; }

  [data-reveal="left"].is-revealed,
  [data-reveal="right"].is-revealed,
  [data-reveal="zoom"].is-revealed,
  [data-reveal="fade"].is-revealed{
    transform:none;
  }
}


/* ===== Hareket kısıtlaması: her şeyi kapat ===== */
@media (prefers-reduced-motion: reduce){
  [data-text-reveal]{
    background-image:none !important;
    color:var(--e4-on) !important;
    -webkit-text-fill-color:currentColor !important;
  }
  [data-grow] > img,
  [data-grow] > picture,
  [data-grow] > picture > img{
    animation:none !important;
    transform:none !important;
  }
}

/* Baskıda hareket ve gradyan metin anlamsızdır */
@media print{
  [data-text-reveal]{
    background-image:none !important;
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
  }
  [data-grow] > img,
  [data-grow] > picture,
  [data-grow] > picture > img{
    animation:none !important;
    transform:none !important;
  }
}