:root{
    --golden:#E09A44;
}
*{
    color:#FFF;
    font-family:'articulat-cf', sans-serif !important;
}
header.dark .right-block{
    background-color: #00000033;
    transition: all .5s linear;
}
header.dark.right-block:hover{
    background-color: #FFFFFF;
    transition: all 1s ease-in-out
}
main.logo {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
main.logo *{
    box-sizing: border-box !important;
}
body.bg header:has(+main.logo){
    background: transparent  !important;
}
main.logo>.wp-block-group.alignfull{
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}
.map{
    opacity:0;
}
.text-container{
    height: 100vh;
    width: 100vw;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    max-width: unset;
}
p.title{
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 300;
    line-height: 1;
    color: white;
}
p.subtitle{
    font-size: clamp(1.5rem, 5vw, 3.75rem); 
    line-height: 1.2;
    font-weight: 300;
    color: white;
    text-wrap: nowrap;

}
main.logo span{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    color: white;

}
.overlay.step-10 .animation-area,
.overlay.step-10 .text-animation-area,
.overlay.step-11 .animation-area,
.overlay.step-11 .text-animation-area,
.overlay.step-12 .animation-area,
.overlay.step-12 .text-animation-area{
    background-color: white;
    
}
.overlay.step-10 p,
.overlay.step-10 span,
.overlay.step-11 p,
.overlay.step-11 span,
.overlay.step-12 p,
.overlay.step-12 span{
    color: black;
}

.animation-area,.text-animation-area{
    height: 100vh;
    width: 100vw;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    max-width: unset;
    background-color: black;
    transition: all 1s linear;
    /* padding-top: var(--header-height); */
}

.elements-area{
    height: 100vh;
    width: 100vw;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    max-width: unset;
    background-color:transparent;
    transition: all 1s linear;
    /* padding-top: var(--header-height); */
}

.text-animation-area{
    background-color: transparent !important;
}
.text-animation-area [class*="step-"]:not(.active){
    display: none;
}
section{
    transition: all 1s linear;
}
section.active{
    transition: all 1s linear var(--framedelay);
}


main.logo section {
    min-height: 100vh;
    width: 100%;
    max-width: unset;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    isolation: isolate;
    position: relative;
}
.glow{
    position: absolute;
    width: 20%;
    aspect-ratio: 1.25;
    background-color: var(--golden);
    filter: blur(10vw);
    position: absolute;
    z-index: -1;
    animation: linear glow ;
    animation-timeline: --frameone;
    transition: all 1s linear;
}

main.logo section.first-frame canvas{
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;mar
    z-index: -1;
}

main.logo section.first-frame { 
 min-height: 100vh
}
main.logo section.dark {
    background-color: black;
}
footer{
    z-index: 2;
    position: relative;
}



section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animation-area svg.combine{
    transition: transform .75s linear, opacity .75s linear;
}
.animation-area svg.combine g{
    transition: transform .75s linear;
}
.overlay.step-1 .animation-area svg.combine,
.overlay.step-7 .animation-area svg.combine,
.overlay.step-11 .animation-area svg.combine,
.overlay.step-12 .animation-area svg.combine {
    --movement :8%;
    transform: rotate(90deg);
}
.overlay.step-1 .animation-area svg.combine g.left,
.overlay.step-7 .animation-area svg.combine g.left,
.overlay.step-11 .animation-area svg.combine g.left,
.overlay.step-12 .animation-area svg.combine g.left{
    transform: translateY(calc(var(--movement) * -1));
}
.overlay.step-1 .animation-area svg.combine g.right,
.overlay.step-7 .animation-area svg.combine g.right,
.overlay.step-11 .animation-area svg.combine g.right,
.overlay.step-12 .animation-area svg.combine g.right{
    transform: translateY(calc(var(--movement)))
}

.overlay.step-2 .animation-area svg.combine g{
    transition: transform .75s ease-in-out 1s;
}



.overlay.step-3 .animation-area svg.combine g.left{
    transform: translateX(-200vw);
}
.overlay.step-3 .animation-area svg.combine g.right{
    transform: translateX(200vw);
}
.overlay.step-4 .animation-area svg.combine,
.overlay.step-5 .animation-area svg.combine,
.overlay.step-6 .animation-area svg.combine,
.overlay.step-8 .animation-area svg.combine{
    opacity: 0;
}



.overlay .text2{
    position: absolute;
    opacity: 0;
    transition: all 1s linear;
}

/* .overlay .text2{
    opacity: 0;
    transition: all 1s ease-in-out ;
} */
.overlay.step-2  .text2{
    opacity: 1;
    transition: all 1s ease-in-out 1.5s;
}

 
.overlay .ele{
    position: absolute;
    max-height: 80vh; 
}
.overlay.step-4 .ele {
    --ele-pos :0px
}
.overlay .ele.left{
    left: var(--ele-pos);
    transition: all 1s linear 1s;

}
.elements-area::after{
    width: var(--ele1_width);
    height:10px;
    content: "";
    display: block;
    position: absolute;
    right:0;

}
.overlay .ele.right{
 
    max-width: var(--ele1_height);
    right: var(--ele-pos); 
    bottom: calc((100vh - var(--ele_height))/2);
    transform: rotate(0deg) scale(1);
    transition: all 1s linear ;
}
.overlay.step-4 .ele.right{
    --ele-pos :calc((var(--ele_width)*-1) + var(--ele1_width)  );

   
    transition: all 1s linear 1s;
}


.overlay .animation-area svg.line{
    position: absolute;
    top:0;
    left:0;
    height:101%;
    width:101%;
    opacity: 1;
    transition: opacity .5s linear var(--framedelay);
}
.overlay svg.line path{
    stroke-dashoffset: -2000;
}

.overlay .animation-area svg.line .top,
.overlay .animation-area svg.line .bottom{
    opacity: 0;
}

.overlay svg.line path{
    stroke-dashoffset: -2000;
    transition: all 2s linear ;
}
.overlay.step-3 svg.line{
    opacity: 1; 
}
.overlay.step-3 svg.line path{
    stroke-dashoffset: 0;
    transition: all 3s linear var(--framedelay);
}

.overlay.step-4 svg.line path{
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: all 2s linear;
}
.overlay.step-5 svg.line path,.overlay.step-6 svg.line path,.overlay.step-7 svg.line path,.overlay.step-8 svg.line path,.overlay.step-9 svg.line path,.overlay.step-10 svg.line path,.overlay.step-11 svg.line path,.overlay.step-12 svg.line path{
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 0;
   
}



.overlay svg.line g#building{
    transform: translate(43%, 11.5%);
}
.overlay svg.line g#building path[class*='b']{
   opacity: 0;
  
}
.overlay.step-3 svg.line g#building path[class*='b']{
    opacity: 1;   
 }
 .overlay svg.line g#building path.b-1 {
    transform: scale(1);
    opacity: 0;
    transform-origin:  var(--b1-left) var(--b1-bottom);
    transition: opacity .2s linear .4s;
 }

 .overlay svg.line g#building path.b-2 {
    transform: scale(1);
    opacity: 0;
    transform-origin:  var(--b2-left) var(--b2-bottom);
    transition: opacity .2s linear .3s;
 }

 .overlay svg.line g#building path.b-3 {
    transform: scale(1);
    opacity: 0;
    transform-origin:  var(--b3-left) var(--b3-bottom);
    transition: opacity .2s linear .2s;
 }

 .overlay svg.line g#building path.b-4 {
    transform: scale(1);
    opacity: 0;
    transform-origin:  var(--b4-left) var(--b4-bottom);
    transition: opacity .2s linear .1s;
 }

 .overlay svg.line g#building path.b-5 {
    transform: scale(1);
    opacity: 0;
    transform-origin:  var(--b5-left) var(--b5-bottom);
    transition: opacity .2s linear ;
 }

 .overlay svg g#building2 g.b2-1 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;

    transition: opacity .2s linear .4s;
 }
 .overlay svg g#building2 g.b2-2 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: opacity .2s linear .4s;
 }

 .overlay svg g#building2 g.b2-3 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: opacity .2s linear .4s;
 }

 .overlay svg g#building2 g.b2-4 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: opacity .2s linear .4s;
 }




 .overlay.step-3 svg.line g#building path.b-1 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 1.8s);
 }

 .overlay.step-3 svg.line g#building path.b-2 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 2.0s)
 }

 .overlay.step-3 svg.line g#building path.b-3 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 2.2s)
 }

 .overlay.step-3 svg.line g#building path.b-4 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 2.4s)
 }

 .overlay.step-3 svg.line g#building path.b-5 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 2.6s)
 }

 
 .overlay.step-5 svg g#building2 g.b2-1, .overlay.step-6 svg g#building2 g.b2-1 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 1.2s),transform .4s ease-in-out  calc( var(--framedelay) + 1.2s);
 }
 .overlay.step-5 svg g#building2 g.b2-2, .overlay.step-6 svg g#building2 g.b2-2 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 1.4s),transform .4s ease-in-out  calc( var(--framedelay) + 1.4s);
 }
 .overlay.step-5 svg g#building2 g.b2-3, .overlay.step-6 svg g#building2 g.b2-3 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 1.6s),transform .4s ease-in-out  calc( var(--framedelay) + 1.6s);
 }
 .overlay.step-5 svg g#building2 g.b2-4, .overlay.step-6 svg g#building2 g.b2-4 {
    transform: scale(1);
    opacity: 1;
    transition: opacity .4s ease-in-out  calc( var(--framedelay) + 1.8s),transform .4s ease-in-out  calc( var(--framedelay) + 1.8s);
 }

 .overlay.step-7 svg g#building2 g.b2-1 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: all .2s linear .3s;
 }
 .overlay.step-7 svg g#building2 g.b2-2 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: all .2s linear .2s;
 }

 .overlay.step-7 svg g#building2 g.b2-3 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: all .2s linear .1s;
 }

 .overlay.step-7 svg g#building2 g.b2-4 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    
    transition: all .2s linear ;
 }


 .overlay.step-7 svg g#building2 g.b2-4 {
    transform: scale(0);
    opacity: 0;
    transform-origin:  center center;
    transition: all .2s linear ;
 }





