/* Apex Electric — sistema de animaciones compartido.
   Reglas: solo transform/opacity, todo apagado con prefers-reduced-motion,
   y el contenido nunca queda oculto si el script no corre (las clases se activan desde motion.js). */

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
  box-shadow: 0 0 12px hsl(var(--primary) / 0.6);
}

/* ---------- Cabecera que se compacta al bajar ---------- */
.site-header { transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.site-header .inner { transition: padding 0.3s ease; }
.site-header .logo img { transition: height 0.3s ease; }
.site-header.is-scrolled {
  background: hsl(var(--bg) / 0.94);
  box-shadow: 0 10px 30px -12px hsl(var(--shadow-color) / 0.8);
  border-bottom-color: hsl(var(--primary) / 0.25);
}
.site-header.is-scrolled .inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.site-header.is-scrolled .logo img { height: 2.5rem; }

/* Subrayado animado en los enlaces del menú */
.nav-links a { position: relative; padding: 0.25rem 0; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Menú móvil: se despliega en vez de aparecer de golpe */
@keyframes apx-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-nav.open { animation: apx-nav-in 0.25s ease both; }

/* ---------- Revelado por variantes ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.motion-on [data-reveal] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  html.motion-on [data-reveal="up"], html.motion-on [data-reveal=""] { transform: translateY(26px); }
  html.motion-on [data-reveal="left"] { transform: translateX(-34px); }
  html.motion-on [data-reveal="right"] { transform: translateX(34px); }
  html.motion-on [data-reveal="zoom"] { transform: scale(0.92); }
  html.motion-on [data-reveal="fade"] { transform: none; }
  html.motion-on [data-reveal].in-view { opacity: 1; transform: none; }

  /* Titular del hero palabra por palabra */
  .mw { display: inline-block; overflow: hidden; vertical-align: top; font-style: normal; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .mwi {
    display: inline-block;
    font-style: normal;
    transform: translateY(110%);
    animation: apx-word 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(120ms + var(--w, 0) * 70ms);
  }
  @keyframes apx-word { to { transform: none; } }

  /* Entrada de bloques del hero */
  html.motion-on .hero-load { opacity: 0; transform: translateY(18px); animation: apx-rise 0.8s ease both; animation-delay: calc(500ms + var(--hl, 0) * 110ms); }
  @keyframes apx-rise { to { opacity: 1; transform: none; } }

  /* Resplandores del fondo del hero que respiran */
  .hero { overflow: hidden; }
  .hero::before, .hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.35;
    z-index: 0;
  }
  .hero::before {
    width: 26rem; height: 26rem; right: -6rem; top: -8rem;
    background: hsl(var(--primary) / 0.55);
    animation: apx-float-a 14s ease-in-out infinite alternate;
  }
  .hero::after {
    width: 22rem; height: 22rem; left: -7rem; bottom: -9rem;
    background: hsl(var(--accent) / 0.45);
    animation: apx-float-b 17s ease-in-out infinite alternate;
  }
  .hero > .container { position: relative; z-index: 1; }
  @keyframes apx-float-a { to { transform: translate3d(-3rem, 4rem, 0) scale(1.15); } }
  @keyframes apx-float-b { to { transform: translate3d(4rem, -3rem, 0) scale(1.2); } }

  /* Parallax del carrusel del hero (la variable la mueve motion.js) */
  .hero-media { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

  /* Carril infinito de marcas */
  .brands-row.marquee-on {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee-track { display: flex; align-items: center; flex: none; gap: 4rem; padding-right: 4rem; animation: apx-marquee 28s linear infinite; }
  .brands-row.marquee-on:hover .marquee-track { animation-play-state: paused; }
  @keyframes apx-marquee { to { transform: translateX(-100%); } }

  /* Elevación e inclinación de tarjetas (la inclinación la calcula motion.js solo con mouse) */
  .card, .panel.lift {
    transition: opacity 0.6s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, box-shadow 0.35s ease;
  }
  /* Las tarjetas .reveal de siempre también entran escalonadas (va después del shorthand de arriba) */
  .reveal { transition-delay: var(--d, 0ms); }
  .reveal.motion-done { transition-delay: 0ms; }
  .card:hover, .catalog-card:hover {
    box-shadow: 0 22px 40px -22px hsl(var(--shadow-color) / 0.9), 0 0 0 1px hsl(var(--primary) / 0.15);
  }
  .card.reveal.in-view:hover { transform: translateY(-4px); }
  [data-tilt].tilting { transition: transform 0.08s linear, border-color 0.2s ease, box-shadow 0.35s ease; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }

  /* Botones: onda al hacer clic y "magnético" */
  .btn { position: relative; overflow: hidden; }
  .btn-primary { transition: transform 0.2s ease, background-color 0.15s ease, box-shadow 0.25s ease; }
  .btn-primary:hover { box-shadow: 0 10px 28px -8px hsl(var(--primary) / 0.65); }
  .btn.magnet { transition: transform 0.18s ease-out, background-color 0.15s ease, box-shadow 0.25s ease, border-color 0.15s ease; }
  .ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: hsl(0 0% 100% / 0.35);
    transform: scale(0);
    animation: apx-ripple 0.6s ease-out forwards;
  }
  @keyframes apx-ripple { to { transform: scale(1); opacity: 0; } }

  /* Chat */
  .chat-toggle { transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.25s ease; }
  .chat-toggle:hover { transform: scale(1.1) rotate(-6deg); }
  @keyframes apx-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
  .chat-window.open, .chat-window[style*="flex"], .chat-window[style*="block"] { animation: apx-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes apx-pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.55); } 70%, 100% { box-shadow: 0 0 0 16px hsl(var(--primary) / 0); } }
  .chat-toggle { animation: apx-pulse 3s ease-out 2s 3; }

  /* Entrada suave de página */
  @keyframes apx-page { from { opacity: 0; } to { opacity: 1; } }
  body { animation: apx-page 0.45s ease both; }

  /* Rebote del contador del carro */
  @keyframes apx-bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
  .bump { animation: apx-bump 0.5s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .mw, .mwi { display: inline; transform: none; animation: none; }
}

/* Estilo común de elementos de cabecera (usuario / carro) */
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.nav-user .avatar {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-fg));
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }