/* =================================================== */
/*                                                    */
/*            Belistudio.fr - CSS Version 1.0        */
/*               © 2025 Belistudio                  */
/*                                                 */
/* ============================================== */

/* BODY & FOND GRADIENT ANIMÉ */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(-45deg, #000000, #393939, #3d3d3d, #1c1c1c);
  background-size: 400% 400%;
  animation: gradientMove 12s ease infinite;
  color: white;
  text-align: center;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* CONTAINER */
.container {
  flex: 1;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* AVATAR - VINYLE TOURNANT */
@keyframes rotateVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 20px;
  border: 3px solid #fff;
  animation: rotateVinyl 10s linear infinite; /* rotation continue */
}

/* TITRES & TEXTE */
h1 { font-size: 26px; margin-bottom: 10px; }
p { color: #ccc; margin-bottom: 10px; }
.description { margin-bottom: 30px; }

/* BOUTONS GLOWS */
.link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #222;
  color: #fff;
  text-decoration: none;
  padding: 15px;
  margin: 25px 0;
  border-radius: 12px;
  font-size: 18px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Glow permanent selon plateforme */
.link.spotify   { box-shadow: 0 0 10px #1DB954, 0 0 10px #1DB954; }
.link.apple     { box-shadow: 0 0 10px #aaa, 0 0 10px #aaa; }
.link.amazon    { box-shadow: 0 0 10px #00A8E1, 0 0 10px #9146FF; }
.link.youtube   { box-shadow: 0 0 10px #FF0000, 0 0 10px #FF0000; }
.link.tiktok    { box-shadow: 0 0 10px #69C9D0, 0 0 10px #EE1D52, 0 0 10px #fff; }
.link.instagram { box-shadow: 0 0 10px #E1306C, 0 0 10px #F56040, 0 0 10px #833AB4; }

/* Hover scale */
.link:hover { transform: scale(1.05); }

/* ICONES PULSE */
.link i {
  font-size: 22px;
  display: inline-block;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/* FOOTER */
footer {
  font-size: 14px;
  color: #bbb;
  text-align: center;
  padding: 10px 0;
  background: rgba(0, 0, 0, 0.5);
}

/* FOND VIDÉO */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadre la vidéo pour couvrir l’écran */
  filter: brightness(0.4); /* assombrit pour garder lisible le texte */
  opacity: 0.4; /* transparence */
}