@charset "UTF-8";

/* ========================================
   TABLE DES MATIÈRES
   ========================================
   1. BASE & GÉNÉRAL
   2. STRUCTURE 3D - VIEWPORT & ROOM
   3. MURS 3D - CONFIGURATION
   4. MURS - GRADIENTS (définitions)
   5. MURS - ANIMATIONS (@keyframes, @property)
   6. MURS - INTERACTIONS HOVER
   7. COMPTEUR/TIMER
   8. ÉCRAN D'ACCUEIL
   9. INTERACTIONS - MUR GAUCHE
   10. INTERACTIONS - MUR DROIT
   11. INTERACTIONS - SOL
   12. INTERACTIONS - PLAFOND
======================================== */


/* ========================================
   1. BASE & GÉNÉRAL
======================================== */

/* Chargement de la typographie custom */
@font-face {
  font-family: 'RuderPlakat';
  src: url('../fonts/RuderPlakatLLTrialTT-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RuderPlakatKontur';
  src: url('../fonts/RuderPlakatKonturLLVarTrial.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Helvetica Neue Condensed Bold - utilisation de la police système */ 

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #000000;
}

/* Vidéo de fond */
#backgroundVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 100;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease-in-out;
}


#backgroundVideo::-webkit-media-controls {
  display: none !important;
}


/* ========================================
   2. STRUCTURE 3D - VIEWPORT & ROOM
======================================== */

#viewport {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 700px;
}

.room {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  pointer-events: none;
}


/* ========================================
   3. MURS 3D - CONFIGURATION
======================================== */

/* Configuration de base des murs */
.room .wall {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* Murs verrouillés */
.room .wall.locked {
  cursor: not-allowed;
  opacity: 0.3;
  filter: grayscale(0.5);
}

/* Sol (floor) - rotaté de 90deg sur X, ancré en bas */
.room .wall:nth-child(1) {
  top: 100%;
  left: 50%;
  transform-origin: 50% 100%;
  overflow: hidden;
}

/* Plafond (ceiling) - rotaté de -90deg sur X, ancré en haut */
.room .wall:nth-child(2) {
  top: 0;
  left: 50%;
  transform-origin: 50% 0%;
  overflow: hidden;
}

/* Mur gauche (left) - rotaté de 90deg sur Y, ancré à gauche */
.room .wall:nth-child(3) {
  left: 50%;
  top: 50%;
  transform-origin: 0% 50%;
  overflow: hidden;
}

/* Mur droit (right) - rotaté de -90deg sur Y, ancré à droite */
.room .wall:nth-child(4) {
  left: 50%;
  top: 50%;
  transform-origin: 100% 50%;
  overflow: hidden;
}

/* Mur du fond (backwall) - pas de rotation, centré */
.room .wall:nth-child(5) {
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  overflow: hidden;
}


/* ========================================
   4. MURS - GRADIENTS (définitions)
======================================== */

/* Configuration générale des gradients */
.wall-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: background, --stop-1, --stop-2, --stop-3;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
  transition: filter 0.3s ease-in-out;
  pointer-events: none; /* Le gradient laisse passer le clic au wall */
}

/* Pseudo-élément pour le blur étendu */
.wall-gradient::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: inherit;
  filter: blur(50px);
  z-index: -1;
}

/* Sol (floor) */
/* Typographie 3D au lieu du gradient */
#floor.wall-gradient {
  background: #000000;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Texte CHAPITRE 3 sur le sol - Prend toute la taille */
#floor .floor-typography {
  font-family: 'RuderPlakat', sans-serif;
  font-size: 20vw;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  
  /* Le scale est maintenant géré dynamiquement par floor-interaction.js */
  /* Il s'adapte automatiquement à la profondeur de la pièce */
}

/* Plafond (ceiling) */
/* Typographie 3D au lieu du gradient */
#ceiling.wall-gradient {
  background: #000000;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Texte CHAPITRE 1 sur le plafond */
#ceiling .ceiling-typography {
  font-family: 'RuderPlakat', sans-serif;
  font-size: 20vw;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mur gauche (left) */
/* Typographie 3D au lieu du gradient */
#left.wall-gradient {
  background: #000000;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

/* Texte CHAPITRE 4 sur le mur gauche */
#left .left-typography {
  font-family: 'RuderPlakat', sans-serif;
  font-size: 20vw;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mur droit (right) */
