/* ------------------------- Style ® Code by Dennis -------------------------------------------------- */

main {
   box-sizing: border-box;
   overflow: hidden;
   width: 100vw;
   position: fixed;
   height: 100%;
   background: var(--color-white);
}

.main-wrap::after {
   display: block;
   position: absolute;
   content: "";
   width: 100%;
   height: 5vh;
   top: 99%;
   left: 0;
   background: var(--color-dark);
   z-index: -1;
}

.main-wrap {
   box-sizing: border-box;
   width: 100vw;
   will-change: transform;
   position: fixed;
}

main.touch {
   position: relative;
   height: auto;
}

main.touch .main-wrap {
   position: relative;
}

@media screen and (max-width: 1024px) {
   main {
      position: relative;
   }
   .main-wrap {
      position: relative;
   }
}

/* ------------------------- Page Transition -------------------------------------------------- */

.no-scroll-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   z-index: 900;
   display: none;
}

.loading-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   z-index: 800;
   pointer-events: none;
   background: transparent;
}

.loading-screen {
   position: relative;
   padding: 0;
   width: 100%;
   height: 100%;
   left: 0;
   will-change: top;
}

.loading-screen,
.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
   background: var(--color-dark-dark);
}

.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
   height: 745%;
}

.loading-container .rounded-div-wrap.top {
   top: 0;
   position: absolute;
   transform: translateY(-99%) scale(1,-1);
   z-index: 2;
   height: 0vh;
   will-change: height;
}

.loading-container .rounded-div-wrap.bottom {
   top: unset;
   bottom: 0;
   position: absolute;
   transform: translateY(99%);
   z-index: 2;
   height: 0vh;
   will-change: height;
}

.loading-container .loading-words {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   pointer-events: none;
   display: block;
   will-change: opacity;
}

.loading-container .loading-words h2 {
   margin: 0;
   padding: 0;
   color: var(--color-white);
   position: absolute;
   top:0;
   left: 50%;
   transform: translateX(-50%);
   display: none;
   padding-left: .8em;
   white-space: nowrap;
   padding-right: .4em;
   will-change: opacity;
   font-size: 3.2vw;
   font-weight: 600;
}

.loading-container .loading-words h2.jap {
   font-size: calc(clamp(3.25em, 5vw, 4.5em) * .65);
   transform: translate(-50%, 10%);
}

.loading-container .dot {
   display: block;
   position: absolute;
   border-radius: 50%;
   background: var(--color-white);
   left: 0;
   top: 38%;
   bottom: auto;
   width: calc(clamp(16px, 1.2vw, 19px) / 1.65);
   height: calc(clamp(16px, 1.2vw, 19px) / 1.65);
   transform: translate(0, 0) scale(1);
}

.loading-container .loading-words h2.active {
   display: block;
}

.loading-container .loading-words .home-active,
.loading-container .loading-words .home-active-last {
   opacity: 0;
   display: none;
}

.loading-fade {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   z-index: 90;
   background: #FFF;
   visibility: hidden;
   opacity: 0;
}

.once-in {
   will-change: transform;
}

@media screen and (max-width: 540px) {

   /* .loading-container .loading-words h2 {
      padding-left: 0;
   } */

   /* .loading-container .dot {
      display: none;
   } */

   .loading-container .dot {
      top: 42%;
   }
}

/* ------------------------- Mouse Position Button -------------------------------------------------- */


.mouse-pos-list-btn,
.mouse-pos-list-span {
   width: 0;
   height: 0;
   border-radius: 50%;
   border: 0;
   background: #C9FF85;
   position: fixed;
   z-index: 26;
   pointer-events: none;
   transform: translate(-50%, -60%);
   overflow: hidden;
   display: block;
   transition: width .4s cubic-bezier(0.36, 0, 0.66, 0), height .4s cubic-bezier(0.36, 0, 0.66, 0);
   left: 50.5%;
   top: -10%;
   left: -10%;
   left: 0%;
   top: 0%;
   will-change: transform, width, height;
}

.mouse-pos-list-span {
   background: transparent;
   color: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 49.75%;
   top: -11.25%;
   left: -11.25%;
   left: 0%;
   top: 0%;
}

.mouse-pos-list-span p {
   margin: 0;
}

.mouse-pos-list-span .arrow,
.btn .arrow {
   width: 0em;
   transform: rotate(-90deg) translateX(-.05em);
   margin-left: .33em;
   display: inline-flex;
   position: relative;
   transition: width .4s cubic-bezier(0.36, 0, 0.66, 0);
   will-change: width;
}

.mouse-pos-list-span.active-big .arrow,
.btn .arrow {
   width: .66em;
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1)
}

