/* ================================================================
   WsoporteTI — motion.css  v1.0
   Capa de movimiento. Es aditiva: si se borra este archivo y su
   <script>, la página sigue funcionando igual que antes.
   Todo queda anulado bajo prefers-reduced-motion.
================================================================ */

/* ═══════════ 1. BARRA DE PROGRESO DE LECTURA ═══════════ */
.mx-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--azure) 0%,var(--azure-lt) 55%,var(--signal) 100%);
  will-change:transform;pointer-events:none;
}

/* ═══════════ 2. HEADER QUE SE OCULTA AL BAJAR ═══════════ */
#siteHeader{transition:box-shadow .25s,background .25s,transform .38s var(--ease)}
#siteHeader.mx-hidden{transform:translateY(-101%)}

/* Enlace de la sección visible (scrollspy) */
.nav-links>li>a.mx-current{color:var(--text);font-weight:600}
.nav-links>li>a.mx-current::after{transform:scaleX(1)}

/* ═══════════ 3. ENTRADA DEL HERO ═══════════ */
@keyframes mxRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mxRiseSide{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

.mx-on [data-hero]{opacity:0;animation:mxRise .78s var(--ease) forwards}
.mx-on [data-hero="1"]{animation-delay:.06s}
.mx-on [data-hero="2"]{animation-delay:.16s}
.mx-on [data-hero="3"]{animation-delay:.26s}
.mx-on [data-hero="4"]{animation-delay:.36s}
.mx-on [data-hero="5"]{animation-delay:.46s}
.mx-on [data-hero="6"]{animation:mxRiseSide .9s var(--ease) .3s forwards}

/* Subrayado que se dibuja bajo el texto resaltado del H1 */
.hero h1 .hl{position:relative}
.mx-on .hero h1 .hl::after{
  content:'';position:absolute;left:0;right:0;bottom:-.09em;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--azure-lt),var(--signal));
  transform:scaleX(0);transform-origin:left;
  animation:mxDraw .9s var(--ease) .95s forwards;
}
@keyframes mxDraw{to{transform:scaleX(1)}}

/* Retícula del hero con deriva lenta + halo que respira */
@keyframes mxDrift{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}
.mx-on .hero-grid-bg{animation:mxDrift 26s linear infinite}

.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:min(560px,70vw);aspect-ratio:1;right:-8%;top:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(27,92,240,.30),transparent 66%);
  filter:blur(12px);opacity:0;
}
.mx-on .hero::after{animation:mxBreathe 11s var(--ease) infinite}
@keyframes mxBreathe{
  0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.95;transform:translate3d(-26px,22px,0) scale(1.1)}
}

/* Punto de "operativo" con latido más vivo */
.mx-on .sp-live .dot,.mx-on .tb-status .dot{animation:mxPulse 2.2s var(--ease) infinite}
@keyframes mxPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,196,127,.55)}70%{box-shadow:0 0 0 7px rgba(22,196,127,0)}}

/* ═══════════ 4. CINTA DE TECNOLOGÍAS (marquesina) ═══════════ */
.stack.mx-marquee{overflow:hidden}
.stack.mx-marquee .stack-in{flex-wrap:nowrap;justify-content:flex-start;gap:1.2rem}
.stack.mx-marquee .stack-label{flex:none}
.mx-track-mask{
  flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.stack.mx-marquee .stack-list{
  flex-wrap:nowrap;width:max-content;justify-content:flex-start;
  animation:mxScroll 34s linear infinite;
}
.stack.mx-marquee:hover .stack-list,
.stack.mx-marquee:focus-within .stack-list{animation-play-state:paused}
.stack.mx-marquee .stack-list li{white-space:nowrap}
@keyframes mxScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════ 5. REVELADO AL HACER SCROLL ═══════════ */
html.mx-on [data-anim]{
  opacity:0;will-change:opacity,transform;
  transition:opacity .72s var(--ease),transform .72s var(--ease);
  transition-delay:var(--mx-d,0s);
}
html.mx-on [data-anim="up"]{transform:translateY(30px)}
html.mx-on [data-anim="left"]{transform:translateX(-34px)}
html.mx-on [data-anim="right"]{transform:translateX(34px)}
html.mx-on [data-anim="zoom"]{transform:scale(.94)}
html.mx-on [data-anim="blur"]{filter:blur(7px);transform:translateY(18px)}
html.mx-on [data-anim].mx-in{opacity:1;transform:none;filter:none}

/* Título de sección: la línea del "eyebrow" se dibuja al entrar */
.sec-head .eyebrow{position:relative}
.sec-head .eyebrow.mx-in::before{
  content:'';position:absolute;left:0;bottom:-.4rem;height:2px;width:56px;border-radius:2px;
  background:var(--azure);transform:scaleX(0);transform-origin:left;
  animation:mxDraw .7s var(--ease) .18s forwards;
}

/* ═══════════ 6. TARJETAS CON INCLINACIÓN (solo puntero fino) ═══════════ */
@media (hover:hover) and (pointer:fine){
  .mx-tilt{
    transform-style:preserve-3d;
    transition:transform .28s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  }
  .mx-tilt.mx-tilting{transition:transform .08s linear,box-shadow .3s var(--ease)}
  .svc.mx-tilt:hover{box-shadow:0 22px 52px rgba(10,23,48,.16)}

  /* Brillo que barre los botones al pasar el mouse */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%);
    transform:translateX(-115%);
  }
  .btn:hover::after{animation:mxShine .78s var(--ease) forwards}
  @keyframes mxShine{to{transform:translateX(115%)}}
}

