/* =========================================
   SCROLL & GİRİŞ ANİMASYONLARI
   Yalnızca opacity / transform / clip-path kullanılır.
   .anim-ready sınıfı animations.js tarafından eklenir;
   JS çalışmazsa veya hareket azaltılmışsa hiçbir içerik gizlenmez.
   ========================================= */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

[id] {
  scroll-margin-top: 80px;
}

/* ---- Görünme (reveal) ---- */
/* Yalnızca opacity + transform (geçiş GPU'da çalışır). clip-path animasyonu her karede
   yeniden boyama yaptığı için kullanılmaz.
   Gizli başlangıç durumları bilerek 2B'dir: translate3d, henüz görünmemiş her öğeyi ve
   başlıklardaki her kelimeyi sayfa açılır açılmaz ayrı bir GPU katmanına çıkarıyordu
   (ana sayfada ~40 fazladan katman; kaydırırken her kare bunlar da birleştiriliyordu).
   Geçiş başlayınca tarayıcı öğeyi zaten kendi katmanına alır, bitince geri birleştirir. */
.anim-ready [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s var(--ease-out) var(--d, 0ms),
    transform 0.8s var(--ease-out) var(--d, 0ms);
}

.anim-ready [data-reveal="up"]    { transform: translateY(24px); }
.anim-ready [data-reveal="lift"]  { transform: translateY(28px); transition-duration: 0.55s, 0.75s; }
.anim-ready [data-reveal="card"]  { transform: translateY(32px) scale(0.98); }
.anim-ready [data-reveal="left"]  { transform: translateX(-48px); }
.anim-ready [data-reveal="right"] { transform: translateX(48px); }
.anim-ready [data-reveal="wipe"]  { transform: translateY(36px) scale(0.985); transition-duration: 0.7s, 0.9s; }

.anim-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Başlıklar: kelime kelime yükselir ---- */
.anim-ready [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.anim-ready [data-split] .wi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.75s var(--ease-out) calc(var(--d, 0ms) + var(--i, 0) * 40ms);
}

.anim-ready [data-split].is-in .wi {
  transform: none;
}

/* ---- Hero giriş animasyonları (saf CSS, JS gerekmez) ---- */
@keyframes heroRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.js-enabled .pro-badge,
.js-enabled .pro-title,
.js-enabled .pro-desc,
.js-enabled .pro-actions,
.js-enabled .subpage-hero .hero-nav-link,
.js-enabled .subpage-hero .hero-nav-sep,
.js-enabled .subpage-hero-title {
  animation: heroRise 0.8s var(--ease-out) both;
  animation-delay: calc(var(--h, 0) * 90ms + 40ms);
}

.js-enabled .pro-title { --h: 1; }
.js-enabled .pro-desc { --h: 2; }
.js-enabled .pro-actions { --h: 3; }
.js-enabled .subpage-hero .hero-nav-sep { --h: 1; }
.js-enabled .subpage-hero-title { --h: 2; }

.js-enabled .pro-image-side {
  animation: heroFade 0.9s ease-out both;
}

/* ---- Kaydırma ilerleme çubuğu ---- */
/* Kendi katmanında çizilir (will-change): ölçeği her karede değişse de sayfa yeniden
   boyanıp katmanlara ayrılmaz. Önceden bu, kaydırma boyunca her karede tüm sayfanın
   yeniden katmanlanmasına (Layerize) yol açıyordu. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1100;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* Destekleyen tarayıcılarda çubuk kaydırmaya bağlı CSS animasyonuyla, JS olmadan ilerler
   (animations.js bu durumda kaydırmayı dinlemez). Süre kaydırma aralığına oranlanır. */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollProgress 1ms linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes scrollProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Kaydırma efektlerinde kullanılan görseller kendi katmanında çizilir.
   Bu efektler yalnızca masaüstünde çalışır (animations.js → isDesktop); mobilde gereksiz
   GPU katmanı/bellek harcanmasın diye kural masaüstüyle sınırlı. */
@media (min-width: 993px) {
  .ed-img-wrap img,
  .draw-frame img,
  .pro-image-wrapper img {
    will-change: transform;
  }
}

/* ---- "Hareketi azalt" tercihi (işletim sistemi): kayma/ölçek yok, sadece yumuşak belirme ---- */
.anim-reduced [data-reveal] {
  transform: none !important;
  transition: opacity 0.5s ease var(--d, 0ms) !important;
}

.anim-reduced [data-split] .wi {
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .pro-badge,
  .js-enabled .pro-title,
  .js-enabled .pro-desc,
  .js-enabled .pro-actions,
  .js-enabled .subpage-hero .hero-nav-link,
  .js-enabled .subpage-hero .hero-nav-sep,
  .js-enabled .subpage-hero-title {
    animation-name: heroFade;
    animation-duration: 0.5s;
  }
}