/* Page transition animations with Swup */
html.is-changing .transition-swup-fade {
    @apply transition-all duration-200
}
html.is-animating .transition-swup-fade {
    @apply opacity-0 translate-y-4
}

/* Fade-in animations for components */
@keyframes fade-in-up {
    0% {
        transform: translateY(2rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Main components */
.onload-animation {
    opacity: 0;
    animation: 300ms fade-in-up;
    animation-fill-mode: forwards;
}
#navbar {
    animation-delay: 0ms
}
#sidebar {
    animation-delay: 100ms
}
#swup-container {
    outline: none;
}
#content-wrapper {
    animation-delay: var(--content-delay);
}
.footer {
    animation-delay: 250ms;
}
#banner-credit {
    animation-delay: 400ms;
}

/* Post content */
#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) }