@font-face {
    font-family: "MaFont";
    src: url("./Font/Relife\ PERSONAL\ USE\ ONLY!.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MaFont1";
    src: url("./Font/AlfaSlabOne-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'MaFont';
cursor: default;
}

body {
font-family: Helvetica, Arial, sans-serif;
background: #f5ebe0;
}


/* SECTION */

.projects {

display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;

}


/* BLOCS */

.project {
position: relative;
overflow: hidden;
}

.project img {
width: 100%;
height: 100%;
object-fit: cover;
}


/* BLOC IMAGE + TITRE */

.project-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5ebe0;
  overflow: hidden;
  isolation: isolate;
}

.project-preview {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}


.project-preview img {
  width: 40%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: none;
}

.project-title.overlay-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%;
  z-index: 10;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}

.project-title.overlay-title h2 {
  width: 100%;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 900;
  text-align: center;
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;
}

.blend-title {
  mix-blend-mode: difference;
}


.project-title {
padding: 40px;
font-size: 32px;
font-weight: bold;
}


/* BLOC IMAGE SEULE */

.project-image {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.project-image .parallax-image {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  display: block;
}

.smooth-section {
  transition: transform 0.8s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

html,
body {
  overflow-x: hidden;
}

.infinite-scroll {
  width: 100%;
}

.projects-track {
  width: 100%;
}


.distort-text {
  display: inline-flex;
  align-items: center;
  line-height: 0.95;
  user-select: none;
}

.distort-text .char {
  display: inline-block;
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    opacity 0.35s ease;
  transform-origin: center bottom;
  will-change: transform;
}

.distort-text:hover .char:nth-child(1)  { transform: translateY(-4px) skewX(-8deg) scaleX(1.08); }
.distort-text:hover .char:nth-child(2)  { transform: translateY(3px)  skewX(6deg)  scaleX(0.96); }
.distort-text:hover .char:nth-child(3)  { transform: translateY(-6px) skewX(-10deg) scaleX(1.10); }
.distort-text:hover .char:nth-child(4)  { transform: translateY(2px)  skewX(8deg)  scaleX(0.95); }
.distort-text:hover .char:nth-child(5)  { transform: translateY(-3px) skewX(-6deg) scaleX(1.04); }
.distort-text:hover .char:nth-child(6)  { transform: translateY(5px)  skewX(10deg) scaleX(0.92); }
.distort-text:hover .char:nth-child(7)  { transform: translateY(-4px) skewX(-8deg) scaleX(1.06); }
.distort-text:hover .char:nth-child(8)  { transform: translateY(3px)  skewX(7deg)  scaleX(0.97); }
.distort-text:hover .char:nth-child(9)  { transform: translateY(-5px) skewX(-9deg) scaleX(1.09); }
.distort-text:hover .char:nth-child(10) { transform: translateY(2px)  skewX(6deg)  scaleX(0.96); }
.distort-text:hover .char:nth-child(11) { transform: translateY(-4px) skewX(-7deg) scaleX(1.05); }
.distort-text:hover .char:nth-child(12) { transform: translateY(4px)  skewX(9deg)  scaleX(0.94); }

.distort-text:not(:hover) .char {
  transform: translateY(0) skewX(0) scaleX(1);
}


.distort-text {
  display: inline-flex;
  align-items: center;
  line-height: 0.95;
  user-select: none;
}

.distort-text .char {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
  transform-origin: center bottom;
  transition: transform 0.18s ease-out;
}

.distort-text.is-resetting .char {
  transition: transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

.projects {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  border-bottom: none;
}

.projects + .projects::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;

  z-index: 20;
}

.projects-with-overlay {
  position: relative;
}

.section-overlay-title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  z-index: 30;
  pointer-events: none;

  display: flex;
  justify-content: center;
  align-items: center;
}

.section-overlay-title h2 {
  width: 90%;
  margin: 0;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: auto;
}


.blend-demo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  background: #f5ebe0;
  overflow: hidden;
  isolation: isolate;
}

.blend-demo__left {
  background: #f5ebe0;
}

.blend-demo__right {
  position: relative;
  overflow: hidden;
}

.blend-demo__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blend-demo__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;

  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;

  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 5;
}

.negative-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100vh;
  background:#f5ebe0;
  overflow:hidden;
  isolation:isolate;
}

/* LEFT */

