/* ============================================================
   cx-stack — Fan card stack (vanilla port of card-stack.tsx)
   Cards arranged in a 3D arc; auto-rotate, swipe/drag, dots.
   ============================================================ */

.cx-stack {
  --stack-card-w: 320px;
  --stack-card-h: 240px;
  --stack-spacing: 168px;          /* card spacing on x axis (calc fallback) */
  --stack-step-deg: 9deg;          /* rotation step per off-set */
  --stack-depth: 110px;
  --stack-tilt: 11deg;
  --stack-active-lift: -18px;
  --stack-active-scale: 1.04;
  --stack-inactive-scale: .94;
  --stack-perspective: 1100px;

  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  user-select: none;
}

.cx-stack__stage {
  position: relative;
  width: 100%;
  height: 340px;
  perspective: var(--stack-perspective);
  overflow: visible;
}

@media (min-width: 720px) {
  .cx-stack__stage { height: 360px; }
}

/* Decorative spotlight wash */
.cx-stack__stage::before,
.cx-stack__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.cx-stack__stage::before {
  top: 28px;
  width: 70%;
  height: 180px;
  background: rgba(15, 23, 42, .05);
  filter: blur(48px);
}

.cx-stack__stage::after {
  bottom: 0;
  width: 76%;
  height: 150px;
  background: rgba(15, 23, 42, .08);
  filter: blur(56px);
}

html[data-theme="dark"] .cx-stack__stage::before {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .cx-stack__stage::after {
  background: rgba(0, 0, 0, .35);
}

.cx-stack__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ---------- Cards ---------- */

.cx-stack__card {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--stack-card-w);
  height: var(--stack-card-h);
  margin-left: calc(var(--stack-card-w) / -2);

  background: var(--cx-card, #fff);
  border: 1px solid var(--cx-line, #e2e8f0);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 18px 40px -20px rgba(15, 23, 42, .25);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 22px 22px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition:
    opacity .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.4,0,.2,1);
  backface-visibility: hidden;
}

.cx-stack__card.is-visible { opacity: 1; }

.cx-stack__card.is-active {
  cursor: grab;
  box-shadow:
    0 4px 8px rgba(15, 23, 42, .08),
    0 28px 50px -20px rgba(15, 23, 42, .35);
}

.cx-stack__card.is-active:active { cursor: grabbing; }

.cx-stack__card.is-dragging { transition: none !important; }
.cx-stack--silent .cx-stack__card { transition: none !important; }

/* Win specificity against cx-dm.css `html.cx-dm-ready a:not(.cx-btn):not(.cx-cta-wa):not(.cx-cta-bar__cta)`
   which has 4 classes worth of specificity (the :not() inner selectors count). Only !important wins. */
a.cx-stack__card {
  transition:
    opacity .55s cubic-bezier(.4,0,.2,1),
    transform .55s cubic-bezier(.4,0,.2,1),
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .35s ease !important;
}

a.cx-stack__card.is-dragging,
.cx-stack--silent a.cx-stack__card {
  transition: none !important;
}

/* Card inner content */
.cx-stack__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.cx-stack__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 16px 0 8px;
  color: var(--cx-ink, #0f172a);
  line-height: 1.25;
}

.cx-stack__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cx-ink-soft, #475569);
  flex: 1;
}

.cx-stack__cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cx-blue, #3b82f6);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: gap .25s ease;
}

.cx-stack__cta::after { content: "→"; transition: transform .25s ease; }

.cx-stack__card.is-active .cx-stack__cta::after { transform: translateX(3px); }

/* ---------- Dots ---------- */

.cx-stack__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.cx-stack__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), width .35s cubic-bezier(.4,0,.2,1);
}

.cx-stack__dot:hover { background: rgba(15, 23, 42, .45); }

.cx-stack__dot[aria-current="true"] {
  background: var(--cx-ink, #0f172a);
  width: 28px;
}

.cx-stack__dot:focus-visible {
  outline: 2px solid var(--cx-blue, #3b82f6);
  outline-offset: 3px;
}

/* ---------- Dark mode ---------- */

html[data-theme="dark"] .cx-stack__card {
  background: var(--cx-bg-soft, #16161b);
  border-color: var(--cx-line, #2a2a31);
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 18px 40px -20px rgba(0,0,0,.7);
}

html[data-theme="dark"] .cx-stack__title { color: var(--cx-ink, #e7e7eb); }
html[data-theme="dark"] .cx-stack__desc  { color: var(--cx-mute, #93939c); }
html[data-theme="dark"] .cx-stack__dot   { background: rgba(231, 231, 235, .25); }
html[data-theme="dark"] .cx-stack__dot[aria-current="true"] { background: var(--cx-ink, #e7e7eb); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cx-stack__card { transition-duration: .25s !important; }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .cx-stack {
    --stack-card-w: 260px;
    --stack-card-h: 230px;
    --stack-spacing: 110px;
    --stack-step-deg: 7deg;
    --stack-depth: 80px;
  }
  .cx-stack__stage { height: 320px; }
  .cx-stack__title { font-size: 1.05rem; margin: 12px 0 6px; }
  .cx-stack__desc  { font-size: .88rem; }
  .cx-stack__card  { padding: 22px 18px 18px; }
}

/* ---------- Fallback (no JS) ---------- */

.cx-stack:not([data-stack-ready]) .cx-stack__stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  height: auto;
  perspective: none;
  padding: 0;
}

.cx-stack:not([data-stack-ready]) .cx-stack__viewport { display: contents; }

.cx-stack:not([data-stack-ready]) .cx-stack__card {
  position: static;
  margin-left: 0;
  width: auto;
  height: auto;
  min-height: var(--stack-card-h);
  opacity: 1;
  transform: none !important;
}

.cx-stack:not([data-stack-ready]) .cx-stack__dots { display: none; }