/* Homepage rolling keyword marquee, as a standalone strip (no editorial
   image/title/text section) for category and review pages. Marquee rules
   copied verbatim from /assets/home.css so this renders byte-for-byte the
   same component the homepage uses. */

/* body.ai-sex-bots-category (all 6 category pages) and
   body[data-page="review"] (all 73 review pages) paint a decorative mascot
   pattern (::before, z-index 0) and a lighting veil (::after, z-index 1)
   behind page content; a plain non-positioned section paints *underneath*
   both no matter where it sits in the DOM. Raise the strip above that
   z-index 1 veil so its own opaque background is what actually shows,
   matching the isolated look this component has on the homepage (which has
   no such decorative layers to begin with). */
.aps-taxonomy-marquee {
  position: relative;
  z-index: 2;
}

/* .site-footer carries a site-wide margin-top: 64px (style.css) meant to
   space it from whatever content normally precedes it. Zero it when the
   strip directly precedes the footer so the footer begins immediately
   after the strip, with no gap. */
.aps-taxonomy-marquee + .site-footer {
  margin-top: 0;
}

/* premium rolling taxonomy marquee */
.aps-taxonomy-marquee {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  border-top: 1px solid rgba(112,164,225,.18);
  border-bottom: 1px solid rgba(105,240,220,.13);
  background:
    radial-gradient(circle at 16% 0%, rgba(66,217,255,.065), transparent 29%),
    radial-gradient(circle at 82% 100%, rgba(181,140,255,.055), transparent 31%),
    linear-gradient(180deg, #09111c 0%, #07101a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 -1px 0 rgba(0,0,0,.28);
}

.aps-taxonomy-marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.025),
      transparent
    );
  background-size: 420px 100%;
}

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

.aps-taxonomy-lane {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
}

.aps-taxonomy-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
  will-change: transform;
  animation: aps-taxonomy-scroll-clean 180s linear infinite !important;
}

.aps-taxonomy-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: max-content;
  padding-right: 0;
}

.aps-taxonomy-term {
  --term-accent: #42d9ff;

  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 28px;
  padding: 4px 18px 4px 31px;
  color: #c8d4e4;
  font-size: clamp(.65rem, .72vw, .76rem);
  line-height: 1;
  font-weight: 830;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.aps-taxonomy-term::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--term-accent);
  background:
    color-mix(in srgb, var(--term-accent) 28%, transparent);
  box-shadow:
    0 0 8px
    color-mix(in srgb, var(--term-accent) 33%, transparent);
  transform: translateY(-50%) rotate(45deg);
}

.aps-taxonomy-term::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: rgba(141,166,199,.46);
  box-shadow: 0 0 5px rgba(105,240,220,.10);
  transform: translateY(-50%);
}

.aps-taxonomy-term:nth-child(6n + 1) {
  --term-accent: #42d9ff;
}

.aps-taxonomy-term:nth-child(6n + 2) {
  --term-accent: #69f0dc;
}

.aps-taxonomy-term:nth-child(6n + 3) {
  --term-accent: #b58cff;
}

.aps-taxonomy-term:nth-child(6n + 4) {
  --term-accent: #ffd45c;
}

.aps-taxonomy-term:nth-child(6n + 5) {
  --term-accent: #ff6fae;
}

.aps-taxonomy-term:nth-child(6n + 6) {
  --term-accent: #ff7650;
}

.aps-taxonomy-term:nth-child(3n + 1) {
  color: #e0e8f4;
}

@keyframes aps-taxonomy-scroll-clean {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 760px) {
  .aps-taxonomy-marquee {
    padding: 10px 0;
  }

  .aps-taxonomy-track {
    animation-duration: 180s !important;
  }

  .aps-taxonomy-term {
    min-height: 26px;
    padding: 4px 15px 4px 27px;
    font-size: .62rem;
    letter-spacing: .065em;
  }

  .aps-taxonomy-term::before {
    left: 12px;
  }
}