/* Styles globaux & layout */

body, html {
  margin:0; padding:0; height:100%; overflow:hidden;
  background: linear-gradient(to bottom, #f5f1e6, #7fbcd2);
  font-family:'Segoe UI',sans-serif; color:#4d3c2b;
}
.center-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%); /* Légère remontée pour équilibrer visuellement */
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
}



#scene { position:relative; width:100%; height:100%; overflow:hidden; perspective:800px; }
.logo-wrapper {
  width: clamp(180px, 35vw, 400px);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  position: relative;
}


.logo-wrapper::before {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  background: url("../assets/halo.png") center/contain no-repeat;
  filter: blur(8px);
  z-index: 1;
}


#logo {
  width: 100%;
  height: auto;
  animation: float 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5vh);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}



#flare {
  position:absolute; top:5%; left:33%;
  width:500px; height:500px;
  background:url('../assets/flare.png') center/contain no-repeat;
  mix-blend-mode:screen; opacity:0;
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.1); opacity: 0.6; }
}
#flare {
  
}
#particles {
  position:absolute; width:100%; height:100%; z-index:1;
}

.center-content {
  text-align: center;
}


.center-content h1 {
  font-size: clamp(1.2rem, 3vw + 0.5rem, 2.5rem);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#countdown {
  font-size:1.5rem; margin-bottom:1rem;
}

.discord-button {
  background:#5865F2; color:#fff;
  padding: 0.8em 1.5em;
  font-size: clamp(0.9rem, 1vw + 0.6rem, 1.2rem);
  border:none; border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  text-decoration:none; display:inline-block;
  transition: transform 0.3s;
}
.discord-button:hover { transform:scale(1.05); }

#audio-toggle {
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,0.7); border:none;
  padding:8px; border-radius:50%; cursor:pointer;
  z-index:7;color: #ababab;
}
 /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
 
 .discord-button {
  background-color: #5865F2;
  color: white;
  padding: 12px 24px;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.discord-button:hover {
  transform: scale(1.05);
}

.icon-discord {
  width: 24px;
  height: 24px;
}
@media (max-width: 600px) {
  .center-wrapper {
    transform: translate(-50%, -50%);
    gap: 1rem;
  }

  .logo-wrapper {
    width: 50vw;
  }

  .discord-button {
    font-size: 1rem;
    padding: 0.7em 1.2em;
  }
}
.label-short {
  display: none;
}
.label-full {
  display: inline;
}

@media (max-width: 480px) {
  .label-short {
    display: inline;
  }
  .label-full {
    display: none;
  }
}