/* ============================================================
   Tech Effects — Visual polish, animations, particles
   ============================================================ */

/* ---- Animated dot grid background ---- */
.tech-grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--c-accent-glow) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: grid-drift 60s linear infinite;
}
@keyframes grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ---- Scan line effect ---- */
.tech-scanlines::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
  );
  opacity: 0.3;
}

/* ---- Glass morphism panels ---- */
.glass {
  background: linear-gradient(135deg, rgba(22,24,41,0.85), rgba(30,33,64,0.6));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--c-border-light);
}
.glass-light {
  background: linear-gradient(135deg, rgba(30,33,64,0.5), rgba(22,24,41,0.4));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- Glow on hover ---- */
.hover-glow { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.hover-glow:hover {
  box-shadow: 0 0 20px var(--c-accent-glow), 0 0 40px rgba(0,212,255,0.05);
  border-color: var(--c-accent);
}

/* ---- Neon text ---- */
.neon-text {
  color: var(--c-accent);
  text-shadow: 0 0 10px var(--c-accent-glow), 0 0 30px var(--c-accent-glow);
}

/* ---- Data flow particles (keyframes) ---- */
@keyframes particle-flow {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-200px) translateX(40px); opacity: 0; }
}
.particle {
  position: fixed; pointer-events: none; z-index: 0;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 6px var(--c-accent-glow);
  animation: particle-flow 6s ease-in-out infinite;
}

/* ---- Pulsing border ---- */
@keyframes border-pulse {
  0%, 100% { border-color: var(--c-border); }
  50%      { border-color: var(--c-accent); box-shadow: 0 0 8px var(--c-accent-glow); }
}
.border-pulse {
  animation: border-pulse 2s ease-in-out infinite;
}

/* ---- Shimmer loading ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg,
    var(--c-bg-surface) 0%, var(--c-bg-hover) 40%, var(--c-bg-surface) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ---- Status pulse ring ---- */
.status-ring {
  position: relative;
}
.status-ring::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--c-accent);
  animation: ring-pulse 1.5s ease-out infinite;
}
@keyframes ring-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---- Hexagon agent node ---- */
.hex-node {
  width: 48px; height: 55px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.hex-node:hover { transform: scale(1.1); }
.hex-node.active {
  box-shadow: 0 0 16px var(--c-accent-glow-strong);
  animation: hex-breathe 2s ease-in-out infinite;
}
@keyframes hex-breathe {
  0%, 100% { box-shadow: 0 0 8px var(--c-accent-glow); }
  50%      { box-shadow: 0 0 24px var(--c-accent-glow-strong); }
}

/* ---- Toast slide-in ---- */
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast-enter { animation: slide-in-right 0.3s ease-out; }

/* ---- Fade transitions for panels ---- */
.panel-fade-enter-active, .panel-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.panel-fade-enter-from, .panel-fade-leave-to {
  opacity: 0; transform: translateY(8px);
}

/* ---- Tab indicator glow ---- */
.tab-glow {
  position: relative;
}
.tab-glow::after {
  content: ''; position: absolute; bottom: 0; left: 25%; right: 25%; height: 2px;
  background: var(--c-accent); border-radius: 1px;
  box-shadow: 0 0 8px var(--c-accent-glow);
  opacity: 0; transition: opacity 0.3s;
}
.tab-glow:hover::after, .tab-glow.active::after { opacity: 1; }

/* ---- Dark mode enhanced ---- */
[data-theme="dark"] .glass { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
[data-theme="light"] .glass { box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

/* ---- Cursor trail (subtle) ---- */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent-glow) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

/* ---- Mobile optimizations ---- */
@media (max-width: 768px) {
  .glass { backdrop-filter: blur(10px); }
  .tech-scanlines::after { opacity: 0.15; }
  .tech-grid-bg { background-size: 20px 20px; }
}