/* ==========================================================================
   RAHMATICS SOLUTIONS - KEYFRAME ANIMATIONS & 3D MOTION SYSTEM
   ========================================================================== */

/* --- Particle Canvas Layer --- */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* --- Pulse Dot Animation --- */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px var(--color-bright-cyan);
  }
  50% {
    transform: scale(1.35);
    opacity: 0.6;
    box-shadow: 0 0 16px var(--color-bright-cyan);
  }
}

/* --- Typewriter Cursor Blink --- */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Floating Slow Motion --- */
@keyframes floatSlow {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes floatReverse {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(-1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* --- Glowing Border Pulse --- */
@keyframes glowBorderPulse {
  0%, 100% {
    border-color: rgba(93, 215, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.15);
  }
  50% {
    border-color: rgba(0, 174, 239, 0.6);
    box-shadow: 0 0 30px rgba(0, 174, 239, 0.35);
  }
}

/* --- Circuit Line Pulse --- */
@keyframes dashTravel {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes pulseArrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}

/* --- Scroll Fade & Reveal Classes --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* --- 3D Parallax Tilt Element Styles --- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Accessible Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  
  #bg-canvas {
    display: none;
  }
}