/* ============================================================
   ALUMFER — Animaciones & Scroll Effects
   ============================================================ */

/* ─── Fade-up al entrar en viewport ─────────────────────── */
/* Usá con IntersectionObserver en JS */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease),
              transform 600ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados para grids */
.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ─── Hero: animación de entrada ─────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__location { animation: fadeUp 700ms var(--ease) 100ms both; }
.hero__title    { animation: fadeUp 700ms var(--ease) 200ms both; }
.hero__subtitle { animation: fadeUp 700ms var(--ease) 320ms both; }
.hero__actions  { animation: fadeUp 700ms var(--ease) 420ms both; }
.hero__stats    { animation: fadeUp 700ms var(--ease) 520ms both; }

/* ─── Línea azul animada (firma) ─────────────────────────── */
/* Para usar en section headers: la regla crece de izquierda a derecha */
@keyframes ruleGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.section-header.is-visible::after {
  animation: ruleGrow 500ms var(--ease) 300ms both;
}

/* ─── Hover: card product lift ───────────────────────────── */
/* Ya está en components.css con transition, no necesita keyframes */

/* ─── Número contador ─────────────────────────────────────── */
/* Las cifras de "500+ obras" se animan al entrar en viewport */
/* La lógica JS se agrega en main.js */
.count-up {
  display: inline-block;
}

/* ─── Efecto parallax suave en hero bg ───────────────────── */
/* Aplicar con JS: `transform: translateY(scrollY * 0.3)` al hero__bg */
.hero__bg {
  will-change: transform;
}

/* ─── Barra de progreso de scroll ────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--blue);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  transition: transform 50ms linear;
}

/* ─── Mobile nav slide-in ────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: var(--carbon);
  display: flex;
  flex-direction: column;
  padding: calc(64px + var(--space-8)) var(--gutter) var(--space-8);
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform 400ms var(--ease);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__link {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark-2);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-dark);
}

.mobile-nav__link:hover {
  color: var(--text-on-dark);
}