/* Page Transitions Styles */


/* Main transition overlay */

.transition-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: #000;
    /* Default color, can be overridden */
    z-index: 9999;
    transform: translateY(100%);
    will-change: transform;
    /* Performance optimization */
    pointer-events: none;
    /* Allow clicks to pass through when not transitioning */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    visibility: hidden;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Improved easing */
    /* Add subtle gradient for depth */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), #000);
}


/* During transition, prevent clicks */

.is-transitioning .transition-overlay {
    pointer-events: all;
    visibility: visible;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
    /* Subtle shadow for depth */
}


/* Prevent content flashing during transitions */

.is-transitioning body>*:not(.transition-overlay) {
    opacity: 0;
    transition: none !important;
    filter: blur(0.5px);
    /* Very subtle blur for smoother feel */
}


/* Optional layered effect for even smoother transitions */

.transition-overlay::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    /* Slightly offset for layered effect */
    height: 10px;
    background-color: inherit;
    opacity: 0.7;
    z-index: -1;
}


/* Custom overlay color options - add classes to body */

.overlay-primary .transition-overlay {
    background-color: var(--e-global-color-primary, #000);
    background-image: linear-gradient(to bottom, rgba(var(--e-global-color-primary-rgb, 0, 0, 0), 0.95), var(--e-global-color-primary, #000));
}

.overlay-secondary .transition-overlay {
    background-color: var(--e-global-color-secondary, #000);
    background-image: linear-gradient(to bottom, rgba(var(--e-global-color-secondary-rgb, 0, 0, 0), 0.95), var(--e-global-color-secondary, #000));
}

.overlay-accent .transition-overlay {
    background-color: var(--e-global-color-accent, #000);
    background-image: linear-gradient(to bottom, rgba(var(--e-global-color-accent-rgb, 0, 0, 0), 0.95), var(--e-global-color-accent, #000));
}


/* Hide content that's being loaded until Barba completes the transition */

[data-barba="container"] {
    visibility: visible;
    opacity: 1;
}


/* Ensure content is visible when JavaScript is disabled */

.no-js body>* {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Hide content during transition to avoid flashes */

.is-transitioning [data-barba="container"] {
    visibility: hidden;
}


/* Transition states for body */

.is-transitioning {
    cursor: progress;
    /* Show loading cursor during transitions */
    overflow: hidden;
    /* Prevent scrolling during transition */
    pointer-events: none;
    /* Disable all clicks during transition */
    height: 100vh;
    /* Lock height during transition */
}


/* Create a smooth transition for links */

a {
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.2s ease;
}

a:hover {
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}


/* Optional: smooth scrolling for page */

html {
    scroll-behavior: smooth;
}


/* Elementor-specific fixes */


/* Fix for Elementor animations */

.elementor-invisible {
    visibility: hidden;
}


/* When in a Barba container, make sure widgets show properly */

[data-barba="container"] .elementor-section,
[data-barba="container"] .elementor-column,
[data-barba="container"] .elementor-column-wrap,
[data-barba="container"] .elementor-widget-wrap,
[data-barba="container"] .elementor-widget {
    visibility: visible !important;
}


/* Ensure animated elements are visible after transition */

.elementor-element.animated {
    visibility: visible !important;
}


/* Fix for Elementor motion effects */

.elementor-motion-effects-element,
.elementor-motion-effects-container {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* Fix for Swiper sliders in Elementor */

.swiper-container-initialized {
    visibility: visible !important;
}


/* Fix for Elementor image widget opacity issue */

.elementor-widget-image img {
    opacity: 1 !important;
}


/* Fix for Elementor popup visibility */

.elementor-popup-modal {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Fix for jQuery-based widgets */

.is-transitioning .elementor-tabs,
.is-transitioning .elementor-accordion {
    pointer-events: none !important;
}


/* Fix for videos */

.elementor-video {
    visibility: visible !important;
}


/* Responsive adjustments */

@media (prefers-reduced-motion: reduce) {
    .transition-overlay {
        transition-duration: 0.1s;
    }
    html {
        scroll-behavior: auto;
    }
}