/* =============================================================
   Nivi Homes - Animations
   ============================================================= */

/* Scroll reveal (toggled by main.js via IntersectionObserver) */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed { transform: translateX(0); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal="zoom"].revealed { transform: scale(1); }

/* Stagger children */
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .8s ease forwards; }

/* =============================================================
   Elementor-accurate entrance animations (animate.css keyframes).
   Elements start hidden (.anim-hidden); JS adds .anim-run + .anim-<name>
   when scrolled into view. Duration 1.25s, easing ease (Elementor default).
   ============================================================= */
.anim-hidden { visibility: hidden; }
.anim-run {
    visibility: visible;
    animation-duration: 1.1s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1); /* easeOutCubic - clean deceleration */
    animation-fill-mode: both;
}
.anim-fadeIn      { animation-name: e-fadeIn; }
.anim-fadeInDown  { animation-name: e-fadeInDown; }
.anim-fadeInUp    { animation-name: e-fadeInUp2; }
.anim-fadeInLeft  { animation-name: e-fadeInLeft; }
.anim-fadeInRight { animation-name: e-fadeInRight; }
.anim-slideInRight{ animation-name: e-slideInRight; }
.anim-slideInLeft { animation-name: e-slideInLeft; }

@keyframes e-fadeInUp2 {
    from { opacity: 0; transform: translate3d(0, 60px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes e-fadeInLeft {
    from { opacity: 0; transform: translate3d(-60px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes e-fadeInRight {
    from { opacity: 0; transform: translate3d(60px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes e-fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Cleaner value-card entries: fade + gentle directional slide (not full off-screen) */
@keyframes e-fadeInDown {
    from { opacity: 0; transform: translate3d(0, -40px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes e-slideInRight {
    from { opacity: 0; transform: translate3d(60px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes e-slideInLeft {
    from { opacity: 0; transform: translate3d(-60px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .anim-hidden { visibility: visible !important; }
    .anim-run { animation: none !important; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .section-reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================
   Section-level auto-reveal (applied by main.js to sections
   without explicit data-reveal or data-anim attributes)
   ============================================================= */
.section-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}
.section-reveal.section-revealed {
    opacity: 1;
    transform: translateY(0);
}