/* FlexCarousel — styles from the React Bits registry (FlexCarousel.css),
 * with one addition: the host box that the site's middle section provides. */

.flex-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
  outline: none;
}

.flex-carousel[data-hover='open'] {
  cursor: zoom-in;
}

.flex-carousel[data-hover='close'] {
  cursor: zoom-out;
}

.flex-carousel[data-dragging] {
  cursor: grabbing;
}

.flex-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(128, 128, 140, 0.55);
}

/* Without WebGL2 there is no canvas; the fallback is a plain row so the
   images are still seen rather than silently dropped. */
.flex-carousel[data-unsupported] {
  overflow-x: auto;
  cursor: auto;
}

.flex-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift, 1) + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  pointer-events: none;
  text-align: center;
  animation: flex-carousel-reveal 900ms ease both;
}

.flex-carousel__caption[hidden] {
  display: none;
}

.flex-carousel__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  animation: flex-carousel-title 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flex-carousel__subtitle {
  font-weight: 400;
  opacity: 0.6;
}

.flex-carousel__count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  transition: opacity 400ms ease;
}

.flex-carousel__count[data-hidden] {
  opacity: 0;
}

.flex-carousel__digits {
  display: inline-flex;
}

.flex-carousel__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

.flex-carousel__reel {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flex-carousel__reel span {
  height: 1em;
}

.flex-carousel__slash {
  opacity: 0.6;
}

.flex-carousel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes flex-carousel-title {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flex-carousel-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flex-carousel__caption,
  .flex-carousel__title {
    animation: none;
  }

  .flex-carousel__reel {
    transition: none;
  }
}

/* ── the site's own placement ────────────────────────────────────────────
   The carousel sits between the statement screen and the shop, in the middle
   of the page, so it spans the viewport the way those screens do. The height
   is the 560px the component's own usage example asks for, scaled down on
   short viewports. */
.home-carousel {
  position: relative;
  width: 100%;
  height: 560px;
  /* The theme dissolves the stage to white over the shop; the carousel is a
     normal block, so it just needs its own breathing room. */
  margin: 0 auto;
  background: #fff;
}

/* The component fills this box and measures it; the box must have a height
   before mount or the first frame renders at zero size. */
.home-carousel__stage {
  width: 100%;
  height: 100%;
}

@media (max-height: 700px) {
  .home-carousel {
    height: 460px;
  }
}