/* reset */


body {
  margin: 0;
  overflow: hidden;
  background: black;
}

/* jeu global */

#game {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* images */

#sceneImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* zones */

#choicesContainer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* zones clicable avec delimitation rouge */

.choice {
  position: absolute;
  cursor: pointer;

/*
  background: rgba(255,0,0,0.3);
  border: 2px solid red;*/
  z-index: 999;
pointer-events: auto;
  
}
/*animation scène 3*/
.shake {

  animation: shake 0.3s infinite;

}


/* Animation scene 3 JARDIN*/
.breathing {

  animation: breathingDark 4s infinite ease-in-out;

}

@keyframes breathingDark {

  0% {

    filter: brightness(1);

  }

  50% {

    filter: brightness(0.6);

  }

  100% {

    filter: brightness(1);

  }

}

/*animation scène 4*/

#scene4Game {

  display: none;

  position: absolute;
  inset: 0;

  z-index: 10;


}

/*position des faes*/

#scene4Game img:nth-child(1) {

  width: 90px;

  top: 10%;
  left: 15%;

  animation: fly1 5s infinite alternate ease-in-out;

}

#scene4Game img:nth-child(2) {

  width: 120px;

  top: 70%;
  left: 60%;

  animation: fly2 6s infinite alternate ease-in-out;

}

#scene4Game img:nth-child(3) {

  width: 70px;

  top: 40%;
  left: 80%;

  animation: fly3 4s infinite alternate ease-in-out;

}

#scene4Game img:nth-child(4) {

  width: 100px;

  top: 20%;
  left: 50%;

  animation: fly4 7s infinite alternate ease-in-out;

}

#scene4Game img:nth-child(5) {

  width: 60px;

  top: 75%;
  left: 25%;

  animation: fly5 5.5s infinite alternate ease-in-out;

}


/* Images mini jeu */

#scene4Game img {

  position: absolute;

  

  mix-blend-mode: multiply;

  cursor: crosshair;
  

}

@keyframes fly1 {

  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(300px, -120px);
  }

}

@keyframes fly2 {

  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(-250px, 180px);
  }

}

@keyframes fly3 {

  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(150px, 250px);
  }

}

@keyframes fly4 {

  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(-350px, -100px);
  }

}

@keyframes fly5 {

  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(200px, -200px);
  }

}


/* score */

#score {

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 5vw;

  color: rgb(255, 255, 255);

}

/*--------------------*/
/* Scène C Huberta au RH
/* ------------------- */

#sceneCOverlay {

  display: none;

  position: absolute;
  inset: 0;

  z-index: 990;

  pointer-events: none;

}

/* juste Huberta */

.huber img {

  width: 920px;

  position: absolute;

  top: 297px;
  left: 500px;

  z-index: 999;
cursor: pointer;
pointer-events: auto;
}

/* animation fumée */

.smoke {

  display: none;

  position: absolute;

  top: 30%;
  left: 55%;

  transform: translate(-50%, 50%);

}

/* text fumée */

.smoke ul {

  margin: 0;
  padding: 0;

}

.smoke ul li {

  list-style: none;

  color: #00fffb;

  font-size: 2em;

  font-weight: bold;

  letter-spacing: 5px;

  filter: blur(0.5px);

  animation: popopop 2s linear infinite;

}

/* délais de l'apparition de la fumée */

.smoke ul li:nth-child(1) { animation-delay: 0s; }
.smoke ul li:nth-child(2) { animation-delay: .4s; }
.smoke ul li:nth-child(3) { animation-delay: .8s; }
.smoke ul li:nth-child(4) { animation-delay: 1.2s; }
.smoke ul li:nth-child(5) { animation-delay: 1.6s; }
.smoke ul li:nth-child(6) { animation-delay: 2s; }
.smoke ul li:nth-child(7) { animation-delay: 2.2s; }

/* animation fumée */

@keyframes popopop {

  0% {

    transform: rotate(0deg) translateY(0px);

    opacity: 1;

    filter: blur(1px);

  }

  100% {

    transform: rotate(45deg) translateY(-200px);

    opacity: 0;

    filter: blur(20px);

  }

}

/*--------------------*/
/* Scène C Huberta au RH Boite de dialogue
/* ------------------- */

#dialogueBox {

  display: none;

  position: absolute;

  bottom: 0;
  left: 0;

  width: 500px;

  padding: 30px;

  background: rgba(0,0,0,0.8);

  color: white;

  z-index: 990;

  font-family: monospace;

}

/* texte */

#dialogueText {

  font-size: 2em;

  margin-bottom: 20px;

}

/* input */

#nameInput {

  padding: 10px;

  font-size: 1.2em;

}

/* bouton pour le nom */

#validateName {

  padding: 10px 20px;

  font-size: 1.2em;

  cursor: pointer;

}

/* choix */

#choices {

  display: none;

  margin-top: 20px;

}

#choices button {

  margin-right: 20px;

  padding: 15px;

  font-size: 1em;

  cursor: pointer;

}

/* ========================= */
/* SCÈNE X */
/* ========================= */

#sceneXOverlay {

  display: none;

  position: absolute;

  inset: 0;

  z-index: 80;

}

/* Olliver */

#olliver {

  position: absolute;

  width: 500px;

  left: 700px;
  top: 150px;

  cursor: pointer;

}

/* dilogue avec code */

#codeBox {

  display: none;

  position: absolute;

  bottom: 30px;
  left: 30px;

  width: 40%;

  padding: 20px;

  background: rgba(0,0,0,0.8);

  color: white;

  border-radius: 20px;

  z-index: 100;

}

#codeInput {

  padding: 10px;

  font-size: 1.2em;

}

#validateCode {

  padding: 10px;

  margin-left: 10px;

}

/* ----------------------*/
/* animation glitch pour olliver */
/* ------------------------- */

.glitch {

  animation: glitch 0.15s infinite;

}

@keyframes glitch {

  0% {

    transform: translate(0px, 0px);

    filter: hue-rotate(0deg);

  }

  20% {

    transform: translate(-5px, 5px);

  }

  40% {

    transform: translate(5px, -5px);

    filter: hue-rotate(90deg);

  }

  60% {

    transform: translate(-5px, -5px);

  }

  80% {

    transform: translate(5px, 5px);

    filter: hue-rotate(180deg);

  }

  100% {

    transform: translate(0px, 0px);

    filter: hue-rotate(360deg);

  }

}

/* juste crane */
#crane {

  display: none;

  width: 920px;

  position: absolute;

  top: 297px;
  left: 500px;

  z-index: 999;

  cursor: pointer;

  pointer-events: auto;

}



/*JARDIN animation !!*/
#eyeContainer {

    position: absolute;

    left: -200px;
    top: -270px;

    width: 1720px;
    height: 1380px;

    display: none;

    z-index: 50;
}

#pupille {

    position: absolute;

    width: 1830px;
    height: 1230px;

    left: 0px;
    top: 0px;

    transition: transform 0.05s linear;

    pointer-events: none;
}

.scene3-chiant #sceneImage {
  position: relative;
  z-index: 100;
}

.scene3-chiant #eyeContainer {
  z-index: 50;
}

/* obscurité scène W */

.W-ombre #sceneImage {

    filter: brightness(0.65);

    transition: 1s;
}