/* ====================================================================
   DEEPTALENT — SISTEMA DE MOVIMIENTO (micro-interacciones compartidas)
   ====================================================================
   Cárgalo SIEMPRE después de theme.css (usa sus tokens --dur-fast/
   base/slow, --ease/--ease-out, --ease-in-out y --color-*).

   Este archivo agrega comportamiento nuevo (header al hacer scroll,
   underline de nav, lift de cards, View Transitions API) sin pisar
   el CSS de reveal-on-scroll que ya vive en cada plantilla — esas
   reglas declaran propiedades distintas para el mismo selector y se
   combinan de forma aditiva.
   ==================================================================== */

/* ---- Header: estado al pasar ~40px de scroll (ver motion.js) ----
   Solo transform/background/box-shadow — nunca width/height, así que
   no hay layout shift al activarse. */
.brand-mark{ transition:transform var(--dur-base) var(--ease-in-out); }
nav.top.is-scrolled{ box-shadow:0 8px 28px -18px rgba(0,0,0,0.55); }
nav.top.is-scrolled .brand-mark{ transform:scale(0.88); }

/* ---- Links de navegación: underline que crece desde la izquierda ---- */
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-in-out);
}
.navlinks a:hover::after{ transform:scaleX(1); }

/* ---- Cards: lift sutil + sombra que crece en hover ----
   .testi-card/.trust-card no traen "transition" propio en las
   plantillas, así que se agrega acá sin pisar nada. .s-step SÍ traía
   su propia transition (border-color/background) — para que no se
   pise (misma propiedad, mismo selector, la última declarada gana),
   esa se extendió directamente en cada solucion-*.html en vez de
   duplicarla aquí. */
.testi-card, .trust-card{
  transition:transform var(--dur-base) var(--ease-in-out), box-shadow var(--dur-base) var(--ease-in-out);
}
.testi-card:hover, .trust-card:hover, .s-step:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -20px rgba(0,0,0,0.5);
}

/* ---- Botón con estado de carga (ver formularios de /deeptalent/login) ---- */
.btn-primary.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn-primary.is-loading::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid rgba(240,212,191,0.35); border-top-color:var(--color-accent-text, #fff);
  border-radius:50%; animation:dt-spin .6s linear infinite;
}
@keyframes dt-spin{ to{ transform:rotate(360deg); } }

/* ---- View Transitions API (progresivo — no-op en navegadores sin soporte) ----
   navigation:auto activa un cross-fade automático entre páginas MPA;
   darle el mismo view-transition-name al header en todas las páginas
   hace que "persista" visualmente durante la navegación. */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:var(--dur-base); }
nav.top{ view-transition-name:site-header; }

/* ---- prefers-reduced-motion: nada de movimiento, solo opacidad instantánea ----
   Regla amplia y segura: solo afecta duraciones de transición/animación,
   nunca lógica JS (los efectos con canvas/video ya se auto-gestionan). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0.001ms !important;
    animation-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js .reveal, html.js .reveal-stagger > *{ transform:none !important; }
  nav.top.is-scrolled .brand-mark{ transform:none !important; }
  .testi-card:hover, .trust-card:hover, .s-step:hover{ transform:none !important; }
  .btn-primary.is-loading::after{ animation:none !important; opacity:0.6; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}