/* Typographie 3D au lieu du gradient */
#right.wall-gradient {
  background: #000000;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

/* Texte CHAPITRE 2 sur le mur droit */
#right .right-typography {
  font-family: 'RuderPlakat', sans-serif;
  font-size: 20vw;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mur du fond (backwall) */
/* Typographie 3D au lieu du fond noir */
#backwall.wall-gradient {
  background: #000000;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Texte 451° sur le mur du fond */
#backwall .backwall-typography {
  font-family: 'RuderPlakat', sans-serif;
  font-size: 20vw;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}


/* ========================================
   5. MURS - ANIMATIONS (@keyframes, @property)
======================================== */

/* Ancien code d'animation des gradients supprimé - maintenant remplacé par de la typographie */


/* ========================================
   6. MURS - INTERACTIONS HOVER
======================================== */

/* Effet de blur au survol des murs cliquables */
#left.wall-gradient:hover,
#right.wall-gradient:hover,
#floor.wall-gradient:hover,
#ceiling.wall-gradient:hover {
  filter: blur(20px);
}


/* ========================================
   7. COMPTEUR/TIMER
======================================== */

/* Écran d'accueil supprimé */


/* ========================================
   9. INTERACTIONS - MUR GAUCHE
======================================== */

/* Conteneur principal de l'interaction du mur gauche */
.left_Int {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.left_Int.LeftClicked {
  display: block;
}

/* Container pour les mots éparpillés */
#letterWallContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Container pour le texte à brûler (mur gauche) */
.left-burning-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 900px;
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: lowercase;
  z-index: 1;
}

/* Mots cliquables qui peuvent brûler */
.left-burnable-word {
  color: white;
  cursor: pointer;
  transition: all 0.5s ease;
  user-select: none;
  padding: 2px 4px;
  -webkit-tap-highlight-color: transparent;
  display: inline;
}

.left-burnable-word:hover {
  color: #ffaa00;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

/* État de brûlure (en cours) */
.left-burnable-word.burning {
  color: #ff4500;
  text-shadow: 
    0 0 10px #ff4500,
    0 0 20px #ff6600,
    0 0 30px #ff8800,
    0 0 40px #ffaa00;
  transform: scale(1.2);
  animation: flicker 0.3s infinite;
}

/* État brûlé (avant de disparaître) */
.left-burnable-word.burned {
  color: #ff6600;
  text-shadow: 
    0 0 5px #ff4500,
    0 0 10px #ff6600;
}

/* Particules de feu */
.fire-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffaa00, #ff6600, #ff4500);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 10px #ff6600, 0 0 20px #ff4500;
}


@media (max-width: 768px) {
  .left-burning-text {
    width: 90%;
    font-size: 1.5rem;
    top: 45%;
  }
}

/* ========================================
   10. BOUTONS FINISH (COMMUN)
======================================== */

/* Style commun pour tous les boutons "Finish" */
.finish-button {
  /* Position */
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  
  /* Style comme intro-hint */
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff6666;
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
  
  /* Reset du bouton */
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  
  /* Autres */
  z-index: 10;
}

.finish-button:hover {
  /* Effet au survol */
  opacity: 0.8;
}

/* Bouton Finish invisible pour l'interaction de gauche */
#left_IntFinish {
  display: none;
}

/* Boutons Finish sur mobile - remonter */
@media (max-width: 768px) {
  .finish-button {
    bottom: 15vh;
    font-size: 1.2rem;
  }
}


/* ========================================
   10. ÉCRAN D'INTRODUCTION
======================================== */

.intro-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.intro-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-content {
  max-width: 800px;
  padding: 40px;
  text-align: center;
}

