/* ============================================
   ABOUT PAGE ANIMATIONS
   Entrance animations and scroll-triggered effects
   ============================================ */

/* -------------------- Keyframes -------------------- */

/* Slide down + fade in (for images) */
@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* Slide from left + fade in (for section 1 title) */
@keyframes slideLeftFadeIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Slide from right + fade in (for section 2 title) */
@keyframes slideRightFadeIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/* Simple fade in (for paragraphs and list items) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* -------------------- Section 1: Professional Journey (on load) -------------------- */

/* Image: slide down + fade in */
.about-section:first-of-type .about-image {
    opacity: 0;
    animation: slideDownFadeIn 0.8s ease-out 0.3s forwards;
}

/* Title: slide from left + fade in */
.about-section:first-of-type .about-content h2 {
    opacity: 0;
    animation: slideLeftFadeIn 0.6s ease-out 1.1s forwards;
}

/* Paragraphs: staggered fade in */
.about-section:first-of-type .about-content p:nth-of-type(1) {
    opacity: 0;
    animation: fadeIn 0.5s ease-out 1.7s forwards;
}

.about-section:first-of-type .about-content p:nth-of-type(2) {
    opacity: 0;
    animation: fadeIn 0.5s ease-out 2.0s forwards;
}

.about-section:first-of-type .about-content p:nth-of-type(3) {
    opacity: 0;
    animation: fadeIn 0.5s ease-out 2.3s forwards;
}

/* -------------------- Section 2: My Favorite Things (on scroll) -------------------- */

/* Initial hidden state - will be revealed by JS */
.about-section.section--alt .about-image,
.about-section.section--alt .about-content h2,
.about-section.section--alt .about-content>p,
.about-section.section--alt .about-content ul li {
    opacity: 0;
}

/* Animate when section becomes visible */
.about-section.section--alt.animate-visible .about-image {
    animation: slideDownFadeIn 0.8s ease-out forwards;
}

.about-section.section--alt.animate-visible .about-content h2 {
    animation: slideRightFadeIn 0.6s ease-out 0.8s forwards;
}

.about-section.section--alt.animate-visible .about-content>p {
    animation: fadeIn 0.5s ease-out 1.2s forwards;
}

/* Staggered list items */
.about-section.section--alt.animate-visible .about-content ul li:nth-child(1) {
    animation: fadeIn 0.5s ease-out 1.4s forwards;
}

.about-section.section--alt.animate-visible .about-content ul li:nth-child(2) {
    animation: fadeIn 0.5s ease-out 1.6s forwards;
}

.about-section.section--alt.animate-visible .about-content ul li:nth-child(3) {
    animation: fadeIn 0.5s ease-out 1.8s forwards;
}

.about-section.section--alt.animate-visible .about-content ul li:nth-child(4) {
    animation: fadeIn 0.5s ease-out 2.0s forwards;
}

.about-section.section--alt.animate-visible .about-content ul li:nth-child(5) {
    animation: fadeIn 0.5s ease-out 2.2s forwards;
}

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

    .about-section .about-image,
    .about-section .about-content h2,
    .about-section .about-content p,
    .about-section .about-content ul li {
        opacity: 1 !important;
        animation: none !important;
    }
}