/* === Layout root === */

.content {
   display: block;
   height: 100vh;
   overflow: hidden;
   position: relative;
   width: 100vw;
}


/* === Scrollable row === */

.content--wrap {
   cursor: grab;
   display: flex;
   flex-direction: row;
   height: 100vh;
   overflow: auto hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
   white-space: nowrap;
   width: 100vw;
}

   .touch-device .content--wrap {
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
   }

.content--wrap.dragging {
   cursor: grabbing;
   user-select: none;
}

.content--wrap > * {
   align-items: center;
   display: flex;
   flex: 0 0 100vw;
   height: 100vh;
   justify-content: center;

   /* transition: all 1s cubic-bezier(0.24, 0.15, 0.01, 0.99); */
}

   .touch-device .content--wrap > * {
      scroll-snap-align: center;
      scroll-snap-stop: always;
   }

/* === Media === */

.content--wrap img,
.content--wrap video {
   display: block;
   height: 100vh;
   object-fit: cover;
   object-position: center;
   pointer-events: none;
   transition: transform 300ms;
   -webkit-user-drag: none;
   user-select: none;
   width: 100vw;
}


/* === Navigation Buttons === */

.content--nav {
   inset: 0;
   pointer-events: none;
   position: fixed;
}

.content--wrap > *.active {
   transition: none !important;
}

.content--wrap > *:has(+ .active) {
   filter: contrast(2);
   mask-image: linear-gradient(90deg, black 82%, transparent 100%);
   transition: transform 300ms;
   z-index: 1;
}

.content--wrap > *.active + * {
   filter: contrast(2);
   mask-image: linear-gradient(-90deg, black 82%, transparent 100%);
   transition: transform 300ms;
   z-index: 1;
}

.content--wrap:has(+ :hover .content--nav--left:hover) *:has(+ *.active){
   transform: translateX(8%);
}

.content--wrap:has(+ :hover .content--nav--right:hover) *.active + * {
   transform: translateX(-8%);
}

.content--nav--left,
.content--nav--right {
   box-sizing: border-box;
   cursor: w-resize;
   height: 80%;
   padding: 44px;
   pointer-events: auto;
   position: fixed;
   top: 10%;
   width: 25%;
}

@media (width <= 800px) and (orientation: portrait) {
   .content--nav--left,
   .content--nav--right {
      width: 10%;
   }
}


.content--nav--left span,
.content--nav--right span {
   opacity: 0;
}

.content--nav--right {
   cursor: e-resize;
   right: 0;
   text-align: right;
}


/* === Back button === */

.back-to-home {
   left: 44px;
   position: fixed;
   top: 32px;
   z-index: 1;
}

@media (width <= 800px) {
   .back-to-home {
      left: 1rem;
      top: 1rem;
   }
}

.back-to-home img {
   height: 55px;
   object-fit: contain;
}

/* === Bottom bar === */

.bottom-bar {
    align-items: center;
    bottom: 0;
    display: flex;
    gap: 32px;
    left: 0;
    padding: 32px 44px;
    position: fixed;
    right: 0;
    transition: all 500ms 300ms;
    z-index: 5;
}

@media (width <= 800px) {
   .bottom-bar {
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
   }
}

.bottom-bar:hover {
    transition: all 300ms;
}

@media (pointer: fine) {
   .bottom-bar.mouseleft {
      filter: blur(5px) saturate(.5);
      opacity: .2;
   }
}

/* === Timeline === */

.timeline {
   /* backdrop-filter: blur(4px); */
   border-radius: 1rem;
   box-shadow: inset 2px -4px 7px #0000009e, inset -1px 1px 0.5rem 1px #ffffff7d;
   box-sizing: border-box;
   cursor: pointer;
   flex: 1 1 auto;
   height: 1.125em; 
   overflow: hidden;
   position: relative;
   z-index: 5;
}

@media (width <= 800px) {
   .timeline {
      width: 100%;
   }
}

.timeline--fill {
   background: #FF00E5;
    border-radius: 10px 5px 5px 10px;
   bottom: 0;
    box-shadow: inset 0 0 3px -1px gray, inset 2px -4px 7px #0000009e, inset 0 0 0.3rem 2px #ffffff4d;

    /* box-shadow: inset 1px 0.6px 1px 2px #fff9, inset 0 0 3px -1px gray, inset 3px -4px 6px #64004e, inset 0 0 5px 5px #FFFFFf; */
   left: 0;
   position: absolute;
   top: 0;
   transition: width 300ms ease-out;
   width: 0;
}


/* === Controls === */

.controls {
   z-index: 5;
}

.controls button {
   appearance: none;
   background: transparent;
   border: 0;
   border-radius: 1.8rem;
   cursor: pointer;
   height: 46px;
   margin: 0;
   outline: none;
   overflow: hidden;
   padding: 0;
   position: relative;
   transition: filter 150ms ease-out;
}

.controls button:focus {
   border: 0;
   outline: none;
}

@media (width <= 800px) {
   .controls {
      display: flex;
      justify-content: space-between;
      width: 100%;
   }
   
   .controls button {
      height: 2rem;
   }
}

.controls ::selection {
   background-color: rgb(0 0 0 / 1%);
}

.controls img.down {
   left: 50%;
   opacity: 0;
   position: absolute;
   transform: translateX(-50%);
}

.controls button.active img.down {
   opacity: 1;
}

.autoplay-fill,
.button-fill {
   background: linear-gradient(0deg, black, #ffb1b1 30%, #fff 70%, black 100%);
   bottom: 10%;

   /* box-shadow: inset 0 0 1.5em -0.4em black; */
   filter: blur(2.5px);
   height: 80%;
   left: 0;

   /* mix-blend-mode: color-dodge; */
   mix-blend-mode: plus-lighter;
   opacity: 1;
   pointer-events: none;
   position: absolute;

   /* transition: width 300ms; */
   width: 0%;
   z-index: 2;
}

.autoplay-fill {
   background: transparent;
   border-right: 3px solid #f7d;
}

.controls img {
   cursor: pointer;
   height: 100%;
   object-fit: contain;
   user-select: none;

   /* transition: opacity 200ms; */
}


/* === Fallback fixes === */

content img {
   cursor: default;
   height: 100%;
   object-fit: cover;
}