/* Interaction observer */

.observe {
    opacity: 0;  /* Start invisible */
    transition: all 1s ease;
}

body:has(.layout-builder) .head-fixed-top {
    position:static!important;
    background-color: #000 !important;
}


.layout-builder .observe {
    opacity: unset;
}
  
.is-inViewport {
    opacity: 1;
    transition: opacity 1s ease;
}

/* End interaction observer */


/* Animate Default */

[data-inviewport=show] {
    opacity: 1;
}

/* Animate Slide Right */

[data-inviewport=slide-right] > *{
    opacity: 0;
    -webkit-transform: translateX(-120px);
    transform: translateX(-120px);
    transition: all 1s ease-in-out ;
}

[data-inviewport=slide-right].is-inViewport > *{
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* Animate Slide Bottom */

[data-inviewport=slide-bottom] > *{
    opacity: 0;
    -webkit-transform: translateY(-120px);
    transform: translateY(-120px);
    transition: all 1s ease-in-out ;
}

[data-inviewport=slide-bottom].is-inViewport > *{
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* Animate Slide Left */

[data-inviewport=slide-left] > * {
    opacity: 0;
    -webkit-transform: translateX(120px);
    transform: translateX(120px);
    transition: all 1s ease-in-out ;
}

[data-inviewport=slide-left].is-inViewport > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* Animate Slide Top */

[data-inviewport=slide-top] > * {
    opacity: 0;
    -webkit-transform: translateY(120px);
    transform: translateY(120px);
    transition: all 1s ease-in-out ;
}

[data-inviewport=slide-top].is-inViewport > * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* Animate Slide In Right Back */

 [data-inviewport=slide-in-right-back] > * {
  transform: translateZ(700px) translateY(300px) translateX(-400px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.250, 0.460, 0.450, 0.940), 
              opacity 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

[data-inviewport=slide-in-right-back].is-inViewport > *  {
  transform: translateZ(0) translateY(0) translateX(0);
  opacity: 1;
}

/* Animate Slide In Left Back */

 [data-inviewport=slide-in-left-back] > * {
  transform: translateZ(700px) translateY(300px) translateX(400px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.250, 0.460, 0.450, 0.940), 
              opacity 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

[data-inviewport=slide-in-left-back].is-inViewport > *  {
  transform: translateZ(0) translateY(0) translateX(0);
  opacity: 1;
}

/* Animate Slide In Back Center */

 [data-inviewport=slide-in-back-center] > * {
  transform: translateZ(600px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.250, 0.460, 0.450, 0.940), 
              opacity 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

[data-inviewport=slide-in-back-center].is-inViewport > *  {
  transform: translateZ(0);
  opacity: 1;
}

/* Animate Roll in Left */

[data-inviewport=roll-in-left] > * {
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
    transition: all 0.6s ease-out ;
}

[data-inviewport=roll-in-left].is-inViewport > *  {
  transform: translateX(0) rotate(0);
  opacity: 1;
}

/* Animate Roll in Right */

[data-inviewport=roll-in-right] > * {
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
    transition: all 0.6s ease-out ;
}

[data-inviewport=roll-in-right].is-inViewport > *  {
  transform: translateX(0) rotate(0);
  opacity: 1;
}

/* Animate Bounce in Top */

[data-inviewport=bounce-in-top] > * {
  transform: translateY(-500px);
  opacity: 0;
  transition: 
    transform 1.1s cubic-bezier(.28, .84, .42, 1.15), 
    opacity 0.6s ease-out;
}

[data-inviewport=bounce-in-top].is-inViewport > *  {
  transform: translateY(0);
  opacity: 1;
}

/* Animate Bounce in Forward */

[data-inviewport=bounce-in-forward] > * {
  transform: scale(0);
  opacity: 0;
  transition: 
    transform 1.1s cubic-bezier(.68,-0.55,.27,1.55), 
    opacity 0.6s ease-out;
}

[data-inviewport=bounce-in-forward].is-inViewport > * {
  transform: scale(1);
  opacity: 1;
}

/* Animate Bounce in Backward */

[data-inviewport=bounce-in-backward] > * {
  transform: scale(7);
  opacity: 0;
  transform-origin: center;
  transition:
    transform 1.1s cubic-bezier(.68,-0.55,.27,1.55),
    opacity .55s ease-out;
}

[data-inviewport=bounce-in-backward].is-inViewport > * {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    [data-inviewport=bounce-in-backward] > * {
        transition: none;
        transform: none;
        opacity: 1;
    }
}