/* KREVA STUDIO — Hareket v2
   Her bölüm kendi girişiyle gelir:
   Koleksiyon başlığı kelime kelime · kartlar sağdan kayar
   Kategoriler başlığı odaktan netleşir · çizimler kendini çizer
   Öne çıkan başlık soldan silinerek açılır · görsel perde gibi ortadan açılır · metin basamaklı gelir
   Süreç başlığı harf harf · adımlar sırayla bir zaman çizgisi gibi dolar
   Küçük etiketler daktilo gibi yazılır */


@media (prefers-reduced-motion: no-preference) {

  /* Eski "bulanık yükselme" ve kutu kırpması bu öğelerden kalkar */
  html.fx .reveal { filter: none; }
  html.fx .reveal .ph { clip-path: none !important; }
  html.fx .reveal .ph > svg { scale: 1 !important; }

  /* 1 Çizimler kendini çizer */
  html.fx .ph > svg [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .15s + var(--k, 0) * 110ms); }
  html.fx .reveal.in .ph > svg [data-draw] { stroke-dashoffset: 0; }
  /* önce çizgiler, sonra yüzeyler dolar (arkadaki çizgiler kapanır) */
  html.fx .ph > svg [data-occ] { fill-opacity: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0s) + .15s + var(--k, 0) * 110ms), fill-opacity .7s var(--ease-out) calc(var(--d, 0s) + 1.4s); }
  html.fx .reveal.in .ph > svg [data-occ] { fill-opacity: 1; }
  html.fx .ph > svg [data-shade] { opacity: 0 !important; transform: scaleX(.3); transform-box: fill-box; transform-origin: center; transition: opacity .9s var(--ease-out) calc(var(--d, 0s) + .9s), transform 1.3s var(--ease-out) calc(var(--d, 0s) + .9s); }
  html.fx .reveal.in .ph > svg [data-shade] { opacity: .22 !important; transform: none; }
  html.fx .ph > svg [data-fade] { opacity: 0 !important; transition: opacity .8s var(--ease-out) calc(var(--d, 0s) + 1.3s); }
  html.fx .reveal.in .ph > svg [data-fade] { opacity: .55 !important; }

  /* 1b Fotoğraflar: alttan yukarı açılan perde, fotoğraf içeride yerine oturur */
  html.fx .reveal .ph[data-photo] { clip-path: inset(100% 0 0 0 round var(--r)) !important; transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1) var(--d, 0s), transform .25s var(--ease) !important; }
  html.fx .reveal.in .ph[data-photo] { clip-path: inset(0 0 0 0 round var(--r)) !important; }
  html.fx .reveal .ph[data-photo] > img { scale: 1.18; transition: scale 1.8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), transform .7s var(--ease); }
  html.fx .reveal.in .ph[data-photo] > img { scale: 1; }

  /* 2 Koleksiyon şeridi: kartlar sağdan sırayla kayar */
  html.fx .rail-track .card.reveal { opacity: 0; transform: translateX(64px); transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
  html.fx .rail-track .card.reveal.in { opacity: 1; transform: none; }

  /* 3 Kategoriler: kutu yerinde, çizim çizilir, alt yazı sonra gelir */
  html.fx .cat.reveal { opacity: 1; transform: none; }
  html.fx .cat.reveal .cat-meta { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out) calc(var(--d, 0s) + .7s), transform .9s var(--ease-out) calc(var(--d, 0s) + .7s); }
  html.fx .cat.reveal.in .cat-meta { opacity: 1; transform: none; }

  /* 4 Öne çıkan: görsel perde gibi ortadan açılır, metin basamaklı gelir */
  html.fx .feature > a.reveal { opacity: 1; transform: none; }
  html.fx .feature > a.reveal .ph { clip-path: inset(0 50% 0 50% round var(--r)) !important; transition: clip-path 1.5s cubic-bezier(.77, 0, .18, 1), transform .25s var(--ease) !important; }
  html.fx .feature > a.reveal.in .ph { clip-path: inset(0 0 0 0 round var(--r)) !important; }
  html.fx .feature-spec.reveal { opacity: 1; transform: none; }
  html.fx .feature-spec.reveal > :not(.h2):not(.idx) { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease-out), transform 1s cubic-bezier(.16, 1, .3, 1); }
  html.fx .feature-spec.reveal.in > :not(.h2):not(.idx) { opacity: 1; transform: none; }
  html.fx .feature-spec.reveal.in > :nth-child(3) { transition-delay: .45s; }
  html.fx .feature-spec.reveal.in > :nth-child(4) { transition-delay: .6s; }
  html.fx .feature-spec.reveal.in > :nth-child(5) { transition-delay: .75s; }
  html.fx .feature-spec.reveal.in > :nth-child(6) { transition-delay: .9s; }

  /* 5 Süreç: adımlar zaman çizgisi gibi sırayla dolar */
  html.fx .steps li.reveal { opacity: 1; transform: none; }
  html.fx .steps li:nth-child(1) { --d: 0s !important; }
  html.fx .steps li:nth-child(2) { --d: .45s !important; }
  html.fx .steps li:nth-child(3) { --d: .9s !important; }
  html.fx .steps li:nth-child(4) { --d: 1.35s !important; }
  html.fx .steps li.reveal > :not(.dot) { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out) calc(var(--d, 0s) + .5s), transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + .5s); }
  html.fx .steps li.reveal > h3 { transition-delay: calc(var(--d, 0s) + .6s); }
  html.fx .steps li.reveal > p { transition-delay: calc(var(--d, 0s) + .7s); }
  html.fx .steps li.reveal.in > :not(.dot) { opacity: 1; transform: none; }

  /* 6 Başlıklar: her bölümde farklı */
  html.fx [data-fx] .ln-in { transform: none !important; transition: none !important; }
  html.fx [data-fx] .w { display: inline-block; }

  /* kelime kelime, hafif dönerek */
  html.fx [data-fx="words"] .w { opacity: 0; transform: translateY(70%) rotate(5deg); transform-origin: 0 100%; transition: opacity .6s var(--ease-out) calc(var(--w) * 70ms), transform 1s cubic-bezier(.16, 1, .3, 1) calc(var(--w) * 70ms); }
  html.fx [data-fx="words"].in .w { opacity: 1; transform: none; }

  /* odaktan netleşerek */
  html.fx [data-fx="focus"] .w { opacity: 0; filter: blur(14px); transform: scale(1.12); transition: opacity 1s var(--ease-out) calc(var(--w) * 110ms), filter 1.2s var(--ease-out) calc(var(--w) * 110ms), transform 1.4s var(--ease-out) calc(var(--w) * 110ms); }
  html.fx [data-fx="focus"].in .w { opacity: 1; filter: none; transform: none; }

  /* soldan sağa silinerek */
  html.fx [data-fx="wipe"] { clip-path: inset(-.15em 100% -.25em 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); }
  html.fx [data-fx="wipe"].in { clip-path: inset(-.15em -.2em -.25em 0); }

  /* harf harf */
  html.fx [data-fx="chars"] .w { white-space: nowrap; }
  html.fx [data-fx="chars"] .c { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .4s ease-out calc(var(--c) * 28ms), transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--c) * 28ms); }
  html.fx [data-fx="chars"].in .c { opacity: 1; transform: none; }

  /* 7 Küçük etiketler daktilo gibi yazılır */
  html.fx [data-type] { width: fit-content; clip-path: inset(0 100% 0 0); transition: clip-path calc(var(--n) * 45ms) steps(var(--n), end); }
  html.fx [data-type].in { clip-path: inset(0 -4px 0 0); }
}