/* ───────────────────────────────────────────────
   LoginStack Command Orbit — light hero section
   White canvas with LoginStack Apple-blue accents and
   per-feature pastel tints. Matches the live admin app.
   ─────────────────────────────────────────────── */

:root {
  --ls-canvas: #f4f7fc;
  --ls-canvas-deep: #e9eff8;
  --ls-canvas-mid: #f9fbfd;
  --ls-blue: #0071e3;
  --ls-blue-soft: #e8f4fd;
  --ls-cyan: #2bb4ff;
  --ls-cyan-soft: #d8eefc;

  --ls-glass: rgba(255, 255, 255, 0.72);
  --ls-glass-2: rgba(255, 255, 255, 0.92);
  --ls-glass-border: rgba(15, 30, 60, 0.08);
  --ls-glass-border-strong: rgba(15, 30, 60, 0.14);

  --feature-hue-a: 211;
  --feature-hue-b: 235;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ls-canvas);
  color: var(--ls-text);
  font-family: var(--ls-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ─── Section shell ──────────────────────────── */
.orbit-section {
  position: relative;
  min-height: 760px;
  padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 8vw, 120px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, hsl(var(--feature-hue-a) 90% 92% / 0.85), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, hsl(var(--feature-hue-b) 85% 88% / 0.5), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--ls-canvas-mid) 50%, var(--ls-canvas) 100%);
  transition: background 700ms var(--ls-ease);
}

/* Soft grid backdrop */
.orbit-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 60, 130, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 60, 130, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 50%, black 30%, transparent 75%);
  pointer-events: none;
}

/* Light beams */
.orbit-bg-beams {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.orbit-bg-beams::before,
.orbit-bg-beams::after {
  content: "";
  position: absolute;
  width: 1200px; height: 1200px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.85;
  transition: background 700ms var(--ls-ease);
}
.orbit-bg-beams::before {
  top: -40%; left: -10%;
  background: radial-gradient(circle, hsl(var(--feature-hue-a) 95% 80% / 0.55), transparent 60%);
}
.orbit-bg-beams::after {
  bottom: -50%; right: -10%;
  background: radial-gradient(circle, hsl(var(--feature-hue-b) 95% 82% / 0.45), transparent 60%);
}

/* Particle canvas */
.orbit-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ─── Header ─────────────────────────────────── */
.orbit-header {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  text-align: center;
  z-index: 2;
}
.orbit-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ls-fs-xs);
  font-weight: var(--ls-fw-semibold);
  letter-spacing: var(--ls-ls-caps);
  text-transform: uppercase;
  color: var(--ls-blue);
  padding: 6px 14px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--ls-radius-full);
  background: rgba(0, 113, 227, 0.06);
}
.orbit-eyebrow::before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ls-blue);
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.5);
}
.orbit-headline {
  margin: 24px 0 18px;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: var(--ls-fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--ls-text);
  text-wrap: balance;
}
.orbit-headline em {
  font-style: normal;
  background: linear-gradient(110deg, var(--ls-text) 0%, #0a4dbf 55%, #0071e3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.orbit-subtext {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--ls-text-secondary);
  max-width: 640px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ─── Stage ──────────────────────────────────── */
.orbit-stage {
  position: relative;
  margin: clamp(48px, 6vw, 88px) auto 0;
  max-width: 1400px;
  padding: 0 clamp(16px, 3vw, 40px);
  z-index: 2;
}

.orbit-canvas {
  position: relative;
  height: 540px;
}

.orbit-ring {
  position: absolute;
  inset: 0;
}

/* ─── Card ──────────────────────────────────── */
.orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 330px;
  margin: -165px 0 0 -130px;
  border-radius: var(--ls-radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82));
  border: 1px solid var(--ls-glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 22px 22px 20px;
  cursor: pointer;
  transition:
    transform 600ms cubic-bezier(0.22, 0.85, 0.25, 1),
    opacity 500ms var(--ls-ease),
    filter 400ms var(--ls-ease),
    background 400ms var(--ls-ease),
    border-color 400ms var(--ls-ease),
    box-shadow 400ms var(--ls-ease);
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.06), 0 1px 2px rgba(15, 30, 60, 0.04);
  color: var(--ls-text);
}
.orbit-card:focus-visible {
  outline: 2px solid var(--ls-blue);
  outline-offset: 4px;
}

