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

/* ── Landing de Revestimientos ──────────────────────────────────────
   Port 1:1 del modelo aprobado (batoji.vercel.app/revestimientos). Todo
   va scopeado bajo .revest-page para no pisar la tipografía ni los
   estilos del resto del sitio, que usa Archivo + la paleta del tema. */
.revest-page {
  font-family: "Barlow", system-ui, sans-serif;
  color: #3f3f46;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.revest-page .font-display {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.revest-page .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.revest-page .bento-card {
  border: 1px solid #e4e4e7;
  background: #fff;
  border-radius: 24px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.revest-page .bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 0, 0.25);
  box-shadow: 0 20px 50px rgba(13, 13, 13, 0.07);
}

.revest-page .field-input {
  width: 100%;
  height: 48px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 0.9375rem;
  background: #fff;
  color: #0d0d0d;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.revest-page .field-input:focus {
  outline: none;
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

.revest-page .field-textarea {
  height: auto;
  padding: 12px 14px;
}

/* Selector de texturas: el anillo del elegido lo pinta el CSS a partir de
   aria-pressed, así el Stimulus controller no toca clases de Tailwind. */
.revest-page .swatch {
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.2s;
}

.revest-page .swatch:hover {
  box-shadow: 0 0 0 2px #e4e4e7;
}

.revest-page .swatch[aria-pressed="true"],
.revest-page .swatch[aria-pressed="true"]:hover {
  box-shadow: 0 0 0 2px #ff7a00;
}

.revest-page .swatch-outlined {
  box-shadow: 0 0 0 2px #e4e4e7;
}

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