.inline-reel-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  align-items: flex-start;
}

.inline-reel-card {
  flex: 0 0 auto;
  width: var(--inline-reel-width, clamp(102px, 13vw, 124px));
  border-radius: 14px;
  border: 1px solid rgb(var(--gold-rgb) / 0.26);
  background: rgba(13, 13, 13, 0.86);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.26);
  scroll-snap-align: start;
  transition:
    width 220ms ease,
    transform 170ms ease,
    border-color 170ms ease,
    filter 170ms ease,
    box-shadow 170ms ease,
    opacity 170ms ease;
}

.inline-reel-card:focus-visible {
  outline: none;
  border-color: var(--gold-outline-strong);
  box-shadow: 0 0 0 2px rgb(var(--gold-rgb) / 0.22);
}

.inline-reel-card.is-active {
  width: var(
    --inline-reel-active-width,
    var(--inline-reel-width, clamp(102px, 13vw, 124px))
  );
  border-color: var(--gold-outline-strong);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 24px rgb(var(--gold-rgb) / 0.18);
  opacity: 1;
}

.inline-reel-media {
  position: relative;
}

.inline-reel-video {
  width: 100%;
  height: var(--inline-reel-height, clamp(180px, 23vw, 220px));
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) brightness(0.95);
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.98),
    rgba(8, 8, 8, 0.98)
  );
  transition: filter 170ms ease;
}

.inline-reel-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(13, 13, 13, 0.96), rgba(24, 24, 24, 0.92)),
    radial-gradient(
      120% 80% at 50% 0%,
      rgb(var(--gold-rgb) / 0.08),
      transparent 58%
    );
  transition: opacity 180ms ease;
  pointer-events: none;
}

.inline-reel-placeholder::before {
  content: "";
  width: clamp(2rem, 4vw, 2.8rem);
  height: clamp(2rem, 4vw, 2.8rem);
  border-radius: 999px;
  border: 1px solid rgb(var(--gold-rgb) / 0.28);
  background: rgb(var(--gold-rgb) / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
}

.inline-reel-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: inlineReelShimmer 1.4s ease-in-out infinite;
}

.inline-reel-card.is-loaded .inline-reel-placeholder {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .inline-reel-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold-outline-strong);
  }

  .inline-reel-card:hover .inline-reel-video {
    filter: saturate(1.03) brightness(1.02);
  }
}

@keyframes inlineReelShimmer {
  from {
    transform: translateX(-100%);
  }

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

@media (max-width: 767.98px) {
  .inline-reel-card {
    width: var(--inline-reel-mobile-width, clamp(88px, 25vw, 108px));
  }

  .inline-reel-card.is-active {
    width: var(--inline-reel-mobile-active-width, clamp(150px, 44vw, 190px));
  }

  .inline-reel-video {
    height: var(--inline-reel-mobile-height, clamp(140px, 40vw, 176px));
  }
}