@charset "UTF-8";


@font-face {
  font-family: 'JaneAusU';
  src: url('..//fonts/JaneAusten.otf');
}

@font-face {
  font-family: 'SYNCRO mono';
  src: url('./../fonts/SYNCRO mono.ttf');
}


body {
  overflow: hidden;
  max-width: fit-content;
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
  opacity: 0.9;
  transition: background-image 1s ease-in-out; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
  transition: background-image 1s ease-in-out, background-color 1s ease-in-out;
  
}



.page-header {
  height: 100%;
  position: fixed;
}

.page-header:after {
  pointer-events: none;
  animation: grain 8s steps(10) infinite;
  background-image: url(../images/paper_1.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.3;
  position: fixed;
  top: -110%;
  width: 300%;
  mix-blend-mode: lighten;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


#gradient-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; 
  pointer-events: none; 
  background: radial-gradient(circle, rgb(132, 129, 114) 0%, rgb(204, 181, 188) 25%, rgb(220, 222, 221) 35%, rgb(204, 181, 124) 50%, rgb(112, 125, 124) 60%, rgba(38, 36, 50, 0) 75%);
  mix-blend-mode: multiply; 
  opacity: (75%);
  animation: gradientAnimation 30s ease infinite;
  background-size: 500% 500%; 
  background-position: center; 
}


@keyframes gradientAnimation {
  0% {
      background-size: 400vw;
  }
  
  50% {
      background-size: 200vw;
  }
  100% {
      background-size: 400vw;
  }
}

@media (max-width: 700px) {
  #gradient-layer {
    background-size: 100% 100%; 
    overflow-x: hidden;
  }
  @keyframes gradientAnimation {
    0% {
        background-size: 600vw;
    }
    
    50% {
        background-size: 400vw;
    }
    100% {
        background-size: 600vw;
    }
  }
}


.wrapper {
  position: absolute;
  overflow-x: hidden;
  width: 100vw;
  height: 100%;
  left: calc(50% - 50vw);
  top: 0;
  overflow-y: scroll;
  transform-origin: 50%;
  transform: perspective(600px) rotateX(40deg);
  -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
  mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);


}


.wrapper::-webkit-scrollbar {
  display: none; 
}

.content {
  margin-top: 35vh; 
  padding: 20px;
  margin-bottom: 100vh; 
  text-align: center;
}


p {
  color: rgb(37, 23, 0);
  font-size: 3vw; 
  padding: 0.5em 0; 
  padding-left: 20%;
  padding-right: 20%;
  inline-size: none;
  margin-bottom: 100px;
  font-family: 'JaneAusU', sans-serif;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
  overflow: visible; 
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  
  animation: borderFadeAnimation 4s infinite;

  pointer-events: none; 
}

@keyframes borderFadeAnimation {
  0%, 100% {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }
  50% {
    -webkit-mask-size: 110%; 
    mask-size: 110%;
  }

  
}



h2 {

  color: rgba(46, 28, 0, 0.808);
  font-size: 3vw; 
  padding: 0.5em 0; 
  padding-left: 20%;
  padding-right: 20%;
  inline-size: none;
  margin-bottom: 100px;
  font-family: 'JaneAusU', sans-serif;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 50%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 50%);
  overflow: visible; 
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  animation: borderFadeAnimation 15s infinite;
}

@keyframes borderFadeAnimation {
  0%, 100% {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }
  50% {
    -webkit-mask-size: 210%; 
    mask-size: 210%;
  }


}

body, html {
  height: 100%;
  margin: 0;
}



h3 {
  color: rgba(0, 0, 0, 0.823);
  font-size: 4.2vw;
  letter-spacing: -2px;
  font-family: 'SYNCRO mono';
  opacity: 1; 
  top: 50%;
  padding: 0.5em 0; 
  padding-left: 20%;
  padding-right: 20%;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%); 
  transform-style: preserve-3d;
  transform: perspective(600px) rotateX(-35deg);
  
  animation: fade 6s infinite; 
}


@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2; 
  }
  100% {
    opacity: 1; 
  }
}

h4 {
  color: rgba(0, 0, 0, 0.823);
  font-size: 2vw;
  letter-spacing: -2px;
  font-family: 'SYNCRO mono';
  opacity: 1; 
  top: 50%;
  padding: 0.5em 0; 
  padding-left: 20%;
  padding-right: 20%;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
  transform: perspective(600px) rotateX(-35deg);
  animation: bounceFade 6s infinite ease-in-out; 
}