.overlay .animation-area svg.line .top,
.overlay .animation-area svg.line .bottom{
    opacity: 0;
    transition: opacity .5s linear ;
}
.overlay.step-3 .animation-area svg.line .top{
    opacity: 1;
    transition: opacity .5s linear calc( var(--framedelay) + .9s);
}
.overlay.step-3 .animation-area svg.line .bottom{
    opacity: 1;
    transition: opacity .5s linear calc( var(--framedelay) + 2.7s);
}

.overlay.step-3 .animation-area svg.line .top,
.overlay.step-3 .animation-area svg.line .bottom{
    opacity: 1;
}

.overlay .text3.left{
    position: absolute;
    top: var(--line_leftdot_top);
    left:-100vw;
    opacity: 0;
    transition: left 1s linear ,opacity 1s linear;
}

.overlay .text3.right{
    position: absolute;
    top: var(--line_rightdot_top);
    left:200vw;
    opacity: 0;
    transition: left 1s linear ,opacity 1s linear;
}

.overlay.step-3 .text3.left{
    
    top: var(--line_leftdot_top);
    left: var(--line_leftdot_left);
    opacity: 1;
    transition: left 1s linear  calc( var(--framedelay) + .6s), opacity 1s linear  calc( var(--framedelay) + .6s);;
}
.overlay.step-3 .text3.right{

    top: var(--line_rightdot_top);
    left: var(--line_rightdot_left);
    text-align: right;
    opacity: 1;
    transition: left .5s linear calc( var(--framedelay) + 1.8s),opacity .5s linear calc( var(--framedelay) + 1.8s);
}
.overlay .text4{
    position: absolute;
    top:-100vh;
    opacity: 0;
    transition: top 1s linear,opacity 1s linear;
    text-align: center;
}
.overlay.step-4 .combine,.overlay.step-4 .combine{
    opacity: 0;
    transition: opacity .2s linear;
}
.overlay.step-4 .text4{
    top:20vh;
    opacity: 1;
    transition: top 1s linear 1s,opacity 1s linear 1s;
}


