/* simlico — Mission Control Design System */

/* ── Reset & Base ── */
[x-cloak] { display: none !important; }
[x-ref="logBox"] { scroll-behavior: smooth; }

/* ── HTMX transitions ── */
.htmx-swapping { opacity: 0; transition: opacity 0.15s ease-out; }
.htmx-added { animation: htmx-fade-in 0.25s ease-out; }
@keyframes htmx-fade-in { from { opacity: 0; } to { opacity: 1; } }

:root {
  --bg-base: #0a0a0b;
  --bg-surface: #111113;
  --bg-card: #16161a;
  --bg-elevated: #1e1e22;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #63636e;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-glow: rgba(59, 130, 246, 0.25);
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark mode only — light mode removed */

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Typography ── */
.font-display { font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.font-mono { font-family: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Card System ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--border-hover);
}
.card.card-glass {
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
}
.card.card-glass:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12);
}
.card-interactive:hover {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.3);
}
.card-glow:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.06);
}

/* ── Surface layers ── */
.surface-base { background: var(--bg-base); }
.surface { background: var(--bg-surface); }
.surface-card { background: var(--bg-card); }
.surface-elevated { background: var(--bg-elevated); }

/* ── Borders ── */
.border-subtle { border-color: var(--border); }
.border-subtle-hover:hover { border-color: var(--border-hover); }

/* ── Sidebar ── */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
}
.sidebar-link {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}
.sidebar-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.sidebar-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Step indicator ── */
.step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: all 0.2s ease;
}
.step-dot.pending {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.step-dot.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}
.step-dot.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.step-line {
  width: 2px;
  background: var(--border);
  transition: background 0.3s ease;
}
.step-line.completed {
  background: rgba(34, 197, 94, 0.3);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  cursor: pointer; border: none;
  line-height: 1.4;
}
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-purple:hover {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.25), 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-purple:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.06);
}
.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}
.btn-success {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.btn-success:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
}

/* ── Input/Form ── */
.input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 12px;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  width: 100%;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder {
  color: var(--text-muted);
}

/* ── Custom Select ── */
select,
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 7px 36px 7px 12px;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
select:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select:hover,
.select:hover {
  border-color: var(--border-hover);
}
select option {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 8px;
}
select option:disabled {
  color: var(--text-muted);
}