.orbit-card.is-rolling {
  transition-duration: 480ms;
  filter: blur(1.2px) brightness(1.02);
}

.orbit-card.is-active {
  background: #ffffff;
  border-color: hsl(var(--feature-hue-a) 75% 60% / 0.32);
  box-shadow:
    0 30px 70px rgba(15, 30, 60, 0.18),
    0 0 0 1px hsl(var(--feature-hue-a) 75% 55% / 0.18),
    0 0 60px hsl(var(--feature-hue-a) 85% 70% / 0.45);
}
.orbit-card.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, hsl(var(--feature-hue-a) 90% 75% / 0.07), transparent 60%);
}

.orbit-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: white;
  background: linear-gradient(135deg, hsl(var(--feature-hue-a) 80% 55%), hsl(var(--feature-hue-b) 70% 45%));
  border: 1px solid hsl(var(--feature-hue-a) 80% 50% / 0.35);
  box-shadow:
    0 6px 14px hsl(var(--feature-hue-a) 80% 40% / 0.28),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.orbit-card-icon svg { width: 22px; height: 22px; }

.orbit-card-index {
  font-family: var(--ls-font-mono);
  font-size: 11px;
  color: var(--ls-text-tertiary);
  letter-spacing: 0.08em;
}

.orbit-card-title {
  font-size: 17px;
  font-weight: var(--ls-fw-semibold);
  letter-spacing: -0.015em;
  color: var(--ls-text);
  line-height: 1.25;
}

.orbit-card-meta {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.orbit-card-meta-pill {
  font-size: 10.5px;
  font-weight: var(--ls-fw-medium);
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  color: var(--ls-text-secondary);
}

.orbit-card-mini {
  flex: 1;
  border-radius: 12px;
  background: linear-gradient(180deg, hsl(var(--feature-hue-a) 75% 97%), hsl(var(--feature-hue-b) 75% 95%));
  border: 1px solid var(--ls-border-light);
  padding: 10px;
  overflow: hidden;
  position: relative;
  color: var(--ls-text);
}

/* ─── Center Orb ─────────────────────────────── */
/* The orb is a "command orbit" — concentric rings extending well
   beyond the active card, with a glowing core sphere at the back.
   The card sits over the inner sphere; the outer rings frame it. */
.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  z-index: 5;
}
.orbit-core:focus-visible { outline: 2px solid var(--ls-blue); outline-offset: 6px; border-radius: 50%; }

