/* Movimiento al hacer scroll. Solo se activa si motion.js marca <html class="motion">,
   así el contenido siempre es visible aunque falle el JavaScript. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--motion-dur:.75s}

/* Aparición general: sube y se desvanece */
.motion .m-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--motion-dur) var(--ease-out),transform var(--motion-dur) var(--ease-out);transition-delay:var(--m-delay,0s);will-change:opacity,transform}
.motion .m-reveal.m-in{opacity:1;transform:none}

/* Variantes */
.motion .m-left{transform:translate3d(-40px,0,0)}
.motion .m-right{transform:translate3d(40px,0,0)}
.motion .m-scale{transform:scale(.96)}
.motion .m-left.m-in,.motion .m-right.m-in,.motion .m-scale.m-in{transform:none}

/* Fotos dentro de tarjetas: leve zoom-out al aparecer */
.motion .m-img{overflow:hidden}
.motion .m-img img{transform:scale(1.08);transition:transform 1.4s var(--ease-out);transition-delay:var(--m-delay,0s)}
.motion .m-img.m-in img{transform:scale(1)}

/* Hero: entrada al cargar */
.motion .hero-bg{transform:scale(1.08);transition:transform 2.2s var(--ease-out)}
.motion.m-loaded .hero-bg{transform:scale(1)}
.motion .m-hero{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--m-delay,0s)}
.motion .m-hero-card{opacity:0;transform:translate3d(48px,0,0);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:.35s}
.motion.m-loaded .m-hero,.motion.m-loaded .m-hero-card{opacity:1;transform:none}

/* Parallax suave (lo mueve motion.js con la variable --m-parallax) */
.motion .m-parallax{transform:translate3d(0,var(--m-parallax,0px),0) scale(1.12)}

/* Encabezado: sombra al bajar */
.header{transition:box-shadow .3s ease,background-color .3s ease}
.header.m-scrolled{box-shadow:0 8px 30px rgba(15,20,51,.08)}

/* Línea de progreso de lectura bajo el header */
.m-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brand-blue,#2F5BE8),var(--brand-violet,#6A4BE0),var(--brand-magenta,#B04BC0));z-index:60;pointer-events:none}

/* Micro-interacciones al pasar el mouse (solo dispositivos con hover) */
@media (hover:hover){
  .project-card,.team-card,.review,.testimonial-card,.comparison-card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .project-card:hover,.team-card:hover,.review:hover,.testimonial-card:hover,.comparison-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,20,51,.10)}
  .project-card:hover>img{transform:scale(1.04)}
  .project-card>img{transition:transform .6s var(--ease-out)}
}

/* Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
  .motion .m-reveal,.motion .m-hero,.motion .m-hero-card,.motion .m-img img,.motion .hero-bg,.motion .m-parallax{opacity:1!important;transform:none!important;transition:none!important}
  .m-progress{display:none}
}