/* Sayfa geçişleri: "sabit çerçeve".
   Üst bar, sol menü ve bandın zemini yerinde durur; yalnız içerik değişir —
   bandın başlığı ile menünün yanındaki sütunlar kısa bir solma ve hafif kaymayla.
   Portal içi rotalar View Transitions ile (header/sidebar adlandırılmış, sabit),
   portal ↔ wiki gibi ayrı belgeler JS ile aynı hareketi oynar: çıkan sayfa
   içeriği söndürür (useRouteTransition / wiki theme-boot.js), gelen sayfa
   .is-arriving ile içeriği getirir. Yalnız "Hareketleri durdur" kapatır. */

@keyframes sunshine-content-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes sunshine-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* In-app (same document): the frame keeps its place, only the content moves. */
.site-header { view-transition-name: site-header; }
.site-sidebar { view-transition-name: site-sidebar; }
.page-hero .masthead { view-transition-name: page-band; }

::view-transition-group(site-header),
::view-transition-group(site-sidebar),
::view-transition-group(page-band) {
  animation: none;
}

::view-transition-old(site-header),
::view-transition-old(site-sidebar) {
  display: none;
}

::view-transition-new(site-header),
::view-transition-new(site-sidebar) {
  animation: none;
}

/* The band's background is the same on every page; its title crossfades. */
::view-transition-old(page-band) {
  animation: sunshine-content-out 140ms ease both;
}

::view-transition-new(page-band) {
  animation: sunshine-content-in 260ms cubic-bezier(.22, .8, .24, 1) both;
}

::view-transition-old(root) {
  animation: sunshine-content-out 140ms ease both;
}

::view-transition-new(root) {
  animation: sunshine-content-in 260ms cubic-bezier(.22, .8, .24, 1) both;
}

/* Across documents (portal ↔ wiki): the arriving page brings in its content only. */
html.is-arriving .page-hero .hero,
html.is-arriving .site-sidebar ~ * {
  animation: sunshine-content-in 260ms cubic-bezier(.22, .8, .24, 1) both;
}

/* Content arrives as one piece: blocks already in view skip their own staggered
   reveal while the entrance plays. */
html.is-arriving .reveal {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.route-horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  height: 40vh;
  pointer-events: none;
  opacity: 0;
  transform: translateY(42%);
  background: linear-gradient(to top, #f5e2ba00 0%, #f5e2bacc 40%, #99dcf966 72%, transparent 100%);
}

[data-theme="dark"] .route-horizon {
  background: linear-gradient(to top, #0b071800 0%, #6f7dff3d 42%, #b8c8ff2e 74%, transparent 100%);
}

.app-shell.is-route-changing .route-horizon {
  animation: none;
}

/* Hareketler varsayılan olarak açıktır; yalnız kullanıcı "Hareketleri durdur"
   dediğinde (.motion-disabled) geçişler ve gökcisimleri animasyonu kapanır.
   View-transition katmanları JS tarafından yalnız hareket açıkken başlatılır. */
.app-shell.motion-disabled .route-horizon {
  display: none;
}

.app-shell.motion-disabled .page-hero .hero .hero-logo,
.app-shell.motion-disabled .page-hero .sun-bubble::after,
.app-shell.motion-disabled .page-hero .masthead::after,
.app-shell.motion-disabled .site-header::after {
  transition: none;
}