.mouse-pos-list-btn.active,
.mouse-pos-list-span.active {
   width: clamp(3.75em, 5.5vw, 5em);
   height: clamp(3.75em, 5.5vw, 5em);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-btn.active-big,
.mouse-pos-list-span.active-big {
   width: calc(clamp(7.5em, 5.5vw, 5em) * 1.66);
   height: calc(clamp(7.5em, 5.5vw, 5em) * 1.66);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-btn.active-big.hover,
.mouse-pos-list-span.active-big.hover {
   width: calc(clamp(3.75em, 5.5vw, 5em) * 1.45);
   height: calc(clamp(3.75em, 5.5vw, 5em) * 1.45);
}

.mouse-pos-list-btn.active.pressed,
.mouse-pos-list-span.active.pressed {
   height: calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
   width: calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
}

.mouse-pos-list-btn.active-big.pressed,
.mouse-pos-list-span.active-big.pressed {
   height: calc(clamp(3.75em, 5.5vw, 8em) * 2);
   width: calc(clamp(3.75em, 5.5vw, 8em) * 2);
}

.mouse-pos-list-span.active,
.mouse-pos-list-span.active-big {
   border-radius: 0;
   width: clamp(10em, 27.5vw, 25em);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-span p {
   font-size: 0em;
   transition: font-size .4s cubic-bezier(0.36, 0, 0.66, 0);
   will-change: font-size;
}

.mouse-pos-list-span.active p,
.mouse-pos-list-span.active-big p {
   font-size: 1em;
   transition: font-size .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.load-icon {
   width: 3em;
   height: 3em;
   border-radius: 50%;
   border: 0;
   background: var(--color-blue);
   position: fixed;
   pointer-events: none;
   transform: scale(0);
   overflow: hidden;
   display: block;
   right: var(--gap-padding);
   bottom: var(--gap-padding);
   z-index: 2000;
}

.load-icon svg {
   left: 25%;
   top: 25%;
   position: absolute;
   width: 50%;
   transform: rotate(0.0001deg);
   animation: rotateLoad 1s linear infinite;
}

@keyframes rotateLoad {
   0%   {transform: rotate(0.0001deg);}
   100% {transform: rotate(360deg);}
}


@media screen and (max-width: 540px) {

   .mouse-pos-list-btn,
   .mouse-pos-list-span {
      display: none;
   }
}


/* ------------------------- Footer -------------------------------------------------- */

.footer-wrap {
   display: block;
   width: 100%;
   position: relative;
   overflow: hidden;
   background: var(--color-dark-dark);
   display: flex;
   align-items: flex-end;
   box-shadow: 0px 5px 0px 5px var(--color-dark);
}

.footer-wrap.theme-dark .footer{
   background: var(--color-white);
}

.footer-wrap.theme-dark .overlay-gradient {
   pointer-events: none;
   height: calc(var(--section-padding) * .75);
   background: linear-gradient(to bottom,hsla(225, 7%, 12%) 0%, hsla(225, 7%, 12%, 0.987) 8.1%, hsla(225, 7%, 12%, 0.951) 15.5%, hsla(225, 7%, 12%, 0.896) 22.5%, hsla(225, 7%, 12%, 0.825) 29%, hsla(225, 7%, 12%, 0.741) 35.3%,  hsla(225, 7%, 12%, 0.648) 41.2%,  hsla(225, 7%, 12%, 0.55) 47.1%, hsla(225, 7%, 12%, 0.45) 52.9%, hsla(225, 7%, 12%, 0.352) 58.8%, hsla(225, 7%, 12%, 0.259) 64.7%, hsla(225, 7%, 12%, 0.175) 71%, hsla(225, 7%, 12%, 0.104) 77.5%, hsla(225, 7%, 12%, 0.049) 84.5%, hsla(225, 7%, 12%, 0.013) 91.9%, hsla(225, 7%, 12%, 0) 100%);
   opacity: .75;
}

.footer-rounded-div {
   width: 100%;
   position: relative;
   height: 0;
   display: block;
   z-index: 2;
}

.footer-rounded-div .rounded-div-wrap {
   transform: translateY(-1px);
   will-change: height;
}

.footer {
   padding-bottom: 0;
   width: 100%;
   will-change: transform;
}

.footer .dots {
   width: calc(var(--container-padding) * 3);
}

.footer h2 {
   font-size: calc(clamp(3.25em, 7vw, 8em) * .875);
}

.footer h2 span {
   display: block;
}

.medium {
   display: flex;
   flex-direction: column;
   padding-left: calc(var(--container-padding) * 2);
   padding-right: calc(var(--container-padding) * 2);
   max-width: 100em;
   margin: 0 auto;
}

.medium .row:nth-child(1) {
   padding-bottom: calc(var(--section-padding) / 0.8);
}

.medium .row:nth-child(2) .btn-fixed {
   position: absolute;
   right: 0;
   top: 0;
   transform: translate(-50%, -50%);
   z-index: 20;
}

.medium .row:nth-child(2) .btn-fixed .btn {
   will-change: transform;
}

.medium .row:nth-child(2) {
   padding-bottom: calc(var(--section-padding) * .3);
}

.medium .row:nth-child(3) .flex-col {
   display: flex;
   flex-direction: row;
}

.medium .row:nth-child(3) .flex-col .btn {
   display: inline-flex;
   margin-right: 0.5em;
   margin-bottom: 0;
}

.footer .arrow {
   position: absolute;
   right: 0;
   bottom: calc(var(--gap-padding) * 1.5);
   will-change: transform;
}

.footer .profile-picture {
   margin-right: .125em;
   height: .85em;
   width: .85em;
   transform: translateY(.09em);
}

.footer .arrow svg {
   transform: rotate(90deg);
}

.bottom-footer {
   padding: calc(var(--section-padding) / 1.3) calc(var(--gap-padding) / 1.33) calc(var(--gap-padding) / 1.75) calc(var(--gap-padding) / 1);
   flex-direction: row;
   justify-content: space-between;
}

.bottom-footer .stripe {
   display: none;
}

.bottom-footer .flex-col {
   display: flex;
   width: auto;
   justify-content: space-between;
}

.bottom-footer .credits {
   padding-right: var(--gap-padding);
}

.socials li {
   display: inline-flex;
   font-size: .85em;
}

.bottom-footer p {
   font-size: .85em;
}

.bottom-footer h5 {
   margin-bottom: 1.5em;
}

.socials h5 {
   padding-left: calc(var(--gap-padding) * .5);
   margin-bottom: 1em;
}

.bottom-footer #timeSpan {
   text-transform: uppercase;
}

@media screen and (max-width: 900px){

   .medium .row:nth-child(2) {
      padding-bottom: calc(var(--section-padding) * .75);
   }
   .medium{
      padding: 0 5%;
   }
}

@media screen and (max-width: 720px){

   .footer-rounded-div .rounded-div-wrap{
      height: 7.5vh;
   }

   .medium .row:nth-child(3) .flex-col {
      flex-direction: column;
   }

  .medium .row:nth-child(3) .flex-col .btn {
      width: 100%;
      margin: 0;
      margin-bottom: .75em;
   }

   .medium .row:nth-child(3) .flex-col .btn .btn-click {
      width: 100%;
   }

   .medium .row:nth-child(1) {
      padding-bottom: 100px;
   }

 .medium .row:nth-child(2) {
      padding-bottom: calc(var(--section-padding) * 1.25);
   }

   .medium .row:nth-child(3) {
      padding-bottom: calc(var(--section-padding) / 5);
   }

  .medium .row:nth-child(2) .btn-fixed {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(-20%, -50%);
   }

   .bottom-footer {
      padding: 5vh 0 calc(var(--gap-padding) / 1.75) 0;
   }

   .bottom-footer .flex-col {
      width: 100%;
   }

   .bottom-footer .flex-col:nth-child(2) {
      padding: 0 calc(var(--container-padding) - calc(var(--gap-padding) * .333)) calc(var(--section-padding) / 3) calc(var(--container-padding) - calc(var(--gap-padding) * .333));
      width: 100%;
   }

   .bottom-footer .flex-col:nth-child(1) {
      order: 3;
      padding: 0 var(--container-padding) calc(var(--gap-padding) * .75) var(--container-padding);
   }

   .socials li {
      display: inline-flex;
      font-size: 1em;
      margin-right: 0;
   }
   
   .bottom-footer p {
      font-size: 1em;
   }

   .medium .row:nth-child(2) .stripe {
      display: block;
   }

   .bottom-footer .stripe {
      display: block;
      margin-top: var(--gap-padding);
      width: calc(100% - (var(--gap-padding) * .666));
      left: 50%;
      margin-left: calc(var(--gap-padding) * .333);
   }

   .socials,
   .socials ul {
      width: 100%;
   }

   .footer .arrow {
      position: absolute;
      right: 0;
      bottom: 1em;
   }
   
   .footer .profile-picture {
      margin-right: .125em; 
      height: .95em;
      width: .95em;
      transform: translateY(.1em);
   }
   .loading-container .loading-words h2{
      font-size: 28px;
   }
}