@charset "UTF-8";

html,
body {
  width: 100%;
  height: 100%;
  font-family: "DINdong <3";
  background: linear-gradient(
    180deg,
    rgba(217, 217, 217) 82%,
    rgba(255, 254, 0, 1) 100%
  );
  color: rgb(31 63 255);
  text-shadow: 0px 0px 4px rgb(31 63 255);
  overflow: hidden;
  user-select: none;
  will-change: box-shadow !important;
}

* {
  box-sizing: border-box;
}

/*ANIM GRAIN*/

.GRAIN {
  height: 100vh;
}

.GRAIN:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("https://www.zupimages.net/up/23/19/h2of.png");
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.12;
  position: fixed;
  /* mix-blend-mode: darken; */
  pointer-events: none;
  top: -110%;
  width: 300%;
  z-index: 9500;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}

/*INTRO*/

#introStory {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: blue;
  z-index: 200;
  display: flex;
  transition: opacity 3s ease-in-out;
  /* align-items: center;
    justify-content: center; */
}



.introStoryHole{
  transform: translate(-50%, -50%);
  height: 90vw; 
  width: 90vw;
  border-radius: 50%;
  z-index: 21;
  box-shadow: 0 0 0 1000px rgb(254, 62, 19);
  filter: blur(23px);
}

.circleTransitionLeaveIntro{
  will-change: box-shadow !important;
  width: 0vw !important;
  height: 0vw !important;
}

.Pieceintro {
  position: absolute;
  width: 100%;
  height: auto;
  /* width: 130px; */
  animation: shake 5s infinite;
  /* transition: height 0.5s ease-in-out; */
  z-index: 201;
}

#introStory:hover{
  filter: drop-shadow(0 0 5px crimson);
z-index: 3000;
}

.Pieceintrolivre {
  position: absolute;

  /* width: 130px; */
  width: 100%;
  height: auto;
  animation: shake 5.5s infinite;
  /* transition: height 0.5s ease-in-out; */
  z-index: 202;
  cursor: url("/images/cursor.cur"), auto;
}

#clickpiece {
  width: 130px;
  height: 130px;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%) rotate(-10deg);
  transition: all 2.5s cubic-bezier(0.61, 0.12, 1, 0.7);
  z-index: 6000;

}
.animate-piece {
  top: -70% !important;
  left: 40% !important;
  /* scale: (30); */
  width: 2600px !important;
  height: auto;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, 1px) rotate(0deg);
  }
}

#imagesContainer {
  width: 140%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  transition: all 1.5s ease-in-out;
}

#textsContainer {
  position: fixed;
  z-index: 30;
  bottom: 0;
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 1s ease-in-out;
}

.billet {
  position: absolute;
  width: 0%;
  height: fit-content;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1.5s ease-in-out;
  opacity: 1;
}

.scaleUp {
  width: 50%;
}

.billet:nth-child(1),
.billet:nth-child(2),
.billet:nth-child(3),
.billet:nth-child(4),
.billet:nth-child(5),
.billet:nth-child(6),
.billet:nth-child(7) {
  opacity: 0;
}

.billet img {
  width: 100%;
  transition: all 1.5s ease-in-out;
}

.billet-hidden {
  opacity: 0%;
  height: 100%;
  width: 0%;
  transition: all 1.5s ease-in-out;
}

#button {
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.005);
  z-index: 1000;
}

.devant {
  width: 50vw;
  z-index: 10;
  transition: all 1.5s ease-in-out;
}

.derriere {
  width: 100%;
  filter: blur(5px);
}

#chapitres {
  width: 100%;
  height: 100%;
  cursor: url("/images/cursor.cur"), auto;
  transition: all 0.5s ease-in-out;
  z-index: 30;
}

#chapitre-indicator {
  top: 0.5rem;
  left: 0.5rem;
  position: absolute;
  text-align: center;
  font-size: 1.5rem;
  width: fit-content;
  z-index: 30;
  transition: all 1s ease-in-out;

}

#chapitreD-indicator {
  top: 0.5rem;
  right: 0.5rem;
  text-align: center;
  position: absolute;
  font-size: 1.5rem;
  width: fit-content;
  z-index: 30;
  transition: all 1s ease-in-out;

}

.texte {
  position: absolute;
  width: 100%;
  font-size: 3em;
  padding: 0rem 26%;
  transition: all 0.5s ease-in-out;
}

.texte-hidden {
  display: none;
  /* opacity: 0%; */
}

.intro {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 3rem;
}

.title {
  position: fixed;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 50;
  font-size: 5rem;
  padding: 0rem 15%;

}

.story {
  /* margin-left: 25%;
    margin-right: 25%; */
  width: 100%;
  bottom: 1rem;
  z-index: 3000;
  opacity: 0;
  transition: all 0.7s ease-in-out !important;
}

