/* ==========================================================================
   FRTZ - Dynamic Animations & Micro-Interactions CSS
   ========================================================================== */

/* Cursor Glow Effect */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 450px;
  height: 450px;
  margin-top: -225px;
  margin-left: -225px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 187, 85, 0.12) 0%, rgba(0, 156, 255, 0.05) 50%, transparent 80%);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.08s ease-out;
  mix-blend-mode: screen;
}

/* Background Particle Canvas */
#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Scroll Reveal Triggers */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal-init {
  opacity: 0;
  transform: translateY(30px);
}

.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; }

/* Shimmer Animation */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(30deg);
  animation: shimmer 6s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(30deg); }
  20%, 100% { transform: translateX(100%) rotate(30deg); }
}

/* Pulse Keyframes */
@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float-animation {
  animation: floatAnim 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px var(--emerald-glow); }
  50% { box-shadow: 0 0 35px var(--emerald-primary); }
}

.pulse-glow-box {
  animation: pulseGlow 3s infinite;
}

/* Hero Typing & Headline Motion */
.hero-title-line {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.hero-title-line:nth-child(1) { animation-delay: 0.2s; }
.hero-title-line:nth-child(2) { animation-delay: 0.4s; }
.hero-title-line:nth-child(3) { animation-delay: 0.6s; }

@keyframes titleFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SVG Line Glow Animation */
.circuit-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}