/*
 * 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;
  }
}

/* ===== Landing industrial-eléctrica ===== */

/* Marquesina infinita de categorías: el contenido va duplicado en el
   markup para que el loop de -50% sea continuo. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 45s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Parpadeo del indicador "en línea" del hero */
@keyframes spark-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.animate-spark-blink {
  animation: spark-blink 1.6s ease-in-out infinite;
}

/* Grilla blueprint para fondos oscuros */
.bg-blueprint {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Grano sutil para dar textura a los fondos oscuros */
.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}