/* ============================================================ EFECTOS — Shenzhen International (motor davies: GSAP + ScrollSmoother + SplitText) Identidad de motion tomada del template davies (a pedido del cliente): preloader de barras · scroll suave pesado · titulares revelados por carácter atados al scroll (text-color-change) · tarjetas que se apilan (stack-element) · panel de pasos pineado (stack-element-2 / serviceScroll) · contadores · marquee infinito · seguidor de mouse sobre imágenes (tf-mouse). Todo vive bajo .fx (clase en ). Sin JS: contenido completo visible. Decisión de marca (Diego): los efectos se REPRODUCEN aunque el SO pida reduced-motion. La degradación es solo para JS-off. ============================================================ */ /* Sin la clase .fx nada de esto afecta al documento */ /* ---- Scroll suave: el wrapper no debe recortar el nav fijo (queda fuera) ---- */ .fx #smooth-wrapper{overflow:hidden} .fx #smooth-content{will-change:transform} /* ---- Neutralizar el reveal base (el motor GSAP toma el control) ---- */ .fx .reveal,.fx .stagger>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important} /* ---- PRELOADER de barras (davies loader) ---- */ .fx .preloader{position:fixed;inset:0;z-index:200;background:var(--brand-1);display:grid;place-items:center; clip-path:inset(0 0 var(--preloader-clip,0%) 0)} .preloader__in{width:min(320px,70vw);display:flex;flex-direction:column;gap:14px} .preloader__wm{display:flex;align-items:center;gap:11px;color:#fff;margin-bottom:6px} .preloader__bar{height:3px;background:oklch(1 0 0/.14);border-radius:99px;overflow:hidden} .preloader__bar .inner-bar{display:block;height:100%;width:0%;background:var(--accent);border-radius:99px} html:not(.fx) .preloader,html.no-js .preloader{display:none} /* failsafe puro CSS: si el JS no llegara a quitar el preloader (script bloqueado/lento), se desvanece solo a los 3.2s — la página NUNCA puede quedar tapada */ .fx .preloader{animation:szPreFail .5s ease 3.2s forwards} @keyframes szPreFail{to{opacity:0;visibility:hidden}} /* ---- Revelado por carácter (text-color-change) ---- */ .fx .fx-scrub .ch{display:inline-block} .fx .fx-scrub{will-change:contents} /* ---- Tarjetas apiladas: al pinear, el fondo glass debe ser más opaco para que la tarjeta siguiente tape limpia a la anterior ---- */ .fx .stackcards .scard{background:color-mix(in oklab,var(--brand-2),var(--brand-1) 52%)} /* ---- Switcher pineado del proceso (panels superpuestos, solo desktop ≥992px) ---- */ .fx .swt--abs{position:relative;overflow:hidden} .fx .swt--abs .swt__panel{position:absolute;left:0;right:0;top:0;margin:0; background:color-mix(in oklab,var(--brand-2),var(--brand-1) 45%); box-shadow:0 -18px 44px oklch(0 0 0/.35)} /* ---- Seguidor de mouse sobre imágenes (tf-mouse de davies) ---- */ .fx .fxh{position:relative} .fx .fxh .tf-mouse{position:absolute;z-index:5;width:64px;height:64px;border-radius:50%; background:var(--accent);color:var(--accent-ink);display:grid;place-items:center; font-family:var(--font-mono);font-size:18px;font-weight:600;pointer-events:none; transform:translate(-50%,-50%) scale(0);transition:transform .28s var(--ease-out,ease-out); box-shadow:0 10px 26px oklch(0 0 0/.35)} .fx .fxh:hover .tf-mouse{transform:translate(-50%,-50%) scale(1)} @media(hover:none){.fx .fxh .tf-mouse{display:none}} /* ---- VIDEO de fondo del hero: cadena de 3 clips 1080p (doble buffer con crossfade) ---- El del hero queda debajo como póster/LCP/fallback; el video aparece encima con la MISMA opacidad para que el scrim siga funcionando. Sin .fx: no existe. */ html:not(.fx) .szhero__video{display:none} .szhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s ease;filter:saturate(1.06) contrast(1.04)} .szhero__video.on{opacity:.48} /* ---- Pin spacing: el pin de GSAP agrega espaciadores; mantener fondos coherentes ---- */ .fx .pin-spacer{background:inherit}