/* ==========================================
   Hero Animation
========================================== */

/* AI Engine pulse */
.ai-core {
  animation: aiCorePulse 2.8s ease-in-out infinite;
}

@keyframes aiCorePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 18px rgba(45,127,249,.10),
      0 0 60px rgba(45,127,249,.45);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.045);
    box-shadow:
      0 0 0 24px rgba(45,127,249,.14),
      0 0 86px rgba(45,127,249,.68);
  }
}

/* Floating cards - stable */
.ai-node {
  transition:
    box-shadow .3s ease,
    filter .3s ease;
}

.ai-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.node-chat {
  animation: aiNodeFloatTop 6s ease-in-out infinite;
}

.node-auto {
  animation: aiNodeFloatTop 6.6s ease-in-out infinite;
}

.node-filemaker,
.node-dashboard,
.node-dify,
.node-web {
  animation: aiNodeFloatSide 6.4s ease-in-out infinite;
}

.node-filemaker {
  animation-delay: .5s;
}

.node-dashboard {
  animation-delay: 1.1s;
}

.node-dify {
  animation-delay: .8s;
}

.node-web {
  animation-delay: 1.4s;
}

@keyframes aiNodeFloatTop {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}

@keyframes aiNodeFloatSide {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -7px;
  }
}

.ai-node:hover {
  filter: brightness(1.03);
  box-shadow:
    0 20px 48px rgba(10,42,102,.18),
    0 0 28px rgba(45,127,249,.25);
}

/* ==========================================
   Step 13-18: Energy Flow
========================================== */

.ai-core::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 14px rgba(255,255,255,.9),
    0 0 30px rgba(45,127,249,.9);
  opacity: 0;
  animation: aiEnergyPulse 3.6s ease-in-out infinite;
}

@keyframes aiEnergyPulse {
  0% {
    opacity: 0;
    transform: scale(.6);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }

  45% {
    opacity: .75;
    transform: scale(1.35);
  }

  70% {
    opacity: 0;
    transform: scale(1.8);
  }

  100% {
    opacity: 0;
    transform: scale(.6);
  }
}

.ai-node::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(45,127,249,.45);
  opacity: 0;
  pointer-events: none;
  animation: aiNodeSignal 7.2s ease-in-out infinite;
}

.node-chat::before {
  animation-delay: .4s;
}

.node-dify::before {
  animation-delay: 1.2s;
}

.node-web::before {
  animation-delay: 2s;
}

.node-auto::before {
  animation-delay: 2.8s;
}

.node-dashboard::before {
  animation-delay: 3.6s;
}

.node-filemaker::before {
  animation-delay: 4.4s;
}

/* ==========================================
   Step 14-1: AI Engine Orbit Ring
========================================== */

.ai-core::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 2px solid rgba(45,127,249,.22);
  border-top-color: rgba(255,255,255,.85);
  border-right-color: rgba(45,127,249,.75);
  animation: aiOrbitRing 7s linear infinite;
  pointer-events: none;
}

@keyframes aiOrbitRing {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/* ==========================================
   Step 14-2: Sequential Node Active Glow
========================================== */

.ai-node {
  position: absolute;
}

.ai-node::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(45,127,249,.65);
  box-shadow:
    0 0 18px rgba(45,127,249,.45),
    0 0 36px rgba(45,127,249,.18);
  opacity: 0;
  pointer-events: none;
  animation: aiNodeActive 9s ease-in-out infinite;
}

.node-chat::before {
  animation-delay: 0s;
}

.node-filemaker::before {
  animation-delay: 1.2s;
}

.node-dashboard::before {
  animation-delay: 2.4s;
}

.node-dify::before {
  animation-delay: 3.6s;
}

.node-web::before {
  animation-delay: 4.8s;
}

.node-auto::before {
  animation-delay: 6s;
}

@keyframes aiNodeActive {
  0%, 12%, 100% {
    opacity: 0;
    transform: scale(.98);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  28% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes aiNodeSignal {
  0%, 12%, 100% {
    opacity: 0;
    transform: scale(.96);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  28% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* ==========================================
   Step 14-4: SVG Network Lines
========================================== */

.ai-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.network-path {
  fill: none;
  stroke: rgba(45,127,249,.75);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(45,127,249,.55));
}

.ai-core {
  z-index: 20 !important;
}

.ai-node {
  z-index: 15 !important;
}

/* ==========================================
   Step 14-5
   AI Data Flow Animation
========================================== */

/* 通常の線 */
.network-path{
    fill:none;
    stroke:#2d7ff9;
    stroke-width:4;
    stroke-linecap:round;

    stroke-dasharray:12 10;

    animation:networkPulse 3s linear infinite;
}

/* 光が流れる */
.network-path:nth-child(1){ animation-delay:0s; }
.network-path:nth-child(2){ animation-delay:.4s; }
.network-path:nth-child(3){ animation-delay:.8s; }
.network-path:nth-child(4){ animation-delay:1.2s; }
.network-path:nth-child(5){ animation-delay:1.6s; }
.network-path:nth-child(6){ animation-delay:2.0s; }

@keyframes networkPulse{

    0%{

        stroke-dashoffset:0;

        opacity:.35;
    }

    50%{

        opacity:1;
    }

    100%{

        stroke-dashoffset:-44;

        opacity:.35;
    }

}

.data-particle {
  fill: #ffffff !important;
  stroke: rgba(255,255,255,.95) !important;
  stroke-width: 1.5 !important;
  opacity: .88 !important;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.95))
    drop-shadow(0 0 12px rgba(45,127,249,.85))
    drop-shadow(0 0 22px rgba(45,127,249,.55)) !important;
}

/* ==========================================
   Step 15-4: Active Node Highlight
========================================== */

.ai-node.is-active {
  box-shadow:
    0 22px 56px rgba(10,42,102,.20),
    0 0 34px rgba(45,127,249,.42);
  border-color: rgba(45,127,249,.55);
  filter: brightness(1.04);
}

.ai-node.is-active .node-status {
  background: #2d7ff9;
  color: #fff;
}