/* ============================================================
   GENNISIS — CAPA DE ANIMACIÓN (aditiva, no toca la lógica)
   Todo el movimiento vive dentro de @media (no-preference)
   para respetar "reducir movimiento" del sistema operativo.
   Prefijo gx- para evitar colisiones con clases existentes.
   ============================================================ */

:root {
  --gx-ease: cubic-bezier(.16, 1, .3, 1);
  --gx-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   1. BARRA DE PROGRESO DE SCROLL (arriba de todo)
   ============================================================ */
#gx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 2000;
  background: var(--gradient, linear-gradient(135deg, #0071e3, #5e5ce6));
  box-shadow: 0 0 10px rgba(94, 92, 230, .5);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .3s;
}

/* ============================================================
   2. SCROLL REVEAL (aparición al entrar en pantalla)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .gx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--gx-ease), transform .8s var(--gx-ease);
    will-change: opacity, transform;
  }
  .gx-reveal.gx-from-left  { transform: translateX(-34px); }
  .gx-reveal.gx-from-right { transform: translateX(34px); }
  .gx-reveal.gx-scale      { transform: scale(.94); }
  .gx-reveal.gx-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   3. ENTRADA CINEMATOGRÁFICA DEL HERO (cascada al cargar)
   El título ya anima sus palabras; sumamos badge/sub/cta/stats/escena.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .h3d-badge,
  .h3d-sub,
  .h3d-cta,
  .h3d-stats {
    animation: gxHeroUp .9s var(--gx-ease) backwards;
  }
  .h3d-badge { animation-delay: .05s; }
  .h3d-sub   { animation-delay: .5s; }
  .h3d-cta   { animation-delay: .62s; }
  .h3d-stats { animation-delay: .74s; }
  @keyframes gxHeroUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* La escena 3D entra con un fundido + leve acercamiento
     (la rotación interna la maneja hero-3d.js sobre .h3d-stage) */
  .h3d-scene {
    animation: gxSceneIn 1.3s var(--gx-ease) backwards;
    animation-delay: .35s;
  }
  @keyframes gxSceneIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Las stats del hero entran una por una */
  .h3d-stats .h3d-stat {
    animation: gxHeroUp .7s var(--gx-ease) backwards;
  }
  .h3d-stats .h3d-stat:nth-child(1) { animation-delay: .8s; }
  .h3d-stats .h3d-stat:nth-child(2) { animation-delay: .9s; }
  .h3d-stats .h3d-stat:nth-child(3) { animation-delay: 1s; }
}

/* ============================================================
   4. NAVBAR — se transforma al bajar (refina .scrolled existente)
   ============================================================ */
.navbar {
  transition: background .35s var(--gx-ease-soft),
              box-shadow .35s var(--gx-ease-soft),
              height .35s var(--gx-ease-soft),
              padding .35s var(--gx-ease-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .navbar.scrolled {
    height: 56px;
  }
  .navbar.scrolled .logo-icon {
    transform: scale(.92);
    transition: transform .35s var(--gx-ease-soft);
  }
  .navbar .logo-icon { transition: transform .35s var(--gx-ease-soft); }
  /* subrayado animado en items de navegación */
  .nav-item { position: relative; }
  .nav-item::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient, linear-gradient(135deg, #0071e3, #5e5ce6));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--gx-ease);
  }
  .nav-item:hover::after { transform: scaleX(1); }
  .nav-item.active::after { transform: scaleX(1); }
}

/* ============================================================
   5. BRILLO EN BOTONES (sweep) — aditivo, no afecta el layout
   Se aplica con la clase .gx-shine añadida por JS.
   ============================================================ */
.gx-shine { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .gx-shine::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(100deg,
      transparent 0%,
      rgba(255, 255, 255, .38) 50%,
      transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: none;
  }
  .gx-shine:hover::after {
    animation: gxSheen .85s var(--gx-ease-soft);
  }
  @keyframes gxSheen {
    from { left: -120%; }
    to   { left: 130%; }
  }
}

/* ============================================================
   6. MICRO-INTERACCIONES DE HOVER (complementan, no reemplazan)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Iconos de servicio reaccionan al pasar el cursor sobre la cara frontal */
  .svc-face.front .svc-icon svg { transition: transform .4s var(--gx-ease); }
  .svc-card:hover .svc-face.front .svc-icon svg { transform: scale(1.12) rotate(-4deg); }

  /* Tarjetas de beneficios (Cotizar): elevación + icono que salta */
  .benefit-item { transition: transform .3s var(--gx-ease), background .3s; border-radius: 14px; }
  .benefit-item:hover { transform: translateY(-3px); }
  .benefit-icon { transition: transform .4s var(--gx-ease); display: inline-flex; }
  .benefit-item:hover .benefit-icon { transform: scale(1.18) rotate(6deg); }

  /* Tarjetas "Trabajos realizados" (case studies) — elevación suave */
  .work-card { transition: transform .35s var(--gx-ease), box-shadow .35s var(--gx-ease); }
  .work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
  .work-card .work-visual > svg,
  .work-card .work-visual .sys-mock,
  .work-card .work-visual .term-mini { transition: transform .5s var(--gx-ease); }
  .work-card:hover .work-visual > svg,
  .work-card:hover .work-visual .sys-mock,
  .work-card:hover .work-visual .term-mini { transform: scale(1.03); }

  /* Tarjetas de info de contacto */
  .cic-item { transition: transform .3s var(--gx-ease), box-shadow .3s var(--gx-ease); }
  .cic-item:hover { transform: translateY(-3px); }

  /* Flecha de CTA del hero / botones con .arrow ya animan; reforzamos otras */
  .pj-btn svg { transition: transform .25s var(--gx-ease); }
  .pj-btn:hover svg { transform: translateX(3px); }

  /* Estrellas de testimonios laten al entrar la tarjeta */
  .svc-testi-card:hover .svc-testi-stars svg { transform: scale(1.08); }
  .svc-testi-stars svg { transition: transform .3s var(--gx-ease); }
}

/* ============================================================
   7. MAPA DE CASANARE — pines que laten (radar ping)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .map-pin circle.glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: gxPing 2.8s var(--gx-ease-soft) infinite;
  }
  .map-pin:nth-of-type(2) circle.glow { animation-delay: .35s; }
  .map-pin:nth-of-type(3) circle.glow { animation-delay: .7s; }
  .map-pin:nth-of-type(4) circle.glow { animation-delay: 1.05s; }
  .map-pin:nth-of-type(5) circle.glow { animation-delay: 1.4s; }
  .map-pin:nth-of-type(6) circle.glow { animation-delay: 1.75s; }
  /* al pasar el cursor, se detiene el latido para mostrar el halo grande */
  .map-pin:hover circle.glow { animation: none; }
  @keyframes gxPing {
    0%   { transform: scale(.55); opacity: .5; }
    70%  { transform: scale(1.7);  opacity: 0;  }
    100% { transform: scale(1.7);  opacity: 0;  }
  }
  /* el punto central tiene un latido sutil propio */
  .map-pin circle.dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: gxDotBeat 2.8s ease-in-out infinite;
  }
  @keyframes gxDotBeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
  }
}

