@font-face {
  font-family: "TimesNewArialVF";
  src: url("../fonts/TimesNewArialVF.ttf");
  font-weight: 100 900;
  width: 100;
}

html,
body {
  touch-action: auto;
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
  font-family: "TimesNewArialVF";
  font-feature-settings: "calt" 1, "rvrn" 1, "TimesNewArialVF" 1, "rclt" 1, "ss02" 1, "ss04" 1, "ss05" 1, "liga" 1, "rlig" 1, "tnum" 1;
}

a {
  text-decoration: none;
}

.nocursor .home * {
  cursor: none !important;
}

.nocursor .index * {
  cursor: initial;
}

.index .cursor.active {
  display: none;
}

.cursor {
  position: fixed;
  width: 10vw;
  height: 10vw;
  margin: -5vw 0 0 -5vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
  backdrop-filter: grayscale(100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(1, 1, 1, 1);
  z-index: 200;
}

.cursor.active {
  opacity: 1;
}

.cursor.grab {
  cursor: grab;
}

.scroller {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  font-variation-settings: "wght" 500;
  color: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
  transition: opacity 0.25s cubic-bezier(1, 1, 1, 1);
  z-index: 3000000;
  pointer-events: none;
}

.wrap {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 0;
  top: 0;
  overflow: hidden;
  background: rgb(255, 255, 255);
}

.wrap .img {
  position: absolute;
  height: 94vh;
  width: 94vw;
  filter: blur(0.75vw);
  opacity: 0;
  margin-top: 3vh;
  margin-left: 3vw;
  transition: all 1s ease-in-out;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.wrap .img.passive {
  filter: blur(0.75vw);
  opacity: 1;
}

.wrap .img.active {
  filter: blur(0vw);
  opacity: 1;
}

.wrap .img.hidden {
  filter: blur(0.5vw);
  opacity: 0;
}

.wrap .img:hover~.cursor {
  cursor: grab;
}

.start-text {
  text-align: center;
  font-size: 1.5vw;
  font-variation-settings: "wght" 500;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  z-index: 30;
  transition: font-variation-settings 0.15s ease-in-out;
}

.gray-circles {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  mix-blend-mode: color;
  transition: opacity 0.1s cubic-bezier(1, 1, 1, 1), background-color 0.1s cubic-bezier(1, 1, 1, 1), backdrop-filter 0.1s cubic-bezier(1, 1, 1, 1);
}

.circles {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vw;
  width: 10vw;
  white-space: nowrap;
  border-radius: 50%;
  z-index: 100;
  opacity: 0;
  background-color: rgba(0, 0, 0, 1);
  mix-blend-mode: difference;
  transition: opacity 0.5s cubic-bezier(1, 1, 1, 1), background-color 0.5s cubic-bezier(1, 1, 1, 1), backdrop-filter 1s cubic-bezier(1, 1, 1, 1);
}

.circles a:hover div {
  font-variation-settings: "wght" 750;
}

.gray-circles.filter {
  backdrop-filter: grayscale(100%);
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(1, 1, 1, 1), backdrop-filter 1s cubic-bezier(1, 1, 1, 1);
}
.circles.filter {
  backdrop-filter: grayscale(100%);
  background: rgba(255, 255, 255, 1);
  opacity: 1;
}


.circles.filter .start-text{
  color: rgba(0, 0, 0, 1);
}

#original-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  z-index: 50;
  opacity: 1;
  pointer-events: initial;
  transition: opacity 0.25s linear;
}

#original-overlay2 {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  z-index: 500;
  pointer-events: initial;
  transition: opacity 0.25s linear;
  opacity: 0;
}

#original-overlay2.show{
  opacity: 1;
}

body.index #original-overlay {
  opacity: 0;
  pointer-events: none;
}

.index-text {
  text-align: center;
  font-size: 1vw;
  font-variation-settings: "wght" 300;
  color: rgb(0, 0, 0);
  text-decoration: none;
  z-index: 30;
  animation: none !important;
  transform: none !important;
  transition: font-variation-settings 0.3s ease-in-out;
}

.circles-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vw;
  width: 30vw;
  white-space: nowrap;
  border-radius: 50%;
  z-index: 100;
  opacity: 1;
  color: rgba(0, 0, 0, 1);
  transition: opacity 0.5s cubic-bezier(1, 1, 1, 1), background-color 0.5s cubic-bezier(1, 1, 1, 1), backdrop-filter 1s cubic-bezier(1, 1, 1, 1);
}

.grid-cell:hover .circles-2 .index-text {
  font-variation-settings: "wght" 550;
}

#index-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  box-sizing: border-box;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s linear;
  background: rgba(255, 255, 255, 1);
}

body.index #index-overlay {
  opacity: 1;
  pointer-events: initial;
}

.grid-cell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.overlay-grid {
  pointer-events: none;
  mix-blend-mode: difference;
}

.overlay-grid2 {
  pointer-events: none;
  mix-blend-mode: initial;
}

a, .goback {
  cursor: pointer;
}

.prev {
  width: 50%;
  height: 75%;
  z-index: 111;
  position: absolute;
  display: grid;
  transform: rotate(90deg);
  transform-origin: center center;
}

.imageoverlay {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  pointer-events: none;
}

.imageoverlay img {
  max-height: 100vh;
  max-width: 100vw;
  max-height: calc(100vh - 30vh);
  max-width: calc(100vw - 30vw);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.grid-cell img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  object-fit: contain;
}

.photos.hidden {
  display: none;
}

.counter {
  text-align: center;
}

.datetime-container {
  text-align: center;
  font-size: 1.5vw;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
}

.datetime-item {
  text-align: center;
  font-size: 1.5vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  color: rgba(255, 255, 255, 1);
}

.progress {
  height: 0.3vh;
  background: rgba(0, 0, 0, 1);
  position: fixed;
  top: 0;
  width: 0;
  z-index: 50;
}

/* Mobile Styles */
@media (max-width: 800px) {
body {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important; 
}

  .cursor {
    width: 20vw;
    height: 20vw;
    margin: -10vw 0 0 -10vw;
  }
  
  .scroller {
    font-size: 4vw;
  }

  .wrap .img {
    height: 90vh;
    width: 90vw;
    margin-top: 5vh;
    margin-left: 5vw;
  }

  .start-text {
    font-size: 4vw;
  }

  .start-text:hover {
    transition: font-variation-settings 3s cubic-bezier(0.42, 0, 0.58, 1);
  }

  .index-text {
    font-size: 1.5vw;
  }

  .counter,
  .datetime-container,
  .datetime-item {
    font-size: 4vw;
  }

  #original-overlay {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  #original-overlay2 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  #index-overlay {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .gray-circles {
    height: 20vw;
    width: 20vw;
 }

  .circles {
    height: 20vw;
    width: 20vw;
  }
}