/* ============================================================
   Feature Ribbon — reusable dual-band keyword marquee
   Scoped to .feature-ribbon
   ============================================================ */

.feature-ribbon {
  --fr-back: #071a33;
  --fr-front: #f2a11b;
  --fr-ink: #ffffff;
  --fr-duration: 42s;
  --fr-band-h: clamp(56px, 6.2vw, 78px);
  --fr-gap: clamp(1.4rem, 2.2vw, 2.4rem);
  --fr-font: clamp(0.78rem, 1.05vw, 0.95rem);

  position: relative;
  isolation: isolate;
  /* overflow: hidden; */
  width: 100%;
  padding: 0;
  background: transparent;
}

.feature-ribbon--speed-slow {
  --fr-duration: 58s;
}

.feature-ribbon--speed-normal {
  --fr-duration: 42s;
}

.feature-ribbon--speed-fast {
  --fr-duration: 28s;
}

.feature-ribbon__stage {
  position: relative;
  width: 100%;
  min-height: calc(var(--fr-band-h) * 2.15);
  display: grid;
  place-items: center;
}

/* ---- Shared ribbon body ---- */
.feature-ribbon__band {
  position: absolute;
  left: -8%;
  width: 116%;
  height: var(--fr-band-h);
  pointer-events: none;
  transform-origin: center center;
}

.feature-ribbon__band--back {
  top: calc(50% - (var(--fr-band-h) * 0.72));
  z-index: 1;
  background: var(--fr-back);
  transform: rotate(-4.2deg) skewX(-10deg);
  clip-path: polygon(1.2% 0, 100% 12%, 98.8% 100%, 0 88%);
  box-shadow:
    0 18px 40px rgba(7, 26, 51, 0.28),
    0 2px 0 rgba(255, 255, 255, 0.04) inset;
}

.feature-ribbon__band--front {
  top: calc(50% - (var(--fr-band-h) * 0.28));
  z-index: 2;
  background: var(--fr-front);
  transform: rotate(3.4deg) skewX(-8deg);
  clip-path: polygon(0 10%, 98.8% 0, 100% 90%, 1.2% 100%);
  box-shadow:
    0 16px 36px rgba(242, 161, 27, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
  pointer-events: auto;
  overflow: hidden;
}

/* Soft cut edges / depth accents */
.feature-ribbon__band--back::before,
.feature-ribbon__band--front::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feature-ribbon__band--back::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    transparent 18%,
    transparent 82%,
    rgba(0, 0, 0, 0.18)
  );
}

.feature-ribbon__band--front::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22),
    transparent 20%,
    transparent 80%,
    rgba(7, 26, 51, 0.12)
  );
  z-index: 1;
}

.feature-ribbon__viewport {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Counter the band skew so text stays readable */
  transform: skewX(8deg) rotate(-0.2deg);
}

.feature-ribbon__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: featureRibbonMarquee var(--fr-duration) linear infinite;
}

.feature-ribbon--dir-right .feature-ribbon__track {
  animation-name: featureRibbonMarqueeReverse;
}

.feature-ribbon__band--front:hover .feature-ribbon__track {
  animation-play-state: paused;
}

.feature-ribbon__items {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
}

.feature-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fr-gap);
  padding-right: var(--fr-gap);
  white-space: nowrap;
}

.feature-ribbon__text {
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: var(--fr-font);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-ink);
  line-height: 1;
}

.feature-ribbon__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55em;
  color: rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}

.feature-ribbon .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes featureRibbonMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes featureRibbonMarqueeReverse {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 991.98px) {
  .feature-ribbon {
    --fr-band-h: clamp(50px, 7vw, 64px);
    --fr-font: clamp(0.72rem, 1.5vw, 0.86rem);
    --fr-gap: clamp(1.1rem, 2vw, 1.8rem);
  }

  .feature-ribbon__band--back {
    transform: rotate(-3.6deg) skewX(-9deg);
  }

  .feature-ribbon__band--front {
    transform: rotate(2.8deg) skewX(-7deg);
  }

  .feature-ribbon__viewport {
    transform: skewX(7deg);
  }
}

@media (max-width: 767.98px) {
  .feature-ribbon {
    --fr-band-h: 46px;
    --fr-font: 0.68rem;
    --fr-gap: 1rem;
    --fr-duration: 36s;
  }

  .feature-ribbon__stage {
    min-height: calc(var(--fr-band-h) * 2.35);
  }

  .feature-ribbon__band {
    left: -12%;
    width: 124%;
  }

  .feature-ribbon__band--back {
    transform: rotate(-3deg) skewX(-8deg);
  }

  .feature-ribbon__band--front {
    transform: rotate(2.4deg) skewX(-6deg);
  }

  .feature-ribbon__viewport {
    transform: skewX(6deg);
  }

  .feature-ribbon__text {
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-ribbon__track {
    animation: none !important;
    transform: none !important;
  }

  .feature-ribbon__band--front:hover .feature-ribbon__track {
    animation-play-state: unset;
  }

  .feature-ribbon__viewport {
    justify-content: center;
  }

  .feature-ribbon__track {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.55rem;
    padding: 0 1rem;
  }

  .feature-ribbon__items[aria-hidden="true"] {
    display: none;
  }

  .feature-ribbon__items {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.45rem;
  }

  .feature-ribbon__item {
    padding-right: 0.85rem;
  }
}