/* ==========================================================================
   ANIMATIONS CSS — PRANAVANATHAN M PORTFOLIO
   High-end futuristic keyframes and micro-interactions
   ========================================================================== */

/* Status Dot Pulse */
@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Center Node Core Breathing Glow */
@keyframes pulse-center {
  0%, 100% {
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.4), inset 0 0 20px rgba(0, 229, 255, 0.25);
    border-color: rgba(0, 229, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 55px rgba(0, 229, 255, 0.65), inset 0 0 30px rgba(56, 189, 248, 0.45);
    border-color: #FFFFFF;
  }
}

/* Orbit Node Gentle Floating */
@keyframes float-node {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.orbit-node:nth-child(2n) {
  animation: float-node 5s ease-in-out infinite;
}

.orbit-node:nth-child(2n+1) {
  animation: float-node 6s ease-in-out infinite 1s;
}

/* Data Flow Stroke Dash Animation */
@keyframes data-flow {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.data-flow-line {
  stroke-dasharray: 4, 8;
  animation: data-flow 1.5s linear infinite;
}

/* Ambient Radial Glow Drifting */
@keyframes glow-drift-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 30px) scale(1.08);
  }
}

@keyframes glow-drift-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, -40px) scale(1.12);
  }
}

.ambient-glow-1 {
  animation: glow-drift-1 14s ease-in-out infinite;
}

.ambient-glow-2 {
  animation: glow-drift-2 18s ease-in-out infinite;
}

/* Holographic Card Sheen */
.holographic-sheen {
  position: relative;
  overflow: hidden;
}

.holographic-sheen::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 60%
  );
  transform: rotate(25deg) translateY(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.holographic-sheen:hover::after {
  transform: rotate(25deg) translateY(100%);
}

/* Typewriter Cursor Blink */
@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background-color: var(--accent-cyan);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink-caret 0.9s infinite;
}

/* Sequential Pipeline Glowing Wave */
@keyframes pipeline-glow {
  0% {
    border-color: var(--border-subtle);
    box-shadow: none;
    color: var(--text-secondary);
  }
  30% {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
    color: #FFFFFF;
    background: rgba(0, 229, 255, 0.1);
  }
  100% {
    border-color: var(--border-subtle);
    box-shadow: none;
    color: var(--text-secondary);
  }
}

/* Terminal Scanline */
.scanline-effect {
  position: relative;
}

.scanline-effect::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 2;
  background-size: 100% 3px, 4px 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* Diagram Connector Pulse */
@keyframes connector-pulse-anim {
  0% {
    left: 0%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.connector-pulse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), #FFFFFF);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: connector-pulse-anim 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Waveform Bars Jump */
@keyframes wave-jump {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.mockup-waveform .bar {
  animation: wave-jump 1.2s ease-in-out infinite;
}

.mockup-waveform .bar.b1 { animation-delay: 0.1s; }
.mockup-waveform .bar.b2 { animation-delay: 0.3s; }
.mockup-waveform .bar.b3 { animation-delay: 0.5s; }
.mockup-waveform .bar.b4 { animation-delay: 0.2s; }
.mockup-waveform .bar.b5 { animation-delay: 0.6s; }
.mockup-waveform .bar.b6 { animation-delay: 0.4s; }
.mockup-waveform .bar.b7 { animation-delay: 0.7s; }
.mockup-waveform .bar.b8 { animation-delay: 0.2s; }
.mockup-waveform .bar.b9 { animation-delay: 0.5s; }
.mockup-waveform .bar.b10 { animation-delay: 0.8s; }
.mockup-waveform .bar.b11 { animation-delay: 0.3s; }
.mockup-waveform .bar.b12 { animation-delay: 0.6s; }

/* Diagram Final Step Pulse */
@keyframes step-highlight-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    border-color: rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
    border-color: var(--accent-emerald);
  }
}

.diagram-step.highlight .step-node {
  animation: step-highlight-pulse 3s infinite ease-in-out;
}