/* --- Temel Ayarlar --- */
:root {
    --bg-color: #1a1a2e;
    --person-color: #3498db;
    --ball-color: #ff5722;
    --shadow-color: rgba(0,0,0,0.3);
}

/* Preloader görünürken body scroll'unu engelle */
body.preloader-active {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

#preloader-container {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    background-color: var(--bg-color);
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    z-index: 99999;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scene-box {
    position: relative; width: 180px; /* Alanı genişlettik ki top sığsın */
    height: 180px; overflow: visible;
}

/* --- Karakter Parçaları --- */
.person { position: absolute; top: 30px; left: 50px; /* Karakter biraz daha solda dursun */ width: 40px; height: 150px; }
.head { width: 30px; height: 30px; background-color: var(--person-color); border-radius: 50%; margin: 0 auto 5px; position: relative; }
.head::after { content: ''; position: absolute; top: 12px; right: -4px; width: 8px; height: 8px; background-color: var(--person-color); border-radius: 50%; } 
.body-torso { width: 34px; height: 50px; background-color: var(--person-color); border-radius: 10px 10px 5px 5px; margin: 0 auto; }
.leg { width: 12px; height: 45px; background-color: var(--person-color); position: absolute; top: 80px; border-radius: 5px; transform-origin: top center; }
.leg-left { left: 4px; z-index: 2; }
.leg-right { right: 4px; z-index: 1; }
.foot-base, .foot-kicker { position: absolute; bottom: -4px; left: -2px; width: 26px; height: 12px; background-color: var(--person-color); border-radius: 5px 12px 8px 5px; }

/* --- Top ve Gölge --- */
.ball { 
    width: 22px; height: 22px; 
    background-color: var(--ball-color); border-radius: 50%; 
    position: absolute; 
    /* GÜNCELLEME: Topu vücuttan uzaklaştırdık (Çarpışmayı önler) */
    left: 105px; 
}
.shadow { position: absolute; bottom: 5px; left: 60px; width: 80px; height: 8px; background-color: var(--shadow-color); border-radius: 50%; }
.loading-text { color: var(--person-color); margin-top: 30px; font-weight: bold; opacity: 0.8; }


/* =========================================================
   FAZ 1: KOŞU (Running)
   ========================================================= */
.ball.wait-on-ground { bottom: 5px; }

.person.run-in {
    left: -150px; /* Dışarıdan gel */
    animation: slideToPosition 0.8s forwards ease-out;
}
.person.run-in .body-torso { transform: skewX(-10deg); animation: runBob 0.2s infinite linear; }
.person.run-in .leg-left { animation: runLeft 0.2s infinite linear; }
.person.run-in .leg-right { animation: runRight 0.2s infinite linear; }


/* =========================================================
   FAZ 2: YERDEN KALDIRMA (Lifting) - YENİ!
   ========================================================= */
/* Top hareketi: Yerde -> Havaya */
.ball.lift {
    animation: liftBallUp 0.6s forwards ease-out;
}
/* Bacak hareketi: Yerdeki topun altına girip yukarı atma */
.person.lift .leg-right {
    animation: liftLegAction 0.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.person.lift .foot-kicker {
    animation: liftFootAction 0.6s forwards; /* Bilek hareketi */
}


/* =========================================================
   FAZ 3: SEKTİRME (Juggling)
   ========================================================= */
.ball.juggling {
    animation: bounceBall 0.7s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
}
.person.juggling .leg-right { animation: kickAction 0.7s infinite cubic-bezier(0.4, 0.0, 0.2, 1); }
.person.juggling .foot-kicker { animation: footFlex 0.7s infinite cubic-bezier(0.4, 0.0, 0.2, 1); }
.person.juggling .body-torso { animation: bodyBob 0.7s infinite ease-in-out; }
.shadow.juggling { animation: shadowScale 0.7s infinite ease-in-out; }


/* ------------------------------------
   KEYFRAMES
------------------------------------ */

/* Koşarak Gelme */
@keyframes slideToPosition { 
    0% { left: -150px; opacity: 0; }
    100% { left: 50px; } /* Sabit duracağı yer */
}

/* YERDEN KALDIRMA (LIFT) Animasyonları */
@keyframes liftBallUp {
    0% { bottom: 5px; }
    100% { bottom: 95px; } /* Sektirme tepe noktasına varış */
}
@keyframes liftLegAction {
    0% { transform: rotate(0deg); } /* Düz dur */
    30% { transform: rotate(10deg); } /* Ayağı topun altına sok */
    100% { transform: rotate(-45deg); } /* Yukarı kaldır */
}
@keyframes liftFootAction {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(20deg); } /* Topu kepçele */
    100% { transform: rotate(-10deg); }
}

/* Sektirme (Uzaklaştırılmış top ayarı) */
@keyframes bounceBall {
    0%, 100% { bottom: 95px; transform: scale(1); animation-timing-function: ease-in; }
    50% { bottom: 38px; transform: scale(1.15, 0.85); animation-timing-function: ease-out; }
}

/* Diğerleri (Standart) */
@keyframes runLeft { 0%, 100% { transform: rotate(35deg); } 50% { transform: rotate(-35deg); } }
@keyframes runRight { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
@keyframes kickAction { 0%, 100% { transform: rotate(5deg); animation-timing-function: ease-in; } 40% { transform: rotate(15deg); animation-timing-function: ease-out; } 50% { transform: rotate(-45deg); } }
@keyframes footFlex { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-30deg); } }
@keyframes bodyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes shadowScale { 0%, 100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.9; } }