/* Sistema de animación — PS Grupo Hunting.
   Se carga después del CSS crítico de core/base.html y reutiliza sus variables
   de marca. Todo el movimiento usa solo transform/opacity/filter para no
   provocar layout, y se desactiva por completo con prefers-reduced-motion. */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-back: cubic-bezier(.34, 1.38, .64, 1);
  --ease-in-out-soft: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: .35s;
  --dur-mid: .72s;
  --dur-slow: 1.05s;
  --stagger: 90ms;
}

/* ==========================================================================
   1. Revelado al hacer scroll
   El observer vive en core/js/motion.js; aquí solo el estado visual.
   --reveal-delay lo escribe el JS para escalonar los hijos de [data-stagger].
   ========================================================================== */

/* El estado de reposo se declara siempre con :not(.visible) para que ninguna
   variante posterior pueda ganarle a la cascada al añadirse .visible, y bajo
   .js-motion para que sin JavaScript el contenido nunca quede oculto. */
.reveal {
  transition:
    opacity var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-out-expo),
    filter var(--dur-mid) ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  will-change: opacity, transform;
}

/* Variantes: encabezados de sección entran con un desenfoque muy leve. */
.js-motion .section-head.reveal:not(.visible),
.js-motion .method-copy.reveal:not(.visible),
.js-motion .why-copy.reveal:not(.visible),
.js-motion .contact-copy.reveal:not(.visible) { filter: blur(7px); }

/* Tarjetas: además de subir, escalan un punto. */
.js-motion .service-card.reveal:not(.visible),
.js-motion .value-card.reveal:not(.visible),
.js-motion .principle.reveal:not(.visible),
.js-motion .job-card.reveal:not(.visible),
.js-motion .alliance.reveal:not(.visible) { transform: translate3d(0, 34px, 0) scale(.975); }

.js-motion .client-grid > li.reveal:not(.visible) { transform: translate3d(0, 22px, 0) scale(.9); }

/* Visuales grandes entran desde el costado. */
.js-motion .method-visual.reveal:not(.visible) { transform: translate3d(-38px, 20px, 0); }
.js-motion .lead-form.reveal:not(.visible) { transform: translate3d(28px, 20px, 0); }

@media (max-width: 980px) {
  .js-motion .method-visual.reveal:not(.visible),
  .js-motion .lead-form.reveal:not(.visible) { transform: translate3d(0, 30px, 0); }
}

/* ==========================================================================
   2. Barra de progreso de lectura
   Usa scroll-driven animations nativas; motion.js solo cubre navegadores
   que aún no las soportan.
   ========================================================================== */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--violet) 55%, var(--cyan));
  box-shadow: 0 0 18px rgba(47, 140, 255, .55);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   3. Cabecera y navegación
   ========================================================================== */

.top { transform: translateY(0); transition: background .3s, border-color .3s, box-shadow .3s, transform .45s var(--ease-out-expo); }
.top.hidden { transform: translateY(-100%); }

.menu > a:not(.btn) { position: relative; }
.menu > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease-out-expo);
}
.menu > a:not(.btn):hover::after,
.menu > a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

.brand-logo { transition: transform .45s var(--ease-out-back), filter .45s ease; }
.top a:hover .brand-logo { transform: scale(1.03); filter: drop-shadow(0 6px 18px rgba(47, 140, 255, .35)); }

/* Menú móvil: los enlaces caen en cascada al abrir. */
.menu.open > a {
  animation: menu-drop .42s var(--ease-out-expo) both;
  animation-delay: calc(var(--menu-i, 0) * 45ms);
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-10px); } }

/* ==========================================================================
   4. Botones
   ========================================================================== */

.btn { transition: transform .3s var(--ease-out-back), box-shadow .3s, border-color .25s, filter .25s; }
.btn:active { transform: translateY(-1px) scale(.985); }
.btn svg { transition: transform .35s var(--ease-out-back); }
.btn:hover svg { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid rgba(47, 140, 255, .45); outline-offset: 3px; }

/* Estado de envío: el botón se bloquea y muestra un spinner. */
.btn.is-sending { pointer-events: none; filter: saturate(.85); }
.btn.is-sending svg { display: none; }
.btn.is-sending::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ==========================================================================
   5. Texto con gradiente animado
   ========================================================================== */

.gradient-text {
  background: linear-gradient(100deg, var(--blue) 0%, var(--violet) 34%, var(--cyan) 50%, var(--violet) 66%, var(--blue) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 11s linear infinite;
}
@keyframes sheen { to { background-position: -260% 0; } }

.eyebrow::before { animation: eyebrow-glow 3.2s var(--ease-in-out-soft) infinite; }
@keyframes eyebrow-glow {
  50% { box-shadow: 0 0 0 9px rgba(47, 140, 255, 0); transform: scale(1.18); }
}

/* ==========================================================================
   6. Hero — entrada orquestada al cargar
   ========================================================================== */

.hero-content > * {
  animation: hero-rise .95s var(--ease-out-expo) both;
  animation-delay: calc(120ms + var(--hero-i, 0) * 110ms);
}
.hero-content > :nth-child(1) { --hero-i: 0; }
.hero-content > :nth-child(2) { --hero-i: 1; }
.hero-content > :nth-child(3) { --hero-i: 2; }
.hero-content > :nth-child(4) { --hero-i: 3; }
.hero-content > :nth-child(5) { --hero-i: 4; }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(9px); } }

