/* slide-in-right
------------------------------- */

.slide-in-right {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-right.active {
  opacity: 1;
  transform: translateX(0);
}


/* effect-fade
------------------------------- */

.effect-fade {
  opacity: 0;
  transition: all 1.7s;
}

.effect-fade.effect-scroll {
  opacity: 1;
}


/* fadeup
------------------------------- */
.fadeup.effect-scroll {
  animation-name: fadeupAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}


@keyframes fadeupAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.delay-time02 {
  animation-delay: 0.2s;
}

.delay-time04 {
  animation-delay: 0.4s;
}



/* くるくるまわるテキスト
ーーーーーーーーーーーーーーーーーー */

.rollAnime.roll span {
  transition-property: opacity, transform;
  transform: rotateY(360deg);
  transition: all .8s cubic-bezier(.77, 0, .175, 1);
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
  display: inline-block;
}


/* 光りながらのテキスト
ーーーーーーーーーーーーーーーーーー */

.glowAnime span {
  opacity: 0;
}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span {
  animation: glow_anime_on 1s ease-out forwards;
}

@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}

/* 1文字ずつ出るテキスト
ーーーーーーーーーーーーーーーーーーー */

.eachTextAnime span {
  opacity: 0;
}

.eachTextAnime.appeartext span {
  animation: text_anime_on 2.7s ease-out forwards;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* タイピング風に出るテキスト
ーーーーーーーーーーーーーーーーーーー */
.TextTyping span {
  display: none;
}

.TextTyping::after {
  content: "|";
  animation: typinganime 2.8s ease infinite;
}

@keyframes typinganime {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* バラバラにに出るテキスト
ーーーーーーーーーーーーーーーーーーー */
.TextRandomAnime span {
  opacity: 0;
}

.TextRandomAnime.appearRandomtext span {
  animation: text_randomanime_on .5s ease-out forwards;
}

@keyframes text_randomanime_on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
  animation-delay: .5s;
}

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
  animation-delay: .15s;
}


/* じわっと出るテキスト
ーーーーーーーーーーーーーーーーーーー */

.blur {
  animation-name: blurAnime;
  animation-duration: 1.7s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger {
  opacity: 0;
}

/* 背景が伸びるテキスト
ーーーーーーーーーーーーーーーーーーー */
.shutter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: textFadeIn 0.1s forwards;
  animation-delay: 0.5s;
}

.shutter.active {
  opacity: 1;
}

.shutter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #12315e; 
  animation: shutterOpen 1.8s ease forwards;
}

.shutter.active::before {
  animation: shutterRightToLeft 0.8s ease forwards;
}

@keyframes shutterRightToLeft {
 0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
    transform: translateX(105%);
  }
}

/*
VARIABLES
================================================ */
:root {
    --light-green: #d5edeb;
    --green: #63dbd0;
    --brown: #403632;
    --light-grey: #eee;
    --white: #fff;
    --oswald-font: 'Oswald', sans-serif;
}

/*
LOADING
================================================ */
#loading {
    background-color: var(--light-grey);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}

#loading-screen {
    background-color: var(--light-green);
    position: fixed;
    inset: 0;
    z-index: 9998;
    translate: 0 100vh;
}

#loading p {
    font-size: 2rem;
    font-family: var(--oswald-font);
}