.overlay .text5{
    position: absolute;
    top:20vh;
    left:-100vw;
    opacity: 0;
    transition: left 1s linear,opacity 1s linear;
    text-align: center;
}
.overlay.step-5 .text5{
    left:5vw;
    opacity: 1;
    transition: left 1s linear 1s,opacity 1s linear 1s;
}
.overlay.step-5 .glow,.overlay.step-6 .glow{
    --right : calc(var(--ele_width) / 2);
    transform:translate( calc( 50vw - (var(--glow-width)  )), calc(( var(--ele_height) / 2) ));
    transition: all 1s linear ;
}
.overlay.step-5 .ele.left,.overlay.step-9 .ele.left{
    transition: all 1s linear;
}
.overlay.step-9 .ele.right{
    transition: all 1s linear;
}
.overlay.step-5 .ele.right,.overlay.step-6 .ele.right{
    --ele-pos : calc((var(--ele_height) - var(--ele_width) ) / 2 );
    bottom: 0; /*calc(var(--ele-pos) * -1.5);*/
    right: var(--ele-pos);
    transform: rotate(-90deg) scale(1.5);
    transition: all 1s linear ;
}


.overlay .text6{
    position: absolute;
    top:15vh;
    left:-100vw;
    opacity: 0;
    transition: left 1s linear,opacity 1s linear;
    text-align: left;
}

