/* ==========================================================================
   Sayfalar arası geçiş — Deniz'in beğendiği efekt, olduğu gibi korundu.
   1. Tıklama: çapraz iris-bakır ışık süpürür, arkasından gece perdesi dolar,
      sol altta gidilen sayfanın adı belirir.
   2. Gidiş: eski sayfa küçülüp bulanır, yeni sayfa tıklanan noktadan daire açılır.
   3. Varış: ortadan ışık açılır, sayfa 24px yükselerek yerine oturur.
   ========================================================================== */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: gc-out .45s cubic-bezier(.7,0,.3,1) both; }
::view-transition-new(root) { animation: gc-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gc-out { to { opacity: 0; transform: scale(.96); filter: blur(6px); } }
@keyframes gc-in {
  from { opacity: 0; clip-path: circle(0% at var(--gx, 50%) var(--gy, 50%)); }
  to { opacity: 1; clip-path: circle(150% at var(--gx, 50%) var(--gy, 50%)); }
}

/* ---------- Kesme: çapraz ışık + perde ---------- */
.cut {
  position: fixed; inset: 0; z-index: 460;
  pointer-events: none;
  overflow: hidden;
}
.cut__beam {
  position: absolute;
  top: -35%; bottom: -35%; left: -50%;
  width: 42vw;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 124, 255, .15) 18%, #8b7cff 40%, #f3efe4 50%, #ff5c39 63%, transparent 100%);
  transform: skewX(-16deg);
  box-shadow: 0 0 80px rgba(139, 124, 255, .55);
  animation: cut-sweep .72s cubic-bezier(.65,0,.2,1) forwards;
}
.cut::after {
  content: "";
  position: absolute; inset: 0;
  background: #0c0b14;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: cut-flood .5s cubic-bezier(.6,0,.2,1) .28s forwards;
}
.cut__label {
  position: absolute; left: 7vw; bottom: 14vh; z-index: 2;
  font: 500 13px/1 "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .32em;
  color: #ffb199;
  opacity: 0;
  animation: cut-label .35s ease .16s forwards;
}
@keyframes cut-sweep { to { transform: translateX(260vw) skewX(-16deg); } }
@keyframes cut-flood { to { transform: scaleX(1); } }
@keyframes cut-label { to { opacity: 1; transform: none; } }

/* ---------- Varış: ışık açılır ---------- */
.bloom {
  position: fixed; inset: 0; z-index: 390;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(239, 234, 255, .96) 0%, rgba(139, 124, 255, .55) 24%, rgba(12, 11, 20, .92) 62%);
  animation: bloom-open 1.05s cubic-bezier(.16,.84,.28,1) forwards;
}
@keyframes bloom-open {
  0% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.22); }
}

body.gc-enter main { animation: gc-rise .8s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes gc-rise { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cut, .bloom { display: none !important; }
  body.gc-enter main { animation: none; }
}