/* Vanguard layer — gradients, glow, animations on top of base styles.css */

/* Animated aurora backdrop */
.app {
  position: relative;
  isolation: isolate;
}
.app::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 10%, color-mix(in oklch, var(--violet) 16%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 100%, color-mix(in oklch, var(--cyan) 12%, transparent) 0%, transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: aurora 24s ease-in-out infinite alternate;
}
[data-theme="light"] .app::before {
  opacity: 0.45;
}
@keyframes aurora {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, -2%) scale(1.08); }
  66%  { transform: translate(-2%, 3%) scale(0.95); }
  100% { transform: translate(2%, 2%) scale(1.05); }
}

/* Sidebar + topbar become slightly translucent over aurora */
.sidebar, .topbar {
  background: color-mix(in oklch, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.topbar { background: color-mix(in oklch, var(--bg-0) 72%, transparent); }

/* Gradient brand logo — conic, rotating */
.sb-logo {
  background: conic-gradient(from 0deg,
    var(--accent),
    var(--violet),
    var(--cyan),
    var(--amber),
    var(--accent));
  animation: logo-spin 18s linear infinite;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent),
    0 0 24px -4px color-mix(in oklch, var(--accent) 50%, transparent);
}
.sb-logo::after {
  mask: radial-gradient(circle at 30% 30%, #000 35%, transparent 36%);
}
@keyframes logo-spin { to { transform: rotate(360deg); } }

/* Accent primary button — gradient + glow */
.btn.primary {
  background: linear-gradient(135deg,
    var(--accent) 0%,
    color-mix(in oklch, var(--accent) 60%, var(--cyan)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent),
    0 6px 20px -8px color-mix(in oklch, var(--accent) 80%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 20%, transparent);
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms;
}
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent),
    0 10px 28px -8px color-mix(in oklch, var(--accent) 80%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
  filter: none;
}

/* Card shimmer on hover */
.card {
  position: relative;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms, box-shadow 240ms;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    transparent 40%,
    color-mix(in oklch, var(--accent) 6%, transparent) 55%,
    transparent 70%);
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 32px -16px oklch(0 0 0 / 0.4);
}
.card:hover::after { opacity: 1; }

/* Kanban cards: lift + subtle gradient border on hover */
button.card { cursor: pointer; }
button.card:hover {
  transform: translateY(-2px);
}

/* Sidebar item — animated gradient indicator */
.sb-item { position: relative; transition: color 140ms; }
.sb-item.active .sb-ind {
  background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 50%, var(--violet)));
  box-shadow: 0 0 10px -2px var(--accent);
}
.sb-item.active {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--accent) 10%, transparent) 0%,
    transparent 80%);
}

/* Topbar search — inner glow on focus */
.search { transition: border-color 180ms, box-shadow 180ms; }
.search:hover { border-color: var(--border-strong); }
.search:focus-within {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}

/* Status dots glow by state */
.status.progress .s-dot { box-shadow: 0 0 8px -1px var(--status-progress); }
.status.done .s-dot     { box-shadow: 0 0 8px -1px var(--status-done); }
.status.review .s-dot   { box-shadow: 0 0 8px -1px var(--status-review); }
.status.blocked .s-dot  { box-shadow: 0 0 8px -1px var(--status-blocked); }

/* Chips — gradient fills for states */
.chip { backdrop-filter: blur(6px); }

/* Priority urgent — gentle pulse */
.priority-pulse {
  animation: pulse-urgent 1.8s ease-in-out infinite;
}
@keyframes pulse-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Avatar — gradient ring for online */
.avatar { position: relative; box-shadow: inset 0 0 0 1px color-mix(in oklch, white 10%, transparent); }

