body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: rgb(248, 237, 231);
  scrollbar-width: none;
  -webkit-scrollbar-display: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cache instantané si la session "visited" existe */
.hide-loader-instantly #loader {
    display: none !important;
}

/* Animation de sortie pour la première visite */
.loader-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
}

#loader {
  position: fixed;
  inset: 0;
  background: #801616;
  color: rgb(248, 237, 231);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1);
}

.loader-content {
  text-align: center;
  width: 300px;
}

.loader-title h1{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin-bottom: 20px;
  letter-spacing: 0.5vw;
  font-weight: 100;
  font-size: clamp(1.5rem, 1.8vw, 5rem);
  color: rgb(248, 237, 231);
}

.loader-title p {
  font-family: 'nohemi', sans-serif;
  font-weight: 100;
  font-size: clamp(1rem, 1vw, 1vw);
}

#enter-wrapper {
  margin: auto;
  z-index: 10001;
}

#enter-btn {
    position: relative;
    z-index: 10001 !important;
    cursor: pointer;
}


.loader-hidden {
  transform: translateY(-100%);
}



.top, .bottom{
    height: 100vh;
    margin-bottom: 10vh;
}


.container{
    height: 400vh;
    margin-bottom: 10vh;
}

.container2 {
    height: 90vh;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 60vh;
    z-index: 5;
}

.bg{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.moving_bg{
  position: absolute;
  top: 100vh;
  left: 10vw;
  z-index: 1;
  will-change: transform;
}

.moving_bg *{
  position: absolute;
}

.moving_bg img:nth-child(1){
  
  height: 50vh;
  /* width: clamp(100vw,100vw,100px); */
  left: -60%;
  transform: translateX(-40%);
}

.moving_bg img:nth-child(2){
  height: 80vh;
  left: 70vw;
  top: 50vh;
}


.homepage_text {
  position: absolute;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
}

h1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  margin-top: 10vh;
  color: #801616;
  font-size: 15vw;
  text-transform: uppercase;
  text-align: center;
}

h2 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  color: #801616;
  font-size: clamp(1rem, 2vw, 5rem);
  text-align: center;
}

h3 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  color: #801616;
  font-size: clamp(5rem, 8vw, 8vw);
  text-align: left;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  z-index: 100;
  /* background-color: rgb(248, 237, 231); */
  text-transform: uppercase;
  font-family: 'nohemi', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

nav a {
  text-decoration: none;
  color: #801616;
  font-weight: bold;
  font-size: clamp(1rem, 1.2vw, 4rem);
  position: relative;
  padding-bottom: 2px;
}

nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #801616;
  transform: scaleX(0);
  transform-origin: center; 
  transition: transform 0.3s ease-out;
}

nav a:hover::after {
  transform: scaleX(1);
}

.home_page {
  position: relative;
  width: 100%;
  height: 100vh;
}

#ballpit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


.bottom_gachapon {
  position: absolute;
  bottom: -50vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: clamp( 400px, 60vh, 60vh);
  
  background-image: url("/img/bg_stickers.webp");
  background-size: cover;
  background-color: rgba(247, 185, 104, 50);
  z-index: 3;
  overflow: hidden;
}

.gacha_box_hidden {
  position: relative;
  height: 43vh;
  z-index: 20;
  bottom: -90vh;
  width: clamp(200px, 20vw, 20vw);
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}




.handle {
  position: relative;
  width: clamp(200px, 18vw, 18vw);
  height: auto;
  background-image: url("../img/handle_bg.png");
  background-size: contain;
  margin-left: 5vw;
  margin-top: 5vh;
  z-index: 22;
}

@media (max-width: 690px) {
  .handle {
    margin-left: auto;
    margin-right: auto;
  }
}

.handle img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

.stickers {
  width: clamp(200px, 20vw, 20vw);
  display: flex;
  position: relative;
  left: 50%;
  top: -25vw;
  z-index: 50;
  align-items: center;
}

.stickers img {
  width: 100%;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s linear;
}

.gacha_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -70%;
  /* background-color: aliceblue; */
}




.gacha_box_hidden img {
  width: 100vw;
}

.gacha_box {
  position: relative;
  bottom: 0vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 20vw, 20vw);
  height: 20vh;
  overflow: hidden;
  background-color: black;
  z-index: 2;
}

