/**
 * Featured carousel (sections/featured-carousel.liquid).
 *
 * The slide itself is a featured lockup and is styled by
 * section-featured-product.css; this file is only the frame that pages
 * between them - viewport, track, arrows, dots.
 *
 * Without JS the viewport is a scroll-snapping scroller, so every slide is
 * still reachable and the section still sells. The custom element adds
 * .featured-carousel--ready, and from there the track is transformed and
 * the scroller turned off.
 */
.featured-carousel__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.featured-carousel__heading {
  margin: 0;
}

.featured-carousel__viewport {
  /* No-JS fallback: a snapping scroller. */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.featured-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.featured-carousel--ready .featured-carousel__viewport {
  overflow: hidden;
}

.featured-carousel__track {
  display: flex;
  min-width: 100%;
}

.featured-carousel--ready .featured-carousel__track {
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .featured-carousel--ready .featured-carousel__track {
    transition: none;
  }
}

.featured-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

/* A slide that is not current is inert, so it takes no pointer events and
   no tab stops; this only stops it from being read while it slides past. */
.featured-carousel--ready .featured-carousel__slide:not(.is-current) {
  visibility: hidden;
}

.featured-carousel--ready .featured-carousel__slide.is-current {
  visibility: visible;
}

.featured-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.featured-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

/* The cursor-origin hover fill every other control in the theme uses. The
   contract is written out at the top of assets/motion.js and has four parts,
   any one of which fails quietly: a ::before at z-index -1, circle(0%) at
   rest, circle(150%) under html.has-cursor-fill .is-hover-fill, and a
   transition on BOTH rules - the resting one is the way out.

   Icon timing (--icon-close-fill-*), not button timing: these are 40px
   circles sitting next to each other, and a 3s sweep across a pair leaves
   the second visibly trailing the first. */
.featured-carousel__arrow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The label has to invert as the ink sweeps under it, and the edge has to
   meet the fill it is drawn against. */
.featured-carousel__arrow:hover {
  border-color: var(--color-ink);
  color: var(--color-bg);
}

.featured-carousel__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-ink);
  /* circle() percentages resolve against sqrt((w2+h2)/2), so 150% reaches
     the farthest corner from any origin. */
  clip-path: circle(0% at var(--fill-x, 50%) var(--fill-y, 50%));
  pointer-events: none;
}

html.has-cursor-fill .featured-carousel__arrow.is-hover-fill::before {
  clip-path: circle(150% at var(--fill-x, 50%) var(--fill-y, 50%));
}

@media (prefers-reduced-motion: no-preference) {
  .featured-carousel__arrow::before {
    transition: clip-path var(--icon-close-fill-out) var(--icon-close-fill-out-ease);
  }

  html.has-cursor-fill .featured-carousel__arrow.is-hover-fill::before {
    transition: clip-path var(--icon-close-fill-in) var(--icon-close-fill-in-ease);
  }
}

/* Without a pointer there is no origin to sweep from, so it just fills.
   Keyboard focus and touch both land here. */
html:not(.has-cursor-fill) .featured-carousel__arrow:hover::before {
  clip-path: circle(150% at 50% 50%);
}

.featured-carousel__arrow svg {
  transform: rotate(180deg);
}

.featured-carousel__arrow--next svg {
  transform: none;
}

.featured-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.featured-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-ink) 22%, transparent);
  cursor: pointer;
  transition:
    width 200ms ease,
    background-color 200ms ease;
}

/* The current dot lengthens rather than changing colour, so the row stays
   one colour and the section keeps a single accent. */
.featured-carousel__dot.is-current {
  width: 22px;
  border-radius: 999px;
  background-color: var(--color-brand);
}

.featured-carousel__arrow:focus-visible,
.featured-carousel__dot:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

/* A slide still being fetched: an even, softly shimmering block the height
   of a lockup, so the track does not jump when it lands. The product link
   inside is the way on if it never does. */
.featured-carousel__slide--pending {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--radius-m);
}

/* The sweep is a band that slides across (transform, on the GPU) rather
   than a moving background-position, which repaints on the main thread
   every frame. */
.featured-carousel__slide--pending::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-ink) 5%, transparent), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .featured-carousel__slide--pending::before {
    animation: featured-carousel-shimmer 1.2s linear infinite;
  }
}

@keyframes featured-carousel-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.featured-carousel__pending-link {
  color: var(--color-muted);
  font-size: 14px;
}