.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.12s;
}

.delay-2 {
  transition-delay: 0.24s;
}

.wave-one {
  animation: waveDrift 12s ease-in-out infinite alternate;
}

.wave-two {
  animation: waveDrift 15s ease-in-out infinite alternate-reverse;
}

.wave-three {
  animation: waveDrift 18s ease-in-out infinite alternate;
}

.glow-blue {
  animation: glowFloat 11s ease-in-out infinite alternate;
}

.glow-purple {
  animation: glowFloat 13s ease-in-out infinite alternate-reverse;
}

.service-card,
.demo-card,
.video-card,
.feature-panel {
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.service-card:hover,
.demo-card:hover,
.video-card:hover,
.feature-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.44);
}

@keyframes waveDrift {
  from {
    transform: translateX(-52%) translateY(-8px) scaleX(1);
  }
  to {
    transform: translateX(-48%) translateY(8px) scaleX(1.08);
  }
}

@keyframes glowFloat {
  from {
    transform: translate3d(-20px, -10px, 0) scale(0.95);
  }
  to {
    transform: translate3d(20px, 16px, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}