/* ==========================================================================
   Efecto blur premium — las 7 presentaciones de Portafolio & Servicios
   1. Enfoque por desplazamiento (escritorio y tableta): el panel que llega o se va
      queda desenfocado y se aclara a medida que se centra; el activo queda nítido.
      (El valor lo escribe js/servicios.js en --fb y --fo de cada panel.)
   2. Aparición desenfocada: títulos, textos, capacidades y botón pasan de
      desenfocado a nítido, palabra por palabra.
   3. La imagen o el video entra como a través de un vidrio esmerilado que se disuelve.
   ========================================================================== */

/* 1. enfoque por desplazamiento */
.svc.is-h .svc-panel{--fb:0px; --fo:1}
.svc.is-h .svc-panel > .svc-copy,
.svc.is-h .svc-panel > .svc-media{filter:blur(var(--fb)); opacity:var(--fo)}

/* 2. aparición desenfocada del texto */
.svc-panel .mw > span{opacity:0; filter:blur(14px);
  transition:transform 1.2s var(--s-ease), opacity 1.1s var(--s-ease), filter 1.3s var(--s-ease);
  transition-delay:calc(var(--w,0) * .06s + var(--base,0s))}
.svc-panel.is-in .mw > span{opacity:1; filter:blur(0)}
.svc-panel .rv{filter:blur(10px);
  transition:opacity 1.1s var(--s-ease), transform 1.1s var(--s-ease), filter 1.25s var(--s-ease);
  transition-delay:calc(var(--i,0) * .07s + .25s)}
.svc-panel.is-in .rv{filter:blur(0)}

/* 3. imagen tras vidrio esmerilado */
.svc-panel .svc-visual-in{filter:blur(26px) saturate(1.25); opacity:.55;
  transition:filter 1.7s var(--s-ease) .25s, opacity 1.4s var(--s-ease) .25s}
.svc-panel.is-in .svc-visual-in{filter:blur(0) saturate(1); opacity:1}
/* destello de vidrio que cruza la imagen al aparecer */
.svc-panel .svc-visual::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.05) 54%, transparent 70%);
  transform:translateX(-110%); opacity:0}
.svc-panel.is-in .svc-visual::after{animation:svc-sheen 1.8s var(--s-ease) .55s 1 both}
@keyframes svc-sheen{0%{transform:translateX(-110%); opacity:0} 15%{opacity:1} 100%{transform:translateX(110%); opacity:0}}

/* sin animaciones si la persona lo pide en su sistema */
@media (prefers-reduced-motion: reduce){
  .svc .svc-panel > .svc-copy, .svc .svc-panel > .svc-media, .svc .mw > span, .svc .rv, .svc .svc-visual-in{filter:none !important; opacity:1 !important}
  .svc .svc-visual::after{display:none}
}