/* Page transition animations with Swup */
html.is-changing .transition-swup-fade {
    transition-property: opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
html.is-animating .transition-swup-fade {
    opacity: 0;
    transform: scale(0.985);
}

/* Fade-in animations for components */
@keyframes fade-in-soft {
    0% {
        opacity: 0;
        transform: scale(0.992);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Main components */
.onload-animation {
    opacity: 0;
    animation: 220ms fade-in-soft cubic-bezier(0.22, 1, 0.36, 1);
    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) }