.overlay.step-6 .text6{
    left:5vw;
    opacity: 1;
    transition: left 1s linear 1s,opacity 1s linear 1s;
}
.overlay.step-6 .glow{
    --right : calc((var(--ele_height) - var(--ele_width) ) / 2 )
    right:var(var(--right));
    
}

.overlay .combine [class*="hand-"]{
    opacity: 0;
    transition: opacity 1s linear;
}

.overlay .combine .hand-top{
    opacity: 1;
    transform: translateX(100vw);
    transition: all 1s ease-in-out ;
}
.overlay .combine .hand-bottom{
    opacity: 1;
    transform: translateX(-100vw);
    transition: all 1s ease-in-out;
}


.overlay.step-7 .ele.right{
    transform: rotate(-90deg) scale(1);
    bottom:0;
    transition: all 1s linear, rotate 1s linear 1s; ;
}


.overlay.step-7 .combine{
    opacity: 1;
    transition: transform 1s ease-in-out 1s, opacity 1s ease-in-out 1s;
    
}



.overlay .text7.left{
    position: absolute;
    top:15vh;
    left:-100vw;
    opacity: 0;
    transition: left 1s linear,opacity 1s linear;
    text-align: left;
}

.overlay .text7.right{
    position: absolute;
    bottom:10vh;
    right:-100vw;
    opacity: 0;
    transition: right 1s linear,opacity 1s linear;
    text-align: left;
}

.overlay.step-7 .text7.left{
    left:5vw;
    opacity: 1;
    transition: left 1s linear 1s,opacity 1s linear 1s;
}


.overlay.step-7 .text7.right{
    right: 5vw;
    opacity: 1;
    transition: right 1s linear 1s,opacity 1s linear 1s;
}

.overlay .text9{
    position: absolute;
    opacity: 0;
    transition: all 1s ease-in-out ;
    text-align: center;
}
.overlay.step-9  .text9{
    opacity: 1;
    transition: all 1s ease-in-out 1.5s;
}
.overlay.step-9 .combine{
    transition: all 1s ease-in-out 1s;
}

.overlay.step-10 .glow,.overlay.step-11 .glow,.overlay.step-12 .glow{
    opacity: 0;
}

.overlay.step-10 .combine .hand-top{
    opacity: 1;
    transform: translateX(0);
    transition: all 1s ease-in-out 1s;
}
.overlay.step-10 .combine .hand-bottom{
    opacity: 1;
    transform: translateX(0);
    transition: all 1s ease-in-out 1s;
}

