/* Style général */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fff; /* Fond blanc */
  overflow: hidden;
}

/* Conteneur du logo */
.logo-container {
  position: fixed;
  background-color: #ffffff63;
  text-align: center;
  width: 90%; /* Largeur responsive */
  max-width: 600px; /* Largeur maximale */
}

/* Style de l'image SVG */
.logo img {
  display: block;
  width: 100%; /* Responsive */
  height: auto;
  position: relative;
}

h1 {
  position: fixed;
  bottom: 80px;
  right: -30px;
  font-size: .4em;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  transform: rotate(-90deg);
  margin: 0;
}

p.golden-text {
  position: fixed;
  bottom: 6px;
  right: 10px;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: transparent;
  background: #3B0B51;
  background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
  padding: 0;
}

/* Effet de reflet */
.golden-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Commence en dehors du texte */
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-30deg); /* Inclinaison pour un effet de reflet réaliste */
  animation: golden-reflect 2s infinite;
}

/* Animation du reflet */
@keyframes golden-reflect {
  0% {
    left: -100%;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 200%;
  }
}

:root {
  --size: 20px;
}

.background {
  background: conic-gradient(from 0deg at 0% 0%,hsla(0,0%,98%,1) 0deg,#DFBD69 72deg,#3B0B51 144deg,#DFBD69 216deg,#3B0B51 288deg,hsla(0,0%,98%,1) 1turn);
  width: 100%;
  height: 100%;
  mask:
    radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
    url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
  mask-composite: intersect;
  animation: flicker 20s infinite linear;
}

@keyframes flicker {
  to {
    mask-position: 50% 50%, 0 50%;
  }
}

@media (max-width: 1025px)  {
  h1 {
    right: -60px;
  }
}