/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 */

/* ===== Landing Page Animations ===== */

/* Fade in and slide up on load */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slow float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Subtle pulse glow */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

/* Rotate slowly */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Circuit line draw */
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* Stagger children animation classes */
.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out both;
}

.animate-fade-in-left {
  animation: fade-in-left 0.8s ease-out both;
}

.animate-fade-in-right {
  animation: fade-in-right 0.8s ease-out both;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 6s ease-in-out 2s infinite;
}

.animate-float-slow {
  animation: float 8s ease-in-out 1s infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

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

.animate-draw-line {
  stroke-dasharray: 1000;
  animation: draw-line 3s ease-out forwards;
}

/* Stagger delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

/* Scroll reveal: hidden by default, revealed by Stimulus */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Hero circuit pattern */
.hero-circuit-pattern {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-float,
  .animate-float-delayed,
  .animate-float-slow,
  .animate-pulse-glow,
  .animate-spin-slow,
  .animate-draw-line {
    animation: none;
  }

  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}