@font-face {
  font-family: "AktivGrotesk";
  src: url("../dinamo.ttf") format("truetype");
  font-variation-settings: "wght" 400, "ital" 0;
}

@font-face {
  font-family: "HelveticaCustom";
  src: url("../Font/Helvetica.ttc") format("truetype-collection");
}

@font-face {
  font-family: "SangBleuKingdom";
  src: url("../Font/SangBleuKingdom-Regular.otf") format("opentype");
}


:root {
  --fs-nav: clamp(1rem, 1.1vw + 0.45rem, 1.5rem);
  --fs-list: clamp(1.2rem, 1.9vw + 0.45rem, 2.6rem);
  --fs-display: clamp(2.6rem, 6.8vw, 7.8rem);
  --fs-description: clamp(0.95rem, 0.8vw + 0.5rem, 1.5rem);
  --nav-top-offset: 5.2rem;
}

body {
  margin: 0;
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-variation-settings: "wght" 400, "ital" 0;
  --center-lines-gap: 0vw;
  --lists-extra-offset: 0vw;
  --lists-offset: calc((var(--center-lines-gap) / 2) + var(--lists-extra-offset));
  cursor: none;
  min-height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-top-offset);
}

body.is-project-hovered {
  --center-lines-gap: 10vw;
  --lists-extra-offset: 0vw;
}

body.is-project-selected {
  --center-lines-gap: 90vw;
  --lists-extra-offset: 0vw;
}

body.is-project-closing {
  --center-lines-gap: 0vw;
  --lists-extra-offset: 0vw;
}

body.is-project-closing #projectTitle,
body.is-project-closing #projectDescription {
  z-index: 95;
}

body.is-project-closing .credit-right,
body.is-project-closing .credit-right.is-visible,
body.is-project-closing .credit-right p {
  z-index: 70 !important;
}

body.is-project-closing #projectDescription.is-visible,
body.is-project-closing .credit-right.is-visible {
  opacity: 1;
  visibility: visible;
}

body.is-project-closing .close-curtain {
  z-index: 82;
}

body.is-project-closing.is-contact-open #projectTitle,
body.is-project-closing.is-about-open #projectTitle,
body.is-project-closing.is-contact-open #projectDescription,
body.is-project-closing.is-about-open #projectDescription,
body.is-project-closing.is-contact-open .close-curtain,
body.is-project-closing.is-about-open .close-curtain {
  z-index: 95 !important;
}

body.is-contact-open {
  --center-lines-gap: 90vw;
  --lists-extra-offset: 0vw;
}

body.is-about-open {
  --center-lines-gap: 90vw;
  --lists-extra-offset: 0vw;
}

body.is-project-closing.is-contact-open,
body.is-project-closing.is-about-open {
  --center-lines-gap: 0vw;
  --lists-extra-offset: 0vw;
}

body::before,
body::after {
  content: "";
  position: fixed;
  top: var(--nav-top-offset);
  bottom: 0;
  background: #fff;
  transition:
    width 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
  pointer-events: none;
  z-index: 83;
}

body::before {
  left: 0;
  width: calc(50% - (var(--center-lines-gap) / 2));
  border-right: 1px solid #000;
}

body::after {
  right: 0;
  width: calc(50% - (var(--center-lines-gap) / 2));
  border-left: 1px solid #000;
}

*,
*::before,
*::after {
  cursor: none !important;
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 95%;
  padding: 2rem 2.5% 2rem;
  background: #fff;
  border-bottom: 1px solid #000;
  z-index: 11000;
  font-variation-settings: "wght" 400, "ital" 0;
}

.nav p {
  margin: 0;
  font-size: var(--fs-nav);
  flex: 1;
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-variation-settings: "wght" 400, "ital" 0;
  transition: filter 0.25s ease;
}

.nav p:hover {
  font-style: italic;
  filter: none;
}

.nav .about::before,
.nav .about::after,
.nav .contact::before,
.nav .contact::after {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nav .about::before,
.nav .contact::before {
  content: "(";
}

.nav .about::after,
.nav .contact::after {
  content: ")";
}

.nav .about:hover::before,
.nav .about:hover::after,
.nav .contact:hover::before,
.nav .contact:hover::after {
  opacity: 1;
}

body.is-contact-open .nav .contact::before,
body.is-contact-open .nav .contact::after {
  display: none;
}

body.is-about-open .nav .about::before,
body.is-about-open .nav .about::after {
  display: none;
}

body.is-contact-open .nav .projects::before,
body.is-contact-open .nav .projects::after,
body.is-about-open .nav .projects::before,
body.is-about-open .nav .projects::after {
  opacity: 0;
  transition: opacity 0.15s ease;
}

body.is-contact-open .nav .projects::before,
body.is-about-open .nav .projects::before {
  content: "(";
}

body.is-contact-open .nav .projects::after,
body.is-about-open .nav .projects::after {
  content: ")";
}

body.is-contact-open .nav .projects:hover::before,
body.is-contact-open .nav .projects:hover::after,
body.is-about-open .nav .projects:hover::before,
body.is-about-open .nav .projects:hover::after {
  opacity: 1;
}

.nav .about {
  text-align: left;
}

.nav .projects {
  text-align: center;
}

.nav .contact {
  text-align: right;
}

body.is-contact-open #projectTitle {
  width: auto;
  max-width: 80vw;
  font-size: var(--fs-display);
  font-weight: 100;
  font-variation-settings: "wght" 100, "ital" 0;
  line-height: 1;
}

body.is-about-open #projectTitle {
  top: clamp(7.2rem, 13vh, 10.5rem);
  width: 54vw;
  max-width: 56rem;
  font-size: var(--fs-list);
  font-weight: 400;
  font-variation-settings: "wght" 400, "ital" 0;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  animation: contact-link-reveal 0.28s ease forwards;
  animation-delay: 0.22s;
}

.contact-project-link {
  color: #000;
  text-decoration: none;
  margin: 0 0.45rem;
}

.contact-project-link:hover {
  font-style: italic;
}

body.is-contact-open .contact-project-link {
  opacity: 0;
  animation: contact-link-reveal 0.28s ease forwards;
  animation-delay: 0.22s;
}


@keyframes contact-link-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.close-curtain {
  position: fixed;
  top: clamp(30.2rem, 81.5vh, 55.7rem);
  left: 50%;
  border: 0;
  background: transparent;
  color: #000;
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-size: clamp(2.2rem, 3.1vw, 3.3rem);
  line-height: 1;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 82;
  transition: opacity 0.2s ease;
}

body.is-project-selected .close-curtain {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-lists {
  position: fixed;
  top: 11vh;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
  display: flex;
  justify-content: space-between;
  z-index: 92;
}

body.is-selection-lock .project-lists {
  pointer-events: none;
}

.project-lists.is-project-selected {
  justify-content: space-between;
}

.project-lists.is-project-selected .project-list-addition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-lists.is-project-selected .project-list .project-row:not(
    .is-selected-row
  ) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-lists.is-project-selected .project-list .project-row.is-selected-row {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.project-lists.is-project-selected
  .project-list
  .project-row.is-selected-row
  .project-number,
.project-lists.is-project-selected
  .project-list
  .project-row.is-selected-row
  .project-name {
  opacity: 1;
  visibility: visible;
}

.project-list,
.project-list-addition {
  width: 46vw;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-size: var(--fs-list);
  line-height: 0.96;
  letter-spacing: -0.01em;
}

.project-list {
  transform: translateX(calc(-1 * var(--lists-offset)));
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.project-list-addition {
  transform: translateX(var(--lists-offset));
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.project-list-addition .project-row {
  flex-direction: row;
}

.project-list-addition .project-name {
  text-align: left;
  margin-right: 2rem;
}

.project-list-addition .project-number {
  text-align: right;
}

.project-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.project-number {
  font-weight: 300;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.project-name {
  font-weight: 300;
  white-space: nowrap;
  text-align: right;
  margin-left: 1rem;
  transform: translateX(-0.5rem);
}

.project-row.active .project-number,
.project-row.active .project-name {
  font-weight: 100;
}

.project-row.is-first-hover .project-number,
.project-row.is-first-hover .project-name {
  font-style: italic;
  filter: none;
}

.numerotation {
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-variation-settings: "wght" 100, "ital" 0;
  font-size: var(--fs-display);
  font-weight: 100;
  letter-spacing: 0;
  line-height: 1;
  position: fixed;
  top: auto;
  bottom: clamp(0.9rem, 2.6vh, 2.2rem);
  left: 50%;
  margin: 0;
  z-index: 90;
  transition:
    letter-spacing 0.22s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.28s ease;
  transform: translateX(-50%);
  filter: blur(0);
  will-change: transform;
}

.numerotation.is-shifted-left {
  transform: translateX(-333%);
  filter: blur(0);
}

.PetiteInfos,
.PetiteInfos p {
  font-family: "HelveticaCustom", Arial, sans-serif;
  font-weight: 100;
}

.PetiteInfos {
  position: fixed;
  top: 49rem;
  left: 80%;
  display: flex;
  flex-direction: column;
  gap: 8rem;
  z-index: 95;
}

.PetiteInfos p {
  margin: 0;
  line-height: 1;
  font-size: 1.2rem;
}

.PetiteInfos .When p:last-child,
.PetiteInfos .Type p:last-child {
  font-size: 1.2rem;
}

.texteProjet {
  font-family: "HelveticaCustom", Arial, sans-serif;

  width: 100%;
  font-size: var(--fs-list);
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: fixed;
  top: clamp(5.8rem, 10vh, 8rem);
  left: 0%;
  margin-top: -0.5rem;
  padding: 0 2.5%;
  z-index: auto;
}

.texteProjet p {
  --text-width: 33vw;
  margin: 0;
  width: var(--text-width);
  max-width: 66vw;
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: left;
}

#projectTitle {
  position: fixed;
  top: clamp(5.8rem, 10vh, 8rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: -0.01em;
  text-align: center;
  width: auto;
  margin-bottom: 0.8rem;
  z-index: 93;
}

#projectDescription {
  position: fixed;
  top: clamp(5.8rem, 10vh, 8rem);
  left: 7%;
  width: 20vw;
  max-width: 30rem;
  margin: 0;
  font-size: var(--fs-description);
  text-align: left;
  line-height: 1.08;
  z-index: 84;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

#projectDescription.is-visible {
  opacity: 1;
  visibility: visible;
}

.credit-right {
  position: fixed;
  top: clamp(5.8rem, 10vh, 8rem);
  right: 7%;
  text-align: right;
  font-size: var(--fs-description);
  line-height: 1.08;
  z-index: 84;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.credit-right.is-visible {
  opacity: 1;
  visibility: visible;
}

.credit-right p {
  margin: 0;
}

.galerie-images {
  position: fixed;
  left: 1%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.2rem;
}

.galerie-images::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.8rem;
  background: #000;
  pointer-events: none;
}

.image-bas-gauche {
  width: 55vw;
  max-width: 980px;
  height: auto;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.image-bas-gauche.is-fading {
  opacity: 0.28;
}

.miniatures {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
}

.miniatures img {
  width: 7vw;
  max-width: 110px;
  min-width: 60px;
  height: auto;
  filter: blur(0);
  opacity: 1;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.miniatures img.is-inactive {
  filter: none;
  opacity: 0.55;
}

.hover-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52vw;
  max-height: 80vh;
  height: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 80;
  object-fit: contain;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, opacity;
  transition:
    opacity 0.22s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-preview.is-visible {
  opacity: 0;
  visibility: hidden;
}

body.is-project-hovered .hover-preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  width: min(8.5vw, 150px);
  max-height: 14vh;
  transform: translate(-50%, -50%) scale(1);
}

body.is-project-selected .hover-preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  width: 52vw;
  max-height: 80vh;
  transform: translate(-50%, -50%) scale(1);
  animation: preview-grow 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-project-selected .hover-preview.is-visible.is-gam,
body.is-project-selected .hover-preview.is-visible.is-kloster,
body.is-project-selected .hover-preview.is-visible.is-nyc,
body.is-project-selected .hover-preview.is-visible.is-epidemie,
body.is-project-selected .hover-preview.is-visible.is-cublo {
  width: 42vw;
  max-height: 66vh;
}

body.is-project-selected .hover-preview.is-visible.is-fhh {
  width: 39vw;
  max-height: 62vh;
}

body.is-project-selected .hover-preview.is-visible.is-riff {
  width: 47vw;
  max-height: 67vh;
}

.hover-preview.is-hidden-for-video {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hover-preview.is-epidemie {
  width: 44vw;
  max-height: 70vh;
}

.hover-preview.is-cublo {
  width: 42vw;
  max-height: 66vh;
}

.hover-preview.is-nyc {
  width: 42vw;
  max-height: 66vh;
}

.hover-preview.is-fhh {
  width: 34vw;
  max-height: 54vh;
}

.hover-preview.is-gam {
  width: 42vw;
  max-height: 66vh;
}

.hover-preview.is-riff {
  width: 34vw;
  max-height: 54vh;
}

.hover-preview.is-kloster {
  width: 42vw;
  max-height: 66vh;
}

.project-preview-video {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 52vw;
  max-height: 80vh;
  height: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 80;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity 0.22s ease;
}

body.is-project-hovered .project-preview-video.is-visible,
body.is-project-selected .project-preview-video.is-visible {
  opacity: 1;
  visibility: visible;
}

body.is-project-selected .project-preview-video.is-visible {
  width: 52vw;
  max-height: 80vh;
  animation: preview-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-project-hovered .project-preview-video.is-visible {
  width: min(8.5vw, 150px);
  max-height: 14vh;
}

body.is-project-selected.is-project-hovered .project-preview-video.is-visible {
  width: 52vw;
  max-height: 80vh;
}

@keyframes preview-grow {
  from {
    transform: translate(-50%, -50%) scale(0.68);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

.gam-detail-stack,
.kloster-detail-stack,
.nyc-detail-stack {
  position: relative;
  width: 42vw;
  margin: calc(50vh + 21rem) auto 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 79;
}

.gam-detail-stack {
  --gam-gap: 4rem;
}

.gam-detail-stack.is-visible {
  display: flex;
}

.kloster-detail-stack {
  --kloster-gap: 4rem;
}

.kloster-detail-stack.is-visible {
  display: flex;
}

.nyc-detail-stack {
  --nyc-gap: 4rem;
}

.nyc-detail-stack.is-visible {
  display: flex;
}

.gam-detail-preview,
.kloster-detail-preview,
.nyc-detail-video {
  position: relative;
  display: block;
  width: 42vw;
  max-height: 66vh;
  height: auto;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
  transition: opacity 0.22s ease;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gam-detail-preview + .gam-detail-preview {
  margin-top: var(--gam-gap);
}

.gam-detail-preview.is-visible {
  opacity: 1;
  visibility: visible;
}

.kloster-detail-preview + .kloster-detail-preview {
  margin-top: var(--kloster-gap);
}

.kloster-detail-preview.is-visible {
  opacity: 1;
  visibility: visible;
}

.riff-detail-video {
  position: relative;
  width: 52vw;
  max-height: 80vh;
  height: auto;
  margin: calc(50vh + 29rem) auto 0;
  display: none;
  z-index: 79;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.riff-detail-video.is-visible {
  display: block;
}

.fhh-detail-video {
  position: relative;
  width: 20vw;
  max-height: 62vh;
  height: auto;
  border: 0.5px solid #000;
  margin: calc(50vh + 29rem) auto 0;
  display: none;
  z-index: 79;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.fhh-detail-video.is-visible {
  display: block;
}

.riff-detail-preview {
  position: relative;
  width: 34vw;
  max-height: 48vh;
  height: auto;
  margin: 4rem auto 0;
  display: none;
  z-index: 79;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.riff-detail-preview.is-visible {
  display: block;
}

.epidemie-detail-video {
  position: relative;
  width: 38vw;
  max-height: 60vh;
  height: auto;
  margin: calc(50vh + 29rem) auto 0;
  display: none;
  z-index: 79;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.epidemie-detail-video.is-visible {
  display: block;
}

.nyc-detail-video + .nyc-detail-video {
  margin-top: var(--nyc-gap);
}

.nyc-detail-video.is-visible {
  opacity: 1;
  visibility: visible;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

@media (max-width: 1024px) {
  .project-list,
  .project-list-addition,
  .texteProjet {
    font-size: clamp(1.1rem, 2.4vw + 0.35rem, 2rem);
  }

  #projectDescription,
  .credit-right {
    font-size: clamp(0.9rem, 1.15vw + 0.4rem, 1.2rem);
  }
}

@media (max-width: 1500px) {
  .numerotation {
    font-size: clamp(2rem, 4.9vw, 5.8rem);
  }
}

@media (min-width: 700px) and (max-width: 1100px) {
  .numerotation {
    font-size: clamp(3rem, 8vw, 6.9rem);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-top-offset: 5.1rem;
  }

  .nav {
    padding: 1.4rem 2.5% 1.4rem;
  }

  .project-lists {
    top: 6.4rem;
    width: 96vw;
  }

  .project-list,
  .project-list-addition {
    width: 47vw;
    gap: 0.5rem;
  }

  .project-list-addition .project-name {
    margin-right: 0.8rem;
  }

  .project-name {
    white-space: normal;
  }

  .numerotation {
    font-size: clamp(2.8rem, 12vw, 4.6rem);
    bottom: clamp(0.5rem, 2vh, 1.2rem);
  }

  #projectDescription,
  .credit-right {
    width: 30vw;
    max-width: 42vw;
  }

}