/* Page transitions */
.main > * {
  animation: fade-slide 260ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes fade-slide {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered list items */
.stagger > * { animation: fade-slide 320ms cubic-bezier(0.2, 0, 0, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 110ms; }
.stagger > *:nth-child(5) { animation-delay: 140ms; }
.stagger > *:nth-child(6) { animation-delay: 170ms; }
.stagger > *:nth-child(7) { animation-delay: 200ms; }
.stagger > *:nth-child(8) { animation-delay: 230ms; }

/* Hero greeting — gradient text */
.hero-title {
  background: linear-gradient(120deg,
    var(--fg-0) 0%,
    var(--fg-0) 40%,
    color-mix(in oklch, var(--accent) 70%, var(--fg-0)) 65%,
    color-mix(in oklch, var(--violet) 80%, var(--fg-0)) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Stat counters — editorial numerals */
.stat-num {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--fg-0) 0%, color-mix(in oklch, var(--fg-0) 70%, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Segmented pill — animated selection glow */
.segmented button.on {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bg-3) 100%, transparent),
    color-mix(in oklch, var(--accent) 12%, var(--bg-3)));
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.2),
    inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
}

/* Icon button — ripple on click (CSS-only pulse) */
.icon-btn { transition: background 140ms, color 140ms, transform 120ms; }
.icon-btn:active { transform: scale(0.92); }

/* Kanban column header counter — subtle badge */
.col-badge {
  background: color-mix(in oklch, var(--accent) 16%, var(--bg-2));
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Burndown actual line — glow */
.burndown-actual { filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 60%, transparent)); }

/* Velocity bars — gradient */
.velo-bar {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 90%, transparent) 0%,
    color-mix(in oklch, var(--accent) 30%, var(--bg-3)) 100%);
  box-shadow: 0 0 12px -3px var(--accent);
}
.velo-bar.dim {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: none;
}

/* Roadmap bar — gradient fill with progress wipe */
.roadmap-bar {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.roadmap-bar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--proj, var(--accent)) 55%, transparent) 0%,
    color-mix(in oklch, var(--proj, var(--accent)) 18%, transparent) 100%);
  opacity: 0.9;
  mix-blend-mode: screen;
}

/* Gradient divider */
.grad-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-strong) 20%,
    var(--border-strong) 80%,
    transparent 100%);
}

/* Command palette — glassmorphism */
.palette {
  background: color-mix(in oklch, var(--bg-elev) 85%, transparent);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--border-strong));
  box-shadow:
    0 24px 80px -20px oklch(0 0 0 / 0.6),
    0 0 0 1px color-mix(in oklch, var(--accent) 10%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
  animation: palette-in 240ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.palette-item { transition: background 120ms, color 120ms, transform 100ms; }
.palette-item.sel {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--accent) 14%, transparent),
    transparent);
}

/* Inbox panel — glass */
.inbox-panel {
  background: color-mix(in oklch, var(--bg-1) 82%, transparent);
  backdrop-filter: blur(18px);
}

/* Tweaks panel — glass */
.tweaks {
  background: color-mix(in oklch, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border-strong));
  box-shadow:
    0 20px 60px -20px oklch(0 0 0 / 0.5),
    0 0 0 1px color-mix(in oklch, var(--accent) 10%, transparent);
}

/* Hint bar — glass */
.hint-bar {
  background: color-mix(in oklch, var(--bg-elev) 80%, transparent);
  backdrop-filter: blur(16px);
}

/* Row hover — subtle gradient sweep */
.row { transition: background 160ms; position: relative; }
.row:hover {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--accent) 6%, transparent) 0%,
    var(--bg-1) 20%);
}

/* Avatar stack — gradient bg (override flat) */
.avatar {
  transition: transform 140ms;
}
.avatar:hover { transform: translateY(-1px) scale(1.06); z-index: 2; }

/* Notification dot pulse */
.icon-btn .dot {
  animation: dot-pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 8px -1px var(--accent);
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.65; }
}

/* Gradient progress track */
.grad-progress {
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 60%, var(--violet)) 100%);
  box-shadow: 0 0 10px -3px var(--accent);
}

/* Subtle scan line on data cards */
.scan::before {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 8%, transparent), transparent);
  animation: scan 6s linear infinite;
  pointer-events: none;
}
@keyframes scan {
  to { left: 150%; }
}

/* Issue detail hero — spotlight */
.issue-spotlight {
  position: relative;
}
.issue-spotlight::before {
  content: "";
  position: absolute;
  top: -40px; left: -40px; right: -40px; height: 200px;
  background: radial-gradient(ellipse 60% 100% at 20% 50%,
    color-mix(in oklch, var(--accent) 10%, transparent) 0%,
    transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Tag / chip gradient on hover */
.chip:hover, .tag:hover {
  border-color: var(--border-strong);
  background: color-mix(in oklch, var(--bg-3) 100%, transparent);
}

/* Kanban column boundary glow on drop target sim */
.kanban-col {
  position: relative;
}

/* Make topbar breadcrumb current accent on active */
.breadcrumbs .current {
  background: linear-gradient(90deg, var(--fg-0), color-mix(in oklch, var(--accent) 50%, var(--fg-0)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}