/* ============================================
   ANIMATIONS.CSS — Ooi Solutions
   ONLY Keyframes & utility animation classes
   ⚠️ STRICT RULE: Only animate opacity & transform
   No width, height, top, left, or filter blur here!
   ============================================ */

/* ── CORE KEYFRAMES ── */

/* Approach tab progress bar (Optimized: uses scaleY instead of height) */
@keyframes progressFill {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Standard entrance animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ── UTILITY ANIMATION CLASSES ── */
/* Add these classes to elements, and use JS/GSAP to add 'is-visible' 
   when they enter the viewport for lightweight CSS animations */

.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
}
.anim-fade-up.is-visible {
    animation: fadeUp 0.7s var(--ease-out) forwards;
}

.anim-fade-in {
    opacity: 0;
}
.anim-fade-in.is-visible {
    animation: fadeIn 0.6s ease forwards;
}

.anim-scale-in {
    opacity: 0;
    transform: scale(0.9);
}
.anim-scale-in.is-visible {
    animation: scaleIn 0.5s var(--ease-out) forwards;
}

.anim-slide-left {
    opacity: 0;
    transform: translateX(-40px);
}
.anim-slide-left.is-visible {
    animation: slideInLeft 0.7s var(--ease-out) forwards;
}

.anim-slide-right {
    opacity: 0;
    transform: translateX(40px);
}
.anim-slide-right.is-visible {
    animation: slideInRight 0.7s var(--ease-out) forwards;
}


/* ── STAGGER DELAY UTILITIES ── */
/* Use with the animation classes above for staggered children */
.delay-1 { animation-delay: 0.1s !important; }
.delay-2 { animation-delay: 0.2s !important; }
.delay-3 { animation-delay: 0.3s !important; }
.delay-4 { animation-delay: 0.4s !important; }
.delay-5 { animation-delay: 0.5s !important; }