@charset "UTF-8";
body {
  background-color: #0d0d0d;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Arial Rounded MT Bold", "Arial Rounded MT", Arial, sans-serif;
  font-weight: 700;
  overflow: hidden;
}

.reveal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #0d0d0d;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

.reveal.active {
  animation: revealAnimation 5s ease-in-out forwards;
}

@keyframes revealAnimation {
  0% {
    width: 0;
    height: 0;
    border-radius: 60%;
  }
  50% {
    border-radius: 60%;
  }
  100% {
    width: 300vw;
    height: 300vh;
    border-radius: 0;
  }
}

/* Décoration TOP */
.logo-a {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500vh;
  height: 500px;
  pointer-events: none;
  z-index: 10;
}

/* Décoration BOTTOM */
.logo-a-bottom {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 50%) scaleY(-1);
  width: 500vh;
  height: 500px;
  pointer-events: none;
  z-index: 10;
}

/* LOGO PRINCIPAL - INTERACTIF */
.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
  filter: brightness(1);
  object-fit: contain;
  z-index: 50;
  /* IMPORTANT: active pour que le hover marche */
  pointer-events: all;
}

/* Hover du logo - couleur + animation */
.logo:hover .b {
  fill: #c50707ab;
  transition: fill 0.3s ease;
}

.logo:hover {
  transform: translate(-50%, -50%) scale(1.05);
  filter: brightness(1.2);
  animation: spinJump 1.5s ease-in-out;
}

@keyframes spinJump {
  0% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg) translateY(0);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg) translateY(-50px);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg) translateY(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05) rotate(360deg) translateY(0);
  }
}

/* H1 - TITRE */
h1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 7vw;
  margin: 0;
  opacity: 0;
  animation:
    fadeIn 1s ease-in-out 1s forwards,
    blink 2s ease-in-out 3s infinite;
  z-index: 51;
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
  user-select: none;
}

h1:hover {
  color: #b33535;
}

@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.3;
  }
}

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

/* Media queries pour responsive */