.gacha svg {
  position: absolute;
  width: clamp(150px, 20vw, 250px);
  height: clamp(150px, 20vw, 250px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}




.gacha_wrap {
  /* margin-left:1vw; */
  /* margin-right: 5vw; */
  height: 90vh;
  margin-bottom: 5vw;
  /* width: 80vw; */
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.sliding_text1, .sliding_text6, .sliding_text9 {
  overflow: hidden;
  padding: 2vw;
}

.sliding_text1 span, .sliding_text6 span, .sliding_text9 span {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
}


.text_group {
  text-align: left;
  line-height: 1.5; 
  /* top: 0vh; */
  /* padding: 2vw; */
  /* right: 10%;
  position: absolute; */
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: bold;
  width: 40vw;
  display: flex;
  flex-direction: column;
  
  
}

.text_group2, .text_group3{
  display: flex;
  justify-content: space-between;
    margin-left: 2vw;
  margin-right: 2vw;
  font-size: clamp(1rem, 1vw, 4rem);
}

.text_group3 {
  align-items: start;
}



.sliding_text2, .sliding_text3, .sliding_text4, .sliding_text5, .sliding_text8{
  /* align-items: center;
  justify-content: center; */
    font-family: 'Nohemi', sans-serif;

  color: #801616;
  position: relative;

}

.title_group {
  display: flex;
  align-items: center;
  justify-content:space-between;
}




.sliding_text4, .sliding_text5 {
  /* position: absolute; */
  /* top: 40%; */
  /* transform: translateY(-50%); */
  width: 30vw;
  text-align: left;
  z-index: 10;
  display: block;
  line-height: 0.9;

}



/* .sliding_text5 {
  right: 10%;
} */

.sliding_text7 {
  width: 40vw;
  /* height: clamp(100px, 30vh, 30vh); */
  /* position: absolute; */
  /* top: 60%; */
  display:flex;
  /* flex-wrap: wrap; */
}

.sliding_text7 div{
  display: flex;
  /* align-items: center; */
  flex: 1;
  min-width: 100px;
  /* height: clamp(50px, 10vw, 10vw); */
  width: 100%;
}

.sliding_text7 div img {
  width: clamp(100px, 15vw, 150px);
  height: auto;
  /* max-height: 70px; */
  object-fit: contain;
  display: block;
  transform: scale(0);
  transform-origin: center;

}


.sliding_text8 {
  /* position: absolute; */
  /* left: 90%;
top: 35%; */
margin-right: 5vw;
}


.line {
  display: table !important;
  position: relative !important;
  margin-bottom: 6px;
  overflow: hidden;
  width: auto;
}

.line-text {
  display: block;
  opacity: 0;
  position: relative;
  z-index: 1;
}

.line-highlight {
  position: absolute;
  inset: 0;
  background: #801616;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
}
.sliding_text2 .text, .sliding_text3 .text {
  opacity: 0;
  position: relative;
  z-index: 1;
}

.highlight {
  position: absolute;
  inset: 0;
  background: #801616;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}


.bottom{
  height: 100vh;
  position: relative;
}

.projects_header {
    position: absolute;
    top: 10vh;
    left: 2vw;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.bottom h3 {
    position: relative !important;
    top: 0 !important;
    padding-left: 0 !important;
    margin: 0;
    padding-bottom: 0;
}

.nav_projects {
  font-family: 'nohemi', sans-serif;
  color: #801616;
  font-size: clamp(1rem, 1vw, 4rem);
}

.nav_projects p {
  cursor: pointer;
  position: relative;
  display: inline-block; 
  margin-bottom: 5px; 
}

.nav_projects p::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px; 
  left: 0;
  background-color: #801616;
  
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav_projects p:hover::after {
  transform: scaleX(1);
}

#cd_chain_container {
  width: 100vw;
  height: 90vh;
  position: absolute;
  overflow: hidden;
  /* border: solid 2px #801616; */
  /* bottom: 0; */
  top: 22vh;
  left: 50%;
  transform: translate(-50%);
  pointer-events: all;
  align-self: top;
  z-index: 2;
}

#cd_chain_container canvas{
  transform: scale(1);
  background: transparent;
}


.cd_nav{
  /* background-color: blue; */
  position: relative;
  display: flex;
  justify-content: center;
  justify-self: center;
  bottom: -90vh;
  gap: 10px;
  z-index: 100;
}
/* 
.cd_nav span {
  font-size: 1rem;
} */

@media (max-width: 800px) {
  #cd_chain_container {
    width: 110%;
    height: 60vh;
  }

  .projects_text_container {
    top: 45vh;
  }

  .cd_nav{
    bottom: -75vh;
    justify-self: left;
    margin-left: 10vw;
  }
}

.cd-link {
  cursor: pointer;
  overflow: hidden;
}

.bottom h3 {
  position: absolute;
  z-index: 10;
  padding-left: 2vw;
  top: 10vh;
}

.projects_text_container {
  position: absolute;
  z-index: 20;
  left: 60vw;
  bottom: 15vh;
  font-family: "Nohemi", sans-serif;
  color: #801616;
  width: 25vw;
  /* background-color: aqua; */
}




.cd_title {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2vw, 1.2vw);
  margin-bottom: 1vw;
}

