/* ===== ANIMATIONS ET EFFETS ===== */
/* Animations CSS et effets interactifs */

/* Background animé avec pandas qui se battent */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.fighting-panda {
    position: absolute;
    width: 80px;
    height: 80px;
    transition: all 0.5s ease;
    opacity: 0.7;
}

.panda-left {
    left: 15%;
    top: 30%;
    transform: translateY(0);
    animation: pandaFloatLeft 4s ease-in-out infinite;
}

.panda-right {
    right: 15%;
    top: 60%;
    transform: translateY(0);
    animation: pandaFloatRight 4s ease-in-out infinite;
}

.panda-body {
    width: 80px;
    height: 80px;
    background-color: var(--panda-white);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.panda-ear {
    width: 25px;
    height: 25px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: -10px;
}

.panda-left .panda-ear.left { left: 10px; }
.panda-left .panda-ear.right { right: 10px; }
.panda-right .panda-ear.left { left: 10px; }
.panda-right .panda-ear.right { right: 10px; }

.panda-eye {
    width: 15px;
    height: 15px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 25px;
}

.panda-left .panda-eye.left { left: 20px; }
.panda-left .panda-eye.right { right: 20px; }
.panda-right .panda-eye.left { left: 20px; }
.panda-right .panda-eye.right { right: 20px; }

.panda-nose {
    width: 12px;
    height: 8px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
}

.panda-arm {
    position: absolute;
    width: 25px;
    height: 40px;
    background-color: var(--panda-black);
    border-radius: 12px;
    top: 35px;
}

.panda-left .panda-arm {
    right: -15px;
    transform: rotate(-30deg);
    animation: punchLeft 2s infinite;
}

.panda-right .panda-arm {
    left: -15px;
    transform: rotate(30deg);
    animation: punchRight 2s infinite;
}

/* Animations des pandas */
@keyframes pandaFloatLeft {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-20px) translateX(10px); }
}

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

@keyframes punchLeft {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-60deg) translateX(-5px); }
}

@keyframes punchRight {
    0%, 100% { transform: rotate(30deg); }
    50% { transform: rotate(60deg) translateX(5px); }
}

/* Effets hover pour tous les boutons */
.btn, .btn-affiliate, .filter-btn, .btn-discord {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.btn:hover, .btn-affiliate:hover, .filter-btn:hover, .btn-discord:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

.btn::after, .btn-affiliate::after, .filter-btn::after, .btn-discord::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.btn:hover::after, .btn-affiliate:hover::after, .filter-btn:hover::after, .btn-discord:hover::after {
    left: 100%;
}

/* Effets pour les cards */
.site-card, .ranking-card, .tip-card, .discord-card {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.site-card:hover, .ranking-card:hover, .tip-card:hover, .discord-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-medium) !important;
}

.site-card::before, .ranking-card::before, .tip-card::before, .discord-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.site-card:hover::before, .ranking-card:hover::before, .tip-card:hover::before, .discord-card:hover::before {
    opacity: 1;
}

.site-card:hover {
    border-top-color: var(--panda-green) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), 0 0 20px rgba(39, 174, 96, 0.2) !important;
}

.ranking-card:hover {
    box-shadow: var(--shadow-medium), 0 0 25px rgba(39, 174, 96, 0.15) !important;
}

.tip-card:hover {
    box-shadow: var(--shadow-medium), 0 0 20px rgba(39, 174, 96, 0.1) !important;
}

.discord-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 25px rgba(114, 137, 218, 0.3) !important;
}

/* Panda illustration dans Hero */
.panda-illustration {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.panda-head {
    width: 180px;
    height: 160px;
    background-color: var(--panda-white);
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.panda-ear {
    width: 60px;
    height: 60px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: -20px;
}

.panda-ear.left { left: 20px; }
.panda-ear.right { right: 20px; }

.panda-eye {
    width: 40px;
    height: 40px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 50px;
}

.panda-eye.left { left: 40px; }
.panda-eye.right { right: 40px; }

.panda-eye::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}

.panda-nose {
    width: 30px;
    height: 20px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}

.panda-mouth {
    width: 40px;
    height: 10px;
    border-bottom: 3px solid var(--panda-black);
    border-radius: 0 0 20px 20px;
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
}

.bamboo {
    width: 15px;
    height: 200px;
    background-color: var(--panda-bamboo);
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
}

.bamboo::before, .bamboo::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    background-color: #5d8c2a;
    border-radius: 10px;
}

.bamboo::before { top: 40px; }
.bamboo::after { top: 90px; }

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

/* Pandas animés dans Hero */
.panda-character {
    position: absolute;
    z-index: 5;
    transition: all 0.5s ease;
}

.panda-small {
    width: 60px;
    height: 60px;
    background-color: var(--panda-white);
    border-radius: 50%;
    position: relative;
}

.panda-small .ear {
    width: 20px;
    height: 20px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: -5px;
}

.panda-small .ear.left { left: 8px; }
.panda-small .ear.right { right: 8px; }

.panda-small .eye {
    width: 12px;
    height: 12px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 18px;
}

.panda-small .eye.left { left: 15px; }
.panda-small .eye.right { right: 15px; }

.panda-small .nose {
    width: 8px;
    height: 6px;
    background-color: var(--panda-black);
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.panda-small .bamboo-stick {
    width: 5px;
    height: 25px;
    background-color: var(--panda-bamboo);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
}

.panda-1 {
    top: 20%;
    left: 10%;
    animation: movePanda1 15s infinite ease-in-out;
}

.panda-2 {
    top: 60%;
    right: 15%;
    animation: movePanda2 18s infinite ease-in-out;
}

.panda-3 {
    bottom: 10%;
    left: 20%;
    animation: movePanda3 20s infinite ease-in-out;
}

.panda-4 {
    top: 30%;
    right: 5%;
    animation: movePanda4 16s infinite ease-in-out;
}

@keyframes movePanda1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, 20px) rotate(5deg); }
    50% { transform: translate(10px, 40px) rotate(0deg); }
    75% { transform: translate(-20px, 20px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes movePanda2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-25px, 15px) rotate(-3deg); }
    50% { transform: translate(-15px, -20px) rotate(0deg); }
    75% { transform: translate(20px, 10px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes movePanda3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(2deg); }
    50% { transform: translate(-10px, -25px) rotate(0deg); }
    75% { transform: translate(-25px, -10px) rotate(-2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes movePanda4 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, 25px) rotate(4deg); }
    50% { transform: translate(-20px, 15px) rotate(0deg); }
    75% { transform: translate(10px, -20px) rotate(-4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Mini panda sur les cards */
.panda-mini {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: var(--panda-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-light);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.panda-mini::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--panda-black);
    border-radius: 50%;
    top: 8px;
}

.panda-mini::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 4px;
    background-color: var(--panda-black);
    border-radius: 50%;
    top: 20px;
}

.site-card:hover .panda-mini {
    opacity: 1;
    transform: translateY(-10px);
}

/* Animations d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease forwards;
}

/* Confetti */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: var(--panda-green);
    opacity: 0;
    z-index: 10000;
}