/* ============================================================
 * Vilkax · pricing-stack.css
 * ============================================================
 *
 * The 3-tier subscription card stack. Three modes:
 *
 *   .vlx-stack[data-mode="hero"]    — full-width, depth-stacked,
 *                                     parallax-on-mouse-move.
 *                                     Used on /pricing/.
 *
 *   .vlx-stack[data-mode="grid"]    — flat 3-column grid with
 *                                     subtle hover-lift.
 *                                     Used on /app/settings/.
 *
 *   .vlx-stack[data-mode="compact"] — single-row mini cards
 *                                     for cross-sell prompts.
 *                                     Used on /app/lab/.
 *
 * Brand tokens: reads --brand-primary, --brand-primary-bright,
 * --text-strong, --text-muted, --text-dim, --border-subtle from
 * /style.css. Falls back to the dark-Vilkax palette if a token
 * is missing.
 */

/* ── Container ───────────────────────────────────────────── */
.vlx-stack {
  --tier-free-color:  #94a3b8;
  --tier-pro-color:   var(--brand-primary-bright, #3b82f6);
  --tier-ent-color:   #10b981;

  position: relative;
  margin: 0 auto;
  max-width: 1180px;
  padding: 16px;
  /* Pass-144 — flex column so the headline + billing-cycle
     toggle + cards stack vertically with the toggle centered. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vlx-stack-empty {
  text-align: center;
  color: var(--text-dim, #64748b);
  font-style: italic;
  padding: 40px;
}
/* Pass-151 — subtle "showing fallback pricing" badge.  Only
   appears when the API is unreachable; tiny + low-contrast
   so it doesn't compete with the cards but is visible to a
   tester / operator who's checking why the live data didn't
   land. */
.vlx-stack-note {
  text-align: center;
  margin: 18px auto 0;
  padding: 6px 14px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(253, 224, 71, 0.85);
  background: rgba(253, 224, 71, 0.06);
  border: 1px solid rgba(253, 224, 71, 0.20);
  border-radius: 999px;
  width: fit-content;
  max-width: 520px;
}

.vlx-stack-headline {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}
.vlx-stack-headline h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-strong, #f8fafc);
}
.vlx-stack-headline p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted, #94a3b8);
}

/* ============================================================
 * Pass-144 — Billing-cycle toggle (Monthly / Annual −20%)
 *
 * Standard SaaS pattern: pill-shaped two-button group sitting
 * above the card stack.  Active button gets a brand-blue
 * background; the annual button shows a tiny discount badge.
 * ============================================================ */
.vlx-cycle-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 22px;
  padding: 4px;
  background: rgba(11, 20, 38, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.05),
    0 6px 18px -10px rgba(37, 99, 235, 0.40);
}
.vlx-stack-headline + .vlx-cycle-toggle,
.vlx-cycle-toggle {
  /* Center the pill below the headline on hero mode. */
  align-self: center;
}
.vlx-cycle-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.62);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 200ms ease, color 200ms ease,
              box-shadow 200ms ease;
}
.vlx-cycle-tab:hover { color: #cbd5e1; }
.vlx-cycle-tab.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow:
    0 4px 14px -4px rgba(37, 99, 235, 0.55),
    0 0 18px -4px rgba(59, 130, 246, 0.40);
}
.vlx-cycle-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.35);
}
.vlx-cycle-tab.is-active .vlx-cycle-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
}

/* Add some breathing room between toggle and headline. */
.vlx-stack-headline { margin-bottom: 14px; }

/* ============================================================
 * MODE: hero  (used on /pricing/)
 *
 * Three cards stacked diagonally with depth. The middle one
 * (Pro / Wolf) is elevated forward + pulsed slightly. On hover
 * the cards spread; the hovered card pops to the front.
 * ============================================================ */
.vlx-stack[data-mode="hero"] .vlx-stack-cards {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.vlx-stack[data-mode="hero"] .vlx-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  transition:
    transform 360ms cubic-bezier(0.25, 0.8, 0.3, 1),
    border-color 280ms ease,
    box-shadow 360ms ease,
    background 360ms ease;
  will-change: transform;
}

/* Initial offset to suggest depth — left card tilts back, right
 * card tilts forward, middle card stays neutral and elevated. */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="free"] {
  transform: rotateY(8deg) rotateX(2deg) translateZ(-22px);
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"] {
  transform: translateZ(36px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(59, 130, 246, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 130, 246, 0.40);
  box-shadow:
    0 24px 64px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 2;
}
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="enterprise"] {
  transform: rotateY(-8deg) rotateX(2deg) translateZ(-22px);
}

/* Hover spreads the deck + lifts the hovered card. */
.vlx-stack[data-mode="hero"] .vlx-stack-cards:hover .vlx-card {
  transform: translateZ(-48px) rotateY(0deg) rotateX(0deg);
  opacity: 0.65;
  filter: saturate(0.85);
}
.vlx-stack[data-mode="hero"] .vlx-stack-cards:hover .vlx-card:hover {
  transform: translateZ(56px) translateY(-4px);
  opacity: 1;
  filter: saturate(1.05);
  z-index: 4;
}

