/*
 * AnimeRank — Performance Pack (ANI-30)
 * ─────────────────────────────────────
 * Global GPU compositor + containment + content-visibility kuralları.
 * Mevcut animasyon/component CSS'lerine dokunmaz; ek katman olarak yüklenir.
 *
 * Yükleme sırası (HTML <head>): foundation → layouts → components → animations
 *                              → utilities → reactbits → ar-perf (en SON)
 *
 * Niye en son? `contain`/`content-visibility` override edilmesin diye.
 */

/* ── 1) Animasyon güvenliği: prefers-reduced-motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 2) Compositor-only animasyon ipucu ────────────────────────────── */
/*
 * will-change kalıcı kullanılmaz — sadece animasyon başlarken JS ile
 * eklenir (ör. `el.style.willChange = 'transform'` → `transitionend`'de
 * `auto`'ya geri çek). Aşağıdaki kurallar yalnız hover/aktif anında
 * uygulanır — GPU layer kalıcı tutmaz.
 */
/* Ana sayfa rail: sabit translateZ(0) 3D tilt ile çakışır — card-3d yönetir */
.anime-card:not(main .ar-rail .anime-card),
.ar-card,
[data-perf-tilt] {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.anime-card:not(main .ar-rail .anime-card):hover,
.ar-card:hover,
[data-perf-tilt]:hover {
  will-change: transform, filter;
}
main .ar-rail .anime-card {
  backface-visibility: hidden;
}

/* ── 3) Containment — büyük grid/list container'lar ────────────────── */
/*
 * `contain: layout style paint` → tarayıcı bu container dışındaki layout
 * etkileşimini hesaplamaz. Scroll sırasında reflow zinciri kırılır.
 * `size` kasıtlı eklenmedi (intrinsic-size her grid için farklı).
 */
.anime-grid,
.anime-list,
.search-results,
.discover-grid,
.ar-grid,
.ar-rail-grid,
.catalog-grid,
[data-virtual-scroll],
.vs-host {
  contain: layout style paint;
}

/* ── 4) Kart bazında izolasyon ──────────────────────────────────────── */
.anime-card:not(main .ar-rail .anime-card),
.ar-card,
.catalog-card,
.discover-card {
  contain: layout style;
}
main .ar-rail .anime-card {
  contain: none;
  overflow: visible;
  transform-style: preserve-3d;
}

/* ── 5) content-visibility — off-screen kartları render etme ────────── */
/*
 * 30K+ DOM card senaryosunda kritik. VirtualScroll varsa redundant ama
 * non-virtual sayfalarda (homepage rail, profile, watchlist) etkili.
 * `contain-intrinsic-size` placeholder yüksekliği — kart boyutuna yakın
 * olmalı, aksi halde scroll-jump (anchor reposition) olur.
 */
@supports (content-visibility: auto) {
  .anime-card[data-cv],
  .catalog-card[data-cv],
  .discover-card[data-cv] {
    content-visibility: auto;
    contain-intrinsic-size: 220px 320px; /* default kart boyutu */
  }
}

/* ── 6) Off-screen images: native lazy + decoding hint ──────────────── */
img[data-src],
img[loading="lazy"] {
  /* Yüklenirken layout shift'i sıfırla: aspect-ratio kullanılmıyorsa */
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
}
img.lazy-loaded {
  background: none;
  transition: opacity 200ms ease;
}
img.lazy-failed {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* ── 7) Scroll container'lar: smooth + overscroll-contain ───────────── */
.vs-host,
.anime-grid,
.discover-grid,
.catalog-grid {
  /* Trackpad/touch scroll'da rubber-band'in body'ye sıçramasını engelle */
  overscroll-behavior: contain;
  /* iOS Safari momentum */
  -webkit-overflow-scrolling: touch;
}

/* ── 8) Modal/drawer GPU layer ──────────────────────────────────────── */
.modal,
.modal-backdrop,
.ar-modal,
.ar-modal-backdrop,
.ar-drawer,
.ar-dropdown-menu,
.ar-toast {
  will-change: transform, opacity;
  transform: translateZ(0); /* compositor layer'a al */
}

/* ── 9) Video container: compositor + isolation ─────────────────────── */
.ar-player-pro,
.video-container,
.player-wrap {
  contain: layout style paint;
  isolation: isolate;
  transform: translateZ(0);
}

/* ── 10) Sticky nav/header: GPU layer ───────────────────────────────── */
header.ar-navbar,
.ar-navbar,
nav.ar-pill-nav-container,
.ar-scroll-progress {
  will-change: transform;
  transform: translateZ(0);
}

/* ── 11) Font rendering — büyük metin blokları ─────────────────────── */
.synopsis,
.discussion-body,
.review-body,
.comment-body {
  text-rendering: optimizeSpeed; /* 1000+ kart üzerinde optimizeLegibility yavaş */
}

/* ── 11.5) Card 3D — mouse tracking ekstra kurallar (ANI-30) ────────── */
/*
 * card-3d.js inline style ile transform/perspective set ediyor. CSS burada
 * sadece glare overflow, mobil guard ve transition smoothing yapıyor.
 *
 * .anime-card zaten `perspective:800; transform-style:preserve-3d;
 * isolation:isolate; will-change:transform` taşıyor (public/css/anime-card.css).
 * Bu bloğun tek görevi: 3D efekti dokunmatik cihazlarda kapatmak +
 * glare element'in dışarı taşmasını engellemek.
 */
/* Rail kartları: 3D scale dışarı taşabilsin (home-fixes ile uyumlu) */
.anime-card:not(main .ar-rail .anime-card),
.ar-card,
[data-card-3d] {
  overflow: hidden;
}
main .ar-rail .anime-card {
  overflow: visible;
}
main .ar-rail .anime-card .anime-card__inner {
  overflow: hidden;
  border-radius: 12px;
}

/* Glare layer base — card-3d.js inline tanımları override edebilir */
.ar-card-glare {
  pointer-events: none;
  will-change: opacity, background;
}

/* Yalnız gerçek touch (hover yok). (pointer: coarse) Windows'ta fareyle de
   eşleşip 3D'yi öldürüyordu — kaldırıldı. */
@media (hover: none) {
  .anime-card:not(main .ar-rail .anime-card),
  .ar-card,
  [data-card-3d] {
    transform: none !important;
  }
  .ar-card-glare { display: none !important; }
}

/* prefers-reduced-motion: card-3d.js zaten init etmiyor ama defansif. */
@media (prefers-reduced-motion: reduce) {
  .ar-card-glare { display: none !important; }
}

/* ── 12) Print: GPU hint'leri kapat ─────────────────────────────────── */
@media print {
  *, *::before, *::after {
    will-change: auto !important;
    transform: none !important;
    contain: none !important;
    content-visibility: visible !important;
  }
}