/* CSS Animations & Scroll Reveal Effects */

/* 1. Intersection Observer Scroll Reveal Classes */
.reveal {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translateY(40px);
}

.reveal-down {
  transform: translateY(-40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-scale {
  transform: scale(0.92);
}

/* Activated state triggerable via JS */
.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
  /* Release the compositor layer once the entrance animation is done */
  will-change: auto;
}

/* Staggered animation delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 2. Micro-animations / Organic Floating */
.anim-float {
  animation: float-y 6s ease-in-out infinite;
}

.anim-float-delayed {
  animation: float-y 7s ease-in-out infinite;
  animation-delay: 1.5s;
}

.anim-rotate-slow {
  animation: spin 20s linear infinite;
}

.anim-shine {
  position: relative;
  overflow: hidden;
}

.anim-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

.anim-shine:hover::after {
  transform: translate(100%, 100%) rotate(45deg);
}

/* Sensor scan effect overlay for SVGs */
.sensor-scanner {
  animation: scan-y 3s linear infinite;
  will-change: transform;
}

/* 3. Animation Keyframes */
@keyframes float-y {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Dash lines animation for custom SVG diagrams */
@keyframes dash-scroll {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -48; /* multiple of dash period (12+12) for a seamless loop */
  }
}

.svg-glow-line {
  stroke-dasharray: 12 12;
  stroke-dashoffset: 0;
  animation: dash-scroll 1.2s linear infinite;
}

/* Hero diagram: staggered node entrance, flowing lines, model glow */
@keyframes node-pop {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Cheap composited glow: fades a pre-blurred rect instead of animating drop-shadow */
@keyframes glow-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.5; }
}

.hero-diagram .diagram-node {
  opacity: 0;
  animation: node-pop 0.6s ease-out forwards;
}

.hero-diagram .node-1 { animation-delay: 0.3s; }
.hero-diagram .node-2 { animation-delay: 0.5s; }
.hero-diagram .node-3 { animation-delay: 0.7s; }

.hero-diagram .node-model {
  animation: node-pop 0.6s ease-out 1.1s forwards;
}

.hero-diagram .model-glow {
  opacity: 0;
  animation: glow-pulse 3s ease-in-out 2s infinite;
  will-change: opacity;
}

.hero-diagram .diagram-line-base {
  opacity: 0;
  animation: line-fade-in 0.5s ease-out 0.9s forwards;
}

.hero-diagram .diagram-line {
  opacity: 0;
  animation-name: line-fade-in, dash-scroll;
  animation-duration: 0.5s, 1.2s;
  animation-timing-function: ease-out, linear;
  animation-delay: 0.9s, 0s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

/* Stagger the flow start per connector so the motion feels organic */
.hero-diagram .diagram-line.flow-1 { animation-delay: 0.9s, 0s; }
.hero-diagram .diagram-line.flow-2 { animation-delay: 1.0s, -0.4s; }
.hero-diagram .diagram-line.flow-3 { animation-delay: 1.1s, -0.8s; }

/* Grid lines pattern loading animation */
@keyframes grid-fade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

.tech-grid-bg {
  animation: grid-fade 4s ease-in-out infinite;
}

/* Scan line animation */
@keyframes scan-y {
  0% { transform: translateY(-10%); opacity: 0.1; }
  50% { opacity: 0.8; }
  100% { transform: translateY(110%); opacity: 0.1; }
}

/* 4. Reduced Motion: respect user preference, show content immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .anim-float,
  .anim-float-delayed,
  .anim-rotate-slow,
  .sensor-scanner,
  .tech-grid-bg,
  .preloader-spinner::before,
  .preloader-spinner::after,
  .hero-tag span {
    animation: none !important;
  }

  .hero-diagram .diagram-node,
  .hero-diagram .node-model,
  .hero-diagram .diagram-line-base {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Pulse glow stays off for reduced motion */
  .hero-diagram .model-glow {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Connector flow stays visible but runs slower and skips entrance fades */
  .svg-glow-line,
  .hero-diagram .diagram-line {
    opacity: 1 !important;
    animation: dash-scroll 2.4s linear infinite !important;
  }

  .anim-shine::after {
    display: none;
  }

  .mobile-nav,
  .skip-link,
  .btn,
  .glass-card {
    transition: none !important;
  }
}