/* ============================================================ EFECTOS — GPS Heavy Machinery (motor bespoke "Blueprint Engineering") Identidad de motion ÚNICA de este sitio (no se repite entre webs HKR): · preloader de PLANO con lectura de coordenadas + grilla que se dibuja · hero: titular sellado línea por línea (clip stamp) + video difuminado encadenado · reveals "draw-in": barrido de clip-path con línea de acento · contadores blueprint · parallax (ScrollSmoother data-speed) · proceso con paso activo resaltado · botones magnéticos · tilt en tarjetas Todo bajo .fx (en ). Sin JS: documento completo y legible. Decisión de marca (Diego): los efectos CORREN aunque el SO pida reduced-motion; la degradación es solo para JS-off. ============================================================ */ /* Scroll suave (no recorta el nav fijo, que vive fuera del wrapper) */ .fx #smooth-wrapper{overflow:hidden} .fx #smooth-content{will-change:transform} /* Neutraliza el reveal base de bloques.css: el motor GSAP toma el control */ .fx .reveal,.fx .stagger>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important} /* ---------- PRELOADER blueprint ---------- */ .fx .preloader{position:fixed;inset:0;z-index:300;background:var(--brand-1);display:grid;place-items:center; clip-path:inset(0 0 var(--pl,0%) 0)} .preloader__grid{position:absolute;inset:0;opacity:0; background-image:linear-gradient(oklch(1 0 0/.06) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0/.06) 1px,transparent 1px); background-size:40px 40px} .preloader__in{position:relative;width:min(360px,76vw);color:#fff} .preloader__mark{display:flex;align-items:center;gap:12px;margin-bottom:18px} .preloader__mark img{height:30px;width:auto} .preloader__read{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:oklch(1 0 0/.6);margin-bottom:10px} .preloader__read .pct{color:var(--accent)} .preloader__track{height:2px;background:oklch(1 0 0/.14);overflow:hidden} .preloader__track .bar{display:block;height:100%;width:0;background:var(--accent)} .preloader__cross{position:absolute;width:18px;height:18px;pointer-events:none} .preloader__cross::before,.preloader__cross::after{content:"";position:absolute;background:var(--accent)} .preloader__cross::before{left:8px;top:0;width:1px;height:100%} .preloader__cross::after{top:8px;left:0;height:1px;width:100%} html:not(.fx) .preloader,html.no-js .preloader{display:none} /* failsafe: si el JS no quita el preloader, se va solo a los 3.4s */ .fx .preloader{animation:plFail .5s ease 3.4s forwards} @keyframes plFail{to{opacity:0;visibility:hidden}} /* ---------- HERO: titular sellado línea por línea ---------- */ .fx .hero .line{overflow:hidden;display:block} .fx .hero .line>span{display:block} /* ---------- reveals draw-in (motor los anima; estado inicial JS-only) ---------- */ .fx [data-rv]{will-change:transform,opacity} /* ---------- línea de barrido de acento bajo títulos de sección ---------- */ .fx .sweepline{position:relative} .fx .sweepline::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:var(--sw,0%);background:var(--accent)} /* ---------- video difuminado del hero (cadena de clips, doble buffer) ---------- */ html:not(.fx) .hero__video{display:none} .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1; opacity:0;transition:opacity 1s ease;filter:blur(3px) saturate(1.08) contrast(1.05) brightness(.92);transform:scale(1.06)} .hero__video.on{opacity:.55} /* ---------- proceso: paso activo ---------- */ .fx .fstep{opacity:.5;transition:opacity .4s var(--ease),border-color .3s,transform .3s var(--ease)} .fx .fstep.act{opacity:1;border-color:var(--accent)} /* ---------- botón magnético ---------- */ .fx .mag{will-change:transform} /* ---------- tilt de tarjeta sector (parallax de la miniatura) ---------- */ .fx .sector__thumb img{will-change:transform} /* pin spacers heredan fondo */ .fx .pin-spacer{background:inherit} /* cursor del seguidor en medios (hover fino) */ .fx .fxh{position:relative} .fx .fxh .dot{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-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase; pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .28s var(--ease);box-shadow:0 12px 28px oklch(0 0 0/.4)} .fx .fxh:hover .dot{transform:translate(-50%,-50%) scale(1)} @media(hover:none){.fx .fxh .dot{display:none}} /* ---------- barra de progreso de scroll (header) ---------- */ .scrollprog{position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:80;pointer-events:none} html:not(.fx) .scrollprog{display:none} /* ---------- cursor custom (puntero fino) ---------- */ .gcur{position:fixed;top:0;left:0;width:34px;height:34px;border:1.6px solid var(--accent);border-radius:50%; pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0; transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s,border-color .25s} .gcur.on{opacity:1} .gcur.grow{width:62px;height:62px;background:oklch(0.78 0.16 75/.12)} .gcur__dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent); pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s} .gcur__dot.on{opacity:1} /* oculta el cursor nativo cuando el custom está activo; lo conserva en campos editables (usabilidad) */ @media(hover:hover) and (pointer:fine){ html.hascur,html.hascur a,html.hascur button,html.hascur summary,html.hascur [role=button]{cursor:none} html.hascur input,html.hascur textarea,html.hascur select{cursor:auto} } @media(hover:none),(pointer:coarse){.gcur,.gcur__dot{display:none!important}html.hascur,html.hascur *{cursor:auto!important}} /* ---------- tilt 3D de tarjetas ---------- */ .fx .tilt{will-change:transform}