main{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100dvw;
  height: 100dvh;
}
.loading{
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.loading.clicked{
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.loading__btn{
  width: fit-content;
  height: fit-content;
}
  .loading__btn__link {
    height: 50px;
    width: 300px;
    position: relative;
    background-color: transparent;
    /* cursor: pointer; */
    border: 1px solid var(--black);
    overflow: hidden;
    border-radius: 30px;
    color: var(--black);
    transition: all 0.5s ease-in-out;
  }
  .btn-txt {
    z-index: 1;
    font-family: var(--main-font);
  }
  .type1::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s ease-in-out;
    background-color: var(--black);
    border-radius: 30px;
    visibility: hidden;
    height: 10px;
    width: 10px;
    z-index: -1;
  }
    .loading__btn__link:hover {
      color: var(--white);
    }
    .type1:hover::after {
      visibility: visible;
      transform: scale(100) translateX(2px);
    }
/* before loading */
.hero__visual__container__inner.before-load{
  top: calc(45vh - 80px);
  bottom: calc(45vh - 60px);

  width: 10vw;
  height: 10vh;
  border-radius: 20px;

  border: 1px solid var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.hero__visual__container__inner.before-load.show{
  opacity: 1;
  visibility: visible;
}
header.before-load{
  top: -40px;
  transition: 0.5s ease;
}
.navigation__trigger.before-load{
  bottom: -60px;
  transition: 0.5s ease;
}
.heroVid video.before-load{
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}
/* after loading */

section.hero{
  position: fixed;
  top: 0;left: 0;right: 0;bottom: 0;
  width: 100vw;
  height: 100vh;
}
  .hero__inner{
    position: relative;
    width: 100%;
    height: 100%;
  }
    .hero__over{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;

      z-index: 9999;
      background-color: transparent;
      display: none;
    }
    .hero__visual__container{
      position: relative;

      width: 100%;
      height: 100%;
      transition: 1s;
    }
      .hero__visual__container__inner{
        position: absolute;
        top: 80px;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);

        width: 90vw;
        height: calc(100vh - 140px);
        border-radius: 50px;

        border: unset;

        transition: 1s;
      }
      .hero__visual__container__inner.navigation-on{
        height: calc(100vh - 100px - 80px);
        bottom: 100px;
      }
    .hero__visual__container.active{
      top: 0;
    }
      .hero__visual__container.active .hero__visual__container__inner{
        height: 100vh;
        width: 100vw;
        border-radius: 0px;
        transition: 1s;
        top: 0;bottom: 0;
      }
        .hero__visual__container.active .hero__visual__container__inner .hero__visual__image{ border-radius: 0; transition: 1s;}
        .hero__visual__container.active .hero__visual__container__inner .hero__visual__image video{ border-radius: 0; transition: 1s; }
        .hero__visual__image{
          width: 100%;
          height: 100%;
          border-radius: 50px;
          overflow: hidden;
        }
        .hero__visual__container__inner::before {
          content: '';
          position: absolute;
          top: -10px;
          left: -10px;
          right: -10px;
          bottom: -10px;
          border-radius: 50px;
          pointer-events: none;
          z-index: 10;
        
          opacity: 0;
          box-shadow: 0 0 40px 20px rgba(255,255,255,0.2);
          filter: blur(20px);
          transition: opacity 0.6s ease, filter 0.6s ease;
        }
        .hero__visual__container__inner.motion-blur::before {
          opacity: 1;
          filter: blur(30px);
        }
          .hero__visual__image video{
            width: 100%;
            height: 100%;
            border-radius: 50px;
            object-fit: cover;
          }
          .heroVid{
            position:absolute; inset:0;
            width:100%; height:100%; object-fit:cover;
            opacity:0; transition:opacity .8s ease;
            visibility: hidden;
          }
          .heroVid.active{opacity:1; visibility: visible;}
          .heroVid video{
            opacity: 1;
            visibility: visible;
            transition: opacity 1s ease;
          }
    .hero__info__container{
      position: absolute;
      width: fit-content;
      height: fit-content;

      bottom: 75px;
      left: 75px;
      pointer-events: none;
    }
      .hero__info__container__inner{
        width: 200px;
        height: 60px;

        display: flex;
        align-items: end;
      }
        .hero__info__texts__box{
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: end;

          opacity: 0;
          visibility: hidden;
          transition: 1s;
        }
        .hero__info__texts__box.active{
          opacity: 1;
          visibility: visible;
          display: flex;
        }
          .hero__info__texts__box h3{
            color: var(--white);
            font-size: var(--accent--font-size);
            letter-spacing: 0.1rem;
          }
          .hero__info__texts__box p{
            color: var(--white);
            font-size: var(--desc-font-size);
            letter-spacing: 0.1rem;
          }




@media screen and (max-width: 440px){
  .hero__info__container{
    bottom: 90px;
    left: 20px;
    pointer-events: none;
  }
}