@reference "tailwindcss";

/* Page transition animations with Swup */
html.is-changing .transition-swup-fade {
    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
html.is-animating .transition-swup-fade {
    opacity: 0;
    transform: translateY(1rem);
}

/* 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
}
#sidebar-secondary {
    animation-delay: 100ms
}
#swup-container {
    outline: none;
}
#content-wrapper {
    animation-delay: var(--content-delay);
}
.footer {
    animation-delay: 250ms;
}

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