/* ==========================================================
   OZİ MERAK ORMANI v2.0
   ANIMATIONS.CSS FINAL
   Şelale • Bulut • Kelebek • Parıltı • Gece Modu
========================================================== */

/* ----------------------------------------------------------
   BULUTLAR
---------------------------------------------------------- */

.cloud-one{
    animation:cloudMoveOne 60s linear infinite;
}

.cloud-two{
    animation:cloudMoveTwo 75s linear infinite;
}

.cloud-three{
    animation:cloudMoveThree 90s linear infinite;
}

@keyframes cloudMoveOne{
    from{transform:translateX(-220px);}
    to{transform:translateX(calc(100vw + 250px));}
}

@keyframes cloudMoveTwo{
    from{transform:translateX(calc(100vw + 250px));}
    to{transform:translateX(-250px);}
}

@keyframes cloudMoveThree{
    from{transform:translateX(-180px);}
    to{transform:translateX(calc(100vw + 180px));}
}

/* ----------------------------------------------------------
   ŞELALE PARILTISI
---------------------------------------------------------- */

.hero-bg{
    animation:waterfallGlow 8s ease-in-out infinite;
}

@keyframes waterfallGlow{
    0%,100%{
        filter:brightness(1) saturate(110%);
    }
    50%{
        filter:brightness(1.08) saturate(120%);
    }
}

/* ----------------------------------------------------------
   OZİ YÜZME
---------------------------------------------------------- */

.ozi-main{
    animation:oziFloatBig 4s ease-in-out infinite;
}

@keyframes oziFloatBig{
    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }
    50%{
        transform:translateY(-16px) rotate(1deg);
    }
}

/* ----------------------------------------------------------
   KONUŞMA BALONU
---------------------------------------------------------- */

.speech-bubble{
    animation:speechBounce 5s ease-in-out infinite;
}

@keyframes speechBounce{
    0%,100%{
        transform:translateY(0);
    }
    25%{
        transform:translateY(-8px);
    }
    50%{
        transform:translateY(-14px);
    }
    75%{
        transform:translateY(-6px);
    }
}

/* ----------------------------------------------------------
   DÜNYA KARTLARI
---------------------------------------------------------- */

.world-card{
    animation:cardIdle 8s ease-in-out infinite;
}

.world-card:nth-child(2){animation-delay:1s;}
.world-card:nth-child(3){animation-delay:2s;}
.world-card:nth-child(4){animation-delay:3s;}
.world-card:nth-child(5){animation-delay:4s;}
.world-card:nth-child(6){animation-delay:5s;}
.world-card:nth-child(7){animation-delay:6s;}

@keyframes cardIdle{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-6px);
    }
}

/* ----------------------------------------------------------
   MAP PIN ZIPLAMA
---------------------------------------------------------- */

.map-pin{
    animation:pinBounce 2.8s ease infinite;
}

.map-pin:nth-child(2){animation-delay:.2s;}
.map-pin:nth-child(3){animation-delay:.4s;}
.map-pin:nth-child(4){animation-delay:.6s;}
.map-pin:nth-child(5){animation-delay:.8s;}

@keyframes pinBounce{
    0%,100%{
        transform:translate(-50%,-50%);
    }
    50%{
        transform:translate(-50%,-58%);
    }
}

/* ----------------------------------------------------------
   YILDIZ PARLAMASI
---------------------------------------------------------- */

.star{
    animation:starTwinkle 3s ease infinite;
}

@keyframes starTwinkle{
    0%,100%{
        opacity:.25;
        transform:scale(.8);
    }
    50%{
        opacity:1;
        transform:scale(1.6);
    }
}

/* ----------------------------------------------------------
   KELEBEKLER
---------------------------------------------------------- */

.butterfly{
    animation-duration:14s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

.butterfly-1{
    animation-name:butterflyA;
}

.butterfly-2{
    animation-name:butterflyB;
}

.butterfly-3{
    animation-name:butterflyC;
}

@keyframes butterflyA{
    0%{transform:translate(0,0) rotate(0);}
    25%{transform:translate(60px,-30px) rotate(12deg);}
    50%{transform:translate(120px,15px) rotate(-10deg);}
    75%{transform:translate(70px,55px) rotate(8deg);}
    100%{transform:translate(0,0);}
}

@keyframes butterflyB{
    0%{transform:translate(0,0);}
    50%{transform:translate(-100px,-40px);}
    100%{transform:translate(0,0);}
}

@keyframes butterflyC{
    0%{transform:translateY(0);}
    50%{transform:translateY(-80px);}
    100%{transform:translateY(0);}
}

/* ----------------------------------------------------------
   IŞIK TOZLARI
---------------------------------------------------------- */

.particle{
    animation:particleGlow 8s ease infinite;
}

@keyframes particleGlow{
    0%,100%{
        opacity:.2;
        transform:translateY(0) scale(.7);
    }
    50%{
        opacity:1;
        transform:translateY(-30px) scale(1.2);
    }
}

/* ----------------------------------------------------------
   VİDEO KARTLARI
---------------------------------------------------------- */

.video-card:hover{
    animation:videoPop .35s ease forwards;
}

@keyframes videoPop{
    from{
        transform:translateY(0) scale(1);
    }
    to{
        transform:translateY(-10px) scale(1.03);
    }
}

/* ----------------------------------------------------------
   ROZETLER
---------------------------------------------------------- */

.badge-card:hover img{
    animation:badgeSpin .5s ease;
}

@keyframes badgeSpin{
    0%{transform:rotate(0) scale(1);}
    50%{transform:rotate(-12deg) scale(1.1);}
    100%{transform:rotate(0) scale(1);}
}

/* ----------------------------------------------------------
   GÖREV KUTUSU
---------------------------------------------------------- */

.reward-box{
    animation:rewardFloat 4s ease infinite;
}

@keyframes rewardFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* ----------------------------------------------------------
   FOOTER FENER
---------------------------------------------------------- */

.footer-ozi{
    animation:lanternFloat 5s ease infinite;
}

@keyframes lanternFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

/* ----------------------------------------------------------
   ATEŞ BÖCEKLERİ
---------------------------------------------------------- */

.footer-fireflies{
    animation:firefliesMove 12s linear infinite;
}

@keyframes firefliesMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:220px 160px;
    }
}

/* ----------------------------------------------------------
   GÜNDÜZ / GECE GEÇİŞİ
---------------------------------------------------------- */

body{
    transition:
        background .8s ease,
        color .6s ease;
}

body.night .hero-overlay{
    background:
    linear-gradient(
        rgba(4,17,34,.45),
        rgba(10,35,58,.55),
        rgba(16,42,70,.85)
    );
}

body.night .footer-stars{
    opacity:.8;
}

body.night .sparkles{
    opacity:.55;
}