/* Decorative layers stay behind content and never intercept input. */
.cyber-network {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* Quiet center preserves readability; network is strongest at the edges. */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.38) 10%, #000 75%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.38) 10%, #000 75%);
}
.project-cs-hero__content { z-index: 2; }
/* Section backgrounds remain below the network; readable content stays above it. */
body > section > .main-container,
.project-details__content,
.main-footer > .main-container {
  position: relative;
  z-index: 2;
}
.cyber-reticle {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  color: #7C99FF;
  transition: opacity 160ms ease;
}
.cyber-reticle::before,
.cyber-reticle::after {
  content: '';
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cyber-reticle::before {
  opacity: 0.9;
  box-shadow: 0 0 16px rgba(65,105,225,0.3), inset 0 0 9px rgba(65,105,225,0.12);
  transition: transform 200ms ease;
}
.cyber-reticle::after {
  opacity: 0;
  animation: cyber-radar-pulse 2.4s ease-out infinite;
  animation-play-state: paused;
}
.cyber-reticle.is-visible { opacity: 1; }
.cyber-reticle.is-visible::after { animation-play-state: running; }
.cyber-reticle.is-target { color: #ffca1a; }
.cyber-reticle.is-target::before { transform: scale(1.3); }
@keyframes cyber-radar-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}
@media (max-width: 600px) {
  .cyber-network { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .cyber-reticle { display: none; }
  .cyber-reticle::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-hero__content { animation: none; }
  .home-hero .mouse::before { animation: none; }
}