/* 
 * Header Animation Styles
 * Inspired by ndkstmat.manus.space
 */

.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--primary-bg);
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-visual {
  position: relative;
  z-index: 5;
}

.cube-container {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent-blue);
  opacity: 0.7;
  background-color: rgba(48, 80, 238, 0.05);
}

.cube-face:nth-child(1) { transform: translateZ(100px); }
.cube-face:nth-child(2) { transform: rotateY(180deg) translateZ(100px); }
.cube-face:nth-child(3) { transform: rotateY(90deg) translateZ(100px); }
.cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); }
.cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(100px); }
.cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.node {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: var(--accent-blue);
  border-radius: 50%;
  opacity: 0.7;
}

.connection {
  position: absolute;
  height: 1px;
  background-color: var(--accent-blue);
  opacity: 0.3;
  transform-origin: 0 0;
  z-index: 0;
}

/* Mouse cursor animation */
.cursor-follower {
  position: fixed;
  width: 30px;
  height: 30px;
  background: rgba(48, 80, 238, 0.2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  transform: translate(-50%, -50%) scale(1);
}

.cursor-follower.active {
  transform: translate(-50%, -50%) scale(1.5);
  background: rgba(48, 80, 238, 0.3);
}

.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--accent-blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cube-container {
    display: none;
  }
}