.scss-slider{position:relative;width:100%;height:100vh;overflow:hidden;background:#000}
.scss-stage{position:absolute;inset:0;background:#000}
.scss-layer{position:absolute;inset:-2vh;background-position:center;background-repeat:no-repeat;background-size:cover;background-color:#000;transform:scale(1);opacity:0;will-change:opacity,transform}
.scss-layer.is-top{z-index:2}
.scss-layer:not(.is-top){z-index:1}
.scss-layer.is-current{opacity:1}
.scss-layer.is-prep{opacity:0}
.scss-layer.is-fade-in{opacity:1}
.scss-layer.is-fade-out{opacity:0}

.scss-gradient{position:absolute;left:0;right:0;bottom:0;height:18vh;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));z-index:3;pointer-events:none}

.scss-nav{position:absolute;top:0;right:0;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 44px 0 0;z-index:4}
.scss-nav::after{content:"";position:absolute;right:24px;top:var(--scss-rail-top, 120px);height:calc(var(--scss-rail-bottom, 420px) - var(--scss-rail-top, 120px));width:3px;background:rgba(255,255,255,.35);border-radius:2px;pointer-events:none}
.scss-nav-ind{position:absolute;right:24px;width:3px;height:54px;background:#fff;border-radius:2px;top:var(--scss-ind-top, 120px);transform:translateY(-50%);transition:top var(--scss-duration,900ms) ease;pointer-events:none}

.scss-slider .scss-nav .scss-nav-item{
  position:relative !important;
  z-index:6 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#fff !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:6px 0 !important;
  margin:0 !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:.12em !important;
  font:600 16px/1.2 "Poppins", system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  opacity:.95 !important;
  transition:opacity .2s ease, transform .2s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.scss-slider .scss-nav .scss-nav-item:hover{opacity:1 !important;transform:translateX(-2px) !important}
.scss-slider .scss-nav .scss-nav-item.is-active{opacity:1 !important}
.scss-slider .scss-nav .scss-nav-item:active{transform:translateX(-1px) !important}
.scss-slider .scss-nav .scss-nav-item:focus-visible{
  outline:2px solid rgba(255,255,255,.55) !important;
  outline-offset:6px !important;
  border-radius:6px !important;
}
.scss-slider .scss-nav .scss-nav-label{
  color:#fff !important;
  min-width:56px !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* transitions */
.scss-stage.t-none .scss-layer{transition:none}
.scss-stage.t-fade .scss-layer{transition:opacity var(--scss-duration,900ms) ease}
.scss-stage.t-fade_zoom .scss-layer{transition:opacity var(--scss-duration,900ms) ease, transform var(--scss-duration,900ms) ease}

/* optional zoom drift on visible layer only */
.scss-stage.do-zoom .scss-layer.is-current,
.scss-stage.do-zoom .scss-layer.is-fade-in{animation:scssZoomMove 12s linear infinite}

@keyframes scssZoomMove{
  0%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@media (max-width:900px){
  .scss-nav{padding:0 26px 0 0;gap:12px}
  .scss-nav::after{right:14px}
  .scss-nav-ind{right:14px;height:46px}
  .scss-slider .scss-nav .scss-nav-label{min-width:44px;font-size:14px}
}