/* Tema 1 Animasyon Stilleri - Geometrik Peyzaj (Modern ve Profesyonel) */

/* Ön Yükleyici ve Geçişler */
.hide-tree-preloader #preloader-pine,
.hide-tree-preloader #page-transition-overlay {
    display: none !important;
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.page-transition-active {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Yükleme Çubuğu (Loading Bar) */
.loading-bar-container {
    width: 200px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px auto 0;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    width: 0%;
    height: 100%;
    background: var(--p-green);
    border-radius: 10px;
    transition: width 2s linear; /* Preloader süresine (2s) uyumlu */
}


/* Kaydırma Animasyonları */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }

/* İçi Boş Ağaç Animasyonu (Organik ve Çerçeve Tipi) */
.hollow-tree-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawHollowTree 2.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.tree-leaf {
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    animation: popLeaf 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.delay-1 { animation-delay: 1.5s; }
.delay-2 { animation-delay: 2.0s; }
.delay-3 { animation-delay: 2.2s; }

@keyframes drawHollowTree {
    to { stroke-dashoffset: 0; }
}

@keyframes popLeaf {
    to { opacity: 1; transform: scale(1); }
}

/* Kuş Animasyonu */
.bird {
    opacity: 0;
    transform-origin: center;
    animation: flyBird 4s linear infinite;
}

.bird-wing {
    transform-origin: center;
    animation: flapWing 0.4s ease-in-out infinite alternate;
}

.delay-bird-1 { animation-delay: 0.2s; animation-duration: 3s; }
.delay-bird-2 { animation-delay: 0.8s; animation-duration: 4s; }
.delay-bird-3 { animation-delay: 1.2s; animation-duration: 3s; }

@keyframes flyBird {
    0% { opacity: 0; transform: translateX(-50px) translateY(20px); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(350px) translateY(-50px); }
}

@keyframes flapWing {
    0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}

/* Çim Animasyonu */
.grass-blade {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: growGrass 1.5s ease-out forwards;
}

@keyframes growGrass {
    to { opacity: 1; transform: scaleY(1); }
}

/* Çiçek Açma Animasyonu */
.flower-petal {
    opacity: 0;
    transform-origin: 0 0; /* G merkezine göre hizalanmış */
    transition: all 0.5s ease;
    animation: bloomPetal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bloomPetal {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    100% {
        opacity: 0.95;
        transform: scale(1) rotate(var(--petal-rotate));
    }
}

.petal-1 { --petal-rotate: 0deg; animation-delay: 0.02s; }
.petal-2 { --petal-rotate: 30deg; animation-delay: 0.04s; }
.petal-3 { --petal-rotate: 60deg; animation-delay: 0.06s; }
.petal-4 { --petal-rotate: 90deg; animation-delay: 0.08s; }
.petal-5 { --petal-rotate: 120deg; animation-delay: 0.1s; }
.petal-6 { --petal-rotate: 150deg; animation-delay: 0.12s; }
.petal-7 { --petal-rotate: 180deg; animation-delay: 0.14s; }
.petal-8 { --petal-rotate: 210deg; animation-delay: 0.16s; }
.petal-9 { --petal-rotate: 240deg; animation-delay: 0.18s; }
.petal-10 { --petal-rotate: 270deg; animation-delay: 0.2s; }
.petal-11 { --petal-rotate: 300deg; animation-delay: 0.22s; }
.petal-12 { --petal-rotate: 330deg; animation-delay: 0.24s; }