#div-with-hole {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 90vw; 
  width: 90vw;
  border-radius: 50%;
  z-index: 21;
  box-shadow: 0 0 0 1000px #fe3e13;
  filter: blur(23px);
  transition: all 1s ease-in-out;
  pointer-events: none;
  will-change: box-shadow !important;
}

/*TRANSITIONS HOLE*/

.circleTransitionLeave {
  will-change: box-shadow !important;
  width: 0vw !important;
  height: 0vw !important;
}

.circleTransitionUpOutro {
  will-change: box-shadow !important;
  width: 99vw !important;
  height: 99vw !important;
}

.circleTransitionUp {
  will-change: box-shadow !important;
  height: 35vw !important;
  width: 35vw !important;
}

.circleTransitionUp2 {
  will-change: box-shadow !important;
  height: 20vw !important;
  width: 30vw !important;
  /* top: 31% !important; */
  left: 39vw !important;
  filter: blur(20px) !important;
  transform: translate(-10% -20%) !important;
}

.circleTransitionUp3 {
  will-change: box-shadow !important;
  height: 30vw !important;
  width: 30vw !important;
  left: 61vw !important;
  filter: blur(20px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp4 {
  will-change: box-shadow !important;
  height: 36vw !important;
  width: 36vw !important;
  filter: blur(13px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp5 {
  will-change: box-shadow !important;
  height: 20vw !important;
  width: 20vw !important;
  left: 55vw !important;
  filter: blur(15px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp6 {
  will-change: box-shadow !important;
  height: 21vw !important;
  width: 30vw !important;
  border-radius: 30% !important;
  filter: blur(14px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp6bis {
  will-change: box-shadow !important;
  height: 21vw !important;
  width: 21vw !important;
  left: 46% !important;
  top: 52% !important;
  filter: blur(6px) !important;
}

.circleTransitionUp7 {
  will-change: box-shadow !important;
  height: 49vw !important;
  width: 49vw !important;
  border-radius: 10% !important;
  filter: blur(20px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUpBoom {
  will-change: box-shadow !important;
  height: 50vw !important;
  width: 50vw !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* transform: translate(-50%, -50%) scale(1) !important; */
  animation: vibration 0.5s infinite alternate !important;
  /* transform-origin: center; */
}

@keyframes vibration {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.circleTransitionUp8 {
  will-change: box-shadow !important;
  height: 69vw !important;
  width: 48vw !important;
  filter: blur(20px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp9 {
  will-change: box-shadow !important;
  height: 26vw !important;
  width: 26vw !important;
  left: 55vw !important;
  filter: blur(20px) !important;
  transform: translate(-10 -20%) !important;
}

.circleTransitionUp10 {
  will-change: box-shadow !important;
  height: 25vw !important;
  width: 33vw !important;
  /* top: 48% !important; */
  left: 55% !important;
  filter: blur(20px) !important;
  transform: translate(-10 -20%) !important;
}

/*OUTRO*/

#outroStory {
  z-index: 20;
  top: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
  background: rgb(217, 217, 217);
  background: linear-gradient(
    180deg,
    rgba(217, 217, 217) 82%,
    rgba(255, 254, 0, 1) 100%
  );
  transition: all 1.5s ease-in-out;
  display: none;
}

#outroStory p {
  position: fixed;
  font-size: 3rem;
  width: 50%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

#outroStory img {
  position: fixed !important;
  display: flex;
  height: auto;
  width: 130px;
  animation: shake 5s infinite;
}

/* #outroStory img:nth-child(1) {
    top: 2%;
    left: 10%;
} */

/* #outroStory img:nth-child(odd) {
  z-index: 100 !important;
} */

#outroStory img:nth-child(2) {
  top: 2%;
  left: 10%;
  animation-duration: 4.5s;
  z-index: 100;
}

#outroStory img:nth-child(3) {
  top: 2%;
  left: 10%;
  animation-duration: 4s;
  z-index: 99;
}

#outroStory img:nth-child(4) {
  top: 2%;
  left: 10%;
  animation-duration: 4s;
  z-index: 98;
}

#outroStory img:nth-child(5) {
  top: 18%;
  left: 40%;
  animation-duration: 5.3s;
  z-index: 97;
}

#outroStory img:nth-child(6) {
  top: 18%;
  left: 40%;
  animation-duration: 4.8s;
  z-index: 96;
}

#outroStory img:nth-child(7) {
  top: 9%;
  right: 5%;
  animation-duration: 4.3s;
  z-index: 95;
}

#outroStory img:nth-child(8) {
  top: 9%;
  right: 5%;
  animation-duration: 4.3s;
  z-index: 94;
}

#outroStory img:nth-child(9) {
  top: 16%;
  right: 34%;
  animation-duration: 6.3s;
  z-index: 93;
}

#outroStory img:nth-child(10) {
  top: 16%;
  right: 34%;
  animation-duration: 6s;
  z-index: 92;
}

#outroStory img:nth-child(11) {
  bottom: 7%;
  right: 8%;
  animation-duration: 5s;
  z-index: 91;
}

#outroStory img:nth-child(12) {
  bottom: 7%;
  right: 8%;
  animation-duration: 5.3s;
  z-index: 90;
}

