/* Shared rolling taxonomy marquee + image-led editorial intro.
   Rules copied verbatim from /assets/home.css so the Compare and Rankings
   pages render byte-for-byte the same component the homepage uses. */

/* body.empty-category-page (Compare/Rankings) paints a decorative mascot
   pattern (::before, z-index 0) and a lighting veil (::after, z-index 1)
   behind page content; non-positioned boxes paint *underneath* both no
   matter where they sit in the DOM. Raise these two sections above that
   z-index 1 veil so their 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,
.aps-home-editorial {
  position: relative;
  z-index: 2;
}

.aps-home-editorial {
  margin-top: 64px;
  border-top: 1px solid rgba(92, 171, 255, .22);
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 169, 255, .16), transparent 34%),
    linear-gradient(180deg, #09111d 0%, #05070c 78%, #04060a 100%);
  color: #aeb9ca;
}

.aps-footer-main {
  width: min(1080px, calc(100vw - 42px)) !important;
  margin: 0 auto !important;
  padding: 54px 0 38px !important;
  text-align: center !important;
}

.aps-footer-logo {
  display: block !important;
  width: min(390px, 82vw) !important;
  height: auto !important;
  margin: 0 auto 38px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.46)) !important;
}

.aps-footer-copy {
  max-width: 980px !important;
  margin: 0 auto !important;
  text-align: center !important;
  column-count: 1 !important;
  color: #aeb9ca !important;
  font-size: 1rem !important;
  line-height: 1.82 !important;
}

.aps-footer-copy h2 {
  max-width: 900px !important;
  margin: 0 auto 34px !important;
  color: #fff !important;
  text-align: center !important;
  font-size: clamp(2.15rem, 4vw, 3.7rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}

.aps-footer-copy h3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 34px auto 14px !important;
  border: 1px solid rgba(105, 240, 220, .22) !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
  background: rgba(105, 240, 220, .055) !important;
  color: #f4f8ff !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.aps-footer-copy p {
  max-width: 930px !important;
  margin: 0 auto 20px !important;
}

.aps-taxonomy-marquee + .aps-home-editorial {
  margin-top: 0;
  border-top: 0;
}

/* .site-footer carries a site-wide margin-top: 64px (style.css) meant to
   space it from whatever content normally precedes it. On the homepage
   this is zeroed by an identical adjacency rule so the footer begins
   immediately after the editorial section; without it here, that 64px
   gap exposed the page's decorative pattern/veil layers underneath. */
.aps-home-editorial + .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;
  }
}