.orbit-core-glow {
  position: absolute; inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--feature-hue-a) 90% 65% / 0.3), transparent 60%);
  filter: blur(50px);
  animation: corePulse 5s ease-in-out infinite;
}
.orbit-core-ring {
  position: absolute;
  inset: 180px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 50%),
    linear-gradient(135deg, hsl(var(--feature-hue-a) 80% 58%), hsl(var(--feature-hue-b) 75% 48%));
  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.18),
    inset 0 -20px 40px hsl(var(--feature-hue-b) 75% 35% / 0.4),
    0 20px 50px hsl(var(--feature-hue-a) 80% 50% / 0.45);
}
.orbit-core-ring-2 {
  position: absolute; inset: 130px;
  border-radius: 50%;
  border: 1px dashed hsl(var(--feature-hue-a) 75% 55% / 0.55);
  animation: coreSpin 30s linear infinite;
}
.orbit-core-ring-3 {
  position: absolute; inset: 70px;
  border-radius: 50%;
  border: 1px solid hsl(var(--feature-hue-a) 75% 55% / 0.28);
  animation: coreSpin 60s linear infinite reverse;
}
.orbit-core-ring-4 {
  position: absolute; inset: 16px;
  border-radius: 50%;
  border: 1px solid hsl(var(--feature-hue-a) 75% 55% / 0.18);
  animation: coreSpin 90s linear infinite;
}
.orbit-core-label {
  position: absolute;
  inset: 180px;
  display: grid; place-items: center;
  z-index: 2;
  color: rgba(255,255,255,0.95);
  font-size: 10px;
  font-weight: var(--ls-fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0.65;
}
.orbit-core-label svg {
  display: block;
  margin: 0 auto 4px;
  width: 22px; height: 22px;
  stroke: white;
  opacity: 0.75;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

@keyframes corePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes coreSpin {
  to { transform: rotate(360deg); }
}

/* Tracer lines from orb to active card */
.orbit-tracers {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ─── Controls ──────────────────────────────── */
.orbit-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.orbit-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ls-border);
  background: var(--ls-surface);
  color: var(--ls-text);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease), border-color var(--ls-dur-fast) var(--ls-ease), box-shadow var(--ls-dur-fast) var(--ls-ease);
  box-shadow: var(--ls-shadow-xs);
}
.orbit-arrow:hover {
  background: #ffffff;
  border-color: var(--ls-blue);
  box-shadow: var(--ls-shadow-md);
}
.orbit-arrow:focus-visible {
  outline: 2px solid var(--ls-blue);
  outline-offset: 2px;
}
.orbit-arrow svg { width: 18px; height: 18px; }

.orbit-dots {
  display: flex;
  gap: 6px;
  padding: 0 12px;
}
.orbit-dot {
  width: 18px; height: 4px;
  border-radius: 999px;
  background: rgba(15, 30, 60, 0.16);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--ls-dur-fast) var(--ls-ease), width var(--ls-dur-normal) var(--ls-ease);
}
.orbit-dot:hover { background: rgba(15, 30, 60, 0.32); }
.orbit-dot.is-active {
  background: var(--ls-blue);
  width: 28px;
  box-shadow: 0 0 10px rgba(0, 113, 227, 0.5);
}

.orbit-counter {
  font-family: var(--ls-font-mono);
  font-size: 12px;
  color: var(--ls-text-tertiary);
  letter-spacing: 0.08em;
  min-width: 60px;
  text-align: center;
}

/* ─── Detail panel ──────────────────────────── */
.orbit-detail {
  position: relative;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 1100px;
  padding: 0 clamp(16px, 3vw, 40px);
  z-index: 2;
}
.orbit-detail-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid var(--ls-border);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(15, 30, 60, 0.1), 0 4px 14px rgba(15, 30, 60, 0.04);
}
.orbit-detail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 0% 0%, hsl(var(--feature-hue-a) 85% 75% / 0.15), transparent 60%);
  pointer-events: none;
}

.orbit-detail-body {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 360px;
}
.orbit-detail-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ls-fs-xs);
  font-weight: var(--ls-fw-semibold);
  letter-spacing: var(--ls-ls-caps);
  text-transform: uppercase;
  color: hsl(var(--feature-hue-a) 75% 42%);
}
.orbit-detail-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.orbit-detail-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: var(--ls-fw-bold);
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ls-text);
}
.orbit-detail-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ls-text-secondary);
  text-wrap: pretty;
  max-width: 48ch;
}

.orbit-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.orbit-metric {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  font-size: 13px;
  color: var(--ls-text);
}
.orbit-metric-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: hsl(var(--feature-hue-a) 80% 55%);
  box-shadow: 0 0 8px hsl(var(--feature-hue-a) 80% 55%);
}

.orbit-cta-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}
.orbit-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--ls-radius-sm);
  font-size: 14px;
  font-weight: var(--ls-fw-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ls-dur-fast) var(--ls-ease), border-color var(--ls-dur-fast) var(--ls-ease), box-shadow var(--ls-dur-fast) var(--ls-ease);
  text-decoration: none;
}
.orbit-cta--primary {
  background: var(--ls-accent);
  color: white;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.orbit-cta--primary:hover { background: var(--ls-accent-hover); }
.orbit-cta--secondary {
  background: var(--ls-surface);
  color: var(--ls-text);
  border-color: var(--ls-border);
  box-shadow: var(--ls-shadow-xs);
}
.orbit-cta--secondary:hover {
  border-color: var(--ls-blue);
  box-shadow: var(--ls-shadow-sm);
}

.orbit-detail-preview {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border-left: 1px solid var(--ls-border);
  background:
    radial-gradient(60% 80% at 100% 100%, hsl(var(--feature-hue-b) 85% 80% / 0.35), transparent 60%),
    linear-gradient(180deg, var(--ls-canvas-mid), var(--ls-bg));
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-detail-preview-inner {
  width: 100%;
  position: relative;
  animation: previewIn 600ms var(--ls-ease) both;
}
@keyframes previewIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ─── Mini-mock styling (light) ──────────────── */
.mock {
  background: #ffffff;
  border: 1px solid var(--ls-border);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  font-size: 11.5px;
  color: var(--ls-text);
  box-shadow: var(--ls-shadow-xs);
}
.mock-row {
  display: flex; align-items: center; gap: 8px;
}
.mock-bar {
  height: 6px; border-radius: 3px;
  background: var(--ls-border);
}
.mock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ls-blue);
  box-shadow: 0 0 6px rgba(0, 113, 227, 0.5);
  flex-shrink: 0;
}
.mock-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--ls-fw-medium);
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  color: var(--ls-text-secondary);
}
.mock-pill--green {
  color: var(--ls-success-text);
  border-color: rgba(52, 199, 89, 0.32);
  background: var(--ls-success-soft);
}
.mock-pill--amber {
  color: var(--ls-warning-text);
  border-color: rgba(255, 159, 10, 0.32);
  background: var(--ls-warning-soft);
}
.mock-pill--red {
  color: #c1372c;
  border-color: rgba(255, 59, 48, 0.32);
  background: var(--ls-danger-soft);
}
.mock-pill--blue {
  color: var(--ls-blue);
  border-color: rgba(0, 113, 227, 0.28);
  background: var(--ls-blue-soft);
}

/* ─── Responsive ────────────────────────────── */
@media (max-width: 960px) {
  .orbit-detail-card {
    grid-template-columns: 1fr;
  }
  .orbit-detail-preview {
    border-left: none;
    border-top: 1px solid var(--ls-border);
    min-height: 280px;
  }
  .orbit-canvas { height: 480px; }
}

@media (max-width: 640px) {
  .orbit-section { padding: 56px 0 72px; }
  .orbit-canvas { height: 440px; }
  .orbit-card { width: 220px; height: 290px; margin: -145px 0 0 -110px; }
  .orbit-core { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .orbit-core-ring { inset: 145px; }
  .orbit-core-ring-2 { inset: 105px; }
  .orbit-core-ring-3 { inset: 55px; }
  .orbit-core-ring-4 { inset: 12px; }
  .orbit-core-label { inset: 145px; }
  .orbit-detail-card { border-radius: 18px; }
}

/* ─── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orbit-card,
  .orbit-section,
  .orbit-bg-beams::before,
  .orbit-bg-beams::after {
    transition: opacity 200ms linear, background 200ms linear;
  }
  .orbit-card.is-rolling { filter: none; }
  .orbit-core-glow,
  .orbit-core-ring-2,
  .orbit-core-ring-3,
  .orbit-core-ring-4 {
    animation: none !important;
  }
  .orbit-particles { display: none; }
}