/* ============================================================
   enhance.css — Capa extra de efectos premium
   (no sustituye a los estilos existentes, los complementa)
   ============================================================ */

/* ---- Aparición con desenfoque + desliz (más rica que el fade) ---- */
.fx-rise{ opacity:0; transform: translateY(38px) scale(.985); filter: blur(6px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease; will-change: opacity, transform, filter; }
.fx-rise.fx-in{ opacity:1; transform: none; filter: blur(0); }
.fx-rise.d1{ transition-delay:.08s } .fx-rise.d2{ transition-delay:.16s } .fx-rise.d3{ transition-delay:.24s } .fx-rise.d4{ transition-delay:.32s } .fx-rise.d5{ transition-delay:.40s }

/* ---- Títulos: revelado por máscara (clip) ---- */
.fx-clip{ clip-path: inset(0 100% 0 0); opacity:.001; transition: clip-path 1.05s cubic-bezier(.76,0,.24,1), opacity .2s; }
.fx-clip.fx-in{ clip-path: inset(0 0 0 0); opacity:1; }

/* ---- Brillo dorado que sigue al cursor sobre tarjetas ---- */
.fx-glow{ position:relative; isolation:isolate; }
.fx-glow::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(212,168,67,.16), transparent 60%);
  opacity:0; transition: opacity .4s;
}
.fx-glow:hover::before{ opacity:1; }
.fx-glow > *{ position:relative; z-index:1; }

/* ---- Borde dorado animado al hacer hover en tarjetas ---- */
.fx-border{ position:relative; }
.fx-border::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: linear-gradient(130deg, transparent 30%, rgba(212,168,67,.7), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .45s; background-size:200% 200%;
}
.fx-border:hover::after{ opacity:1; animation: fxBorderMove 2.4s linear infinite; }
@keyframes fxBorderMove{ 0%{background-position:0% 0%} 100%{background-position:200% 200%} }

/* ---- Parallax: el JS ajusta --py ---- */
.fx-parallax{ will-change: transform; transform: translate3d(0, var(--py,0), 0); }

/* ---- Subrayado dorado que se dibuja en enlaces de nav al hover ---- */
#nav a.nav-link, .nav-link{ position:relative; }

/* ---- Botones: barrido de brillo ---- */
.fx-shine{ position:relative; overflow:hidden; }
.fx-shine::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: none;
}
.fx-shine:hover::after{ animation: fxShine .9s ease; }
@keyframes fxShine{ to{ left:130%; } }

/* ---- Flotación sutil de elementos destacados ---- */
@keyframes fxFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }
.fx-float{ animation: fxFloat 6s ease-in-out infinite; }

/* ---- Aparición escalonada de stats con conteo ---- */
.hero-fact{ transition: transform .5s var(--ease-out, ease), box-shadow .5s; }
.hero-fact:hover{ transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce){
  .fx-rise,.fx-clip{ opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important; }
  .fx-float{ animation:none!important; }
}