/* ==========================================================
   SON KAREDE HAFİF CANLILIK
   Video bitince kalan kare "tık diye donmuş" görünmesin diye:
   - gökyüzü çok yavaş süzülür (bulutlar hareket ediyormuş gibi),
   - "Hoş Geldiniz" belirirken uzaktan iki kuş BİR KEZ geçer (döngü yok).
   Videoya, yazıya, müziğe ve kaydırma geçişine dokunmaz; yalnızca videonun
   üstüne, kapak ve yazının altına ince bir katman ekler (assets/js/canlilik.js).
   ========================================================== */

.canlilik {
  position: absolute;
  inset: 0;
  z-index: 1;                          /* video < canlılık < kapak(2) < Hoş Geldiniz(3) */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
/* Kamera durduğu an (selam) devreye girer; görüntü aynı kare olduğu için geçiş fark edilmez */
.acilis.selam .canlilik {
  visibility: visible;
  opacity: 1;
  transition: opacity 2.4s ease;
}

/* ---------- Süzülen gökyüzü ---------- */

.canlilik__gok {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* yalnızca gökyüzü hareket eder; ufuk ve şehir silueti alttaki sabit karede kalır */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .5) 72%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, .5) 72%, transparent 84%);
  transform-origin: 60% 30%;
  will-change: transform;
}
.acilis.selam .canlilik__gok {
  /* başlangıç = karenin birebir kendisi (sıçrama olmaz); sonra çok yavaş süzülür */
  animation: gok-suzul 36s cubic-bezier(.3, .15, .55, 1) .2s infinite alternate both;   /* hemen başlar, yumuşak yavaşlar */
}
@keyframes gok-suzul {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.4%, 1%, 0) scale(1.07); }      /* kameranın geldiği yönde süzülmeye devam */
}

/* gün batımı ışığının çok hafif nefes alması */
.canlilik__isik {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 34% at 8% 92%, rgba(255, 196, 120, .5), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
}
.acilis.selam .canlilik__isik { animation: isik-nefes 9s ease-in-out 1s infinite alternate; }
@keyframes isik-nefes {
  from { opacity: .0; }
  to   { opacity: .22; }
}

/* ---------- Uzaktan bir kez geçen kuşlar ---------- */

.kus {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  opacity: 0;
}
.kus__yol { position: absolute; left: 0; top: 0; }     /* dikey süzülme */
.kus svg {
  display: block;
  width: 22px;
  height: 12px;
  overflow: visible;
}
.kus path {
  fill: none;
  stroke: rgba(46, 30, 42, .78);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 20px 12px;
}

/* soldan sağa, hafifçe yükselip uzaklaşarak tek geçiş */
.acilis.selam .kus--1 { top: 47%; animation: kus-gecis 13s linear .9s 1 both; }
.acilis.selam .kus--2 { top: 51%; animation: kus-gecis 14.5s linear 2.3s 1 both; }
.acilis.selam .kus--1 .kus__yol { animation: kus-suzul 5.2s ease-in-out infinite alternate; }
.acilis.selam .kus--2 .kus__yol { animation: kus-suzul 6.1s ease-in-out -2s infinite alternate; }
.kus--2 svg { width: 16px; height: 9px; }
.kus--2 path { stroke: rgba(46, 30, 42, .6); }

@keyframes kus-gecis {
  0%   { transform: translate3d(-8%, 0, 0) scale(1);   opacity: 0; }
  9%   { opacity: 1; }
  82%  { opacity: .85; }
  100% { transform: translate3d(108%, -90px, 0) scale(.62); opacity: 0; }
}
@keyframes kus-suzul {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}

/* kanat çırpma */
.acilis.selam .kus .kanat--sol { animation: kanat-sol .62s ease-in-out infinite alternate; }
.acilis.selam .kus .kanat--sag { animation: kanat-sag .62s ease-in-out infinite alternate; }
.acilis.selam .kus--2 .kanat--sol,
.acilis.selam .kus--2 .kanat--sag { animation-duration: .54s; }
@keyframes kanat-sol { from { transform: rotate(16deg); }  to { transform: rotate(-24deg); } }
@keyframes kanat-sag { from { transform: rotate(-16deg); } to { transform: rotate(24deg); } }

/* Sahne ekrandan çıkınca boşuna çalışmasın */
.canlilik.duraklat,
.canlilik.duraklat * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .canlilik { display: none; }
}