/* Sistema de movimiento compartido. Los estados ocultos dependen de .m-on, que el <head>
   activa antes de dibujar la página solo si hay JavaScript y no se pidió movimiento reducido.
   Si motion.js no llega a ejecutarse, el <head> retira .m-on y todo queda visible. */

/* Título principal de cada página: de desenfocado a nítido, sin desplazamiento. */
.js-motion .page-heading.reveal{opacity:1;transform:none}
.m-on .page-heading h1,.m-on .contact-layout h1{opacity:0;filter:blur(12px);transform:scale(.985);transform-origin:left center;transition:opacity 1s var(--ease),filter 1.2s var(--ease),transform 1.4s var(--ease)}
.m-on .page-heading h1.m-in,.m-on .contact-layout h1.m-in{opacity:1;filter:none;transform:none}
.m-on .page-heading .lead{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s}
.m-on .page-heading h1.m-in+.lead{opacity:1;transform:none}

/* Apariciones escalonadas. La misma lista de selectores que en motion.js. */
.m-on :is(.approach-steps>li,.company-reasons>li,.founder-highlights>li,.founder-links,.company-founder>.eyebrow,.company-founder>.founder-role,.company-founder>p:not(.eyebrow):not(.founder-role),.contact-form>*,.contact-layout .lead,.contact-email,.contact-faq,.footer>*,.areas-heading .plain-link,.service-menu .service-tab,.project-filters>button):not(.reveal){opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.m-on .service-menu .service-tab:not(.m-in){transform:translateX(-14px)}
.m-on :is(.approach-steps>li,.company-reasons>li,.founder-highlights>li,.founder-links,.company-founder>.eyebrow,.company-founder>.founder-role,.company-founder>p:not(.eyebrow):not(.founder-role),.contact-form>*,.contact-layout .lead,.contact-email,.contact-faq,.footer>*,.areas-heading .plain-link,.service-menu .service-tab,.project-filters>button).m-in{opacity:1;transform:none}

/* Imágenes que se descubren con una máscara. */
.m-on :is(.founder-photo,.editorial-art){clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.m-on :is(.founder-photo,.editorial-art).m-in{clip-path:inset(0 0 0 0)}
.m-on .founder-photo,.m-on .editorial-art img{transform:scale(1.07);transition:transform 1.6s var(--ease),clip-path 1.3s var(--ease)}
.m-on .founder-photo.m-in,.m-on .editorial-art.m-in img{transform:none}

/* Líneas divisorias que se dibujan. */
.m-on :is(.approach,.areas-zone,.feature-zone,.company-layout,.page-servicios .service-explorer,.footer){position:relative;border-top-color:transparent}
.m-on :is(.approach,.areas-zone,.feature-zone,.company-layout,.page-servicios .service-explorer,.footer):before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#8c9de5aa,var(--line) 45%);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease),background 1.6s ease .9s;pointer-events:none}
.m-on .m-line-in:before{transform:none;background:linear-gradient(90deg,var(--line),var(--line))}

/* Etiquetas: ocultas hasta que empiezan a decodificarse. */
.m-on :is(.eyebrow,.service-examples-label):not(.m-decoded){opacity:0}

/* Luz que sigue al puntero. */
.m-spot{position:relative;isolation:isolate}
.m-spot:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .45s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),#8c9de51f,transparent 65%)}
.m-spot:hover:after{opacity:1}

/* Botón principal con un brillo que lo recorre. */
.button.primary,.contact-link{position:relative;overflow:hidden;isolation:isolate}
.button.primary:after,.contact-link:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,#ffffffa6,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.button.primary:hover:after,.contact-link:hover:after{animation:shine .8s var(--ease)}
@keyframes shine{0%{opacity:0;transform:skewX(-20deg) translateX(0)}20%{opacity:1}100%{opacity:0;transform:skewX(-20deg) translateX(420%)}}

/* Barra de progreso de lectura. */
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:linear-gradient(90deg,#6279c9,var(--blue),#c3cdf6);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Salida de página: el contenido se desvanece y una línea recorre la parte superior. */
body.leaving .page{opacity:0;transform:translateY(-10px);filter:blur(2px)}
body.leaving:after{content:'';position:fixed;top:0;left:0;right:0;height:2px;z-index:201;background:var(--blue);transform-origin:left;animation:leaveBar .2s ease-out both}
@keyframes leaveBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page{transition:opacity .2s,transform .3s var(--ease),filter .2s}

@media(prefers-reduced-motion:reduce){.m-progress,body.leaving:after,.button.primary:after,.contact-link:after{display:none}}