/* ── File input styling ── */
input[type="file"] {
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
}
input[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* ── Upload zone ── */
.upload-zone {
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: var(--bg-surface);
  transition: all 0.2s ease;
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Badge system ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 500;
  line-height: 20px;
}
.badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; }
.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; }
.badge-amber { background: rgba(245,158,11,0.12); color: #fbbf24; }
.badge-red { background: rgba(239,68,68,0.12); color: #f87171; }
.badge-purple { background: rgba(168,85,247,0.12); color: #c084fc; }
.badge-orange { background: rgba(249,115,22,0.12); color: #fb923c; }
.badge-cyan { background: rgba(6,182,212,0.12); color: #22d3ee; }
.badge-rose { background: rgba(244,63,94,0.12); color: #fb7185; }
.badge-violet { background: rgba(139,92,246,0.12); color: #a78bfa; }
.badge-emerald { background: rgba(16,185,129,0.12); color: #34d399; }
.badge-gray { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

/* ── Exception donut chart ── */
/* Donut chart — smooth anti-aliased rendering */
.exc-donut { shape-rendering: geometricPrecision; }

/* ── Knob dials (Controller Intelligence) ── */
.ci-knob { filter: drop-shadow(0 0 8px rgba(139,92,246,0.15)); }
.ci-knob path, .ci-knob line, .ci-knob circle { transition: all 0.6s ease; }

/* ── Stat card ── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* stat-card accent bar removed — monochrome */
.stat-value {
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

/* ── Terminal / Log ── */
.terminal {
  background: #0c0c0e;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #a1a1aa;
  padding: 16px;
  overflow: auto;
}
.terminal .log-stage { color: #60a5fa; font-weight: 600; }
.terminal .log-warn { color: #fbbf24; }
.terminal .log-error { color: #f87171; }
.terminal .log-debug { color: #63636e; }
.terminal .log-success { color: #4ade80; }

/* ── Pipeline stage indicators ── */
.stage-indicator {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: all 0.3s ease;
}
.stage-indicator.active {
  border-color: var(--accent-glow);
  background: var(--accent-soft);
}
.stage-indicator.completed {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.05);
}
.stage-indicator.error {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Pulse dot */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-ring 1.5s ease-out infinite;
}

/* ── Animations ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes count-pop {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.anim-fade-up {
  animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.anim-fade-in {
  animation: fade-in 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.anim-slide-in {
  animation: slide-in-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
.anim-count {
  animation: count-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.anim-bar {
  transform-origin: left center;
  animation: bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}

/* ── Drag-drop pulse ── */
@keyframes drop-pulse {
  from { border-color: rgba(59,130,246,0.3); }
  to   { border-color: rgba(59,130,246,0.6); }
}
.upload-zone.dragover {
  animation: drop-pulse 0.8s ease-in-out infinite alternate;
}

/* ── Status dots ── */
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.status-dot.running {
  background: var(--accent);
  animation: pulse-ring 2s ease-in-out infinite;
}
.status-dot.success { background: var(--success); }
.status-dot.error { background: var(--error); }
.status-dot.warning { background: var(--warning); }
.status-dot.idle { background: var(--text-muted); }

/* ── Table ── */
.table-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}
.table-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ── Selection cards (job type, workflow, theme) ── */
.selection-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.selection-card:hover {
  border-color: var(--border-hover);
}
.selection-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* ── Toast system ── */
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--error); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--accent); }

/* ── Modal ── */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}

/* ── Progress bars ── */
.progress-track {
  background: var(--bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  border-radius: 9999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-fade-in, .anim-slide-in, .anim-count, .anim-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .spinner { animation: none !important; }
  .pulse-dot { animation: none !important; }
  .status-dot.running { animation: none !important; }
}

/* ── Glow accent for key UI elements ── */
.glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
.glow-green { box-shadow: 0 0 20px rgba(34, 197, 94, 0.1); }

/* ── Color-matched subtle glows ── */
.glow-emerald { box-shadow: 0 0 12px rgba(16, 185, 129, 0.15); }
.glow-rose    { box-shadow: 0 0 12px rgba(251, 113, 133, 0.15); }
.glow-red     { box-shadow: 0 0 12px rgba(239, 68, 68, 0.15); }
.glow-amber   { box-shadow: 0 0 12px rgba(245, 158, 11, 0.15); }
.glow-purple  { box-shadow: 0 0 12px rgba(167, 139, 246, 0.15); }
.glow-cyan    { box-shadow: 0 0 12px rgba(34, 211, 238, 0.15); }
.glow-orange  { box-shadow: 0 0 12px rgba(249, 115, 22, 0.15); }
.glow-violet  { box-shadow: 0 0 12px rgba(139, 92, 246, 0.15); }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Aceternity / Shadcn inspired
   ═══════════════════════════════════════════════════════════════ */

/* ── Dot Grid Background ──────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  will-change: auto; /* Don't promote to compositor — static layer */
}
body > * { position: relative; z-index: 1; }

/* ── Gradient Mesh Blob (hero sections) ───────────────────────── */
.gradient-blob {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.gradient-blob.blue { background: #3b82f6; }
.gradient-blob.purple { background: #8b5cf6; }
.gradient-blob.green { background: #22c55e; }

/* ── Cursor Spotlight on Cards ────────────────────────────────── */
[data-spotlight] {
  position: relative;
  overflow: hidden;
}
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    350px circle at var(--spot-x, -999px) var(--spot-y, -999px),
    rgba(255, 255, 255, 0.03),
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 1;
}
[data-spotlight]:hover::after {
  opacity: 1;
}

/* ── 3D Tilt Cards ────────────────────────────────────────────── */
[data-tilt] {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* ── Animated Gradient Border — REMOVED (too flashy) ── */

/* ── Gradient Text ────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Text Shimmer — warm spot that slowly drifts across ───────── */
.text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.42) 25%,
    rgba(255,255,255,0.18) 50%
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 10s ease-in-out infinite alternate;
}
@keyframes text-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Tile Icon Hover Animations ───────────────────────────────── */
@keyframes icon-spin { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(60deg); } }
@keyframes icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes icon-rays { 0%, 100% { filter: drop-shadow(0 0 0px currentColor); } 50% { filter: drop-shadow(0 0 4px currentColor); } }
@keyframes icon-grow { 0% { transform: scaleY(0.7); transform-origin: bottom; } 50% { transform: scaleY(1.1); } 100% { transform: scaleY(1); } }
@keyframes icon-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }
@keyframes icon-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes icon-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes icon-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }

.group:hover .icon-anim-spin { animation: icon-spin 0.8s ease-in-out; }
.group:hover .icon-anim-pulse { animation: icon-pulse 0.6s ease-in-out; }
.group:hover .icon-anim-rays { animation: icon-rays 0.8s ease-in-out; }
.group:hover .icon-anim-grow { animation: icon-grow 0.6s ease-in-out; }
.group:hover .icon-anim-wiggle { animation: icon-wiggle 0.5s ease-in-out; }
.group:hover .icon-anim-bounce { animation: icon-bounce 0.5s ease-in-out; }
.group:hover .icon-anim-slide { animation: icon-slide 0.4s ease-in-out; }
.group:hover .icon-anim-heartbeat { animation: icon-heartbeat 0.8s ease-in-out; }

/* ── Logo Glow Pulse ──────────────────────────────────────────── */
@keyframes logo-glow {
  0%   { opacity: 0.04; transform: scale(1.4); }
  50%  { opacity: 0.12; transform: scale(1.6); }
  100% { opacity: 0.06; transform: scale(1.5); }
}

/* ── Beam Rotate (from top center point) ──────────────────────── */
@keyframes beam-rotate {
  0%   { transform: translateX(-50%) rotate(-25deg); }
  100% { transform: translateX(-50%) rotate(25deg); }
}

/* ── Animated Grid Drift ──────────────────────────────────────── */
@keyframes grid-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}

/* ── Scroll Reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Floating Tooltip ─────────────────────────────────────────── */
.floating-tip {
  position: fixed;
  z-index: 9999;
  background: #1e1e22;
  border: 1px solid rgba(255,255,255,0.08);
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.floating-tip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Particle Burst ───────────────────────────────────────────── */
@keyframes particle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.particle {
  position: fixed;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: particle-fly 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Confetti Celebration ─────────────────────────────────────── */
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(-20vh) translateX(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(105vh) translateX(var(--drift)) rotate(720deg); }
}
.confetti {
  position: fixed;
  top: 0;
  width: 6px; height: 6px;
  border-radius: 1px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--fall-delay, 0s);
}

/* ── Upload Zone Pulse Rings ──────────────────────────────────── */
@keyframes radar-pulse {
  0% { transform: scale(0.8); opacity: 0.3; }
  100% { transform: scale(1.6); opacity: 0; }
}
.upload-zone.uploading-state::before,
.upload-zone.uploading-state::after {
  content: '';
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  pointer-events: none;
}
.upload-zone.uploading-state::before {
  animation: radar-pulse 2s ease-out infinite;
}
.upload-zone.uploading-state::after {
  animation: radar-pulse 2s ease-out infinite 0.5s;
}

/* ── Upload Arrow Animation ───────────────────────────────────── */
@keyframes upload-arrow {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 1; }
}
.anim-upload-arrow {
  animation: upload-arrow 1.5s ease-in-out infinite;
}

/* ── Active Step Breathing Glow ───────────────────────────────── */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.4); }
}
.step-dot.active {
  animation: breathe 2s ease-in-out infinite;
}

/* ── Network Topology — subtle glowing connections ────────────── */
@keyframes topo-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes topo-node-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(59,130,246,0.15); }
  50%      { box-shadow: 0 0 8px rgba(59,130,246,0.3); }
}
.topo-line-v {
  background: rgba(59,130,246,0.18);
  box-shadow: 0 0 8px rgba(59,130,246,0.12), 0 0 3px rgba(59,130,246,0.2);
  animation: topo-breathe 6s ease-in-out infinite;
}
.topo-line-h {
  background: rgba(59,130,246,0.18);
  box-shadow: 0 0 8px rgba(59,130,246,0.12), 0 0 3px rgba(59,130,246,0.2);
  animation: topo-breathe 6s ease-in-out infinite;
}
.topo-node {
  background: rgba(59,130,246,0.35);
  box-shadow: 0 0 8px rgba(59,130,246,0.25), 0 0 3px rgba(59,130,246,0.3);
  animation: topo-node-breathe 6s ease-in-out infinite;
}
.topo-card {
  border-color: var(--border, rgba(255,255,255,0.06));
  background: rgba(255,255,255,0.02);
  transition: all 0.3s ease;
}
.topo-card.highlighted {
  border-color: rgba(59,130,246,0.3);
  background: rgba(59,130,246,0.06);
  box-shadow: 0 0 12px rgba(59,130,246,0.1);
}
.topo-card.dimmed {
  opacity: 0.25;
}

/* ── Topology LAN color tints (CSS vars for Alpine :style) ──── */
:root {
  --topo-blue-border: rgba(59,130,246,0.15);
  --topo-blue-bg: rgba(59,130,246,0.04);
  --topo-emerald-border: rgba(16,185,129,0.15);
  --topo-emerald-bg: rgba(16,185,129,0.04);
  --topo-violet-border: rgba(139,92,246,0.15);
  --topo-violet-bg: rgba(139,92,246,0.04);
  --topo-amber-border: rgba(245,158,11,0.15);
  --topo-amber-bg: rgba(245,158,11,0.04);
  --topo-rose-border: rgba(244,63,94,0.15);
  --topo-rose-bg: rgba(244,63,94,0.04);
  --topo-cyan-border: rgba(6,182,212,0.15);
  --topo-cyan-bg: rgba(6,182,212,0.04);
}

/* Pulsing dot on site nodes */
@keyframes wire-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}
.topo-wire-pulse {
  animation: wire-pulse 3s ease-in-out infinite;
}

