/* atckids/index.css */
/* NATIVE PLATFORM STYLES 
   Note: Tailwind utility classes are handled by the CDN in index.html.
   This file handles high-performance CSS animations and global resets.
*/

:root {
  --bg-dark: #0a0a1a;
  --wire-off: #1e293b;
  --wire-on: #00aeff;
  --wire-glow: rgba(0, 174, 255, 0.6);
  --bulb-on: #fbbf24;
}

/* --- GLOBAL RESETS --- */
body {
  margin: 0;
  background-color: var(--bg-dark);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  overflow: hidden; /* App-like feel */
  user-select: none; /* Prevent text selection */
  -webkit-font-smoothing: antialiased;
}

/* --- SCROLLBARS (For scrolling lists like the App Grid) --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a; 
}
::-webkit-scrollbar-thumb {
  background: #334155; 
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; 
}

/* --- ANIMATIONS: The "Neon Flux" Engine --- */

/* 1. Electron Flow (The moving dashes on wires) */
@keyframes flowPulse {
  0% { stroke-dashoffset: 24; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.electron-flow {
  stroke: #ffffff;
  stroke-width: 3;
  stroke-dasharray: 4 20; /* 4px dot, 20px gap */
  animation: flowPulse 0.8s linear infinite;
  pointer-events: none;
}

/* 2. Wire States */
.wire-active {
  stroke: var(--wire-on);
  filter: drop-shadow(0 0 6px var(--wire-glow));
  transition: stroke 0.1s ease, filter 0.1s ease;
}

.wire-inactive {
  stroke: var(--wire-off);
  transition: stroke 0.2s ease;
}

/* 3. Text Glow (Neon Text) */
.neon-text {
  text-shadow: 0 0 10px rgba(0, 174, 255, 0.5);
}

/* 4. Input Node Interaction */
.input-node circle {
  transition: all 0.2s ease;
}
.input-node:hover circle {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  stroke: #fff;
}

/* 5. Utility Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

/* 6. Glassmorphism Panels */
.glass-panel {
  background: rgba(10, 10, 26, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.1);
}