#outroStory img:nth-child(13) {
  bottom: 19%;
  left: 8%;
  animation-duration: 5.4s;
  z-index: 89;
}

#outroStory img:nth-child(14) {
  bottom: 19%;
  left: 8%;
  animation-duration: 5.7s;
  z-index: 88;
}

#outroStory img:nth-child(15) {
  bottom: 60%;
  left: 18%;
  animation-duration: 4s;
  z-index: 87;
}

#outroStory img:nth-child(16) {
  bottom: 60%;
  left: 18%;
  animation-duration: 4.3s;
  z-index: 86;
}

#outroStory img:nth-child(17) {
  bottom: 65%;
  left: 13%;
  animation-duration: 4.9s;
  z-index: 85;
}

#outroStory img:nth-child(18) {
  bottom: 65%;
  left: 13%;
  animation-duration: 5.2s;
  z-index: 84;
}

#outroStory img:nth-child(19) {
  top: 56%;
  right: 13%;
  animation-duration: 5.2s;
  z-index: 83;
}

#outroStory img:nth-child(20) {
  top: 56%;
  right: 13%;
  animation-duration: 5.5s;
  z-index: 82;
}

#outroStory img:nth-child(21) {
  top: 62%;
  right: 10%;
  animation-duration: 4.7s;
  z-index: 81;
}

#outroStory img:nth-child(22) {
  top: 62%;
  right: 10%;
  animation-duration: 5.2s;
  z-index: 80;
}

#outroStory img:nth-child(23) {
  top: 80%;
  right: 34%;
  animation-duration: 5.8s;
  z-index: 79;
}

#outroStory img:nth-child(24) {
  top: 80%;
  right: 34%;
  animation-duration: 6.3s;
  z-index: 78;
}

#outroStory img:nth-child(25) {
  bottom: 33%;
  right: 33%;
  animation-duration: 4.3s;
  z-index: 77;
}

#outroStory img:nth-child(26) {
  bottom: 33%;
  right: 33%;
  animation-duration: 4.8s;
  z-index: 76;
}

#outroStory img:nth-child(27) {
  top: 4%;
  left: 29%;
  animation-duration: 5.3s;
  z-index: 75;
}

#outroStory img:nth-child(28) {
  top: 4%;
  left: 29%;
  animation-duration: 5.8s;
  z-index: 74;
}

#outroStory img:nth-child(29) {
  bottom: 1%;
  left: 78%;
  animation-duration: 6.5s;
  z-index: 73;
}

#outroStory img:nth-child(30) {
  bottom: 1%;
  left: 78%;
  animation-duration: 6s;
  z-index: 72;
}

#outroStory img:nth-child(31) {
  bottom: 15%;
  left: 15%;
  animation-duration: 5s;
  z-index: 71;
}

#outroStory img:nth-child(32) {
  bottom: 15%;
  left: 15%;
  animation-duration: 5.5s;
  z-index: 70;
}

#outroStory img:nth-child(33) {
  top: 6%;
  right: 6%;
  animation-duration: 3.8s;
  z-index: 69;
}

#outroStory img:nth-child(34) {
  top: 6%;
  right: 6%;
  animation-duration: 4.3s;
  z-index: 68;
}

#outroStory img:nth-child(35) {
  top: 62%;
  left: 10%;
  animation-duration: 5.8s;
  z-index: 67;
}

#outroStory img:nth-child(36) {
  top: 62%;
  left: 10%;
  animation-duration: 6.3s;
  z-index: 65;
}

#outroStory img:nth-child(37) {
  top: 6%;
  left: 4%;
  animation-duration: 4.5s;
  z-index: 102;
}

#outroStory img:nth-child(38) {
  top: 6%;
  left: 4%;
  animation-duration: 4s;
  z-index: 101;
}

.fly {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 73px !important;
  height: auto !important;
  /* background-color: #000; */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: flyAnimation 6s infinite !important;
  transition: all ease-in-out;
  z-index: 300 !important;
  cursor: pointer !important;
}

.fly:hover {
transition: all 0.3s ease-in-out;
filter: drop-shadow(0px 0px 7px #FF12F7)
}

@keyframes flyAnimation {
  0% {
    transform: translate(0, 0) rotate(230deg);
  }
  50% {
    transform: translate(3vw, 3vh) rotate(47deg);
  }
  70% {
    transform: translate(10vw, -12vh) rotate(112deg);
  }
  100% {
    transform: translate(0, 0) rotate(230deg);
  }
}