/* Custom Micro-interactions & Animations */

/* Active/Hover states for cards on Desktop */
@media (hover: hover) and (pointer: fine) {
  .timeline-card:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(108, 99, 255, 0.4);
    box-shadow: 0 35px 90px rgba(108, 99, 255, 0.12);
  }

  .timeline-card:hover .card-icon-container {
    transform: scale(1.1) rotate(4deg);
    background: rgba(108, 99, 255, 0.15);
    color: var(--secondary);
  }

  .timeline-card:hover .card-action svg {
    transform: translateX(4px);
  }

  .timeline-card:hover .floating-desc-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* Floating Animations for Icons */
.floating-icon {
  animation: floating-anim 6s ease-in-out infinite alternate;
}

@keyframes floating-anim {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(2px) rotate(-1deg); }
}

/* Pulse on Nodes */
.timeline-node-glow {
  filter: drop-shadow(0 0 8px var(--primary));
  animation: node-glow-anim 2s infinite alternate;
}

@keyframes node-glow-anim {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Scroll Trigger elements will-change */
.gsap-reveal {
  opacity: 0;
  will-change: transform, opacity;
}

/* Magnetic element transitions */
.magnetic-wrap {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}