/* 
  Custom Scroll-Triggered Entrance Animations 
  Preserves original fonts and colors.
*/

/* 1. Keyframes for Slide In Effects */
@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); }
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2. Initial state: hide elements before they scroll into view */
.anim-left, .anim-right, .anim-up {
    opacity: 0;
}

/* 3. Animate when the .in-view class is added via JavaScript */
.anim-left.in-view {
    animation: slideInLeft 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.anim-right.in-view {
    animation: slideInRight 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.anim-up.in-view {
    animation: fadeSlideUp 0.8s ease-out forwards;
}

/* Force Elementor invisible elements to show up (overriding default hidden state) */
.elementor-invisible {
    visibility: visible !important;
}

/* Hide broken fried chicken image overlay in About section */
.elementor-element-a45e052 {
    display: none !important;
}

/* 4. Ensure images keep their hover effects after animating */
img {
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease !important;
}

img:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* 5. Enhanced Hover Effects for Links and Menu Items */
a, .menu-item a {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

a:hover, .menu-item a:hover {
    transform: translateY(-2px);
}

/* 6. Button Enhancements */
button, .elementor-button, .ast-button {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

button:hover, .elementor-button:hover, .ast-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    filter: brightness(1.1);
}