/*
 * Floortrim UK — tek hareket kaynağı.
 * Bu dosya easing/süre token'larının ve reveal CSS'inin TEK tanım yeridir;
 * başka yerde sabit değer yazılmaz. Referans: kardes projedeki motion.css.
 */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Asagidaki 3 token su an kullanilmiyor — kardes proje sozlesme paritesi icin bilinçli tutuluyor (bkz. tasarim-derinlestirme kapanisi, devir 7). */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 120ms;
  /* --dur-menu ILK gercek kullanicisi: nav.js/header dropdown+drawer gecisi
     (bkz. components/01-base-shell.css .ft-site-header__nav, nav-sikilastirma gorevi). */
  --dur-menu: 200ms;
  --dur-sheet: 280ms;
  /* 700ms -> 550ms (5 Agu 2026 ana sayfa modernizasyonu): improve-animations
     denetimi 700ms'i butce ustu/yuzer buldu; 550ms ayni yumusakligi keskin bitirir. */
  --dur-reveal: 550ms;
}

/* Capa linklerinde yumusak kaydirma (reduced-motion'da kapatilir, asagida). */
html {
  scroll-behavior: smooth;
}

/* Duzeltme (final inceleme, I-2): gizleme kurali yalniz html.js'e (functions.php'nin
   wp_head oncelik 0'da senkron bastigi sinif) daralttik -> JS calismiyorsa/kapaliysa
   icerik varsayilan olarak GORUNUR kalir, kalici opacity:0 riski biter.
   Ozguleme notu: html.js [data-ft-reveal] (0,2,1) cikarsallik olarak [data-ft-reveal].is-revealed
   (0,2,0)'dan DAHA ozgul -> is-revealed eklense bile opacity:0 kazanirdi (dogrulandi:
   canli olcumde is-revealed sinifi vardi ama computed opacity hala 0'di). is-revealed
   ve reduced-motion kurallarina da ayni html.js on-eki eklenerek ozgulluk esitlendi/
   asildi, boylece kazanma sirasi dogru kalir. */
html.js [data-ft-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

html.js [data-ft-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Hero ici kademeli giris ---
   Hero icerigi gorunur olunca (.is-revealed) cocuklar kisa gecikmelerle
   belirir. Stagger dekoratiftir, etkilesimi bloklamaz; 30-80ms adim kurali. */
html.js .ft-hero--visual .ft-hero__inner > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

html.js .ft-hero--visual .ft-hero__inner.is-revealed > * {
  opacity: 1;
  transform: none;
}

html.js .ft-hero--visual .ft-hero__inner.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
html.js .ft-hero--visual .ft-hero__inner.is-revealed > *:nth-child(2) { transition-delay: 60ms; }
html.js .ft-hero--visual .ft-hero__inner.is-revealed > *:nth-child(3) { transition-delay: 120ms; }
html.js .ft-hero--visual .ft-hero__inner.is-revealed > *:nth-child(n+4) { transition-delay: 180ms; }

/* floortrim.uk senkronu (24 Eyl 2026): SHOP BY PRODUCT kartlari ve Why listesi
   kapsayici gorununce 60ms adimla girer (ayni pazarlama katmani kurali). */
html.js .ft-shop-product__grid .ft-pcard,
html.js .ft-why__list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

html.js [data-ft-reveal].is-revealed .ft-pcard,
html.js [data-ft-reveal].is-revealed .ft-why__list li {
  opacity: 1;
  transform: none;
}

html.js [data-ft-reveal].is-revealed .ft-pcard:nth-child(2),
html.js [data-ft-reveal].is-revealed .ft-why__list li:nth-child(2) { transition-delay: 60ms; }
html.js [data-ft-reveal].is-revealed .ft-pcard:nth-child(3),
html.js [data-ft-reveal].is-revealed .ft-why__list li:nth-child(3) { transition-delay: 120ms; }
html.js [data-ft-reveal].is-revealed .ft-why__list li:nth-child(4) { transition-delay: 180ms; }

/* Hero gorseli tek seferlik "settle": sayfa acilisinda 1.05 -> 1 (yalniz transform).
   Pazarlama katmani istisnasi — UI etkilesimi degildir, sik tekrar etmez. */
@keyframes ft-hero-settle {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

html.js .ft-hero--visual .ft-hero__bg {
  animation: ft-hero-settle 1400ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  html.js [data-ft-reveal],
  html.js .ft-hero--visual .ft-hero__inner > *,
  html.js .ft-shop-product__grid .ft-pcard,
  html.js .ft-why__list li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .ft-hero--visual .ft-hero__bg {
    animation: none;
  }
}