/* Font-face
----------------------------------------- */
@font-face {
 font-family: "tom-pro";
 font-weight: 300;
 src: url("../fonts/TOM-LIGHT-PRO.otf");
}
@font-face {
 font-family: "tom-pro";
 font-weight: 400;
 src: url("../fonts/TOM-REGULAR-PRO.otf");
}
@font-face {
 font-family: "tom-pro";
 font-weight: 500;
 src: url("../fonts/TOM-BOLD-PRO.otf");
}

/* General
----------------------------------------- */

:root {
  --transition-duration: 300ms;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5.208334vw; /* 1920px -> 1em = 100px */
  /* background-color: black; */
  font-family: "tom-pro";
  user-select: none;

  touch-action: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.hidden {
  display: none !important;
}



.torches {
  position: relative;
  height: 10.8em;
  overflow: hidden;
}



/* Header
----------------------------------------- */
.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 6;
}
.header .language {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #343536;
  color: white;
  width: 2.7em;
  height: 0.65em;
  border-radius: 0px 0px 0px 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header .language div {
  font-size: 0.3em;
}

/* Body
----------------------------------------- */
.body {
  /* position: absolute;
  width: 0;
  top: 0; */

}

.body .background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('images/bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.body .foreground {
  position: absolute;
  height: 100%;
  z-index: 3;
  background-size: 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.body .foreground.left {
  left: 0;
  width: 4.54em;
  background-image: url('images/bgOverlayL.png');
}
.body .foreground.right {
  width: 5.21em;
  right: 0;
  background-image: url('images/bgOverlayR.png');
}

/* Miniature
----------------------------------------- */
.miniature {
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 100%;
  height: 0.82em;
  display: flex;
  justify-content: center;
}
.miniature .slider {
  position: relative;
  display: flex;
}
.miniature .screen {
  position: absolute;
  width: 1.25em;
  height: 0.95em;
  background: transparent linear-gradient(180deg, #818181 0%, #000000 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #D9641A;
}
.miniature ul {
  min-width: 0;
  display: flex;
  /* gap: 0.1em; */
  align-items: flex-end;
  position: relative;
}
.miniature ul li {
  width: 0.21em;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  bottom: -2px;
}
.miniature ul li img {
  display: block;
  height: auto;
  width: 100%;
  min-width: 0;
}



/* Stage
----------------------------------------- */
.stage {
  position: absolute;
  /* top: 7.53em; */
  width: 100%;
  height: 9.5em;
  bottom: 0;
  /* display: flex;
  align-items: flex-end; */
}
.stage ul {
  height: 0;
  display: flex;
  align-items: flex-end;
  /* gap: 1.5em; */
  padding: 0 1.5em;
  position: absolute;
  bottom: 3.4em;
}
.stage ul li {
  min-width: 0;
  width: 2.2em;
  position: relative;
  flex-shrink: 0;
}
.stage ul li img {
  display: block;
  position: absolute;
  bottom: 0;
  /* width: 100%;
  height: auto; */
  left: 0;

}
.stage ul li img.mirror {
  transform: scale(1, -1);
  transform-origin: bottom;
  opacity: 0.2;
  /* filter: blur(1px); */
}


.stage ul li:nth-child(odd) {
  bottom: -1.08em;
}
.stage ul li .caption {
  position: absolute;
  top: 0.15em;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}
.stage ul li .caption .city {
  font-size: 0.45em;
  line-height: 1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25em;
  margin-bottom: 0.5em;
  text-align: center;
}
.stage ul li .caption .year {
  font-size: 0.24em;
  line-height: 1em;
}





/* Popup
----------------------------------------- */
.popup.hidden {
  /* opacity: 0; */
}
.popup {
  position: absolute;
  z-index: 4;
  width: 19.2em;
  height: 10.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-duration);
}
.popup-content {
  min-height: 0;
  position: relative;
  width: 14.07em;
  height: 9em;
  background-color: #252324;
  display: flex;
}

/* Popup Background
----------------------------------------- */
.popup-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.8);
}


/* Popup Close
----------------------------------------- */
.popup .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3em;
}
.popup .close svg {
  display: block;
  width: 0.3em;
  height: 0.3em;
}
.popup .close .x {
  font-size: 0.47em;
  font-weight: 500;
  line-height: 0.8em;
  color: white;
}


