/**
 * Page Transitions Styles
 * Default styles for page transition elements
 * Note: Duration is set dynamically via inline CSS in functions.php
 */

/* Transition Panel Background */
:root {
  --border-bg-width: var(--soda-pt-border-bg-width, 4%);
}

.transition-pannel-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--soda-pt-panel-color, #000);
    z-index: 10000;
    opacity: 0;
    transform: scale3d(1, 0, 1);
    transform-origin: top;
    pointer-events: none;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    transition-duration: 1s, var(--soda-pt-transition-duration, 1s);
    transition-delay: 0s, 1s;

}

/* Preserve fixed/sticky elements during transitions */
body.close [style*="position: fixed"],
body.close [style*="position: sticky"],
body.close .elementor-sticky,
body.close header[style*="position: fixed"] {
    z-index: 802 !important;
}
/*
.transition-pannel-bg::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    pointer-events: none;
    z-index: var(--grid-line-z-index, 0);
    min-height: 100vh;
    width: calc(var(--grid-line-width) - (2 * 0px));
    max-width: var(--grid-line-max-width, 100%);
    background-size: calc(100% + var(--grid-line-thickness, 1px)) 100%;
    background-image: repeating-linear-gradient(var(--grid-line-direction, 90deg), var(--grid-line-column-color, transparent), var(--grid-line-column-color, transparent) calc((100% / var(--grid-line-columns, 12)) - var(--grid-line-thickness, 1px)), var(--grid-line-color, #eee) calc((100% / var(--grid-line-columns, 12)) - var(--grid-line-thickness, 1px)), var(--grid-line-color, #eee) calc(100% / var(--grid-line-columns, 12)));
    outline: 1px solid var(--grid-line-color, #eee);
}
*/
 .transition-pannel-bg.active {
  transform: scale3d(1, 1, 1) !important;
  opacity: 1;
  transform-origin: top;
  pointer-events: none;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-duration: 0s, var(--soda-pt-transition-duration, 1s);
  transition-delay: 0s, 0s;
}



.close .transition-pannel-bg.active  {
    transform: scale3d(1, 1, 1);
    transform-origin: bottom;
    pointer-events:none;
}

/* Transition Borders Background */
.transition-borders-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: var(--soda-pt-borders-color, #121e50);
    top: 0;
    left: 0;
    pointer-events: none;
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
    transition-property: clip-path;
    transition-timing-function: cubic-bezier(0.57, 0, 0.42, 1);
    transition-duration: var(--soda-pt-transition-duration, 1s);
    z-index: 800;
}


.transition-borders-bg.active {
  clip-path: polygon(0% 0%, 0% 100%, var(--border-bg-width) 100%, var(--border-bg-width) calc(2 * var(--border-bg-width)), calc(100% - var(--border-bg-width)) calc(2 * var(--border-bg-width)), calc(100% - var(--border-bg-width)) 100%, var(--border-bg-width) 100%, var(--border-bg-width) 100%, 100% 100%, 100% 0%);
}

.page-loaded .page-content{
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s;
}

.close .page-content{
  -webkit-transform:translate3d(0,-200px,0);
  transform:translate3d(0,-100px,0);
  transition: transform 1.1s cubic-bezier(.57,0,.42,1), opacity 0.5s 0.5s;
  opacity: 0;
}

.open1.page-out .page-content{
  -webkit-transform:translate3d(0,60px,0);
  transform:translate3d(0,60px,0);
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s;
  opacity: 0;
}

.close .outing{
    -webkit-transform:translate3d(0,-100px,0);
    transform:translate3d(0,-100px,0);
    transition: transform 1.1s cubic-bezier(.57,0,.42,1), opacity 0.5s 0.5s;
    opacity: 0;
}

.close .fading {
    transition: all 0.8s;
    opacity: 0;
}


.elementor-location-header {
    opacity: 1;
    position:fixed;
    z-index: 99;

    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    transition-duration: 0.7s;
    transition-delay: 0s;


}
.elementor-location-header a {
  pointer-events: all;
}
body.soda-pt-pointer .elementor-location-header a,body.close .elementor-location-header a {
  pointer-events: none;
}
.close .elementor-location-header {

  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-duration: 0.7s;
  transition-delay: 0s;
  opacity: 0;

}

body.soda-pt-entrance .elementor-location-header {
opacity: 0;


}

.main-wrapper {
    overflow:hidden !important;
}


.outing{
transform:translate3d(0,0,0);
 -webkit-transform:translate3d(0,0,0);
opacity: 1;
transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s;
}

.close .outing{
    -webkit-transform:translate3d(0,-100px,0);
    transform:translate3d(0,-100px,0);
    transition: transform 1.1s cubic-bezier(.57,0,.42,1), opacity 0.5s 0.5s;
    opacity: 0;
}

.open1 .outing {
 -webkit-transform:translate3d(0,100px,0);
transform:translate3d(0,100px,0);
opacity: 0;
transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s;
}

body.soda-pt-entrance .transition-pannel-bg {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    pointer-events:none;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    transition-duration: 1s, var(--soda-pt-transition-duration, 1s);
    transition-delay: 1s, 0s;
}