/* ============================================
   ANIMATIONS: Keyframes, transitions, effects
   ============================================ */

/* Page Transition Animations */
@keyframes page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: page-fade-in 0.4s ease-out forwards;
}

body.page-leaving {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Mobile Navigation Slide Animation */
#navigation.collapsing {
    transition: height 0.35s ease;
}

/* Nav items slide in effect */
@media (max-width: 991px) {
    #navigation .nav-item {
        opacity: 0;
        transform: translateY(-10px);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    /* Show items as menu opens (collapsing) and when fully open (show) */
    #navigation.collapsing .nav-item,
    #navigation.collapse.show .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger the nav items */
    #navigation.collapsing .nav-item:nth-child(1),
    #navigation.collapse.show .nav-item:nth-child(1) {
        transition-delay: 0s;
    }
    #navigation.collapsing .nav-item:nth-child(2),
    #navigation.collapse.show .nav-item:nth-child(2) {
        transition-delay: 0.05s;
    }
    #navigation.collapsing .nav-item:nth-child(3),
    #navigation.collapse.show .nav-item:nth-child(3) {
        transition-delay: 0.1s;
    }
    #navigation.collapsing .nav-item:nth-child(4),
    #navigation.collapse.show .nav-item:nth-child(4) {
        transition-delay: 0.15s;
    }
    #navigation.collapsing .nav-item:nth-child(5),
    #navigation.collapse.show .nav-item:nth-child(5) {
        transition-delay: 0.2s;
    }
    #navigation.collapsing .nav-item:nth-child(6),
    #navigation.collapse.show .nav-item:nth-child(6) {
        transition-delay: 0.25s;
    }
    #navigation.collapsing .nav-item:nth-child(7),
    #navigation.collapse.show .nav-item:nth-child(7) {
        transition-delay: 0.3s;
    }
    #navigation.collapsing .nav-item:nth-child(8),
    #navigation.collapse.show .nav-item:nth-child(8) {
        transition-delay: 0.35s;
    }
}

/* Content Reveal Animation */
@keyframes content-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content,
.class-list-item {
    animation: content-fade-in 0.5s ease-out forwards;
}

/* Stagger content sections */
.content:nth-of-type(2) {
    animation-delay: 0.1s;
}
.content:nth-of-type(3) {
    animation-delay: 0.2s;
}
.content:nth-of-type(4) {
    animation-delay: 0.3s;
}
.class-list-item:nth-of-type(2) {
    animation-delay: 0.1s;
}
.class-list-item:nth-of-type(3) {
    animation-delay: 0.15s;
}
.class-list-item:nth-of-type(4) {
    animation-delay: 0.2s;
}
.class-list-item:nth-of-type(5) {
    animation-delay: 0.25s;
}
.class-list-item:nth-of-type(6) {
    animation-delay: 0.3s;
}

/* Hamburger Menu Animation */
.navbar-toggler {
    transition: transform 0.3s ease;
}

.navbar-toggler:hover {
    transform: scale(1.1);
}

.navbar-toggler[aria-expanded="true"] i {
    display: inline-block;
    animation: rotate-in 0.3s ease forwards;
}

@keyframes rotate-in {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(90deg);
    }
}