/* Premium Entrance Animations for Sections */

/* Base setup for animated children */
#main article > * {
    will-change: opacity, transform, filter, clip-path;
}

/* 1. Intro: Blur & Slide Up */
#intro:not(.has-revealed) > * {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(10px);
}

#intro.active > * {
    animation: introReveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes introReveal {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 2. Education (Journey): Staggered scale & fade */
#eduction:not(.has-revealed) > * {
    opacity: 0;
    transform: scale(0.95);
}

#eduction.active > * {
    animation: scaleFadeReveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Staggering manually since we know the structure roughly */
#eduction.active > h2 { animation-delay: 0.1s; }
#eduction.active > .abc:nth-of-type(1) { animation-delay: 0.2s; }
#eduction.active > .abc:nth-of-type(2) { animation-delay: 0.3s; }

@keyframes scaleFadeReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 3. Skills: Mask Reveal */
#skills:not(.has-revealed) > * {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
}

#skills.active > * {
    animation: maskReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#skills.active > h2 { animation-delay: 0.1s; }
#skills.active > .skill { animation-delay: 0.25s; }
#skills.active > p { animation-delay: 0.4s; }

@keyframes maskReveal {
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 4. Work: Slight Slide In From Left */
#work:not(.has-revealed) > * {
    opacity: 0;
    transform: translateX(-15px);
}

#work.active > * {
    animation: slideRightReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#work.active > h2 { animation-delay: 0.1s; }
#work.active > .work_exp4:nth-of-type(1) { animation-delay: 0.2s; }
#work.active > .work_exp4:nth-of-type(2) { animation-delay: 0.3s; }
#work.active > .work_exp4:nth-of-type(3) { animation-delay: 0.4s; }
#work.active > .work_exp1 { animation-delay: 0.5s; }

@keyframes slideRightReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 5. Projects: Gentle Scale Down (Landing) */
#projects:not(.has-revealed) > * {
    opacity: 0;
    transform: scale(1.03);
}

#projects.active > * {
    animation: landingReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#projects.active > h2 { animation-delay: 0.1s; }
#projects.active > .featured { animation-delay: 0.2s; }

@keyframes landingReveal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 6. Achievements: Simple Blur Resolve */
#achievements:not(.has-revealed) > * {
    opacity: 0;
    filter: blur(8px);
}

#achievements.active > * {
    animation: blurResolve 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#achievements.active > h2 { animation-delay: 0.1s; }
#achievements.active > .academic { animation-delay: 0.25s; }
#achievements.active > .workshop { animation-delay: 0.4s; }

@keyframes blurResolve {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* 7. Contact: Staggered Slide Up */
#contact:not(.has-revealed) > * {
    opacity: 0;
    transform: translateY(10px);
}

#contact.active > * {
    animation: slideUpReveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#contact.active > h2 { animation-delay: 0.1s; }
#contact.active > .contactme { animation-delay: 0.2s; }

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

/* When the animation finishes, the JS adds .has-revealed */
/* Once it has revealed, we reset properties to default so it doesn't disappear when .active is toggled */
article.has-revealed > * {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    #main article > * {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        opacity: 1 !important;
    }
}