@keyframes pageProgressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: pageProgressGrow linear both;
    animation-timeline: scroll();
  }
}

@keyframes heroIntroReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroDotsPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.02);
  }
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.6);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@keyframes techMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes techMetricReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes whyBorderGlow {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}