/* ═══════════════════════════════════════════════════════════════
   NEXUM ANIMATIONS CSS
   Clases base para reveal + helpers GSAP
   Todas las animaciones respetan prefers-reduced-motion (en tokens.css)
═══════════════════════════════════════════════════════════════ */

/* ── REVEAL BASE ──────────────────────────────────────────────── */
.nx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s var(--ease),
    transform 0.7s var(--ease);
}
.nx-reveal.is-visible { opacity: 1; transform: none; }

.nx-reveal--left  { transform: translateX(-32px); }
.nx-reveal--right { transform: translateX(32px); }
.nx-reveal--scale { transform: scale(0.94); }
.nx-reveal--left.is-visible,
.nx-reveal--right.is-visible,
.nx-reveal--scale.is-visible { transform: none; }

.nx-reveal--d1 { transition-delay: 80ms; }
.nx-reveal--d2 { transition-delay: 160ms; }
.nx-reveal--d3 { transition-delay: 240ms; }
.nx-reveal--d4 { transition-delay: 320ms; }
.nx-reveal--d5 { transition-delay: 400ms; }
.nx-reveal--d6 { transition-delay: 480ms; }

/* ── HERO ENTRADA ─────────────────────────────────────────────── */
.nx-hero-text {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.nx-hero-visual {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.8s var(--ease) 0.15s, transform 0.8s var(--ease) 0.15s;
}
.hero-loaded .nx-hero-text,
.hero-loaded .nx-hero-visual { opacity: 1; transform: none; }

/* ── VIDEO HERO ───────────────────────────────────────────────── */
.nx-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.nx-hero-video.is-loaded { opacity: 1; }

.nx-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 15, 26, 0.75) 0%,
    rgba(10, 15, 26, 0.45) 60%,
    rgba(10, 15, 26, 0.65) 100%
  );
  z-index: 1;
}

/* ── COUNTER ──────────────────────────────────────────────────── */
.nx-counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* ── LÍNEA GOLD ANIMADA ───────────────────────────────────────── */
.nx-gold-line { position: relative; padding-left: 20px; }
.nx-gold-line::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s var(--ease);
  border-radius: 2px;
}
.nx-gold-line.is-visible::before { transform: scaleY(1); }

/* ── OVERLAY PRODUCTO ─────────────────────────────────────────── */
.nx-prod-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 15, 26, 0.92) 0%, rgba(10, 15, 26, 0) 55%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.nx-prod-card:hover .nx-prod-overlay { opacity: 1; transform: none; }

/* ── CARRUSEL MARCAS (CSS puro) ───────────────────────────────── */
.nx-brands-track {
  display: flex;
  width: max-content;
  animation: nx-brands-scroll 40s linear infinite;
  align-items: center;
}
.nx-brands-track:hover { animation-play-state: paused; }

@keyframes nx-brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.nx-brands-rail { position: relative; overflow: hidden; }
.nx-brands-rail::before,
.nx-brands-rail::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.nx-brands-rail::before { left: 0;  background: linear-gradient(90deg,  var(--midnight), transparent); }
.nx-brands-rail::after  { right: 0; background: linear-gradient(270deg, var(--midnight), transparent); }

/* ── MICRO-LOOPS ÍCONOS ───────────────────────────────────────── */
@keyframes nx-cam-rotate   { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes nx-wifi-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes nx-lock-bounce  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nx-equalizer    { 0%, 100% { transform: scaleY(1); } 25% { transform: scaleY(1.6); } 75% { transform: scaleY(0.6); } }

.nx-icon-cam  { animation: nx-cam-rotate  3s ease-in-out infinite; }
.nx-icon-wifi { animation: nx-wifi-pulse  2s ease-in-out infinite; }
.nx-icon-lock { animation: nx-lock-bounce 2.5s ease-in-out infinite; }
.nx-icon-eq   { animation: nx-equalizer   1.2s ease-in-out infinite; }

/* ── PORTFOLIO HOVER ──────────────────────────────────────────── */
.nx-portfolio-card { position: relative; overflow: hidden; border-radius: var(--radius); }
.nx-portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(201, 169, 110, 0.88) 0%, rgba(10, 15, 26, 0.20) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.nx-portfolio-card:hover .nx-portfolio-overlay { opacity: 1; }

/* ── TIMELINE PROCESO ─────────────────────────────────────────── */
.nx-timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.nx-timeline-item.is-visible { opacity: 1; transform: none; }

/* ── WHATSAPP FLOAT ───────────────────────────────────────────── */
.nx-wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.40);
  transition: transform var(--dur-base) var(--ease);
  cursor: pointer;
}
.nx-wa-float:hover { transform: scale(1.1); }
.nx-wa-float svg   { width: 30px; height: 30px; fill: #fff; }