/* ── Checkmark Morph ──────────────────────────────────────────── */
@keyframes check-draw {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
.step-dot.completed svg {
  stroke-dasharray: 20;
  animation: check-draw 0.4s ease forwards;
}

/* ── Button Press Scale ───────────────────────────────────────── */
.btn {
  transition: all 0.15s ease, transform 0.1s ease;
}
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* ── Selection Card — Clean selected state ─────────────────────── */
.selection-card {
  position: relative;
  overflow: hidden;
}
.selection-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 0 24px rgba(59, 130, 246, 0.06);
}

/* ── Stage Indicator — Enhanced with glow ─────────────────────── */
.stage-indicator.active {
  border-color: transparent;
  background: var(--accent-soft);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1), inset 0 0 20px rgba(59, 130, 246, 0.03);
}
.stage-indicator.completed {
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.08);
}

/* ── Success Pulse Ring (pipeline complete) ───────────────────── */
@keyframes success-ring {
  0% { transform: scale(0.8); opacity: 0.8; border-color: rgba(34, 197, 94, 0.6); }
  100% { transform: scale(2.5); opacity: 0; border-color: rgba(34, 197, 94, 0); }
}
.success-pulse {
  position: relative;
}
.success-pulse::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  animation: success-ring 1.5s ease-out forwards;
}

/* ── Shimmer Loading Effect ───────────────────────────────────── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

/* ── Enhanced Stat Card — Glow on hover ───────────────────────── */
.stat-card {
  transition: border-color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* ── Donut Chart ─────────────────────────────────────────────── */
.exc-donut circle { pointer-events: none; }

/* ── Anomaly Card Shake ───────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.anomaly-error {
  animation: shake 0.4s ease-in-out;
}

/* ── Terminal Enhanced ────────────────────────────────────────── */
.terminal {
  background: linear-gradient(180deg, #0c0c0e 0%, #0a0a0c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
}
.terminal::before {
  content: '● ● ●';
  display: block;
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.1);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.terminal-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Terminal scrollbar styling ───────────────────────────────── */
.terminal-scroll::-webkit-scrollbar {
  width: 6px;
}
.terminal-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.terminal-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.terminal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}

/* ── Terminal bounce-in ──────────────────────────────────────── */
@keyframes terminal-bounce {
  0%   { opacity: 0; transform: translateY(-6px); }
  50%  { opacity: 1; transform: translateY(3px); }
  70%  { transform: translateY(-1.5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.terminal-enter {
  animation: terminal-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.terminal-bounce {
  animation: terminal-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Noise Texture — DISABLED for performance ── */

/* ── Progress Ring (circular) ─────────────────────────────────── */
.progress-ring circle {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reduced Motion Override ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none !important; }
  [data-spotlight]::after { display: none !important; }
  [data-tilt] { transition: none !important; }
  .gradient-border::before { animation: none !important; }
  .selection-card.selected::before { animation: none !important; }
  .step-dot.active { animation: none !important; }
  .confetti, .particle { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .shimmer::after { display: none !important; }
  .gradient-text { animation: none !important; }
  svg circle[stroke]:hover { filter: none !important; }
}