/* static/css/base.css */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow-x: hidden;
}

html {
  background: transparent;
  scroll-behavior: smooth;
}
  
@layer utilities {
  .fade-mask {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: fadeMaskIn 0.8s ease-out forwards;
  }

  /* DESKTOP: fade complet */
@media (min-width: 640px) {
  .fade-mask {
    -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.30) 10%,
      rgba(0, 0, 0, 0.70) 20%,
      rgba(0, 0, 0, 1.00) 50%,
      rgba(0, 0, 0, 1.00) 60%,
      rgba(0, 0, 0, 0.70) 80%,
      rgba(0, 0, 0, 0.30) 90%,
      rgba(0, 0, 0, 0.00) 100%
    );

    mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.30) 10%,
      rgba(0, 0, 0, 0.75) 20%,
      rgba(0, 0, 0, 1.00) 50%,
      rgba(0, 0, 0, 1.00) 60%,
      rgba(0, 0, 0, 0.75) 80%,
      rgba(0, 0, 0, 0.30) 90%,
      rgba(0, 0, 0, 0.00) 100%
    );
  }
}

/* MOBILE: fade complet */
@media (max-width: 639px) {
  .fade-mask {
    -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.25) 5%,
      rgba(0, 0, 0, 0.50) 10%,
      rgba(0, 0, 0, 0.80) 15%,
      rgba(0, 0, 0, 0.99) 50%,
      rgba(0, 0, 0, 0.99) 60%,
      rgba(0, 0, 0, 0.80) 85%,
      rgba(0, 0, 0, 0.50) 90%,
      rgba(0, 0, 0, 0.25) 95%,
      rgba(0, 0, 0, 0.00) 100%
    );

    mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.25) 5%,
      rgba(0, 0, 0, 0.50) 10%,
      rgba(0, 0, 0, 0.80) 15%,
      rgba(0, 0, 0, 0.99) 50%,
      rgba(0, 0, 0, 0.99) 60%,
      rgba(0, 0, 0, 0.80) 85%,
      rgba(0, 0, 0, 0.50) 90%,
      rgba(0, 0, 0, 0.25) 95%,
      rgba(0, 0, 0, 0.00) 100%
    );
  }
}

@keyframes fadeMaskIn {
  0% {
    -webkit-mask-position: left;
    mask-position: left;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes logo-shine {
  0% {
    background-position-x: 150%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    background-position-x: -150%;
    opacity: 0;
  }
}

.logo-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.shine-mask {
  background: linear-gradient(
  330deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0.4) 50%,
  rgba(255, 255, 255, 0) 100%
  );

  background-size: 200% 100%;
  background-repeat: no-repeat;

  mask-image: url('/static/img/lgn.png');
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-image: url('/static/img/lgn.png');
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.logo-container:hover .shine-mask,
.logo-container.animate-shine .shine-mask {
  animation: logo-shine 0.8s ease-out;
}

}