.intro-title {
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 4rem;
  font-weight: 700;
  color: white;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.intro-text {
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  line-height: 1.8;
  margin-bottom: 3rem;
  text-transform: lowercase;
}

.intro-hint {
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ff6666;
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ========================================
   11. MESSAGE FINAL
======================================== */

.final-message {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.final-text {
  max-width: 800px;
  padding: 40px 40px 10px 40px;
  text-align: center;
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1.6;
  text-transform: lowercase;
  margin: 0;
}

.final-title {
  max-width: 800px;
  padding: 10px 40px 40px 40px;
  text-align: center;
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff0000;
  line-height: 1.6;
  text-transform: lowercase;
  margin: 0;
}

@media (max-width: 768px) {
  .final-text {
    font-size: 1.5rem;
    padding: 20px;
  }
  
  .final-title {
    font-size: 1.2rem;
    padding: 10px 20px;
    margin-top: 0.5rem;
  }
}

/* ========================================
   11. INTERACTIONS - MUR GAUCHE
======================================== */

.right_Int {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: none;
  color: white;
  position: relative;
}

.right_Int.RightClicked {
  display: block;
}

/* Container pour l'effet de flammes */
#flameContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: -5;
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  z-index: 2;
  pointer-events: none;
  color: white;
}

.flame-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

/* Texte caché révélé quand les flammes s'éteignent */
.hidden-text-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: white;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 768px) {
  .hidden-text-reveal {
    font-size: 1.5rem;
    width: 90%;
  }
}

/* ========================================
   11. INTERACTIONS - SOL (SIMPLIFIÉ)
======================================== */

/* L'interaction du sol est maintenant simplifiée */
/* La typographie est directement sur le mur 3D */

.floor_Int {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.floor_Int.FloorClicked {
  display: block;
}

/* Container pour le texte du floor */
.floor-text-container {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  box-sizing: border-box;
}

/* Texte principal du floor */
.floor-main-text {
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: lowercase;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Mots interactifs qui se transforment */
.floor-word {
  display: inline;
  transition: all 0.3s ease;
  color: white;
}

/* Mots qui sont différents entre les deux versions */
.floor-word.different {
  color: white;
}

/* Animation de transformation */
.floor-word.transforming {
  opacity: 0;
  transform: scale(0.8);
  color: #ff6666;
}

/* État transformé (positif) */
.floor-word.transformed {
  color: #ff6666;
}


/* ========================================
   12. INTERACTIONS - PLAFOND
======================================== */

.ceiling_Int {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ceiling_Int.CeilingClicked {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container pour le texte - Burning words interaction */
.letter-grid {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  text-align: center;
  box-sizing: border-box;
}

/* Paragraphe contenant le texte */
.burning-text {
  font-family: 'HelveticaNeue-CondensedBold', 'Helvetica Neue Condensed Bold', 'Helvetica Neue', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: lowercase;
  margin: 0;
  padding: 0;
}

/* Mots à brûler */
.burning-word {
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.5s ease;
  user-select: none;
  display: inline;
  padding: 2px 4px;
  -webkit-tap-highlight-color: transparent;
}

.burning-word.burning {
  color: #ff4500;
  text-shadow: 
    0 0 10px #ff4500,
    0 0 20px #ff6600,
    0 0 30px #ff8800,
    0 0 40px #ffaa00;
  transform: scale(1.2);
  animation: flicker 0.3s infinite;
}

.burning-word.burned {
  color: #ff6600;
  text-shadow: 
    0 0 5px #ff4500,
    0 0 10px #ff6600;
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 
      0 0 10px #ff4500,
      0 0 20px #ff6600,
      0 0 30px #ff8800,
      0 0 40px #ffaa00;
  }
  50% {
    opacity: 0.8;
    text-shadow: 
      0 0 15px #ff4500,
      0 0 25px #ff6600,
      0 0 35px #ff8800,
      0 0 50px #ffaa00;
  }
}

/* Container blanc pour les mots */
.ceiling-words-container {
  position: absolute;
  inset: 0;
  background: white;
  z-index: 1;
  overflow: hidden;
}

/* Mots dispersés (images avec texte) */
.ceiling-word-item {
  position: absolute;
  width: 120px;
  height: 120px;
  cursor: pointer;
  transition: transform 0.2s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ceiling-word-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.ceiling-word-text {
  position: absolute;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Masque noir avec trou circulaire */
.ceiling-mask {
  position: absolute;
  inset: 0;
  background: black;
  z-index: 2;
  pointer-events: none;
  
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  
  mask-image: radial-gradient(
    circle 150px at -200px -200px,
    transparent 0%,
    black 80%
  );
  -webkit-mask-image: radial-gradient(
    circle 150px at -200px -200px,
    transparent 0%,
    black 80%
  );
}

/* Barre de sortie en bas */
.ceiling-output-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 70px;
  background: rgba(0, 0, 0, 0);
  color: rgb(0, 0, 0);
  font-size: 1.8rem;
  padding: 12px 20px;
  z-index: 5;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.placed-word {
  margin: 0 8px;
}