@charset "UTF-8";

body,
html {
  overflow-y: hidden;
  background-color: black;
}

*::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: "EuclidFlexEcal";
  src: url("./../fonts/EuclidFlexEcal.otf") format("OpenType");
}

* {
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-family: "EuclidFlexEcal", sans-serif !important;
  font-weight: 600;
}

.margin {
  margin-bottom: 10%;
}

:root {
  --clr-color: #ff3b2f;
  --clr-inventoryBtn: #ff927b;

  --sze-button: 18px;

  /* ----------------------------TYPO---------------------------- */
  h1 {
    font-size: 3rem;
    line-height: 42px;
    margin-bottom: 3%;
  }

  p {
    font-size: 1.5rem;
  }

  a {
    text-decoration: none;
  }

  a:visited {
    text-decoration: none;
    color: black;
  }

  .upper {
    text-transform: uppercase !important;
  }
  .padding-10 {
    padding: 10px 10px 10px 10px;
  }
  .padding-20 {
    padding: 20px 20px 20px 20px;
  }

  .close {
    color: rgb(228, 228, 228) !important;
  }

  /* ----------------------------COULEURS FILTRE---------------------------- */

  --clr-overlay-base: #ffffff;
  /* ---------------------COULEURS FILTRE CIA--------------------- */
  --clr-overlay-counter4: #d4d2ff;
  --clr-overlay-counter5: #aeaafc;
  --clr-overlay-counter6: #756efa;

  /* ---------------------COULEURS FILTRE KGB--------------------- */
  --clr-overlay-counter1: #ffb8b8;
  --clr-overlay-counter2: #ff8d8d;
  --clr-overlay-counter3: #fe5858;
}

/* ----------------------------LANDING---------------------------- */

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--clr-color);
}

.title-container {
  position: absolute;
  top: 30%;
}

#title {
  font-size: 15rem;
  font-weight: 100;
  color: rgb(0, 0, 0);
  animation: wait 30s infinite ease-in-out;
}

.play-container {
  position: absolute;
  bottom: 20%;
}

.play {
  font-size: 3rem;
  color: var(--clr-color);
  background-color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 15%; /* Taille initiale du bouton */
  height: 10%;

  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transition plus fluide */
}

.play:hover {
  color: black;
  border-radius: 50%;
}

.play.expand {
  width: 200dvw; /* Taille de l'écran */
  height: 200dvh;
  border-radius: 50%; /* Ajustez la forme */
}

.message-1 {
  display: flex;
  width: 100dvw;
  height: 100dvh;
}

.message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.message-container.show {
  opacity: 1;
}

.message {
  color: var(--clr-color);
  font-size: 3rem !important;
}

#date {
  color: white;
  font-weight: 800;
  font-size: 9rem !important;
}

@keyframes wait {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ----------------------------INTRO---------------------------- */
#game {
  display: none;
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 1;
  z-index: 999; /* Assure que l'overlay est au-dessus de tout le reste */
  pointer-events: none; /* Permet aux événements de souris de passer à travers */
  transition: opacity 1s ease-in-out; /* Animation de transition */
}

.game.active + .transition-overlay {
  opacity: 0; /* Réduit l'opacité une fois que la classe .game.active est ajoutée */
}

.intro {
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;

  height: 90dvh;
  width: 90dvw;
  background-color: var(--clr-color);
  /* background-color: rgb(31, 195, 78); */
  border-radius: 5%;
  padding: 20px;
  font-size: 45px;
  line-height: 48px;
  z-index: 99999999;
  flex-direction: column;

  /* box-shadow: -4px -1px 12px black; */

  justify-content: center;
  align-items: center;
  text-align: center;
  animation: opacity 4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#black-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 1;
  transition: opacity 2s ease;
  z-index: 9999;
}

/* ----------------------------FILTRE COULEUR---------------------------- */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 100%;

  background-color: var(--clr-overlay-base);
  mix-blend-mode: color;
  z-index: 999999;
  pointer-events: none;
  /* animation: couleur 2s ease-in-out; */
}

@keyframes couleur {
  0% {
    background-color: red;
  }

  50% {
    background-color: blue;
  }

  100% {
    background-color: red;
  }
}

/* ----------------------------SCENE---------------------------- */

#scene {
  width: min-content;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ----------------------------SVG / OBJETS---------------------------- */

.clickable {
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-type="found-object"] {
  display: none;
}

svg {
  position: relative;
  z-index: 900;
}

ellipse:hover,
polygon:hover,
path:hover,
rect:hover {
  cursor: pointer;
}

.st0,
.st1,
.st2,
.st3,
.st4,
.st7,
.armoire1,
.armoire3,
.tournevis,
.ferme2 {
  fill: #1a0000;
}

.ferme1,
.tapis,
.tapis3 {
  fill: #843b2f;
}

