/* ============================================================
   AZHAR FOOD — NEURALOPS FUTURISTIC ANIMATIONS (neural-anim.css)
   Cyan/blue NeuralOps motif. Respects prefers-reduced-motion.
   ============================================================ */

/* 1. Neural particles canvas */
.neural-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* 2. Scanning line */
[data-scan] { position: relative; overflow: hidden; }
[data-scan].scan-active::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4fd2e8, transparent);
  box-shadow: 0 0 12px #4fd2e8; z-index: 2; pointer-events: none;
  animation: scanLine 3.5s linear infinite;
}
@keyframes scanLine { 0% { top: -2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 102%; opacity: 0; } }

/* 3. Orbit ring */
[data-orbit] { position: relative; }
[data-orbit].orbit-active::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(79,210,232,.4); border-top-color: #4fd2e8;
  animation: orbitSpin 6s linear infinite; pointer-events: none;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* 4. Pulse dots */
[data-pulse] { position: relative; }
[data-pulse].pulse-active::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #4fd2e8; box-shadow: 0 0 10px #4fd2e8; top: 8px; right: 8px;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }

/* 5. Data stream */
[data-stream] { position: relative; overflow: hidden; }
[data-stream].stream-active::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, #4fd2e8, transparent);
  box-shadow: 0 0 10px #4fd2e8; left: 0; animation: streamMove 2.5s linear infinite; pointer-events: none;
}
@keyframes streamMove { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* 6. Gradient border glow */
[data-glow-border] { position: relative; }
[data-glow-border].glow-border-active::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, #4fd2e8, #3d8bff, #7b6cff, #4fd2e8);
  background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderFlow 4s linear infinite; pointer-events: none;
}
@keyframes borderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* 7. Word reveal */
[data-word-reveal] .wr { display: inline-block; opacity: 0; transform: translateY(14px); }
[data-word-reveal].anim-in-view .wr { animation: wordUp .5s cubic-bezier(.16,0,0,1) forwards; }
[data-word-reveal].anim-in-view .wr:nth-child(1){animation-delay:.05s}
[data-word-reveal].anim-in-view .wr:nth-child(2){animation-delay:.12s}
[data-word-reveal].anim-in-view .wr:nth-child(3){animation-delay:.19s}
[data-word-reveal].anim-in-view .wr:nth-child(4){animation-delay:.26s}
[data-word-reveal].anim-in-view .wr:nth-child(5){animation-delay:.33s}
[data-word-reveal].anim-in-view .wr:nth-child(6){animation-delay:.40s}
[data-word-reveal].anim-in-view .wr:nth-child(7){animation-delay:.47s}
[data-word-reveal].anim-in-view .wr:nth-child(8){animation-delay:.54s}
[data-word-reveal].anim-in-view .wr:nth-child(9){animation-delay:.61s}
[data-word-reveal].anim-in-view .wr:nth-child(10){animation-delay:.68s}
@keyframes wordUp { to { opacity: 1; transform: none; } }

/* 8. Radar sweep */
[data-radar] { position: relative; overflow: hidden; }
[data-radar].radar-active::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(79,210,232,.35), transparent 60deg);
  animation: radarSweep 3s linear infinite; pointer-events: none;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }

/* 9. Connecting lines */
[data-connect] { position: relative; }
[data-connect].connect-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #4fd2e8, transparent);
  animation: connectLine 2.5s ease-in-out infinite; pointer-events: none;
}
@keyframes connectLine { 0%,100% { opacity: .2; transform: scaleX(.3); } 50% { opacity: 1; transform: scaleX(1); } }

/* 10. Floating orbs */
[data-orb] { position: relative; }
[data-orb].orb-active::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #4fd2e8, transparent 70%);
  box-shadow: 0 0 16px #4fd2e8; top: 20%; right: 12%;
  animation: orbFloat 5s ease-in-out infinite; pointer-events: none;
}
@keyframes orbFloat { 0%,100% { transform: translateY(0) scale(1); opacity: .7; } 50% { transform: translateY(-18px) scale(1.2); opacity: 1; } }

/* 11. Progress ring */
[data-progress-ring] { position: relative; }
[data-progress-ring].ring-active::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #4fd2e8; border-right-color: #3d8bff;
  animation: ringSpin 2s linear infinite; pointer-events: none;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Pause off-screen */
[data-scan]:not(.anim-in-view)::after,
[data-stream]:not(.anim-in-view)::before,
[data-radar]:not(.anim-in-view)::before,
[data-connect]:not(.anim-in-view)::after,
[data-orb]:not(.anim-in-view)::before,
[data-progress-ring]:not(.anim-in-view)::before,
[data-orbit]:not(.anim-in-view)::before,
[data-pulse]:not(.anim-in-view)::after,
[data-glow-border]:not(.anim-in-view)::before { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-scan]::after, [data-orbit]::before, [data-pulse]::after, [data-stream]::before,
  [data-glow-border]::before, [data-radar]::before, [data-connect]::after, [data-orb]::before,
  [data-progress-ring]::before, [data-word-reveal] .wr { animation: none !important; opacity: 1 !important; transform: none !important; }
  .neural-particles { display: none; }
}