/* ============================================
   Navigation Entry Animation — Staggered Reveal
   Shared across all pages
   ============================================ */

/* --- Keyframes --- */

/* Smooth fade + slide down for nav items */
@keyframes navFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Theme toggle icon spin on click */
@keyframes themeIconSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}


/* --- Animation Classes — Staggered Entry --- */

/* All nav-animated elements start invisible */
.nav-anim-logo,
.nav-anim-link-1,
.nav-anim-link-2,
.nav-anim-link-3,
.nav-anim-contact,
.nav-anim-lang,
.nav-anim-theme {
    opacity: 0;
    animation: navFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered delays */
.nav-anim-logo {
    animation-delay: 0.05s;
}

.nav-anim-link-1 {
    animation-delay: 0.10s;
}

.nav-anim-link-2 {
    animation-delay: 0.15s;
}

.nav-anim-link-3 {
    animation-delay: 0.20s;
}

.nav-anim-contact {
    animation-delay: 0.25s;
}

.nav-anim-lang {
    animation-delay: 0.30s;
}

.nav-anim-theme {
    animation-delay: 0.35s;
}

/* Prevent FOUT: clip icon text until Material Symbols font loads */
.nav-anim-theme .material-symbols-outlined {
    width: 24px;
    height: 24px;
    overflow: hidden;
}


/* --- Theme Toggle Spin --- */

/* Applied via JS on click, removed on animationend */
.theme-toggling .material-symbols-outlined {
    animation: themeIconSpin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}


/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {

    .nav-anim-logo,
    .nav-anim-link-1,
    .nav-anim-link-2,
    .nav-anim-link-3,
    .nav-anim-contact,
    .nav-anim-lang,
    .nav-anim-theme {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .theme-toggling .material-symbols-outlined {
        animation: none !important;
    }
}