/* ═══════════ 7. MOCKUP DE LA APP ═══════════ */
/* Cursor que "escribe" el subdominio al cambiar de marca */
.br-url b{position:relative}
.br-url b.mx-typing::after{
  content:'';position:absolute;right:-3px;top:8%;bottom:8%;width:1.5px;background:var(--brand,var(--azure));
  animation:mxCaret .7s steps(1) infinite;
}
@keyframes mxCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Filas de la tabla y KPIs que aparecen escalonados al entrar en pantalla */
.saas-demo.mx-in .app-table .tr{animation:mxRowIn .5s var(--ease) backwards}
.saas-demo.mx-in .app-table .tr:nth-child(2){animation-delay:.08s}
.saas-demo.mx-in .app-table .tr:nth-child(3){animation-delay:.16s}
.saas-demo.mx-in .app-table .tr:nth-child(4){animation-delay:.24s}
.saas-demo.mx-in .app-table .tr:nth-child(5){animation-delay:.32s}
.saas-demo.mx-in .app-table .tr:nth-child(6){animation-delay:.40s}
@keyframes mxRowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.saas-demo.mx-in .kpi{animation:mxRise .55s var(--ease) backwards}
.saas-demo.mx-in .kpi:nth-child(2){animation-delay:.1s}
.saas-demo.mx-in .kpi:nth-child(3){animation-delay:.2s}

/* Flotación muy leve del navegador del mockup */
@media (hover:hover) and (pointer:fine){
  .mx-on .saas-demo .browser{animation:mxFloat 8s var(--ease) infinite}
  @keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .mx-on .saas-demo .browser:hover{animation-play-state:paused}
}

/* Cambio de color de marca con transición suave en todo el mockup */
.browser,.browser *{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}

/* ═══════════ 8. NÚMEROS Y PASOS ═══════════ */
.steps li.mx-in{border-color:var(--azure)}
.steps li{transition:border-color .6s var(--ease) .2s}

.modules li.mx-in .mod-n{animation:mxPop .5s var(--ease) backwards}
@keyframes mxPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ═══════════ 9. BOTÓN FLOTANTE DE WHATSAPP ═══════════ */
html.mx-on .wa-float{transform:scale(.4);opacity:0;transition:transform .42s var(--ease),opacity .3s,box-shadow .25s}
html.mx-on .wa-float.mx-show{transform:scale(1);opacity:1}
html.mx-on .wa-float.mx-show:hover{transform:scale(1.09)}
.wa-float.mx-nudge{animation:mxNudge 1.1s var(--ease)}
@keyframes mxNudge{
  0%,100%{transform:scale(1) rotate(0)}
  20%{transform:scale(1.12) rotate(-9deg)}
  40%{transform:scale(1.12) rotate(9deg)}
  60%{transform:scale(1.08) rotate(-5deg)}
  80%{transform:scale(1.04) rotate(3deg)}
}

/* ═══════════ 10. ACCESIBILIDAD — ANULACIÓN TOTAL ═══════════ */
@media (prefers-reduced-motion:reduce){
  .mx-progress{display:none}
  #siteHeader.mx-hidden{transform:none}
  .mx-on [data-hero],
  .mx-on .hero-grid-bg,
  .mx-on .hero::after,
  .mx-on .sp-live .dot,
  .mx-on .tb-status .dot,
  .stack.mx-marquee .stack-list,
  .saas-demo.mx-in .app-table .tr,
  .saas-demo.mx-in .kpi,
  .mx-on .saas-demo .browser,
  .wa-float.mx-nudge{animation:none!important}
  .mx-on [data-hero]{opacity:1}
  .stack.mx-marquee .stack-list{transform:none}
  html.mx-on [data-anim]{opacity:1;transform:none;filter:none;transition:none}
  html.mx-on .wa-float{transform:none;opacity:1}
  .mx-on .hero h1 .hl::after{animation:none;transform:scaleX(1)}
  .sec-head .eyebrow.mx-in::before{animation:none;transform:scaleX(1)}
}