/*  

	Author : Moskva Yigit
	Author URI : http://www.moskvayigit.com/

	Table of Contents
	- Sticky Image Gallery
*/

/*----------------------------
	.-- Sticky Image Gallery
-----------------------------*/

.sticky-image-gallery {
  font-size: 15px;
  --color-text: #949494;
  --color-bg: #0e0e0f;
  --color-link: #b78a84;
  --color-link-hover: #fff;
  color: var(--color-text);
}

.sticky-image-gallery__cursor {
  display: none;
}

.sticky-image-gallery__tip {
    position: fixed;
    color: #949494;
    z-index: 1;
    font-size: 15px;
    padding: 2rem;
    bottom: 0;
}

.sticky-image-gallery__cursor-hidden {
    opacity: 0;
    visibility: hidden;
    display: none !important;
}

.sticky-image-gallery__cursor__inner {
  z-index: 9999;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  border-radius: 50%;
}

.sticky-image-gallery__cursor__inner--dot {
  width: 8px;
  height: 8px;
  background: #fff;
}

.sticky-image-gallery__cursor__inner--circle {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
}

.sticky-image-gallery__content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: calc(100vh - 13rem);
  position: relative;
  justify-content: flex-start;
  align-items: center;
}

@media screen and (min-width: 53em) {
  
  .sticky-image-gallery__content {
    height: 100vh;
    justify-content: center;
  }

  .sticky-image-gallery__cursor {
    display: block;
  }
  
}



#sticky-image-gallery {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #131319;
}

canvas {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

.sticky-image-gallery__slides {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  padding: 0 10vw;
  width: 100%;
  max-width: 100%;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

.sticky-image-gallery__slide {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 33vh;
  color: #fff;
  transform: translateY(-50%);
  transition: transform 1300ms cubic-bezier(0.2, 1, 0.3, 1), opacity 500ms cubic-bezier(0.2, 1, 0.3, 1);
}

.sticky-image-gallery__slide-meta {
  margin: 0;
  font-size: 1.13rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sticky-image-gallery__slide-meta,
.sticky-image-gallery__slide-more {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.2, 1, 0.3, 1);
}

.sticky-image-gallery__show-meta .sticky-image-gallery__slide-meta,
.sticky-image-gallery__show-meta .sticky-image-gallery__slide-more {
  opacity: 1;
  transition: opacity 1500ms 300ms cubic-bezier(0.2, 1, 0.3, 1);
}

.sticky-image-gallery__slide-more {
  border-bottom: 1px solid;
  font-size: 15px;
}

.sticky-image-gallery__slide-more:hover {
  border-bottom: 1px solid transparent;
}


.sticky-image-gallery__slide-title {
  font-size: 10vw;
  margin: 0;
  color: #fafafa;
  text-indent: -0.5vw;
  font-weight: 900;
  transition: color 500ms cubic-bezier(0.2, 1, 0.3, 1);
}

.sticky-image-gallery__slider-wrapper .prev,
.sticky-image-gallery__slider-wrapper .next,
.sticky-image-gallery__prev,
.sticky-image-gallery__next {
  opacity: 0;
}

.sticky-image-gallery__slider-wrapper .prev,
.sticky-image-gallery__prev {
  transform: translateY(-85%);
}
.sticky-image-gallery__slider-wrapper .next,
.sticky-image-gallery__next {
  transform: translateY(-15%);
}

.sticky-image-gallery__prev .sticky-image-gallery__slide-title,
.sticky-image-gallery__next .sticky-image-gallery__slide-title {
  -webkit-text-stroke: 1.5px #fafafa;
  text-stroke: 1.5px #fafafa;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  color: transparent;
}

.sticky-image-gallery__scrolling>.sticky-image-gallery__slide {
  transform: translateY(-50%);
  opacity: 1;
}