/* ===================================== */
/* Story Details Section Animations      */
/* ===================================== */

/* --- Keyframes --- */

/* Slide in from the left */
@keyframes storySlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-80px); /* Adjust distance as needed */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from the right */
@keyframes storySlideInRight {
    from {
        opacity: 0;
        transform: translateX(80px); /* Adjust distance as needed */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Initial Hidden State --- */
/* Hide the sections before they become visible */
.company-origin-section,
.mission-vision-section {
    opacity: 0; /* Start fully transparent */
}


/* --- Apply Animations When Visible --- */

/* Company Origin slides from the Left */
.company-origin-section.is-visible {
    animation: storySlideInLeft 1s ease-out forwards;
}

/* Mission & Vision slides from the Right */
.mission-vision-section.is-visible {
    animation: storySlideInRight 1s ease-out 0.2s forwards; /* Add a slight delay */
    /* animation: name duration timing-function delay fill-mode */
}

/* ===================================== */
/* Team Section Animations               */
/* ===================================== */

/* --- Initial Hidden State --- */

/* Section Title */
.team-section .section-title h2 {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* Team Cards (assuming they don't already have opacity/transform from layout) */
/* If they DO already have opacity: 0 / transform: translateY(30px) from the
   layout step in the previous answer, you only need to ensure the transition
   property is set, like this: */
.team-section .team-card {
     opacity: 0; /* Ensure they start hidden */
     transform: translateY(30px); /* Ensure they start lower */
     transition: opacity 0.7s ease-out, transform 0.7s ease-out;
     will-change: opacity, transform;
     /* Note: transition-delay is added below for the visible state */
}


/* --- Visible State (Triggered by .is-visible on .team-section) --- */

/* Animate Section Title */
.team-section.is-visible .section-title h2 {
    opacity: 1;
    transform: translateY(0);
    /* Optional: Add a small delay if you want cards to start slightly later */
    /* transition-delay: 0.1s; */
}

/* Animate Team Cards */
.team-section.is-visible .team-card {
    opacity: 1;
    transform: translateY(0);
}

/* Add STAGGERING delays to the team cards */
.team-section.is-visible .team-card:nth-child(1) {
    transition-delay: 0.6s; /* First card (top full-width one) */
}
.team-section.is-visible .team-card:nth-child(2) {
    transition-delay: 0.8s; /* Second card (bottom-left) */
}
.team-section.is-visible .team-card:nth-child(3) {
    transition-delay: 1s; /* Third card (bottom-right) */
}

/* ===================================== */
/* Why Choose Us Animation (Fade/Scale)  */
/* ===================================== */

/* --- Initial Hidden State --- */
.why-choose-us {
    opacity: 0;                     /* Start invisible */
    transform: scale(0.95);         /* Start slightly smaller */
    transition: opacity 0.7s ease-out, transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth transition */
    will-change: opacity, transform;
}

/* --- Visible State --- */
.why-choose-us.is-visible {
    opacity: 1;                     /* Fade in */
    transform: scale(1);            /* Scale to normal size */
}