/* Hildhouse Scroll Reveal Animation */

/* Initial state - hidden before scroll */
.hild-reveal {
    opacity: 0 !important;
    transform: translateY(80px) !important;
    /* Override any shorthand transition from Elementor */
    transition: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.8s, 0.8s !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: opacity, transform;
}

/* Revealed state - visible after scroll */
.hild-reveal.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    will-change: auto;
}

/* Optional: Delay variations for staggered animations */
.hild-reveal.delay-1 {
    transition-delay: 0.1s, 0.1s !important;
}

.hild-reveal.delay-2 {
    transition-delay: 0.2s, 0.2s !important;
}

.hild-reveal.delay-3 {
    transition-delay: 0.3s, 0.3s !important;
}

.hild-reveal.delay-4 {
    transition-delay: 0.4s, 0.4s !important;
}

/* Delay support for direction classes */
.hild-reveal.from-left.delay-1,
.hild-reveal.from-right.delay-1,
.hild-reveal.from-bottom.delay-1,
.hild-reveal.scale-up.delay-1 {
    transition-delay: 0.1s, 0.1s !important;
}

.hild-reveal.from-left.delay-2,
.hild-reveal.from-right.delay-2,
.hild-reveal.from-bottom.delay-2,
.hild-reveal.scale-up.delay-2 {
    transition-delay: 0.2s, 0.2s !important;
}

.hild-reveal.from-left.delay-3,
.hild-reveal.from-right.delay-3,
.hild-reveal.from-bottom.delay-3,
.hild-reveal.scale-up.delay-3 {
    transition-delay: 0.3s, 0.3s !important;
}

.hild-reveal.from-left.delay-4,
.hild-reveal.from-right.delay-4,
.hild-reveal.from-bottom.delay-4,
.hild-reveal.scale-up.delay-4 {
    transition-delay: 0.4s, 0.4s !important;
}

/* Optional: Different animation directions */
.hild-reveal.from-left {
    opacity: 0 !important;
    transform: translateX(-100px) !important;
    transition: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.8s, 0.8s !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition-delay: 0s, 0s !important;
}

.hild-reveal.from-left.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.hild-reveal.from-right {
    opacity: 0 !important;
    transform: translateX(100px) !important;
    transition: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.8s, 0.8s !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition-delay: 0s, 0s !important;
}

.hild-reveal.from-right.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.hild-reveal.from-bottom {
    opacity: 0 !important;
    transform: translateY(100px) !important;
    transition: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 1s, 2s !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition-delay: 0s, 0s !important;
}

.hild-reveal.from-bottom.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.hild-reveal.scale-up {
    opacity: 0 !important;
    transform: scale(0.85) !important;
    transition: none !important;
    transition-property: opacity, transform !important;
    transition-duration: 0.8s, 0.8s !important;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition-delay: 0s, 0s !important;
}

.hild-reveal.scale-up.revealed {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Optional: Faster or slower animations */
.hild-reveal.fast {
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hild-reveal.slow {
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Override hidden state when Elementor editor is active */
.elementor-editor-active .hild-reveal,
.elementor-editor-preview .hild-reveal,
body.elementor-editor-active .hild-reveal,
body.elementor-editor-preview .hild-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.elementor-editor-active .hild-reveal.from-left,
.elementor-editor-preview .hild-reveal.from-left,
body.elementor-editor-active .hild-reveal.from-left,
body.elementor-editor-preview .hild-reveal.from-left {
    transform: none !important;
}

.elementor-editor-active .hild-reveal.from-right,
.elementor-editor-preview .hild-reveal.from-right,
body.elementor-editor-active .hild-reveal.from-right,
body.elementor-editor-preview .hild-reveal.from-right {
    transform: none !important;
}

.elementor-editor-active .hild-reveal.from-bottom,
.elementor-editor-preview .hild-reveal.from-bottom,
body.elementor-editor-active .hild-reveal.from-bottom,
body.elementor-editor-preview .hild-reveal.from-bottom {
    transform: none !important;
}

.elementor-editor-active .hild-reveal.scale-up,
.elementor-editor-preview .hild-reveal.scale-up,
body.elementor-editor-active .hild-reveal.scale-up,
body.elementor-editor-preview .hild-reveal.scale-up {
    transform: none !important;
}