.hex-group {
  transform-origin: center;
  cursor: pointer;
  opacity: 0;
  animation: fadeInGroup 0.5s ease forwards;
}

@keyframes fadeInGroup {
  to {
    opacity: 1;
  }
}

.hex-group:hover {
  z-index: 10;
}

.hex-path {
  fill: rgba(30, 41, 59, 0.7); /* slate-800 */
  stroke: #38bdf8; /* sky-400 */
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.15));
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  transition:
    fill 0.5s ease,
    stroke 0.5s ease,
    stroke-width 0.5s ease,
    filter 0.5s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  animation: drawHex 1.5s ease forwards;
}

.hex-group:hover .hex-path {
  transform: scale(1.05);
  fill: rgba(56, 189, 248, 0.15);
  stroke: #bae6fd; /* sky-200 */
  stroke-width: 3;
  filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.6));
}

.hex-path.core {
  fill: rgba(14, 165, 233, 0.1); /* sky-500 */
  stroke: #0ea5e9; /* sky-500 */
  stroke-width: 3;
  filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.4));
}

.hex-group:hover .hex-path.core {
  fill: rgba(14, 165, 233, 0.2);
  stroke: #7dd3fc;
}

@keyframes drawHex {
  to {
    stroke-dashoffset: 0;
  }
}

.hex-text {
  fill: #94a3b8; /* slate-400 */
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 1px;
  pointer-events: none;
  transition:
    fill 0.5s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hex-group:hover .hex-text {
  fill: #f8fafc; /* slate-50 */
  transform: scale(1.05);
}

.hex-text.core-text {
  font-size: 16px;
  font-weight: 800;
  fill: #e0f2fe; /* sky-100 */
  letter-spacing: 2px;
}

.icon-scale {
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hex-group:hover .icon-scale {
  transform: scale(1.2);
}

.hex-icon {
  font-family: "Material Symbols Outlined";
  font-size: 32px;
  fill: #38bdf8;
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.5s ease;
  pointer-events: none;
}

.hex-group:hover .hex-icon {
  fill: #ffffff;
}

.hex-icon.core-icon {
  fill: #0ea5e9;
  font-size: 40px;
}

.hex-group:hover .hex-icon.core-icon {
  fill: #ffffff;
}

/* Connecting lines animation */
.connection-line {
  stroke: #0ea5e9;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: flow 15s linear infinite;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}

.hive-container:hover .connection-line {
  opacity: 0.6;
}

@keyframes flow {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Pulse animation for the core */
@keyframes pulse {
  0% {
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(14, 165, 233, 0.7));
  }
  100% {
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.3));
  }
}

.core-pulse {
  animation:
    drawHex 1.5s ease forwards,
    pulse 4s ease-in-out infinite alternate;
}

/* Staggering the entry of groups */
.g-core {
  animation-delay: 0s;
}
.g-1 {
  animation-delay: 0.15s;
}
.g-2 {
  animation-delay: 0.3s;
}
.g-3 {
  animation-delay: 0.45s;
}
.g-4 {
  animation-delay: 0.6s;
}
.g-5 {
  animation-delay: 0.75s;
}
.g-6 {
  animation-delay: 0.9s;
}

.g-core .hex-path {
  animation-delay: 0s;
}
.g-1 .hex-path {
  animation-delay: 0.15s;
}
.g-2 .hex-path {
  animation-delay: 0.3s;
}
.g-3 .hex-path {
  animation-delay: 0.45s;
}
.g-4 .hex-path {
  animation-delay: 0.6s;
}
.g-5 .hex-path {
  animation-delay: 0.75s;
}
.g-6 .hex-path {
  animation-delay: 0.9s;
}