.overlay .text10{
    position: absolute;
    opacity: 0;
    transition: all .5s ease-in-out;
    text-align: center;
}

.overlay.step-10  .text10{
    opacity: 1;
    transition: all 1s ease-in-out 1.5s;
}
.overlay.step-11   .animation-area svg.combine{
    transition: all .5s linear 1s;
}

.overlay.step-12   .animation-area svg.combine{
    transform: rotate(90deg) scale(0) ;
    transition: all .5s linear;
}
p.subtitle2.line-2 {
    font-size: clamp(1rem, 5vw, 2.5rem);
}
.overlay.step-11  .text-animation-area .text12,.overlay.step-12  .text-animation-area .text12{
    align-items: center;
    gap:3rem;
    flex-direction: column;
    display: flex;
    justify-content: center;
}
.overlay .text12{
    position: absolute;
    opacity: 0; 
    transform: scale(0);
    transition: all 1s ease-in-out ;
    text-align: center;
}
.overlay .text12{
    opacity: 0;
    transform: translateY(5rem);
}
.overlay .text12 [class="line"]{
    opacity: 0;
    transform: translateY(5rem);
    transition: all .5s ease-in-out .5s;
}

p.subtitle2.line-2 {
    font-size: clamp(1rem, 5vw, 2.5rem);
}
.overlay .text12 .line-1{
    opacity: 0;
    transform: translateY(5rem) ;
    transition: all .5s ease-in-out 1s;
}
.overlay .text12 .line-2{
    opacity: 0;
    transform: translateY(5rem) ;
    transition: all .5s ease-in-out 1s;
}

.overlay.step-12 .text12 .line-1{
    opacity: 1;
    transform: translateY(0)  ;
    transition: all 1s ease-in-out 1s ,opacity .5s ease-in-out 1.2s;
}
.overlay.step-12 .text12 .line-2{
    opacity: 1;
    transform: translateY(0) ;
    transition: all 1s ease-in-out 1.5s, opacity .5s ease-in-out 1.7s;
}


.overlay.step-12 .text12{
    opacity: 1;
    transform: scale(1);
    transition: all 1s ease-in-out .5s;
}

/* .overlay.step-11 .animation-area svg.combine{
    --ratio : calc(var(--combine_height)/ var(--combine_ele_height));
    max-height: calc(var(--ratio)* var(--small-logo-height));
    transform: rotate(-90deg) translateY(calc(-1* var(--small-logo-left) / 2)) translateX(calc(var(--small-logo-top) / 2));
} */


:root{
    --ele-pos :-100%;

    --framedelay :.75s;
}

@keyframes glow {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

#animation-area.step-1{
    animation: rotate-circle 2s linear 2s;
}
@keyframes rotate-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(90deg);
    }
  }

  .overlay .text8{
    position: absolute;
    text-align: center;
    opacity: 0;
    transition: all 1s ease-in-out ;
  }

  .overlay.step-8 .text8{
    opacity: 1;
    transition: all 1s ease-in-out 1s ;
  }
  .overlay .text8 {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    flex-wrap: wrap;
}
.overlay .text8 .block{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex-wrap: wrap;
}
.marquee:not(.reverse) {
    animation: marquee 25s linear infinite;
}
.marquee-container{
    display: inline-flex;
}
.marquee.reverse {
    animation: marquee-reverse 25s linear infinite;
}
.marquee{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:5rem;
    flex-grow: 1;
    flex-shrink: 0;
  }

.marquee div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:5rem;
    flex-grow: 1;
    flex-shrink: 0;
  }
 @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50%)); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(calc(-0%)); }
}

/* .marquee-container {
    width: 100%; 
    overflow: hidden; 
    white-space: nowrap;
    position: relative;
    background-color: #f5f5f5;
  }
  
  .marquee {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    animation: scroll 10s linear infinite; 
  }
  
  .marquee div ,.marquee div img {
    display: inline-block;
    padding-right: 50px; 
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(100%); 
    }
    100% {
      transform: translateX(-100%); 
    }
  } */