:root {
  --bg1: #07070a;
  --bg2: #0f0b1a;
  --accent: #ff7518;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: #fff;
  overflow: hidden;
}

.scene {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.intro {
  text-align: center;
  padding: 3rem 1rem;
}

h1.glitch {
  font-size: clamp(2rem, 6vw, 5rem);
  position: relative;
  letter-spacing: 0.08em;
}

h1.glitch::before,
h1.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0.8;
}
h1.glitch::before {
  color: var(--accent);
  animation: glitchTop 2.5s infinite;
}
h1.glitch::after {
  color: #8b0000;
  animation: glitchBottom 3s infinite;
}

@keyframes glitchTop {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-6px, -3px);
  }
  40% {
    transform: translate(4px, 2px);
  }
  60% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitchBottom {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, 4px);
  }
  50% {
    transform: translate(-6px, -2px);
  }
  75% {
    transform: translate(3px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

#enterBtn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 117, 24, 0.95);
  color: #111;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

#enterBtn:hover {
  background: #ff9448;
  transform: scale(1.05);
}

.ghost {
  position: absolute;
  left: 10%;
  top: 35%;
  width: 120px;
  height: 160px;
  background: linear-gradient(#fff, #eee);
  border-radius: 60% 60% 30% 30%;
  filter: blur(0.5px);
  opacity: 0.95;
  transform-origin: center;
  animation: float 4s ease-in-out infinite;
}

.ghost .eyes {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  display: flex;
  justify-content: space-between;
}

.ghost .eyes::before,
.ghost .eyes::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 50%;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-18px) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

body.flash {
  background: radial-gradient(circle, #fff 0%, #000 90%);
  transition: background 0.2s;
}

/* --- Styles des chauves-souris --- */
#bats {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none; /* pour ne pas gêner les clics */
}

.bat {
  position: absolute;
  width: 40px;
  height: 20px;
  color: #821819; /* rouge sombre pour les ailes */
  opacity: 0.9;
  transform-origin: center;
  filter: drop-shadow(0 0 4px #ff0000);
  transition: transform 0.2s ease;
}

.bat svg {
  width: 100%;
  height: 100%;
}
.fog,
.fog.layer2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 160%;
  height: 160%;
  pointer-events: none;
  transform-origin: left top;
  z-index: 2;
  mix-blend-mode: lighten;
}

/* Couche principale : brume dense et mobile */
.fog {
  background: radial-gradient(
      circle at 30% 40%,
      rgba(255, 255, 255, 0.25),
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(255, 255, 255, 0.2),
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.15),
      transparent 45%
    );
  opacity: 0.4;
  animation: fogDrift 60s ease-in-out infinite;
  filter: blur(20px);
}

/* Deuxième couche : plus lente et subtile */
.fog.layer2 {
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.2),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.15),
      transparent 40%
    ),
    radial-gradient(
      circle at 40% 50%,
      rgba(255, 255, 255, 0.1),
      transparent 50%
    );
  opacity: 0.3;
  animation: fogDrift 120s linear infinite reverse;
  filter: blur(25px);
}

.fog.layer2 {
  background: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.2),
      transparent 35%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.15),
      transparent 40%
    ),
    radial-gradient(
      circle at 40% 50%,
      rgba(255, 255, 255, 0.1),
      transparent 50%
    );
  opacity: 0.3;
  animation: fogDrift 200s linear infinite reverse;
  filter: blur(25px);
}

/* Animation lente et organique */
@keyframes fogDrift {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.35;
  }
  25% {
    transform: translateX(-3%) translateY(2%) scale(1.05);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-8%) translateY(-2%) scale(1.03);
    opacity: 0.45;
  }
  75% {
    transform: translateX(-3%) translateY(1%) scale(1.02);
    opacity: 0.4;
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.35;
  }
}

/* Pour s'assurer que ton contenu reste bien au-dessus */
.scene > * {
  position: relative;
  z-index: 10;
}

/* --- 🌙 LUNE BLEUTÉE AVEC TRAJECTOIRE --- */
.moon {
  position: fixed;
  top: 8%;
  right: 10%;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle at 30% 30%,
    #dff7ff 0%,
    #91c4f2 40%,
    #3a4a6b 100%
  );
  border-radius: 50%;
  box-shadow: 0 0 30px 10px rgba(0, 170, 255, 0.4),
    0 0 60px 40px rgba(100, 180, 255, 0.15);
  overflow: hidden;
  z-index: 3;
  animation: moonGlow 5s ease-in-out infinite alternate,
    moonOrbit 60s linear infinite alternate;
}

/* Halo respirant (inchangé) */
@keyframes moonGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 25px 10px rgba(0, 170, 255, 0.4),
      0 0 60px 30px rgba(100, 180, 255, 0.15);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 35px 15px rgba(0, 190, 255, 0.5),
      0 0 80px 40px rgba(150, 200, 255, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 25px 10px rgba(0, 170, 255, 0.4),
      0 0 60px 30px rgba(100, 180, 255, 0.15);
  }
}

/* 🌕 Mouvement parabolique fluide et continu */
@keyframes moonOrbit {
  0% {
    transform: translate(-60vw, 10vh);
  }
  25% {
    transform: translate(-30vw, 0vh);
  }
  50% {
    transform: translate(0vw, -5vh);
  }
  75% {
    transform: translate(30vw, 0vh);
  }
  100% {
    transform: translate(60vw, 10vh);
  }
}
/* --- Fantôme droit --- */
.ghost-right-ghost {
  position: absolute;
  right: 10%; /* au lieu de left: 10% */
  top: 35%;
  width: 120px;
  height: 160px;
  background: linear-gradient(#fff, #eee);
  border-radius: 60% 60% 30% 30%;
  filter: blur(0.5px);
  opacity: 0.95;
  transform-origin: center;
  animation: float 4s ease-in-out infinite; /* même animation que le fantôme gauche */
}

.ghost-right-ghost .eyes {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  display: flex;
  justify-content: space-between;
}

.ghost-right-ghost .eyes::before,
.ghost-right-ghost .eyes::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 50%;
}

/* --- SCREAMER FULLSCREEN --- */
.screamer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* largeur complète de l'écran */
  height: 100vh; /* hauteur complète de l'écran */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8); /* léger voile sombre derrière l'image */
  opacity: 0;
  z-index: 50; /* au-dessus de tout */
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.screamer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 0 20px #fff);
}

.screamer.show {
  opacity: 1;
}

.screamer.hidden {
  opacity: 0;
}