/* =============================================================================
   ANIMATIONS — Scroll reveal, mikro etkileşimler, parallax
   Tüm hareketler prefers-reduced-motion tercihine saygı gösterir (base.css).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Scroll reveal
   JS öğeye [data-reveal] ekler, görünür olunca .is-in sınıfı verilir.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Yön varyantları */
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="zoom"]  { transform: scale(0.96); }

/* Gecikmeler — liste elemanlarını kademeli açmak için */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

/* JS devre dışıysa içerik gizli kalmasın */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* -----------------------------------------------------------------------------
   2. Maskeli satır açılışı — büyük başlıklarda kullanılır
   Her satır kendi kutusundan yukarı doğru kayarak girer.
   -------------------------------------------------------------------------- */
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease-out);
}
.is-in .reveal-mask > span,
.reveal-mask.is-in > span { transform: translateY(0); }

.reveal-mask:nth-child(1) > span { transition-delay: 0.05s; }
.reveal-mask:nth-child(2) > span { transition-delay: 0.16s; }
.reveal-mask:nth-child(3) > span { transition-delay: 0.27s; }

/* -----------------------------------------------------------------------------
   3. Parallax
   JS, --parallax özel özelliğini scroll ile günceller.
   -------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }
[data-parallax] > img,
[data-parallax] > picture > img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14);
  transition: transform 0.06s linear;
}

/* -----------------------------------------------------------------------------
   4. (Kullanılmıyor) Kayan yazı şeridi
   Kumaş şeridi dikey rotatöre çevrildi; kurallar home.css > .fabric-strip
   altında tanımlıdır.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   5. Görsel açılış maskesi — kartlarda ve hero'da
   Görselin üstündeki katman soldan sağa çekilir.
   -------------------------------------------------------------------------- */
.img-mask { position: relative; overflow: hidden; }
.img-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform-origin: right;
  transition: transform 1.15s var(--ease-out);
}
.img-mask.is-in::after { transform: scaleX(0); }

/* -----------------------------------------------------------------------------
   6. Sayaç
   Sayı yükselirken genişlik zıplamasın diye tabular rakam kullanılır.
   -------------------------------------------------------------------------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   7. Hero giriş animasyonu
   Sayfa yüklendiğinde body'ye .is-ready eklenir.
   -------------------------------------------------------------------------- */
.hero__anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.is-ready .hero__anim { opacity: 1; transform: none; }
.is-ready .hero__anim--d1 { transition-delay: 0.15s; }
.is-ready .hero__anim--d2 { transition-delay: 0.3s; }
.is-ready .hero__anim--d3 { transition-delay: 0.45s; }
.is-ready .hero__anim--d4 { transition-delay: 0.6s; }

/* -----------------------------------------------------------------------------
   8. Aşağı kaydır göstergesi
   -------------------------------------------------------------------------- */
.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.scroll-hint__line {
  position: relative;
  width: 1px; height: 54px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
/* İnce bir ışık çizgisi sürekli aşağı iner */
.scroll-hint__line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--rose);
  animation: scroll-hint-run 2.4s var(--ease) infinite;
}
@keyframes scroll-hint-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* -----------------------------------------------------------------------------
   9. Görsel hover büyütme yardımcı sınıfı
   -------------------------------------------------------------------------- */
.zoom-host { overflow: hidden; }
.zoom-host img { transition: transform 1.1s var(--ease-out); }
.zoom-host:hover img { transform: scale(1.055); }

/* -----------------------------------------------------------------------------
   10. Yükleme iskeleti (form gönderimi vb.)
   -------------------------------------------------------------------------- */
.is-busy { position: relative; pointer-events: none; opacity: 0.6; }
.is-busy::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }