@charset "UTF-8";
@font-face {
  font-family: "ESAllianz";
  src: url("../fonts/ESAllianz/ESAllianz-Regular.woff2") format("woff2"), url("../fonts/ESAllianz/ESAllianz-Regular.woff") format("woff");
}
* {
  box-sizing: border-box;
}

:root {
  --font-size: 0.94vw;
  --line-height: calc(var(--font-size) * 1.25);
  --smaller-font-size: calc(var(--font-size) * 0.85);
  --smaller-line-height: calc(var(--line-height) * 0.85);
  --extra-smaller-font-size: calc(var(--font-size) * 0.65);
  --extra-smaller-line-height: calc(var(--line-height) * 0.65);
  --padding-top: var(--line-height);
  --padding-left: var(--line-height);
  --comfort-button-padding: calc(var(--line-height) / 2);
  --column-gap: var(--column-gap);
  --img-height: 100dvh;
  --transition-time: 0.5s;
}

::selection,
::-moz-selection {
  background: #FFF;
  color: #000;
}

.nb-line {
  white-space: nowrap;
}

body {
  font-family: "ESAllianz", "Arial", sans-serif;
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background: #000;
  padding: var(--top-margin) 0 var(--bottom-margin) 0;
}

body.has-arrow {
  cursor: none;
}
body.has-arrow .no-arrow {
  cursor: default;
}

video,
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  display: block;
}

header {
  top: var(--padding-top);
  left: calc(50% - var(--font-size) * 8);
  top: calc(50vh - var(--line-height) / 2);
  top: calc(50dvh - var(--line-height) / 2);
  text-align: center;
  width: calc(var(--font-size) * 16);
}
header > * {
  display: inline-block;
}
header .text-hover,
header .text-still {
  width: 10em;
}
header h1::before {
  content: "(";
}
header h1::after {
  content: ")";
}

/* OVERLAY */
.overlay-button:not(.active) .text-hover .back {
  display: none;
}

.overlay-button.active .text-hover .regular {
  display: none;
}

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

.overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: scroll;
  padding: var(--padding-top) var(--padding-left);
  margin-top: -100dvh;
  background: #000;
  color: #FFF;
  z-index: -1;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: margin var(--transition-time);
}

/* PROJECTS LIST */
#modes > * {
  display: inline-block;
}
#modes > span:not(:last-child)::after {
  content: ",";
}
#modes .mode:not(.current)::before {
  content: "(";
}
#modes .mode:not(.current, :last-child)::after {
  content: "),";
}
#modes .mode:not(.current):last-child::after {
  content: ")";
}
#modes .mode:not(.current, :last-child)::after {
  content: ")";
}
#modes .mode.current {
  display: none;
}

body.has-index-transition #modes {
  z-index: 99999;
}
body.has-index-transition #index {
  z-index: 9999;
}

body.has-index #index {
  margin-top: 0;
}

#index {
  --padding-table: var(--line-height);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
#index table {
  width: 100%;
  margin-top: calc(var(--line-height) * 2);
}
#index table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#index table td:not(:last-child) {
  padding-right: var(--padding-table);
}
#index table td:last-child {
  text-align: right;
}
#index table td.index-counter {
  width: calc(var(--font-size) * 6);
  max-width: calc(var(--font-size) * 6);
}
#index table td.project-person {
  max-width: 18.6vw;
  width: 18.6vw;
}
#index table td.project-name {
  max-width: 32.4vw;
  width: 37.4vw;
}
#index table td.place-date {
  max-width: 27vw;
  width: 30vw;
}
#index table td.place-date .date {
  display: none;
}
#index table td.date {
  max-width: 7.2vw;
  width: 7.2vw;
}

/* ABOUT */
body.has-about-transition header {
  z-index: 99999;
}
body.has-about-transition #about {
  z-index: 9999;
}

body.has-about #about {
  margin-top: 0;
}

#about .about-studio {
  max-width: 35em;
}
#about .about-studio p {
  margin-bottom: var(--smaller-line-height);
}
#about .about-contact {
  width: 35em;
  columns: 2;
  column-gap: var(--column-gap);
  position: absolute;
  bottom: var(--padding-top);
  font-size: var(--smaller-font-size);
  line-height: var(--smaller-line-height);
}
#about #credits {
  position: absolute;
  right: var(--line-height);
  bottom: var(--line-height);
  font-size: var(--extra-smaller-font-size);
  line-height: var(--extra-smaller-line-height);
}

.place-date .date::before,
#counter::before {
  content: "\a \a ";
}

#counter.swiper-pagination-fraction {
  width: unset;
}

.has-hover-text > span {
  display: inline-block;
}

.has-hover-text .text-hover {
  display: none;
}

body.has-about header .has-hover-text {
  cursor: pointer;
}
body.has-about header .has-hover-text .text-still {
  display: none;
}
body.has-about header .has-hover-text .text-hover {
  display: block;
}
body.has-about header .has-hover-text .text-hover::before {
  content: "(";
}
body.has-about header .has-hover-text .text-hover::after {
  content: ")";
}

#hover {
  background: blue;
}

/* SLIDER: CAPTIONS */
.captions {
  display: none;
}

.captions.current {
  display: block;
}

header,
.caption,
.arrow,
#modes,
#copyright-display,
#fast-forward,
#copyright-sign {
  color: #FFF;
  mix-blend-mode: difference;
}

header,
.arrow,
#modes,
#copyright-display,
#fast-forward,
#copyright-sign {
  position: fixed;
  z-index: 999;
}

.directions {
  z-index: 99;
}

.caption {
  z-index: 9;
}

.caption {
  width: calc(100% - var(--line-height) * 4);
  left: calc(var(--line-height) * 2);
  text-align: center;
}

#modes,
.caption.top,
.caption.bottom,
#fast-forward,
#copyright-sign,
#copyright-display {
  padding: var(--comfort-button-padding);
}

#modes,
.caption.top {
  top: calc(var(--padding-top) - var(--comfort-button-padding));
}

.caption.bottom,
#fast-forward,
#copyright-sign,
#copyright-display {
  bottom: calc(var(--padding-top) - var(--comfort-button-padding));
}

#copyright-sign,
#copyright-display {
  left: calc(var(--padding-left) - var(--comfort-button-padding));
}

#modes,
#fast-forward {
  right: calc(var(--padding-left) - var(--comfort-button-padding));
}

/* SLIDER: COPYRIGHT */
body:not(.has-copyright) #copyright-sign,
body.show-copyright #copyright-sign {
  display: none;
}

body.show-copyright:not(.switching-project) #copyright-display {
  display: block;
}

#copyright-display {
  font-size: var(--smaller-font-size);
  line-height: var(--smaller-line-height);
}

#copyright-display,
.copyright {
  display: none;
}

#fast-forward::before {
  content: "(";
}

#fast-forward::after {
  content: ")";
}

/* SLIDER: DIRECTIONS */
.directions {
  position: fixed;
  display: flex;
  width: 100%;
  top: 0;
  left: 0;
}
.directions > * {
  width: 50%;
  height: 100vh;
  height: 100dvh;
}

.arrow {
  display: none;
  font-size: 2em;
}

#arrow-left {
  transform: rotate(180deg);
  transform-origin: center;
}

.arrow.current {
  display: block;
  width: calc(var(--line-height) * 2);
  height: calc(var(--line-height) * 2);
}
.arrow.current img {
  width: 100%;
}

/* SLIDER: SLIDER */
.slider .swiper-slide {
  width: unset;
  background: #000;
}
.slider video,
.slider img {
  object-fit: cover;
  object-position: center;
  height: var(--img-height);
}

/*# sourceMappingURL=main.css.map */