/* "Recommended" ribbon on the Pro tier */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand-primary-bright, #3b82f6), var(--brand-primary, #2563EB));
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.40);
  white-space: nowrap;
}

/* Tier-coloured halo above each card on hover */
.vlx-stack[data-mode="hero"] .vlx-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease;
  background: radial-gradient(
    60% 40% at 50% 0%,
    var(--vlx-tier-color, transparent), transparent 70%
  );
}
.vlx-stack[data-mode="hero"] .vlx-card:hover::after { opacity: 0.55; }

.vlx-stack[data-mode="hero"] .vlx-card[data-tier="free"]       { --vlx-tier-color: rgba(148, 163, 184, 0.50); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]        { --vlx-tier-color: rgba(59, 130, 246, 0.65); }
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="enterprise"] { --vlx-tier-color: rgba(16, 185, 129, 0.55); }

/* ============================================================
 * MODE: grid  (used on /app/settings/)
 * Flat 3-column grid; same cards but no perspective tilt.
 * ============================================================ */
.vlx-stack[data-mode="grid"] .vlx-stack-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.vlx-stack[data-mode="grid"] .vlx-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.vlx-stack[data-mode="grid"] .vlx-card:hover {
  border-color: var(--brand-primary-bright, #3b82f6);
  transform: translateY(-2px);
}
.vlx-stack[data-mode="grid"] .vlx-card[data-current="true"] {
  border-color: var(--tier-ent-color);
  background: rgba(16, 185, 129, 0.06);
}

/* ============================================================
 * MODE: compact  (used on /app/lab/)
 * One-line mini cards as a cross-sell strip.
 * ============================================================ */
.vlx-stack[data-mode="compact"] .vlx-stack-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.vlx-stack[data-mode="compact"] .vlx-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vlx-stack[data-mode="compact"] .vlx-card-headline,
.vlx-stack[data-mode="compact"] .vlx-card-features { display: none; }
.vlx-stack[data-mode="compact"] .vlx-card-name {
  font-size: 11px;
}
.vlx-stack[data-mode="compact"] .vlx-card-price-num {
  font-size: 18px;
}

/* ============================================================
 * Card-internal styles (shared across modes)
 * ============================================================ */
.vlx-card-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-strong, #f8fafc);
}
.vlx-card[data-tier="free"]       .vlx-card-name { color: var(--tier-free-color); }
.vlx-card[data-tier="pro"]        .vlx-card-name { color: var(--tier-pro-color); }
.vlx-card[data-tier="enterprise"] .vlx-card-name { color: var(--tier-ent-color); }

/* "Most popular" pill on the recommended tier — fintech card-
 * stack convention.  Sits at the top of the recommended card,
 * brand-blue gradient, casts a subtle glow so the eye finds it
 * first when scanning. */
.vlx-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  color: #fff;
  font-family: var(--font-brand, "Manrope", sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 6px 18px -4px rgba(37, 99, 235, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  white-space: nowrap;
}
.vlx-card[data-recommended="true"] {
  /* Pass-145 — premium-tier treatment.  This is the card we
     want users to pick: brand-blue outline becomes a full neon
     ring, ambient outer glow lifts it off the row, and the
     "most popular" pill at the top gets a gentle gradient
     sweep.  Reads as "deluxe" without overwhelming neighbours. */
  outline: 1px solid rgba(96, 165, 250, 0.65);
  outline-offset: -1px;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.15),
    0 0 0 1px rgba(59, 130, 246, 0.30),
    0 20px 50px -18px rgba(37, 99, 235, 0.45),
    0 0 60px -10px rgba(59, 130, 246, 0.35);
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(11, 20, 38, 0.95));
  position: relative;
}
.vlx-card[data-recommended="true"]::after {
  /* Slow ambient sweep so the neon ring reads as "alive". */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(96, 165, 250, 0)   0deg,
    rgba(96, 165, 250, 0.45) 30deg,
    rgba(96, 165, 250, 0)   90deg,
    rgba(96, 165, 250, 0)   360deg
  );
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  animation: vlx-card-sweep 6s linear infinite;
  opacity: 0.65;
}
@keyframes vlx-card-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vlx-card[data-recommended="true"]::after { animation: none; }
}

/* Make the badge sit a touch larger + brighter on the
   premium card. */
.vlx-card[data-recommended="true"] .vlx-card-badge {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 8px 22px -6px rgba(37, 99, 235, 0.65),
              0 0 24px -4px rgba(96, 165, 250, 0.55);
  letter-spacing: 0.18em;
}

/* The price number on the premium card gets a faint
   brand-blue text-shadow → reads as "the deluxe price tag". */
.vlx-card[data-recommended="true"] .vlx-card-price-num {
  text-shadow: 0 0 22px rgba(59, 130, 246, 0.35);
}