.hero-proof span {
  animation: chip-in .6s var(--ease-out-back) both;
  animation-delay: calc(720ms + var(--chip-i, 0) * 90ms);
  transition: transform .3s var(--ease-out-back), border-color .3s, background .3s;
}
.hero-proof span:nth-child(1) { --chip-i: 0; }
.hero-proof span:nth-child(2) { --chip-i: 1; }
.hero-proof span:nth-child(3) { --chip-i: 2; }
.hero-proof span:nth-child(4) { --chip-i: 3; }
.hero-proof span:hover { transform: translateY(-3px); border-color: rgba(101, 230, 255, .5); background: rgba(47, 140, 255, .16); }
@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.9); } }

.signal { animation: hero-rise 1s var(--ease-out-expo) 1.1s both; }

/* Aurora que deriva detrás del hero, por encima de la fotografía. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 780px;
  height: 780px;
  left: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 140, 255, .34), transparent 62%);
  filter: blur(38px);
  pointer-events: none;
  animation: aurora 24s var(--ease-in-out-soft) infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 640px;
  height: 640px;
  right: -180px;
  bottom: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 92, 255, .3), transparent 64%);
  filter: blur(42px);
  pointer-events: none;
  animation: aurora 30s var(--ease-in-out-soft) 2s infinite alternate-reverse;
}
@keyframes aurora {
  50% { transform: translate3d(120px, 70px, 0) scale(1.18); }
  100% { transform: translate3d(-70px, 130px, 0) scale(.94); }
}

/* Indicador de scroll al pie del hero. */
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.9rem;
  display: grid;
  place-items: center;
  gap: .55rem;
  color: #93a8c0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: hero-rise 1s var(--ease-out-expo) 1.3s both;
}
.scroll-cue span {
  width: 26px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  position: relative;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--cyan);
  animation: cue 2.1s var(--ease-in-out-soft) infinite;
}
@keyframes cue {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ==========================================================================
   7. Marquee de servicios
   ========================================================================== */

.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span::after { display: inline-block; animation: spark 4s linear infinite; }
@keyframes spark { 50% { transform: rotate(180deg) scale(1.25); opacity: .55; } }

/* ==========================================================================
   8. Tarjetas con foco de luz que sigue al cursor
   motion.js escribe --mx/--my en porcentaje.
   ========================================================================== */

[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 140, 255, .12), rgba(189, 92, 255, .07) 42%, transparent 68%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
[data-spotlight]:hover::before { opacity: 1; }
.service-card > *,
.value-card > *,
.principle > *,
.job-card > * { position: relative; z-index: 1; }

/* Iconos de servicio: el trazo SVG se dibuja al revelar la tarjeta. */
.service-icon { transition: transform .45s var(--ease-out-back), box-shadow .45s; }
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-4deg); box-shadow: 0 18px 40px rgba(47, 140, 255, .34); }
/* Cada figura declara pathLength="1" para normalizar el trazo. */
.service-icon svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.service-card.visible .service-icon svg > * {
  animation: draw 1.15s var(--ease-out-expo) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 220ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.feature-list li { transition: transform .3s var(--ease-out-back), color .3s; }
.feature-list li:hover { transform: translateX(5px); color: var(--ink); }
.feature-list li::before { transition: transform .3s var(--ease-out-back); }
.feature-list li:hover::before { transform: scale(1.3); }

.success-note b { display: inline-grid; place-items: center; animation: badge-beat 3.4s var(--ease-in-out-soft) infinite; }
@keyframes badge-beat { 50% { transform: scale(1.16); } }

/* ==========================================================================
   9. Proceso R&S — anillo SVG que se dibuja por paso
   ========================================================================== */

.method-item { position: relative; }
.method-item::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.method-item.visible::before { transform: scaleX(1); }

.step { position: relative; }
.step-ring {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  overflow: visible;
}
.step-ring circle {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .85;
}
.method-item.visible .step-ring circle {
  animation: draw 1.1s var(--ease-out-expo) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 160ms);
}
.method-item:hover .step-ring circle { stroke: var(--violet); transition: stroke .3s; }
.method-item > .step { transition: transform .35s var(--ease-out-back), background .35s; }
.method-item:hover > .step { transform: scale(1.08); background: rgba(101, 230, 255, .16); }

/* ==========================================================================
   10. Beneficios, principios y paneles
   ========================================================================== */

.value-card,
.principle,
.outsourcing-panel { transition: transform .38s var(--ease-out-expo), box-shadow .38s, border-color .38s; }
.value-card:hover,
.principle:hover,
.outsourcing-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(47, 140, 255, .28); }

