/* ══════════════════════════
   REUSABLE SECTION ANIMATIONS
══════════════════════════ */

/* Scroll pe trigger hone ke liye base */
.anim-title,
.anim-subtitle {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-subtitle {
    transition-delay: 0.2s; /* title ke baad thoda late aaye */
}

.anim-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Left se aaye */
.anim-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Right se aaye */
.anim-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Zoom se aaye */
.anim-zoom {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-zoom.visible {
    opacity: 1;
    transform: scale(1);
}

/* Delay classes — staggered animation ke liye */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }