/* Tuzu — bulut perdesi.
   WebGL ve three.js yüklenmeden ÖNCE, ilk boyamada görünür.
   Yalnız transform + opacity canlandırılır (compositor); blur yok. */

#bulut-perde {
  --bp-ust: #8fa6bf;
  --bp-orta: #c3d1de;
  --bp-alt: #e9eff4;
  --bp-bulut: 255, 255, 255;
  --bp-golge: 150, 168, 190;
  --bp-sure: 1500ms;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bp-ust) 0%, var(--bp-orta) 55%, var(--bp-alt) 100%);
  transition: background 900ms ease, opacity 500ms ease;
  will-change: opacity;
}

#bulut-perde .bp-kat {
  position: absolute;
  left: -20vw;
  top: -20vh;
  width: 140vw;
  height: 140vh;
  animation: bp-suzul var(--bp-kat-sure, 26s) ease-in-out infinite alternate;
}

#bulut-perde .bp-ic {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition:
    transform var(--bp-sure) cubic-bezier(0.55, 0.02, 0.45, 1),
    opacity var(--bp-sure) cubic-bezier(0.7, 0, 0.9, 0.6);
}

@keyframes bp-suzul {
  from { transform: translate3d(-1.5%, 0.5%, 0) scale(1.00); }
  to   { transform: translate3d( 1.5%, -0.5%, 0) scale(1.05); }
}

/* Açılış: kamera bulutların ortasına dalar — katlar büyüyerek kenarlara kaçar ve silinir. */
#bulut-perde.bp-aciliyor .bp-kat { animation-play-state: paused; }
#bulut-perde.bp-aciliyor .bp-ic {
  transform: translate3d(var(--bp-dx, 0), var(--bp-dy, 0), 0) scale(var(--bp-olcek, 2.6));
  opacity: 0;
  transition-delay: var(--bp-gecikme, 0ms);
}
#bulut-perde.bp-aciliyor { transition: background 900ms ease, opacity 600ms ease calc(var(--bp-sure) - 500ms); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #bulut-perde .bp-kat { animation: none; }
  #bulut-perde .bp-ic { transition: opacity 800ms ease; }
  #bulut-perde.bp-aciliyor .bp-ic { transform: none; }
  #bulut-perde.bp-aciliyor { transition: opacity 800ms ease; }
}