/* Scroll Reveal Engine */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-active {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Interactive glowing lines (SaaS Style) */
.svg-glow-line {
  stroke-dasharray: 8;
  animation: dash 3s linear infinite;
  filter: drop-shadow(0px 0px 4px var(--primary));
}

.svg-glow-line-purple {
  stroke-dasharray: 8;
  animation: dash 3.5s linear infinite;
  filter: drop-shadow(0px 0px 4px var(--secondary));
}

/* Mouse spotlight glow wrapper */
.glow-card-container {
  position: relative;
}

/* Smooth Scrolling Custom Smooth Anchor */
[data-scroll-container] {
  overflow: hidden;
}

/* Custom interactive dots for data grids */
.grid-node {
  animation: pulse-glow 2s infinite ease-in-out;
}

/* Dashboard interactive flow line */
.flow-line {
  stroke: url(#line-grad);
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-flow 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes draw-flow {
  0% {
    stroke-dashoffset: 200;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -200;
  }
}