/* ===========================================================================
   Necmi Eren — Hareket katmanı
   Hepsi ilerlemeli geliştirme: desteklenmeyen tarayıcıda sayfa sade ama
   eksiksiz çalışır. prefers-reduced-motion her yerde saygı görür.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Sayfa geçişleri — View Transitions
   Çok sayfalı PHP sitesinde JS'siz gerçek geçiş. Chrome 126+/Safari 18.2+
   destekler; desteklemeyen tarayıcı normal gezinir, hiçbir şey bozulmaz.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.7,.25,1); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }

/* Menü ve logo geçiş boyunca yerinde kalsın — sayfa değil, içerik değişiyor hissi */
.nav      { view-transition-name: site-nav; }
.foot     { view-transition-name: site-foot; }
::view-transition-group(site-nav),
::view-transition-group(site-foot) { animation-duration: .42s; }

/* At kartından at detayına: görsel yerinden kalkıp büyüyerek yerleşir.
   view-transition-name her at için benzersiz (PHP üretir). */
.card-img img, .horse-img { will-change: transform; }

/* ---------------------------------------------------------------------------
   2 · Görünüme girme — scroll ile sürülen animasyon
   Destekleniyorsa kaydırma konumuna BAĞLI (JS yok, kare kaybı yok);
   desteklenmiyorsa main.js IntersectionObserver ile .in sınıfını basar.
   --------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0;
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .js .reveal.in { opacity: 1; }          /* IO yedeği çalıştıysa çakışmasın */
    .js .d1 { animation-range: entry 4%  cover 30%; }
    .js .d2 { animation-range: entry 0%  cover 34%; }
    .js .d3 { animation-range: entry -4% cover 38%; }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   3 · Satır satır açılan başlık
   Her satır kendi maskesinin altından yukarı kayar. Hero ve sayfa başlıkları.
   --------------------------------------------------------------------------- */
.lines { display: block; }
.lines .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.lines .ln > span {
  display: block;
  transform: translateY(105%);
  animation: line-up .95s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay: calc(var(--i, 0) * .085s + .12s);
}
@keyframes line-up { to { transform: none; } }

/* Alt metinler başlıktan sonra gelsin */
.stagger > * {
  opacity: 0;
  animation: fade-up .8s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay: calc(var(--i, 0) * .09s + .42s);
}
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   4 · Görsel açılışı — perde efekti
   Görsel maskesinin altından açılırken hafifçe geri ölçeklenir.
   --------------------------------------------------------------------------- */
.wipe { overflow: hidden; }
/* picture'a display verme: global `picture{display:contents}` kuralını ezer ve
   içindeki img'nin height:100%'i çözülemez hâle gelir. */
.wipe > img { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .wipe { clip-path: inset(0 0 100% 0); }
  .js .wipe.in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.19,1,.22,1); }
  .js .wipe > img, .js .wipe > picture img { transform: scale(1.12); }
  .js .wipe.in > img, .js .wipe.in > picture img {
    transform: none; transition: transform 1.4s cubic-bezier(.19,1,.22,1);
  }
}

/* Hero görselinde yavaş kayma — sinematik derinlik */
@media (prefers-reduced-motion: no-preference) {
  .hero-img, .hero-media picture img { animation: hero-drift 26s ease-in-out infinite alternate; }
}
@keyframes hero-drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.4%, -1.6%, 0); } }

/* ---------------------------------------------------------------------------
   5 · Okuma ilerlemesi — üstteki ince pirinç çizgi
   Scroll-driven destekliyse JS'siz; değilse main.js günceller.
   --------------------------------------------------------------------------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------------------------------------------------------------------------
   6 · Sponsor şeridi — sonsuz kayan logo bandı
   --------------------------------------------------------------------------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 42s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   7 · Bağlantı ve buton mikro-etkileşimleri
   --------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: translateY(101%);
  transition: transform .42s cubic-bezier(.19,1,.22,1);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn-light:hover, .btn-dark:hover { color: #0B1F28; }

/* Kart üzerine gelince başlık pirinç çizgiyle altını çizer */
.card h3 { position: relative; display: inline-block; }
.card h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.19,1,.22,1);
}
.card:hover h3::after, .card:focus-visible h3::after { transform: scaleX(1); }

/* Yarış satırı: fareyle gelince tarih pirinçleşir, satır hafifçe kayar */
.crow { transition: transform .4s cubic-bezier(.19,1,.22,1); }
.crows .crow:hover { transform: translateX(6px); }

/* ---------------------------------------------------------------------------
   8 · Sayfa başına dön
   --------------------------------------------------------------------------- */
.totop {
  position: fixed; right: clamp(16px, 2.5vw, 30px); bottom: clamp(16px, 2.5vw, 30px); z-index: 45;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--on-paper); font-size: 15px; line-height: 1;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s, transform .3s, background .25s, color .25s, border-color .25s;
}
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--accent); border-color: var(--accent); color: #0B1F28; }

/* ---------------------------------------------------------------------------
   9 · Rakamlar — karakter karakter yerine oturur
   "2026" gibi bir YIL'ı sıfırdan saymak arıza gibi görünüyordu; onun yerine
   her karakter kendi maskesinin altından sırayla yükseliyor. Her değerde çalışır:
   yıl, "1.", "4×" — hepsinde doğru okunur.
   --------------------------------------------------------------------------- */
.stat b { font-variant-numeric: tabular-nums; }
.chars { display: inline-flex; line-height: inherit; }
.chars .ch { display: inline-block; overflow: hidden; line-height: inherit;
             font: inherit; letter-spacing: inherit; color: inherit; padding-bottom: .06em; }
.chars .ch > span { display: block; font: inherit; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .js .chars .ch > span {
    transform: translateY(105%);
    animation: line-up .8s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(var(--i, 0) * .06s);
  }
  @supports (animation-timeline: view()) {
    .js .chars .ch > span {
      animation-timeline: view();
      animation-range: entry 10% cover 22%;
      animation-duration: 1ms;              /* zamanlamayı scroll sürsün */
      animation-fill-mode: both;
    }
  }
}

/* --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lines .ln > span { transform: none; animation: none; }
  .stagger > * { opacity: 1; animation: none; }
  .js .wipe { clip-path: none; }
  .js .wipe > img, .js .wipe > picture img { transform: none; }
  .hero-img, .hero-media picture img { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}