@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(.5deg); }
}

@keyframes heroPan {
  0%, 100% { background-position: 50% 50%; filter: saturate(1) brightness(1); }
  50% { background-position: 51.5% 48.5%; filter: saturate(1.04) brightness(1.025); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 68px 68px, 68px 68px; }
}

@keyframes lightPulse {
  0%, 100% { opacity: .66; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes hologramFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes scanDown {
  0% { transform: translateY(-140%); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: .85; }
  100% { transform: translateY(460%); opacity: 0; }
}

@keyframes hologramFlicker {
  0%, 8%, 11%, 48%, 51%, 100% { opacity: .64; }
  9%, 49% { opacity: .38; }
  10%, 50% { opacity: .82; }
}

@keyframes radarSpin {
  to { transform: rotate(360deg); }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(.75); opacity: .55; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes networkDash {
  to { stroke-dashoffset: -52; }
}

@keyframes dataBounce {
  0%, 100% { transform: scaleY(.72); opacity: .62; }
  50% { transform: scaleY(1.05); opacity: 1; }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes cardLightSweep {
  from { transform: translateX(-220%) rotate(17deg); }
  to { transform: translateX(570%) rotate(17deg); }
}

@keyframes bandGlow {
  0%, 100% { opacity: .25; transform: translateX(-5%); }
  50% { opacity: .55; transform: translateX(5%); }
}

.hero-copy { animation: fadeUp .9s ease both; }
.hero-scene { animation: heroPan 18s ease-in-out infinite; }
.hero-grid { animation: gridDrift 22s linear infinite; }
.hero-light { animation: lightPulse 8s ease-in-out infinite; }
.float-slow { animation: floatGentle 6s ease-in-out infinite; }
.float-slow.reverse { animation-delay: -3s; }

.hologram { animation: hologramFloat 6.5s ease-in-out infinite, hologramFlicker 11s linear infinite; }
.hologram::before { animation: scanDown 4.2s linear infinite; }
.hologram-network { animation-delay: -2.1s, -3s; }
.hologram-status { animation-delay: -4.2s, -6s; }
.radar-sweep { animation: radarSpin 4.6s linear infinite; }
.radar-node { animation: nodePulse 1.8s ease-in-out infinite; }
.node-two { animation-delay: -.6s; }
.node-three { animation-delay: -1.2s; }
.network-line { animation: networkDash 3.6s linear infinite; }
.line-b { animation-duration: 4.8s; animation-direction: reverse; }
.line-c { animation-duration: 5.8s; }
.data-bars span { transform-origin: bottom; animation: dataBounce 1.7s ease-in-out infinite; }
.data-bars span:nth-child(2) { animation-delay: -.35s; }
.data-bars span:nth-child(3) { animation-delay: -.7s; }
.data-bars span:nth-child(4) { animation-delay: -1.05s; }
.data-bars span:nth-child(5) { animation-delay: -1.4s; }
.status-orbit span { animation: orbitSpin 4s linear infinite; }

.section-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(123,232,255,.07) 46%, rgba(236,208,130,.05) 53%, transparent 70%);
  animation: bandGlow 9s ease-in-out infinite;
}
