/*
 * Uses the site's class names. Motion: offset-path is set inline per item
 * from IntegrationsMarquee.tsx; offset-distance is animated by the keyframes below.
 */

.marquee_wrapper {
  position: relative;
  width: 100%;
}

.marquee_row {
  /* Set inline by measure(); 150px is the pre-measure fallback. */
  position: relative;
  z-index: 2;
  width: 100%;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--_spacing---space--32, 2rem);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.marquee_row.bottom {
  position: relative;
  top: calc(-1 * var(--_spacing---space--32, 2rem));
  z-index: 1;
}

/* Hover state comes from React (data-hovered / data-row-hovered), not :hover,
   so the pill does not flicker when moving between circle and pill. */
.marquee_row[data-row-hovered='true'] {
  z-index: 3;
}

[data-popup='true'] .marquee_item[data-hovered='true'] {
  z-index: 5;
}

.marquee_line {
  /* Explicit size: inset alone does not stretch a replaced svg element. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  color: var(--_theme---badge-border, #e9dcfb);
}

.marquee_track {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.marquee_list {
  position: absolute;
  inset: 0;
}

.marquee_item {
  /* Positioned via inline offset-path / offset-distance. */
  position: absolute;
  top: 0;
  left: 0;
  width: 6.25rem;
  height: 6.25rem;
  overflow: visible;
  background: transparent;
  border: 1px solid var(--_theme---badge-border, #e9dcfb);
  border-radius: var(--_default---radius--round, 9999px);
  offset-rotate: 0deg;
  offset-anchor: 50% 50%;
  will-change: offset-distance;
}

.marquee_item::before {
  /* Background disc: masks the line beneath, sits below logo and pill. */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--_theme---background);
  border-radius: inherit;
  z-index: 0;
}

.marquee_logo_wrap {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  box-sizing: border-box;
  width: 5.25rem;
  height: 5.25rem;
  padding: 1.5rem;
  border-radius: var(--_default---radius--round, 9999px);
  /* Fallback; actual color is set inline from the API theme. */
  background-color: #69586c;
  backdrop-filter: blur(16px) blur(5px);
  -webkit-backdrop-filter: blur(16px) blur(5px);
  box-shadow:
    0 0 1px #00000014,
    0 21px 8px #0a0d1205,
    0 12px 7px #0a0d120f,
    0 5px 5px #0a0d121a,
    0 1px 3px #0a0d121c;
}

.contain {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.height-full {
  height: 100%;
}

.footer_pill.is-marquee {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(-1 * var(--_spacing---space--8, 0.5rem));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  min-width: fit-content;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: var(--_spacing---space--16, 1rem);
  padding-right: var(--_spacing---space--8, 0.5rem);
  text-decoration: none;
  color: var(--_default---swatch--brand-700, #803bbf);
  background-color: #ffffffe6;
  border-radius: var(--_default---radius--round, 9999px);
  box-shadow:
    inset 0 0 0 1px var(--_default---swatch--brand-200, #e9dcfb),
    0px 2px 2px -1px #0000000a,
    0px 4px 6px -2px #00000008,
    0px 12px 16px -4px #00000014;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* translateX(-50%) in both states so only Y and opacity animate. */
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

/* No pill until the row's entrance has finished (data-intro-done). */
[data-popup='true'][data-intro-done='true'] .marquee_item[data-hovered='true'] .footer_pill.is-marquee {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.footer_pill .clickable {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Scoped to the pill to avoid clashing with other components' .text. */
.footer_pill .text {
  margin: 0;
  white-space: nowrap;
  font-family: var(--_typography---font--primary-family, Arial, Helvetica, sans-serif);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
}

.color_neutral_900 {
  color: var(--_default---swatch--neutral-900, #171717);
}

.weight-medium {
  font-weight: var(--_typography---font--primary-medium, 500);
}

.btn-icon.is-icon-only {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  display: block;
}

.color-brand-300 {
  color: var(--_default---swatch--brand-300, #d8c0f6);
}

[arrow_shaft_svg=''] {
  stroke-dasharray: 12;
}

@media (hover: hover) {
  [arrow_shaft_svg=''] {
    stroke-dashoffset: 12;
    transition: stroke-dashoffset 0.25s ease;
  }
}

.footer_pill:hover .arrow_shaft {
  stroke-dashoffset: 0;
}

/* Path motion; the opacity ramp hides the 100% -> 0% wrap point. */
@keyframes mq-path-fwd {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes mq-path-rev {
  0%   { offset-distance: 100%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 0%;   opacity: 0; }
}

/* One-time staggered entrance, run alongside mq-path-fwd/rev. Uses
   filter: opacity() so it multiplies with the path's opacity ramp instead of
   overriding it; transform composes with offset-path positioning. */
@keyframes mq-item-enter {
  from {
    filter: opacity(0);
    transform: translateY(24px);
  }
  to {
    filter: opacity(1);
    transform: translateY(0);
  }
}

/* Pause on hover (after the intro, see data-intro-done), in keyboard mode,
   and while off-screen or the tab is hidden. */
.marquee_wrapper:hover .marquee_row[data-intro-done='true'] .marquee_item,
.marquee_wrapper[data-kb='true'] .marquee_item,
.marquee_row[data-mq-inactive='true'] .marquee_item {
  animation-play-state: paused !important;
}

/* Paused rather than `animation: none`, which would stack every circle at
   offset-distance 0. */
@media (prefers-reduced-motion: reduce) {
  .marquee_item {
    animation-play-state: paused !important;
  }
}

/* --- A11y --- */

/* Keyboard mode: focus ring on the focused app's pill. */
.marquee_wrapper[data-kb='true'] .marquee_item[data-hovered='true'] .footer_pill.is-marquee {
  box-shadow:
    0 0 0 2px var(--_theme---background),
    0 0 0 4px var(--_default---swatch--brand-500-main),
    0px 12px 16px -4px #00000014;
}

/* Keyboard mode: no pill transition, so fast tabbing keeps up. */
.marquee_wrapper[data-kb='true'] .footer_pill.is-marquee {
  transition: none;
}

/* Visually hidden app list for keyboard and screen readers. */
.mq_sr_list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

/* --- Reveal (keep this last) ---
   The site head hides code islands until their stylesheet loads, preventing
   a flash of unstyled content. !important inside the shadow tree overrides
   that rule once this file applies. See AGENTS.md. */
:host {
  display: contents !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}