/* Styles de base */
#random-transparent-gif-container {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
}

/* Tailles des GIFs */
#random-transparent-gif-container img.small { max-width: 100px; }
#random-transparent-gif-container img.medium { max-width: 200px; }
#random-transparent-gif-container img.large { max-width: 300px; }

/* Positionnement du GIF */
#random-transparent-gif-container.bottom-right { bottom: 0; right: 10px; }
#random-transparent-gif-container.bottom-left { bottom: 0; left: 10px; }
#random-transparent-gif-container.top-right { top: 0; right: 10px;transform: rotate(180deg); }
#random-transparent-gif-container.top-left { top: 0; left: 10px; transform: rotate(180deg);}

/* Animations d'apparition */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUpTop { from { transform: translateY(-100%) rotate(180deg); opacity: 0; } to { transform: translateY(0) rotate(180deg); opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zoomInTop { from { transform: scale(0.5) rotate(180deg); opacity: 0; } to { transform: scale(1) rotate(180deg); opacity: 1; } }
@keyframes bounceIn { 
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
@keyframes bounceInTop { 
    0% { transform: scale(0.3) rotate(180deg); opacity: 0; }
    50% { transform: scale(1.05) rotate(180deg); opacity: 1; }
    70% { transform: scale(0.9) rotate(180deg); }
    100% { transform: scale(1) rotate(180deg); }
}
@keyframes rotateIn { from { transform: rotate(-200deg) scale(0); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes rotateInTop { from { transform: rotate(-20deg) scale(0); opacity: 0; } to { transform: rotate(180deg) scale(1); opacity: 1; } }
@keyframes flipIn { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
@keyframes flipInTop { from { transform: perspective(400px) rotateX(-90deg) rotate(180deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg) rotate(180deg); opacity: 1; } }
@keyframes swingIn {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes swingInTop {
    20% { transform: rotate(195deg); }
    40% { transform: rotate(170deg); }
    60% { transform: rotate(185deg); }
    80% { transform: rotate(175deg); }
    100% { transform: rotate(180deg); }
}

/* Animations de disparition */
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes slideDownTop { from { transform: translateY(0) rotate(180deg); opacity: 1; } to { transform: translateY(-100%) rotate(180deg); opacity: 0; } }
@keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } }
@keyframes zoomOutTop { from { transform: scale(1) rotate(180deg); opacity: 1; } to { transform: scale(0.5) rotate(180deg); opacity: 0; } }
@keyframes bounceOut {
    20% { transform: scale(0.9); }
    50%, 55% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.3); opacity: 0; }
}
@keyframes bounceOutTop {
    20% { transform: scale(0.9) rotate(180deg); }
    50%, 55% { transform: scale(1.1) rotate(180deg); opacity: 1; }
    100% { transform: scale(0.3) rotate(180deg); opacity: 0; }
}
@keyframes rotateOut { from { transform: rotate(0) scale(1); opacity: 1; } to { transform: rotate(200deg) scale(0); opacity: 0; } }
@keyframes rotateOutTop { from { transform: rotate(180deg) scale(1); opacity: 1; } to { transform: rotate(360deg) scale(0); opacity: 0; } }
@keyframes flipOut { from { transform: perspective(400px) rotateY(0deg); opacity: 1; } to { transform: perspective(400px) rotateY(90deg); opacity: 0; } }
@keyframes flipOutTop { from { transform: perspective(400px) rotateX(0deg) rotate(180deg); opacity: 1; } to { transform: perspective(400px) rotateX(90deg) rotate(180deg); opacity: 0; } }
@keyframes swingOut {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); opacity: 0; }
}
@keyframes swingOutTop {
    20% { transform: rotate(195deg); }
    40% { transform: rotate(170deg); }
    60% { transform: rotate(185deg); }
    80% { transform: rotate(175deg); }
    100% { transform: rotate(180deg); opacity: 0; }
}

/* Application des animations */
#random-transparent-gif-container.fade-in { animation: fadeIn 1s ease-in-out forwards; }
#random-transparent-gif-container.slide-up:not(.top-left):not(.top-right) { animation: slideUp 1s ease-in-out forwards; }
#random-transparent-gif-container.slide-up.top-left,
#random-transparent-gif-container.slide-up.top-right { animation: slideUpTop 1s ease-in-out forwards; }
#random-transparent-gif-container.zoom-in:not(.top-left):not(.top-right) { animation: zoomIn 1s ease-in-out forwards; }
#random-transparent-gif-container.zoom-in.top-left,
#random-transparent-gif-container.zoom-in.top-right { animation: zoomInTop 1s ease-in-out forwards; }
#random-transparent-gif-container.bounce-in:not(.top-left):not(.top-right) { animation: bounceIn 1s ease-in-out forwards; }
#random-transparent-gif-container.bounce-in.top-left,
#random-transparent-gif-container.bounce-in.top-right { animation: bounceInTop 1s ease-in-out forwards; }
#random-transparent-gif-container.rotate-in:not(.top-left):not(.top-right) { animation: rotateIn 1s ease-in-out forwards; }
#random-transparent-gif-container.rotate-in.top-left,
#random-transparent-gif-container.rotate-in.top-right { animation: rotateInTop 1s ease-in-out forwards; }
#random-transparent-gif-container.flip-in:not(.top-left):not(.top-right) { animation: flipIn 1s ease-in-out forwards; }
#random-transparent-gif-container.flip-in.top-left,
#random-transparent-gif-container.flip-in.top-right { animation: flipInTop 1s ease-in-out forwards; }
#random-transparent-gif-container.swing-in:not(.top-left):not(.top-right) { animation: swingIn 1s ease-in-out forwards; }
#random-transparent-gif-container.swing-in.top-left,
#random-transparent-gif-container.swing-in.top-right { animation: swingInTop 1s ease-in-out forwards; }

#random-transparent-gif-container.fade-out { animation: fadeOut 1s ease-in-out forwards; }
#random-transparent-gif-container.slide-down:not(.top-left):not(.top-right) { animation: slideDown 1s ease-in-out forwards; }
#random-transparent-gif-container.slide-down.top-left,
#random-transparent-gif-container.slide-down.top-right { animation: slideDownTop 1s ease-in-out forwards; }
#random-transparent-gif-container.zoom-out:not(.top-left):not(.top-right) { animation: zoomOut 1s ease-in-out forwards; }
#random-transparent-gif-container.zoom-out.top-left,
#random-transparent-gif-container.zoom-out.top-right { animation: zoomOutTop 1s ease-in-out forwards; }
#random-transparent-gif-container.bounce-out:not(.top-left):not(.top-right) { animation: bounceOut 1s ease-in-out forwards; }
#random-transparent-gif-container.bounce-out.top-left,
#random-transparent-gif-container.bounce-out.top-right { animation: bounceOutTop 1s ease-in-out forwards; }
#random-transparent-gif-container.rotate-out:not(.top-left):not(.top-right) { animation: rotateOut 1s ease-in-out forwards; }
#random-transparent-gif-container.rotate-out.top-left,
#random-transparent-gif-container.rotate-out.top-right { animation: rotateOutTop 1s ease-in-out forwards; }
#random-transparent-gif-container.flip-out:not(.top-left):not(.top-right) { animation: flipOut 1s ease-in-out forwards; }
#random-transparent-gif-container.flip-out.top-left,
#random-transparent-gif-container.flip-out.top-right { animation: flipOutTop 1s ease-in-out forwards; }
#random-transparent-gif-container.swing-out:not(.top-left):not(.top-right) { animation: swingOut 1s ease-in-out forwards; }
#random-transparent-gif-container.swing-out.top-left,
#random-transparent-gif-container.swing-out.top-right { animation: swingOutTop 1s ease-in-out forwards; }