.value-card b,
.principle b { transition: transform .4s var(--ease-out-back), background .4s, color .4s; }
.value-card:hover b,
.principle:hover b { transform: translateY(-3px) scale(1.08); background: var(--gradient); color: #fff; }

.check { transition: transform .3s var(--ease-out-back), color .3s; }
.check:hover { transform: translateX(4px); color: var(--ink); }
.check::before { display: inline-block; transition: transform .3s var(--ease-out-back); }
.check:hover::before { transform: scale(1.35) rotate(-8deg); }

/* Halos que derivan lentamente en las secciones oscuras. */
.outsourcing-box::after { animation: blob 22s var(--ease-in-out-soft) infinite alternate; }
.cta-box::before { animation: blob 26s var(--ease-in-out-soft) infinite alternate-reverse; }
footer::before { animation: blob 30s var(--ease-in-out-soft) infinite alternate; }
@keyframes blob {
  to { transform: translate3d(-70px, 60px, 0) scale(1.16); }
}
.clients::before { animation: blob-centered 28s var(--ease-in-out-soft) infinite alternate; }
@keyframes blob-centered {
  to { transform: translateX(-50%) translateY(90px) scale(1.12); }
}

/* ==========================================================================
   11. Clientes y alianzas
   ========================================================================== */

.client { transition: transform .4s var(--ease-out-back), box-shadow .4s, border-color .4s; }
.client::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .65) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.client { position: relative; overflow: hidden; }
.client:hover::after { animation: shine .85s var(--ease-out-expo); }
@keyframes shine { to { transform: translateX(130%); } }

.alliance-logo { transition: transform .45s var(--ease-out-back), filter .45s; }
.alliance:hover .alliance-logo { transform: scale(1.05); }
.alliance span::after { display: inline-block; transition: transform .35s var(--ease-out-back); }
.alliance:hover span::after { transform: translate(3px, -3px); }

/* ==========================================================================
   12. Formularios
   ========================================================================== */

.lead-form input,
.lead-form textarea,
.f input,
.f textarea {
  transition: border-color .25s, background .25s, box-shadow .3s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}
.lead-form input:focus,
.lead-form textarea:focus,
.f input:focus,
.f textarea:focus { transform: translateY(-2px); }

.contact-detail i { transition: transform .4s var(--ease-out-back), box-shadow .4s; }
.contact-detail:hover i { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 14px 30px rgba(68, 96, 232, .32); }

/* Mensajes flash: entran desde arriba con rebote. */
.msg { animation: msg-drop .6s var(--ease-out-back) both; }
@keyframes msg-drop { from { opacity: 0; transform: translate(-50%, -22px); } }

/* ==========================================================================
   13. Portal de empleos
   ========================================================================== */

.job-hero { position: relative; overflow: hidden; }
.job-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(680px circle at 18% 12%, rgba(255, 255, 255, .22), transparent 58%),
              radial-gradient(520px circle at 82% 88%, rgba(101, 230, 255, .28), transparent 60%);
  animation: aurora 26s var(--ease-in-out-soft) infinite alternate;
  pointer-events: none;
}
.job-hero .wrap { position: relative; z-index: 1; }
.job-hero .wrap > * {
  animation: hero-rise .85s var(--ease-out-expo) both;
  animation-delay: calc(80ms + var(--hero-i, 0) * 100ms);
}
.job-hero .wrap > :nth-child(1) { --hero-i: 0; }
.job-hero .wrap > :nth-child(2) { --hero-i: 1; }
.job-hero .wrap > :nth-child(3) { --hero-i: 2; }
.job-hero .wrap > :nth-child(4) { --hero-i: 3; }

.job-back svg { transition: transform .35s var(--ease-out-back); }
.job-back:hover svg { transform: translateX(-4px); }

.job-card { transition: transform .38s var(--ease-out-expo), box-shadow .38s, border-color .38s; }
.job-card:hover { transform: translateY(-7px); }
.job-tag { transition: transform .3s var(--ease-out-back), background .3s; }
.job-card:hover .job-tag { transform: translateY(-2px); }
.job-card .go svg { transition: transform .35s var(--ease-out-back); }
.job-card:hover .go svg { transform: translateX(5px); }

.apply-card { transition: box-shadow .4s; }
.apply-card:hover { box-shadow: var(--shadow); }
.f .err { animation: shake .45s var(--ease-in-out-soft); }
@keyframes shake {
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* ==========================================================================
   14. Pie de página
   ========================================================================== */

footer a:not(.socials a) { position: relative; width: fit-content; }
footer a:not(.socials a)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .18rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease-out-expo);
}
footer a:not(.socials a):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.socials a { transition: transform .35s var(--ease-out-back), background .35s, border-color .35s; }
.socials a:hover { transform: translateY(-4px) scale(1.06); }

/* ==========================================================================
   15. Accesibilidad — sin movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .hero-content > *,
  .hero-proof span,
  .signal,
  .job-hero .wrap > *,
  .scroll-cue { opacity: 1 !important; transform: none !important; filter: none !important; }
  .service-icon svg > *,
  .step-ring circle { stroke-dashoffset: 0; }
  .method-item::before { transform: scaleX(1); }
  .scroll-progress { display: none; }
  .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
}