.cd_tags {
  font-size: clamp(0.2rem, 1.9vw, 0.8rem);
  margin: 0;
}

.cd_description {
  margin-right: 1.5vw;
}


.cd_btn_wrapper {
  position: relative;
  overflow: hidden;
  width: fit-content;
  height: auto;
  /* padding-top: 21px;
  padding-bottom: 21px; */
  border-radius: 10px;
}

.cd_next .text img, .cd_nav_arrow {
  width: clamp(20px, 2vw, 2vw);
  height: auto;
}

.cd_nav_arrow {
  transform: scaleX(-1);
}

.contacts {
  height: 100vh;
}


.contacts_stickers {
  position: relative;
  height: 60vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; 
}

.linkedin, .mail, .cv, .github {
  position: absolute; 
  transform-origin: center;
}

.linkedin {
  width: 20vw;
  min-width: 150px;
  left: 10%;
  top: -5%;
  rotate: -10deg;
}

.mail {
  width: 35vw;
  min-width: 350px;
  left: 5%;
  top: 10vh;
  rotate: 2deg;
  cursor: pointer;
}

.cv {
  width: 10vw;
  min-width: 100px;
  right: 25%;
  top: 55%;
  rotate: -5deg;
}

.github {
  width: 12vw;
  min-width: 100px;
  right: 20%;
  top: 10%;
  rotate: 5deg;
}


.status {
  position: fixed;
  bottom: 5%;
  left: 50%;
  font-family: 'nohemi', sans-serif;
  display: none;
  color: #801616;
}


@media (max-width: 700px) {
  .mail {
    top: 0%;
  }

  .cv {
    top: 65%;
  }
}

.fancy-btn{
  position: relative;
  padding: 14px;
  border-radius: 10px;
  background:rgb(248, 237, 231);
  color: #801616;
  font-family: 'nohemi', sans-serif;
  border: 2px solid #801616;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  z-index: 3;

  width: max-content;
  white-space: normal;

  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.5vw);
}

.text {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.fill {
  position: absolute;
  width: 200%;
  height: 200%;
  background: #801616;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: var(--x, 50%) var(--y, 50%);
  transition: transform .5s ease;
  top: -50%;
  left: -50%;
  z-index: 1;
}

.fancy-btn:hover .fill {
  transform: scale(1);
}

.fancy-btn:hover {
  color: aliceblue;
}

#enter-btn {
  background: #801616;
  border: 1px solid white;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  margin-top: 10px;

}

#enter-btn:hover {
  color: #801616;
}

#enter-btn .fill {
  background: antiquewhite;
}

footer {
  width: 100vw;
  height: 20vh;
  background-color: #801616;
  display: flex;
  margin-top: 20vh;
}

@font-face {
  font-family: "Nohemi";
  src: url(../fonts/Nohemi-Medium.woff2);
  font-weight: 500;
}

@font-face {
  font-family: "Nohemi";
  src: url(../fonts/Nohemi-Bold.woff2);
  font-weight: 700;
}


@media (max-width: 730px) {
  .title_group {
    flex-direction: column;
    align-items: start;
    transform: translateY(-5vw);
  }

  .text_group, .sliding_text1 {
    padding: 0;
    margin: 0;
    padding-left: 2vw;
  }

  .text_group {
    gap: 5px;
  }
}

@media (max-width: 500px) {
  .text_group2 {
    flex-direction: column;
    
    padding: 0;
    width: 100%;

    gap: 25vh;
    transform: translateY(-5%);
  }

  .text_group {
    width: 100vw;
    align-items: top;
    line-height: 20px;
    flex-direction: row;
  }

  .sliding_text4, .sliding_text5 {
    width: 100% !important;
    padding: 0;
  }


}