/* ==========================================================================
   Hareket — ölçülü, sıçramasız.
   Reveal: Y 12px → 0 · 600ms · cubic-bezier(.2,.7,.1,1) · gövde başlıktan 80ms sonra.
   Tüm başlangıç durumları yalnızca JS çalışıyorsa (.js) ve kullanıcı hareket
   azaltma istemiyorsa uygulanır; JS yoksa içerik her zaman görünür.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
      opacity var(--reveal-duration) var(--ease),
      transform var(--reveal-duration) var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  }

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

  /* Görsel reveal: hafif kırpma açılışı */
  .js [data-reveal="image"] {
    transform: none;
    clip-path: inset(0 0 8% 0);
    transition:
      opacity var(--reveal-duration) var(--ease),
      clip-path 900ms var(--ease);
  }

  .js [data-reveal="image"].is-in {
    clip-path: inset(0 0 0 0);
  }

  /* Kesim çizimi: parçalar soldan sağa kesilir, fire en son belirir */
  .js [data-cut] .cut-piece {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js [data-cut] .cut-fire {
    opacity: 0;
    transition: opacity 400ms var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms + 300ms);
  }

  .js [data-cut].is-cut .cut-piece {
    transform: none;
  }

  .js [data-cut].is-cut .cut-fire {
    opacity: 1;
  }

  /* Levha (2D) parçaları: yerine oturur */
  .js [data-cut] .sheet-piece {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 500ms var(--ease), transform 600ms var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js [data-cut].is-cut .sheet-piece {
    opacity: 1;
    transform: none;
  }

  /* Ekran parallax (yalnızca büyük screenshot'lar; metin sabit kalır) */
  [data-parallax] {
    will-change: transform;
  }
}

/* Emniyet: JS 3 sn içinde hazır olmazsa (yavaş ağ, engellenmiş script) içerik
   animasyonsuz görünür hale gelir. Bkz. <head> içindeki satır içi script. */
.no-motion [data-reveal],
.no-motion [data-cut] .cut-piece,
.no-motion [data-cut] .cut-fire,
.no-motion [data-cut] .sheet-piece {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* Gece geçişi: ana sayfada oyun bölümüne girerken zemin paper'dan night'a geçer */
.night-zone {
  transition:
    background-color var(--night-duration) var(--ease),
    color var(--night-duration) var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .js:not(.no-motion) .night-zone:not(.is-night) {
    --bg: var(--paper);
    --fg: var(--ink);
    --fg-3: var(--ink-3);
    --line: var(--rule);
  }
}

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