/* ============================================================
   8. LÍNEA DE TIEMPO DE PROYECTOS — se dibuja al entrar
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* línea de progreso superpuesta sobre la línea base (::before existente) */
  .timeline-track::after {
    content: "";
    position: absolute;
    left: 0; top: 38px;
    height: 2px;
    width: 100%;
    background: var(--gradient, linear-gradient(135deg, #0071e3, #5e5ce6));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s var(--gx-ease-soft);
    z-index: 0;
  }
  .timeline-track.gx-draw::after { transform: scaleX(1); }

  /* nodos aparecen escalonados cuando la sección se dibuja */
  .timeline-track .tl-node {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--gx-ease), transform .6s var(--gx-ease);
  }
  .timeline-track.gx-draw .tl-node { opacity: 1; transform: none; }
  .timeline-track.gx-draw .tl-node:nth-child(1) { transition-delay: .15s; }
  .timeline-track.gx-draw .tl-node:nth-child(2) { transition-delay: .45s; }
  .timeline-track.gx-draw .tl-node:nth-child(3) { transition-delay: .75s; }
  .timeline-track.gx-draw .tl-node:nth-child(4) { transition-delay: 1.05s; }
  .timeline-track.gx-draw .tl-node:nth-child(5) { transition-delay: 1.35s; }

  /* el círculo del año "respira" al aparecer */
  .timeline-track.gx-draw .tl-node .tl-year { animation: gxPop .6s var(--gx-ease) backwards; }
  .timeline-track.gx-draw .tl-node:nth-child(1) .tl-year { animation-delay: .15s; }
  .timeline-track.gx-draw .tl-node:nth-child(2) .tl-year { animation-delay: .45s; }
  .timeline-track.gx-draw .tl-node:nth-child(3) .tl-year { animation-delay: .75s; }
  .timeline-track.gx-draw .tl-node:nth-child(4) .tl-year { animation-delay: 1.05s; }
  .timeline-track.gx-draw .tl-node:nth-child(5) .tl-year { animation-delay: 1.35s; }
  @keyframes gxPop {
    from { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.12); }
    to   { transform: scale(1); opacity: 1; }
  }
}

/* ============================================================
   9. STAGGER GENÉRICO para grupos de tarjetas reveladas
   (delays asignados por JS vía --gx-i)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .gx-reveal.gx-staggered {
    transition-delay: calc(var(--gx-i, 0) * 90ms);
  }
}

/* ============================================================
   10. CONTADORES — sólo evita el "salto" visual (sin layout shift)
   ============================================================ */
.gx-counter { font-variant-numeric: tabular-nums; }