/* Page Loading Animations - Prevents FOUC and adds smooth slide-up transitions */

/* Prevent Flash of Unstyled Content (FOUC) */
body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* Exception: Password modal should always be visible, even when body is hidden */
#password-modal,
#password-modal * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure password modal content is on top and visible */
.password-modal-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Animation keyframes for slide-up effect */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Base state for animated elements - hidden initially */
.animate-on-load {
    opacity: 0;
    transform: translateY(30px);
}

/* Animated state - visible with slide-up */
.animate-on-load.visible {
    animation: slideUp 0.6s ease-out forwards;
}

/* Stagger delays for sequential loading */
.animate-on-load:nth-child(1) {
    animation-delay: 0s;
}

.animate-on-load:nth-child(2) {
    animation-delay: 0.1s;
}

.animate-on-load:nth-child(3) {
    animation-delay: 0.2s;
}

.animate-on-load:nth-child(4) {
    animation-delay: 0.3s;
}

.animate-on-load:nth-child(5) {
    animation-delay: 0.4s;
}

.animate-on-load:nth-child(6) {
    animation-delay: 0.5s;
}

.animate-on-load:nth-child(7) {
    animation-delay: 0.6s;
}

.animate-on-load:nth-child(8) {
    animation-delay: 0.7s;
}

.animate-on-load:nth-child(9) {
    animation-delay: 0.8s;
}

.animate-on-load:nth-child(10) {
    animation-delay: 0.9s;
}

.animate-on-load:nth-child(11) {
    animation-delay: 1s;
}

.animate-on-load:nth-child(12) {
    animation-delay: 1.1s;
}

.animate-on-load:nth-child(13) {
    animation-delay: 1.2s;
}

.animate-on-load:nth-child(14) {
    animation-delay: 1.3s;
}

.animate-on-load:nth-child(15) {
    animation-delay: 1.4s;
}

.animate-on-load:nth-child(16) {
    animation-delay: 1.5s;
}

.animate-on-load:nth-child(17) {
    animation-delay: 1.6s;
}

.animate-on-load:nth-child(18) {
    animation-delay: 1.7s;
}

.animate-on-load:nth-child(19) {
    animation-delay: 1.8s;
}

.animate-on-load:nth-child(20) {
    animation-delay: 1.9s;
}

/* For grid items - use shorter delays for better UX */
.grid-item.animate-on-load:nth-child(n+1) {
    animation-delay: calc(0.05s * var(--item-index, 1));
}

/* Responsive adjustments - faster on mobile for better perceived performance */
@media (max-width: 768px) {
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-on-load.visible {
        animation-duration: 0.4s;
    }

    /* Reduce delays on mobile */
    .animate-on-load:nth-child(n+1) {
        animation-delay: calc(0.05s * (var(--item-index, 1) - 1));
    }
}