.negative-left{
  position:relative;
  background:#f5ebe0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.negative-preview{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:2;
  pointer-events:auto;
}
/* lien ou image directe */
.negative-preview > a,
.negative-preview > img{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* image */
.negative-preview img{
  width:clamp(120px, 18vw, 420px);
  height:auto;
  display:block;

  border:6px solid black;
}

/* image seule OU image dans un lien */
.negative-preview > img,
.negative-preview > a > img{
  width:12vw;
  height:auto;
  display:block;
  opacity:1;
  border:6px solid black;

  
}

.negative-preview > a{
  text-decoration:none;
  line-height:0;
}

.negative-preview a,
.negative-preview a img{
  cursor:pointer;
}

.faustine_web {
 margin-top: 10vw;
}

.lena_web {
  margin-bottom: 7vw;
}

.voyage_web {
  margin-bottom: 8vw;
}


/* TITLE */

.negative-title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(140%, 1800px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#fff;
  mix-blend-mode:difference;
  pointer-events:auto;
  z-index:1;
}

.faustine_title {
  top: 32%;
}

.faustine_title h2 {
  line-height: 0.8 !important;
}

.voyage {
  font-size: 7vw !important;
  line-height: 1.25 !important;
}

.title-line{
  margin:0;
  font-size:clamp(3rem, 14vw, 18rem);
  line-height:0.9;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  width:100%;
}

.negative-title h2{
  margin:0;
  font-size:10vw;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
}

.negative-title h2.lena{

}

.negative-title h2.lena1{
  font-size:5vw;
  line-height:2;
}

.negative-title h2.lena2{
  font-size: 10vw;
}

.negative-title h2.lena3{
 line-height: 0.5;
}

.negative-title h2.voyage{
  font-size:clamp(2.4rem, 11vw, 20rem);
  line-height:1.1;
}

.negative-title h2.voyage:nth-child(2){
  font-size:clamp(3rem, 15vw, 31rem);
  line-height:0.8;
}

.voyage_titles {
  top: 42%;
}

.distort-text{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  width:100%;
  user-select:none;
}

.distort-text .char{
  display:inline-block;
  white-space:pre;
}

/* RIGHT */

.negative-right{
  position:relative;
  overflow:hidden;
}

.negative-right img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* -----------------------------
TEXT HOVER EFFECT
----------------------------- */

.negative-title{
  transition: transform 0.25s ease;
  will-change: transform;
}

.negative-title.is-resetting{
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}


html {
  scroll-behavior: auto;
}

.negative-section{
position:relative;
}

.fixe{
  position:fixed;
  top: 3%;
  left: 49.3%;
  transform:translate(-50%,-50%);
  z-index:30;

  display:flex;
  justify-content:center;
  align-items:center;

  width:100%;

  color:#fff;
  mix-blend-mode:difference;
  margin-top: 0.5vw;
}

.fixe h2.center{
  margin:0;
  font-size:clamp(2.5rem, 5vw, 5rem);
  line-height:0.9;
  font-weight:900;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;

  display:flex;
  justify-content:center;
  align-items:center;

  pointer-events:none;
  font-size: 2vw;
}

.fixe_right {
  position: absolute;
  right: 0%;
  font-size: 2.25vw;
  pointer-events:auto;
}

.fixe_right h2{
  pointer-events:auto;
}

.info-overlay{
  position: fixed;
  inset: 0;
  background: #fdf0d5;

  z-index: 200;
  pointer-events: none;

  opacity: 1;
  clip-path: circle(0px at calc(100% - 60px) 60px);
  transition:
    clip-path 0.8s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0.8s;

  visibility: hidden;
  will-change: clip-path;
}

.info-overlay.active{
  pointer-events: auto;
  visibility: visible;
  clip-path: circle(160vmax at calc(100% - 60px) 60px);
  transition:
    clip-path 4s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}

.info-content{
  position:absolute;
  top:120px;
  left:5%;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.info-line{
  font-size:200px;
  margin-bottom:15px;
  opacity:0;
  transform:translateY(-15px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.info-line span {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* état visible */

.info-overlay.active .info-line{
  opacity:1;
  transform:translateY(0);
}

/* delays successifs */

.info-overlay.active .info-line:nth-child(1){ 
  transition-delay:1s;
  font-size: 300px;
    width: 1700px;
  max-width: 90%;
  text-align: center;

 }
.info-overlay.active .info-line:nth-child(2){ 
  transition-delay:1.5s;
  font-size: 70px;
  width: 1700px;
  max-width: 90%;
  text-align: center;
  margin-bottom: 12rem;
 }
.info-overlay.active .info-line:nth-child(3){ transition-delay:2s;
font-size: 100px; }
.info-overlay.active .info-line:nth-child(4){ transition-delay:2.5s;
font-size: 100px; }


.overlay-close{
  position:absolute;
  top:5px;
  right:60px;
  font-family: "MaFont";
  font-size:100px;
  cursor:pointer;

  z-index:300;
  user-select:none;
}

.info-button span {
  cursor: pointer;
}





@media screen and (max-width: 1900px) {
.info-overlay.active .info-line:nth-child(1) {
font-size: 15vw;
}


.info-overlay.active .info-line:nth-child(2) {
font-size: 3.5vw;

}

.info-overlay.active .info-line:nth-child(3) {
font-size: 5vw;

}
.info-overlay.active .info-line:nth-child(4) {
font-size: 5vw;

}
}


@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .fixe {
    top: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    margin-top: 0;
    width: auto;
    justify-content: space-between;
    align-items: flex-start;
    mix-blend-mode: normal;
    color: #000;
  }

  .fixe h2.center {
    font-size: 18px;
    white-space: nowrap;
  }

  .fixe_right {
    position: static;
    font-size: 18px;
  }

  .negative-section,
  .negative-section.reverse {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .negative-left {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 50px 20px;
    overflow: hidden;
  }

  .negative-right {
    position: relative;
    height: auto;
    min-height: auto;
    overflow: hidden;
  }

  .negative-right img,
  .negative-right .parallax-image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: none !important;
  }

  .negative-preview {
    position: relative;
    inset: auto;
    padding: 0;
    margin-bottom: 24px;
  }

  .negative-preview > img,
  .negative-preview > a > img {
    width: min(58vw, 260px);
    max-width: 100%;
    height: auto;
    border-width: 6px;
  }

  .faustine_web,
  .lena_web,
  .voyage_web {
    margin: 0;
  }

  .negative-title,
  .faustine_title,
  .voyage_titles {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
  }

  .title-line {
    font-size: clamp(2.2rem, 11vw, 4.5rem);
    line-height: 0.9;
  }

  .negative-title h2 {
    font-size: clamp(2.2rem, 11vw, 4.5rem);
    text-align: center;
  }

  .negative-title h2.lena1 {
    font-size: clamp(1.4rem, 7vw, 3rem);
    line-height: 1.2;
  }

  .negative-title h2.lena2 {
    font-size: clamp(2.4rem, 12vw, 5rem);
    line-height: 0.9;
  }

  .negative-title h2.lena3 {
    font-size: clamp(1.3rem, 6.5vw, 2.8rem);
    line-height: 1.1;
  }

  .negative-title h2.voyage,
  .voyage {
    font-size: 1vw;
    line-height: 1 !important;
  }

  .info-overlay {
    clip-path: circle(0px at calc(100% - 30px) 30px);
  }

  .info-overlay.active {
    clip-path: circle(160vmax at calc(100% - 30px) 30px);
  }

  .overlay-close {
    top: 10px;
    right: 20px;
    font-size: 56px;
  }

  .info-content {
    top: 80px;
    left: 24px;
    width: calc(100% - 48px);
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .info-line {
    transform: translateY(-10px);
    margin-bottom: 16px;
    text-align: left;
  }

  .info-overlay.active .info-line:nth-child(1) {
    font-size: 14vw;
    width: 100%;
    margin-bottom: 20px;
  }

  .info-overlay.active .info-line:nth-child(2) {
    font-size: 5vw;
    width: 100%;
    margin-bottom: 32px;
  }

  .info-overlay.active .info-line:nth-child(3),
  .info-overlay.active .info-line:nth-child(4) {
    font-size: 6vw;
    width: 100%;
  }

    /* force toujours l'ordre normal */
  .negative-section.reverse .negative-left{
    order: 1;
  }

  .negative-section.reverse .negative-right{
    order: 2;
  }

  .negative-preview {
    margin-bottom: 0px;
  }

  .info-line {
    text-align: center;
  }
}


@-moz-document url-prefix() {
.negative-preview img{


  border:6px solid black !important;
}

.negative-preview > img,
.negative-preview > a > img{
  
  border:6px solid black;

  
}
}