.act2-2,
.acte3-3,
.tapis4 {
  fill: #a53b2f;
}

.tapis2 {
  fill: #490000;
}

.st6,
.act1,
.st8,
.act3,
.armoire2,
.grille1,
.grille2 {
  fill: #ef5b48;
}

.act2,
.acte3-2,
.acte3-4,
.grille {
  fill: #420000;
}

img {
  width: auto;
  height: 100%;
}
/* ---------------------------- ACTION ---------------------------- */

.action {
  z-index: 500;
}

.action-on {
  display: flex;
}

.action-off {
  display: none !important;
}

.st7 {
  z-index: 1;
}

.armoire1,
.armoire2,
.armoire3 {
  display: none;
}

.grille,
.grille1,
.grille2 {
  display: none;
}

.tapis2,
.tapis3,
.tapis4 {
  display: none;
}

#bureau {
  display: none;
}

/* ----------------------------COUNTER + INVENTORY---------------------------- */

.inventory {
  position: fixed;
  top: 5dvh;
  right: 5dvw;
  transform: rotate(45deg);
  cursor: pointer;
  font-size: var(--sze-button);
  z-index: 99999;
}

.inventory:hover,
#help:hover {
  font-size: calc(var(--sze-button) + 0.1rem);
}

#counter {
  color: var(--clr-color) !important;
  position: fixed;
  top: 40px;
  left: 40px;
  font-size: var(--sze-button);
  z-index: 99999;
  display: none;
}

#help {
  color: var(--clr-color);
  position: fixed;
  top: 5dvh;
  left: 5dvw;
  font-size: var(--sze-button);
  z-index: 99999;
  cursor: pointer;
}

/* ----------------------------SHOW---------------------------- */

#container-show {
  width: 100dvw;
  height: 100dvh;
  background-color: rgb(0 0 0 / 52%);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  /* justify-content: center; */
  align-items: center;
  z-index: 1000;
  overflow-x: scroll;
  animation: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#container-image-show {
  width: auto;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transform: translateX(-10%); */
}
#container-show .element-to-copy {
  top: 0%;
  position: relative;
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.container-object {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.story {
  position: fixed;
  color: black;
  bottom: 5dvh;
  width: 90dvw;

  border-radius: 25px;
  background-color: var(--clr-color);
  font-size: 1.5rem;
  line-height: normal;
  overflow-y: auto;
  flex-direction: column;
  box-shadow: 0px 4px 19px 1px black;
}

.element-to-copy {
  background-color: var(--clr-color);
  text-align: center;
  cursor: pointer;
  height: 30%;
  border-radius: 25px;
}

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

  100% {
    opacity: 1;
  }
}

#container-show .element-to-copy svg {
  scale: 2;
}

/* ---------------------- Warning message -------------------- */

#warning-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
  font-size: var(--sze-button);
}

#message {
  font-size: var(--sze-button);
  background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
  padding: 20px; /* Espacement interne */
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ombre douce */
}

/* ----------------------------WINNER---------------------------- */

#winner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999990;
  background-color: black;
  opacity: 0;
  transition: opacity 1s, background-color 1s;
}

#winner-overlay.show {
  opacity: 1;
}

#winner-overlay .message {
  color: white;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 1s;
}

#winner-overlay .message.show {
  opacity: 1;
}

.voice,
.last-part {
  color: white;
  font-size: 1.5rem !important;
  line-height: 90%;
}

.KGB {
  font-size: 3rem !important;
  color: var(--clr-color);
}

.CIA {
  font-size: 3rem !important;
  color: var(--clr-overlay-counter6);
}
/* ----------------------------RESPONSIVE---------------------------- */

/* -----------------------LAYOUT----------------------- */

@media screen and (max-width: 1400px) {
  #title {
    animation: wait 20s infinite ease-in-out;
  }

  @keyframes wait {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
}

@media screen and (max-width: 500px) {
  p {
    font-size: 1rem !important;
  }

  h1 {
    font-size: 1.3rem !important;
    line-height: 120%;
  }

  #overlay {
    mix-blend-mode: color-burn;
    background-color: transparent;
  }

  #title {
    font-size: 5rem !important;
    font-weight: 500;
  }

  .play {
    width: 45%;
  }

  #date {
    font-weight: 900;
    font-size: 6rem !important;
  }

  .message {
    font-size: 1.3rem !important;
    line-height: 150%;
  }

  .last-part {
    font-size: 1rem !important;
  }

  #container-image-show {
    transform: translateY(-10%);
  }

  .story {
    height: auto;
    width: 80dvw;
  }
}

/* -----------------------GAME----------------------- */

@media (min-aspect-ratio: 16/9) {
  #scene {
    width: 100dvw;
    height: min-content;
  }
}

@media screen and (max-width: 600px) {
  .story p {
    font-size: smaller;
  }
}