@keyframes bounceFade {
  0%, 100% {
    transform: translateY(0); 
    opacity: 0; 
  }

  50% {
    transform: translateY(-15px); 
    opacity: 0.8; 
  
  }
}

h5 {
  color: rgba(79, 45, 112, 0.76);
  font-size: 4vw;
  letter-spacing: -2px;
  font-family: 'SYNCRO mono';
  opacity: 1; 
  top: 50%;
  padding: 0.5em 0; 
  padding-left: 20%;
  padding-right: 20%;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: translateY(100px) perspective(600px) rotateX(-35deg) ;
}

@media (max-width: 700px) {
  p {
    font-size: 4vw;     
  }
  h2{
    font-size: 4vw; 
  }
  h3{
    padding: 0.2em 0; 
    font-size: 12vw; 
  } 
  h4{
    font-size: 3vw; 
    letter-spacing: -1px;
  } 
  h5{
    font-size: 7vw; 
  } 
}

img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  overflow: hidden;

}
.clickable {
  color: rgb(37, 23, 0);
  text-decoration: underline;
  cursor: pointer;
  pointer-events:all; 
  z-index: 99999999;
  


}

.clickable:hover {
  color: rgba(47, 59, 156, 0.782); 
  
}

.clickable-image {
  opacity: 55%;
  position: fixed;
  right: 10px;
  top: 10px;
  width: 40%;
  height: auto;
  filter: brightness(200%) url(#wavy); 
  pointer-events: none; 
  transform-origin: 50%;
  transform: perspective(1600px) rotateX(10deg);
  mix-blend-mode:hard-light;
  animation: fadeInOut 8s ease-in-out forwards;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;



}


@keyframes fadeInOut {
  0% {
      opacity: 0;
      transform: scale(0.4);
  }
  25% {
      opacity: 0.85;
      transform: scale(1);
  }
  100% {
      opacity: 0;
      transform: scale(0.4);
  }
}

@media (max-width: 700px) {
  .clickable-image {
  width: 70%;
  height: auto;
  }
}


.clickable-overlay {
  pointer-events: none;
  overflow: visible;
  inline-size: none;
  font-family: 'JaneAusU', sans-serif;
  color: rgba(47, 59, 156, 0.782); 
  font-size: 9vw; 
  text-align: center;
  position: absolute;
  top: 35%;
  bottom: 35%;
  left: 25%;
  right: 25%;
  transform: translate(-50%, -50%);
  z-index: 99999999;
   animation: fadeOutDisappear 3s ease-out;
}


@keyframes fadeOutDisappear {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}


.hoverable {
  color: rgba(171, 49, 67, 0.782); 
  cursor: pointer; 
  font-weight: bold; 
  font-style: italic; 
  transition: color 0.3s ease, text-decoration-color 0.3s ease; 
  pointer-events:all; 
  z-index: 99999999;

}

.hoverable:hover {
  color: rgba(190, 44, 66, 0.782); 
  z-index: 9999;
}
.hoverable-image {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
  object-fit:cover;
  filter: grayscale(90%); 
  opacity: 85%;
  mix-blend-mode: screen;
  z-index: 1000; 
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 80%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 80%);
  overflow: visible; 
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: borderFadeAnimation 15s infinite;
  animation: fadeInOut 10s ease-in-out forwards;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;

}

@keyframes borderFadeAnimation {
  0%, 100% {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }
  50% {
    -webkit-mask-size: 210%; 
    mask-size: 210%;
  }

}


.hoverable-overlay {
  overflow: visible;
  pointer-events: none;
  inline-size: none;
  font-family: 'JaneAusU', sans-serif;
  color: rgba(190, 44, 66, 0.782); 
  font-size: 9vw; 
  text-align: center;
  position: absolute;
  z-index: 99999999;
   animation: fadeOutDisappear 5s ease-out;
}

@keyframes fadeOutDisappear {
  0% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.2); }
}


div{
  overflow: hidden;
}

/* Supprime TOUS les curseurs natifs */
*,
*::before,
*::after {
    cursor: none !important;
}

/* Désactive la main sur TOUS les éléments interactifs */
a, button, input, label, select, textarea, [role="button"], [role="link"], summary {
    cursor: none !important;
}

/* Permet d'avoir le curseur normal pour taper du texte */
input[type="text"], textarea, [contenteditable="true"] {
    cursor: text !important;
}
          #circularcursor {
            background-color: rgba(37, 23, 0, 0.812); 
            width: 9px;
            height: 9px;
            border-radius: 50%;
            position: absolute;
            z-index: 9999; 
            pointer-events: none;
        }