/* ========================================
   SYNAPSE — Capabilities Page Specific Styles
   ======================================== */

/* Capabilities Hero */
.capabilities-hero {
  position: relative;
}

.capabilities-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 30%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(107, 33, 168, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Bento Grid */
.bento-grid {
  position: relative;
}

.bento-card {
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transition: left 0.7s var(--transition-smooth);
  pointer-events: none;
}

.bento-card:hover::before {
  left: 100%;
}

.bento-card .bento-icon {
  transition: transform 0.4s var(--transition-smooth);
}

.bento-card:hover .bento-icon {
  transform: scale(1.1) rotate(5deg);
}

.bento-card .bento-stats {
  transition: opacity 0.3s;
}

.bento-card:hover .bento-stats {
  opacity: 1;
}

/* Demo Section */
.demo-container {
  transition: box-shadow 0.4s var(--transition-smooth);
}

.demo-container:hover {
  box-shadow: 0 0 60px rgba(0, 240, 255, 0.05);
}

.demo-tab {
  position: relative;
  overflow: hidden;
}

.demo-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--neon-accent);
  transition: all 0.3s var(--transition-smooth);
  transform: translateX(-50%);
}

.demo-tab.active::after,
.demo-tab:hover::after {
  width: 80%;
}

.demo-tab:hover {
  color: var(--text-primary) !important;
}

.demo-input {
  transition: all 0.4s var(--transition-smooth);
}

.demo-output {
  position: relative;
}

.demo-output::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--neon-accent), transparent);
  opacity: 0.5;
}

/* Responsive Bento Grid */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }
  
  .bento-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 250px;
  }
  
  .bento-large {
    grid-column: span 2 !important;
  }
  
  .bento-full {
    grid-column: span 2 !important;
  }
}

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .bento-card {
    grid-column: span 1 !important;
    min-height: auto;
    padding: 2rem !important;
  }
  
  .bento-large,
  .bento-full {
    grid-column: span 1 !important;
  }
  
  .demo-container .demo-content > div > div {
    grid-template-columns: 1fr !important;
  }
}