/* Popup Page
----------------------------------------- */
.popup .page {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


/* Popup Page Header
----------------------------------------- */
.popup .page .page-header {
  height: 1.4em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
.popup .page .page-header .city {
  font-size: 0.45em;
  line-height: 1em;
  border-bottom: 1px solid white;
  padding-bottom: 0.25em;
  margin-bottom: 0.5em;
}
.popup .page .page-header .year {
  font-size: 0.24em;
  line-height: 1em;
}

/* Popup Page Body
----------------------------------------- */
.popup .page .page-body {
  flex-grow: 1;
  position: relative;
}
.popup .page .page-body .section {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0 0.3em 0.3em;
  display: flex;
  align-items: flex-end;
  gap: 0.3em;
  background-color: #252324;
  z-index: 1;
  opacity: 0;

  transition: opacity var(--transition-duration) var(--transition-duration);
}
.popup .page .page-body .section.active {
  z-index: 2;
  opacity: 1;

  transition: opacity var(--transition-duration);
}

/* Popup Page Body Text
----------------------------------------- */
.popup .page .page-body .text {
  flex-grow: 1;
}
.popup .page .page-body .text .title {
  font-size: 0.32em;
  line-height: 1.2em;
  color: white;
  margin-bottom: 1em;
}
.popup .page .page-body .text .content {
  font-size: 0.21em;
  line-height: 1.381em;
  color: white;
}

/* Popup Page Body Media
----------------------------------------- */
.popup .page .page-body .medias-container {
  width: 6.6em;
  height: 6.6em;
  flex-shrink: 0;
  position: relative;
}
.popup .page .page-body .medias-container .media {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #252324;
  /* display: flex; */
  opacity: 0;
  z-index: 1;
  transition: opacity var(--transition-duration) var(--transition-duration);
}
.popup .page .page-body .medias-container .media.active {
  opacity: 1;
  z-index: 2;
  transition: opacity var(--transition-duration);
}

.popup .page .page-body .media .image,
.popup .page .page-body .media .video {
  min-width: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.popup .page .page-body .media .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.popup .page .page-body .media .video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.popup .page .page-body .media .video .video-timeline {

  display: none;

  width: 100%;
  height: 0.2em;
  flex-shrink: 0;
  background-color: black;
}
.popup .page .page-body .media .video .video-timeline .line {
  width: 100%;
  height: 100%;
  background-color: white;
  transform-origin: bottom left;
}


/* Popup Page Body Nav
----------------------------------------- */
.popup .page .page-body .nav {
  width: 1.3em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3em;
}
.popup .page .page-body .nav .media {
  height: 1.3em;
  min-height: 0;
}
.popup .page .page-body .nav .media .video .play-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #252324;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 200ms;
  border-radius: 0.075em;
}
.popup .page .page-body .nav .media.active .video .play-icon {
  opacity: 0;
}
.popup .page .page-body .nav .media .video .play-icon svg {
  display: block;
  width: 0.3em;
  height: 0.3em;
}
.popup .page .page-body .nav .media .video .play-icon svg path {
  fill: white;
}

/* Popup Page Footer
----------------------------------------- */
.popup .page .page-footer {
  flex-shrink: 0;
  height: 0.68em;
  display: flex;
  gap: 0.06em;
}
.popup .page .page-footer .button {
  width: 33.333%;
  font-size: 0.35em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent linear-gradient(180deg, #414040 0%, #252324 100%) 0% 0% no-repeat padding-box;
}
.popup .page .page-footer .button.active {
  background: transparent linear-gradient(180deg, #8D9095 0%, #75787E 100%) 0% 0% no-repeat padding-box;
}



/* Screensaver
----------------------------------------- */
.screensaver {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: black;
  animation-duration: 1000ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.screensaver.fadein {
  animation-name: fadein;
}
.screensaver.fadeout {
  animation-name: fadeout;
}


@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




.screensaver .images img {
  position: absolute;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: block;
}
.screensaver .images img:nth-child(1) {
  animation-name: image1;
  width: 100%;
  height: auto;
  z-index: 4;
}
.screensaver .images img:nth-child(2) {
  animation-name: image2;
  width: auto;
  height: 100%;
  z-index: 3;
}
.screensaver .images img:nth-child(3) {
  animation-name: image3;
  width: auto;
  height: 100%;
  z-index: 2;
}
.screensaver .images img:nth-child(4) {
  animation-name: image4;
  width: auto;
  height: 100%;
  z-index: 1;
}
.screensaver .lines .line {
  position: absolute;
  z-index: 10;
  width: 100%;
  text-align: center;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.screensaver .lines .line1 {
  top: 25%;
  color: white;
  font-size: 0.45em;
  font-weight: 300;
  letter-spacing: 0em !important;
  animation-name: line1-fr;
}
.screensaver .lines .line2 {
  top: 29%;
  color: #ffbe5b;
  font-size: 1em;
  font-weight: 300;
  /* letter-spacing: 0.04em; */
  animation-name: line1-fr;
}
.screensaver .lines .line3 {
  top: 48%;
  color: white;
  font-size: 0.70em;
  font-weight: 300;
  letter-spacing: 0em;
  animation-name: line3-fr;
}
.screensaver .lines .line1.fr,
.screensaver .lines .line2.fr {
  animation-name: line1-fr;
}
.screensaver .lines .line3.fr {
  animation-name: line3-fr;
}
.screensaver .lines .line1.en,
.screensaver .lines .line2.en {
  animation-name: line1-en;
}
.screensaver .lines .line3.en {
  animation-name: line3-en;
}

@keyframes line1-fr {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  5% {
    opacity: 2;
    letter-spacing: 0.04em;
  }
  25% {
    opacity: 1;
    letter-spacing: 0.12em;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0
  }
}
@keyframes line3-fr {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  25% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    letter-spacing: 0.12em;
  }
  100% {
    opacity: 0
  }
}
@keyframes line1-en {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  50% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  55% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    letter-spacing: 0.12em;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0
  }
}
@keyframes line3-en {
  0% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  75% {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    letter-spacing: 0.12em;
  }
}



@keyframes image1 {
  0% {
    transform: translateY(-58%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    transform: translateY(0%);
    opacity: 0;
  }
  100% {
    opacity: 0
  }
}
@keyframes image2 {
  0% {
    transform: translateX(-12%);
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translateX(-12%);
  }
  25% {
    opacity: 1;
    transform: translateX(-12%);
  }
  45% {
    opacity: 1;
  }
  50% {
    transform: translateX(0%);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(0%);
  }
}
@keyframes image3 {
  0% {
    transform: translateX(-15%);
    opacity: 0;
    /* z-index: 4; */
  }
  50% {
    transform: translateX(-15%);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  80% {
    transform: translateX(0%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}
@keyframes image4 {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  65% {
    transform: translateX(0%);
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(-16%);
    opacity: 0;
  }
}





/* ----------------------------------------- */