/* Animations CSS - Putthari Real Estate */

/* =============================================
   SCROLL-TRIGGERED ANIMATIONS
   Elements start hidden; .is-visible triggers
   the animation via IntersectionObserver in JS.
   ============================================= */

/* --- Fade In Up (default) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* --- Fade In Left --- */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

/* --- Fade In Right --- */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* --- Slide In Up (kept for existing usage) --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* --- Scale In (cards) --- */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }

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

/* --- Icon pulse on reveal --- */
@keyframes iconPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Underline grow --- */
@keyframes growUnderline {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* =============================================
   BASE HIDDEN STATE
   All animate-* elements are invisible until
   IntersectionObserver adds .is-visible
   ============================================= */
.animate-fade-up,
.animate-fade-left,
.animate-scale,
.slide-in-up,
.slide-in-left,
.slide-in-right,
.fade-in {
    opacity: 0;
    will-change: opacity, transform;
}

/* =============================================
   TRIGGERED STATES
   ============================================= */
.animate-fade-up.is-visible {
    animation: fadeInUp 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.animate-fade-left.is-visible {
    animation: fadeInLeft 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.animate-scale.is-visible {
    animation: scaleIn 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Legacy classes — now scroll-triggered */
.slide-in-up.is-visible {
    animation: slideInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.slide-in-left.is-visible {
    animation: fadeInLeft 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.slide-in-right.is-visible {
    animation: fadeInRight 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.fade-in.is-visible {
    animation: fadeInUp 1s ease-out forwards;
}

/* Icon pop when card becomes visible */
.philosophy-item.is-visible .fas {
    animation: iconPop 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

/* Decorative underline under h2 in about section */
.section-header .anim-underline {
    display: block;
    height: 3px;
    background: var(--brand-gold, #b8860b);
    border-radius: 2px;
    margin: 12px auto 0;
    width: 60px; /* Set final width here */
    transform: scaleX(0); /* Start scaled to 0 */
    transform-origin: center;
    opacity: 0;
}

.section-header.is-visible .anim-underline,
.section-header .anim-underline.is-visible {
    animation: growUnderline 0.6s ease-out 0.4s forwards;
}