/* =========================================================
   VÁCLAV BUCHTELÍK — NEXT / PHASE 2
   INTERACTIVE CAROUSEL SEEKBAR
   ========================================================= */

/* =========================================================
   HOME POSITION
   Pouze jemný posun carousel vrstvy výš.
   ========================================================= */

.home-view__content {
  padding-top: calc(var(--home-divider-y, 150px) + 10px);
}

.home-carousel,
.home-carousel__viewport {
  overflow-anchor: none;
}

/* =========================================================
   SEEKBAR
   ========================================================= */

.home-carousel__seek {
  width: min(76%, 470px);
  margin: 8px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  overflow: visible;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   SEGMENTS
   ========================================================= */

.home-carousel__seek-segment {
  position: relative;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  opacity: 0;
  transform: translate3d(calc(100vw + 80px), 0, 0);
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms linear;
  transition-delay: calc(var(--seek-index) * 140ms);
  will-change: transform, opacity;
  cursor: pointer;
  touch-action: manipulation;
}

.home-carousel__seek.is-visible .home-carousel__seek-segment {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================================================
   LINE
   ========================================================= */

.home-carousel__seek-line {
  display: block;
  width: 100%;
  height: 18px;
  object-fit: fill;
  opacity: 0.28;
  transition:
    opacity 260ms linear,
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* =========================================================
   ACTIVE
   ========================================================= */

.home-carousel__seek-segment.is-active .home-carousel__seek-line {
  opacity: 1;
}

.home-carousel__seek-segment:active .home-carousel__seek-line {
  transform: scaleX(0.96);
}

/* =========================================================
   MENU
   ========================================================= */

.main-view.is-menu-visible .home-carousel__seek {
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 374px) {
  .home-view__content {
    padding-top: calc(var(--home-divider-y, 150px) + 10px);
  }

  .home-carousel__seek {
    width: 78%;
    margin-top: 7px;
    gap: 3px;
  }
}

@media (min-width: 768px) {
  .home-carousel__seek {
    width: min(68%, 560px);
    margin-top: 10px;
  }
}

@media (min-width: 1200px) {
  .home-carousel__seek {
    width: min(62%, 620px);
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .home-carousel__seek-segment {
    transition-duration: 300ms, 120ms;
    transition-delay: calc(var(--seek-index) * 55ms);
  }
}