/* The CTA on the premium card gets a stronger hover glow. */
.vlx-card[data-recommended="true"] .vlx-card-cta {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow:
    0 6px 20px -6px rgba(37, 99, 235, 0.50),
    0 0 22px -6px rgba(96, 165, 250, 0.40);
}
.vlx-card[data-recommended="true"] .vlx-card-cta:hover {
  filter: brightness(1.12);
  box-shadow:
    0 10px 28px -6px rgba(37, 99, 235, 0.65),
    0 0 32px -4px rgba(96, 165, 250, 0.60);
}

.vlx-card-headline {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  min-height: 36px;
}

.vlx-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 8px;
}
.vlx-card-price-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-strong, #f8fafc);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vlx-card-price-cycle {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.vlx-card-price-yearly {
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--text-dim, #64748b);
  margin-top: 2px;
}

.vlx-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}
.vlx-card-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  align-items: start;
}
.vlx-card-features li::before {
  content: "✓";
  color: currentColor;
  font-weight: 800;
  font-size: 11px;
}
.vlx-card[data-tier="free"]       .vlx-card-features li::before { color: var(--tier-free-color); }
.vlx-card[data-tier="pro"]        .vlx-card-features li::before { color: var(--tier-pro-color); }
.vlx-card[data-tier="enterprise"] .vlx-card-features li::before { color: var(--tier-ent-color); }
.vlx-card-features li[data-absent="true"] { opacity: 0.45; }
.vlx-card-features li[data-absent="true"]::before { content: "·"; }

.vlx-card-cta {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-strong, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.10));
  padding: 11px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: filter 180ms ease, background 180ms ease, border-color 180ms ease;
}
.vlx-card-cta:hover { filter: brightness(1.08); }
.vlx-card[data-tier="pro"] .vlx-card-cta {
  background: linear-gradient(135deg, var(--brand-primary-bright, #3b82f6), var(--brand-primary, #2563EB));
  border: 0;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
.vlx-card[data-current="true"] .vlx-card-cta {
  background: rgba(16, 185, 129, 0.16);
  color: var(--tier-ent-color);
  border-color: rgba(16, 185, 129, 0.40);
  cursor: default;
  pointer-events: none;
}

/* ── Holographic shimmer on hover (hero mode only) ────────── */
.vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 320ms ease;
}
.vlx-stack[data-mode="hero"] .vlx-card:hover .vlx-shimmer { opacity: 1; }
.vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: vlxShimmer 2.4s ease-in-out infinite;
}
@keyframes vlxShimmer {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-card .vlx-shimmer::before { animation: none; }
  .vlx-stack[data-mode="hero"] .vlx-card { transition: none; }
}

/* ── Pass-146 interactive parallax — mouse-driven tilt ────
 *
 * The pricing-stack.js mount writes `--vlx-mx` / `--vlx-my`
 * (range −0.5..0.5) onto the card stack on mousemove.  CSS
 * picks those vars up to tilt the deck on Y/X axes for an
 * "interactive moving" depth read — same trick Stripe + Linear
 * use on their pricing hero.  Pure CSS animation (zero JS layer
 * thrashing); reduced-motion users get the static composition.
 * --------------------------------------------------------------- */
.vlx-stack[data-mode="hero"] .vlx-stack-cards {
  --vlx-mx: 0;
  --vlx-my: 0;
  transform:
    rotateY(calc(var(--vlx-mx) * 5deg))
    rotateX(calc(var(--vlx-my) * -3deg));
  transition: transform 240ms cubic-bezier(0.25, 0.8, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-stack-cards {
    transform: none !important;
  }
}

/* Reflected sheen on the recommended (Pro) card.  Reads as
 * "alive" without competing with the conic-sweep animation
 * landed in Pass 145. */
.vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
  /* Inherit the existing "MOST POPULAR" ribbon styles + add
     a slow gradient-position shift so the ribbon reads as a
     metallic strip rather than a static pill. */
  background: linear-gradient(
    135deg,
    var(--brand-primary-bright, #3b82f6) 0%,
    var(--brand-primary, #2563EB) 50%,
    var(--brand-primary-bright, #3b82f6) 100%
  );
  background-size: 200% 200%;
  animation: vlx-ribbon-flow 4s ease-in-out infinite;
}
@keyframes vlx-ribbon-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .vlx-stack[data-mode="hero"] .vlx-card[data-tier="pro"]::before {
    animation: none;
  }
}

/* ── Responsive collapse: stack vertically on phones ─────── */
@media (max-width: 720px) {
  .vlx-stack[data-mode="hero"] .vlx-stack-cards,
  .vlx-stack[data-mode="grid"] .vlx-stack-cards,
  .vlx-stack[data-mode="compact"] .vlx-stack-cards {
    grid-template-columns: 1fr;
    perspective: none;
    transform: none !important;
  }
  .vlx-stack[data-mode="hero"] .vlx-card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}