/* --- CAPABILITY NODES ANIMATION --- */
@keyframes floatNode {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cap-node {
  /* Removed transform from transition to prevent layout shifts */
  transition: opacity 0.4s ease, filter 0.4s ease;
  z-index: 10;
}

/* Apply float to inner content so main scale doesn't conflict */
.cap-node .node-content {
  animation: floatNode 6s ease-in-out infinite;
  will-change: transform;
  /* Use transform for scaling */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Stagger animations for organic feel - Nodes are children of #mobile-caps-carousel now, so indices start at 1 */
.cap-node:nth-child(1) .node-content { animation-delay: 0s; }    /* Node 1 */
.cap-node:nth-child(2) .node-content { animation-delay: 1.5s; }  /* Node 2 */
.cap-node:nth-child(3) .node-content { animation-delay: 0.5s; }  /* Node 3 */
.cap-node:nth-child(4) .node-content { animation-delay: 2s; }    /* Node 4 */
.cap-node:nth-child(5) .node-content { animation-delay: 1s; }    /* Node 5 */
.cap-node:nth-child(6) .node-content { animation-delay: 2.5s; }  /* Node 6 */
.cap-node:nth-child(7) .node-content { animation-delay: 0.8s; }  /* Node 7 */
.cap-node:nth-child(8) .node-content { animation-delay: 2.2s; }  /* Node 8 */

/* Active State (Hover/Focus) */
.cap-node.active {
  z-index: 50;
  opacity: 1 !important;
  /* Removed transform on parent to lock baseline position */
}

.cap-node.active .node-content {
  animation-play-state: paused;
  transform: scale(1.1) translateY(0); /* Combine scale and reset float */
  background: rgba(10, 10, 10, 0.95);
  border-color: rgba(255, 255, 255, 0.6);
  /* Subtle white outer glow + existing shadow */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 0 0 10px rgba(255, 255, 255, 0.1), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* SVG Line Styles */
.flow-line {
  transition: stroke 0.3s ease, stroke-opacity 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

.flow-line.active {
  /* Orange glow for the line */
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.6));
}

/* Muted State (De-emphasized) */
.cap-node.muted {
  opacity: 0.4;
  filter: blur(1px); /* Subtle focus effect */
  transition: opacity 0.4s ease, filter 0.4s ease;
  /* Removed transform on parent */
}

.cap-node.muted .node-content {
    transform: scale(0.95); /* Scale down the content instead */
}

/* --- MOBILE CAROUSEL OVERRIDES --- */
@media (max-width: 768px) {
  #mobile-caps-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Override .cap-node on mobile */
  .cap-node {
    position: relative; /* Remove absolute positioning */
    flex: 0 0 85vw;
    min-width: 85vw;
    max-width: 85vw;
    flex-shrink: 0;
    transform: none !important;
    scroll-snap-align: center;
  }
  
  /* Override .node-content on mobile */
  .cap-node .node-content {
    width: 100%;
    max-width: 100% !important; /* Remove Tailwind max-width constraints */
    transform: none !important;
    animation: none !important; /* Disable floating animation */
  }
}