/* =========================================================
   DN TECH — V89 / TRANSICIONES DESARROLLO WEB
   Slide direccional entre Visión general, Proyectos, Proceso y Planes.
   El header permanece estable; sólo se desplaza el contenido.
   ========================================================= */

:root{
  --web-page-transition-duration:340ms;
  --web-page-transition-distance:3.4vw;
  --web-page-transition-ease:cubic-bezier(.22,.72,.24,1);
  --web-curtain-color:#050e19;
}

body.page-web-showcase .premium-web-main,
body.page-web-projects .premium-web-main,
body.page-web-process .premium-web-main,
body.page-web-plans .premium-web-main{
  will-change:transform;
  transform:translateX(0);
}

/* Cortina oscura: cubre sólo el contenido para que el header no se mueva. */
body.page-web-showcase::after,
body.page-web-projects::after,
body.page-web-process::after,
body.page-web-plans::after{
  content:"";
  position:fixed;
  z-index:900;
  top:var(--header-h);
  right:0;
  bottom:0;
  left:0;
  pointer-events:none;
  background:var(--web-curtain-color);
  transform:translateX(110%);
  will-change:transform;
}
body.web-page-leave-back::after{transform:translateX(-110%)}

body.web-page-leave-forward .premium-web-main{
  animation:webPageLeaveForward var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-leave-forward::after{
  animation:webCurtainInForward var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-leave-back .premium-web-main{
  animation:webPageLeaveBack var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-leave-back::after{
  animation:webCurtainInBack var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}

html.web-preload-forward body::after,
html.web-preload-back body::after{transform:translateX(0)}

body.web-page-enter-forward .premium-web-main{
  animation:webPageEnterForward var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-enter-forward::after{
  transform:translateX(0);
  animation:webCurtainOutForward var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-enter-back .premium-web-main{
  animation:webPageEnterBack var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}
body.web-page-enter-back::after{
  transform:translateX(0);
  animation:webCurtainOutBack var(--web-page-transition-duration) var(--web-page-transition-ease) both;
}

@keyframes webPageLeaveForward{from{transform:translateX(0)}to{transform:translateX(calc(var(--web-page-transition-distance) * -1))}}
@keyframes webPageEnterForward{from{transform:translateX(var(--web-page-transition-distance))}to{transform:translateX(0)}}
@keyframes webPageLeaveBack{from{transform:translateX(0)}to{transform:translateX(var(--web-page-transition-distance))}}
@keyframes webPageEnterBack{from{transform:translateX(calc(var(--web-page-transition-distance) * -1))}to{transform:translateX(0)}}
@keyframes webCurtainInForward{from{transform:translateX(110%)}to{transform:translateX(0)}}
@keyframes webCurtainOutForward{from{transform:translateX(0)}to{transform:translateX(-110%)}}
@keyframes webCurtainInBack{from{transform:translateX(-110%)}to{transform:translateX(0)}}
@keyframes webCurtainOutBack{from{transform:translateX(0)}to{transform:translateX(110%)}}

body.page-web-showcase,
body.page-web-projects,
body.page-web-process,
body.page-web-plans{overflow-x:hidden}

@media(max-width:640px){:root{--web-page-transition-distance:22px}}
@media(prefers-reduced-motion:reduce){
  body.page-web-showcase::after,
  body.page-web-projects::after,
  body.page-web-process::after,
  body.page-web-plans::after{display:none!important}
  body.web-page-leave-forward .premium-web-main,
  body.web-page-leave-back .premium-web-main,
  body.web-page-enter-forward .premium-web-main,
  body.web-page-enter-back .premium-web-main{animation:none!important}
}