/* File: css/logo_animation.css */

/* Bu sınıf, logonun başlangıç durumunu tanımlar: ortalanmış, büyük ve döndürülmüş. */
.navbar-brand.logo-pre-animation {
    /*
     *  Logoyu belge akışından çıkarır ve görüntü alanının ortasına yerleştirir.
     *  'fixed', pencereye göre konumlandırır.
     *  'top: 50%' ve 'left: 50%', öğenin sol üst köşesini merkeze taşır.
     *  'transform: translate(-50%, -50%)', öğeyi kendi genişliğinin ve yüksekliğinin yarısı kadar geri kaydırarak
     *  mükemmel bir şekilde ortalar.
    */
    position: fixed !important;
    top: 50%;
    left: 50%;

    /*
     * Logoyu büyük ve döndürülmüş olarak başlatır. Animasyonla scale(1) ve rotate(0) durumuna geri dönecektir.
     * Döndürme negatiftir, böylece 0'a geçerken saat yönünde bir dönüş gerçekleştirir.
    */
    transform: translate(-50%, -50%) scale(2) rotate(-360deg);

    /*
     * Animasyon sırasında logonun diğer tüm içeriğin üzerinde görünmesini sağlamak için
     * çok yüksek bir z-index ayarlanır.
    */
    z-index: 10001;

    /*
     * Geçiş, animasyonun kalbidir.
     * Tarayıcıya 'transform' ve 'opacity' özelliklerindeki herhangi bir değişikliği
     * 1.5 saniye boyunca akıcı bir şekilde canlandırmasını söyler. 'ease-in-out' işlevi, animasyonun yavaş başlayıp yavaş bitmesini sağlar.
    */
    transition: transform 1.5s ease-in-out;
}

/* Animasyon sırasında sayfa içeriğini gizleyen bir arka plan. */
.logo-animation-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff; /* Düz beyaz arka plan */
    z-index: 10000;
    opacity: 1;
    transition: opacity 1s ease-in-out 0.5s; /* 0.5s sonra kaybolmaya başla */
}

/* Animasyon bittiğinde arka planı kaybetmek için uygulanacak bir sınıf. */
.logo-animation-backdrop.fade-out {
    opacity: 0;
    pointer-events: none; /* Arka plan kaybolduktan sonra tıklama olaylarını engelleme */
}