/** * LOADER DE ENTRADA - solo en la landing atomica (#103) * * Adaptacion del loader de Osmo/Willem: dos mitades del monograma (JV | LL) que * se separan mientras una imagen crece entre ellas hasta ocupar la pantalla. * La imagen es la MISMA que el fondo del hero (seccion-hero-1.jpg), asi que al * llegar a pantalla completa aterriza sobre un fondo identico y la cortina se * puede retirar con un fundido corto sin costura visible. * * DECISIONES QUE SE APARTAN DEL ORIGINAL, todas por rendimiento o accesibilidad: * * 1. Vive en el tema, NO en Elementor. Necesita `position: fixed` por encima de * todo y no debe ensuciar la estructura que se edita en el editor. * 2. Arranca OCULTO (`is--hidden`). Si el JS o GSAP no cargan, no llega a verse: * la pagina se comporta como si el loader no existiera. Es la red de * seguridad mas importante de todo el fichero. * 3. Duracion total ~1,9s en vez de los ~5,5s del original. Una cortina delante * del elemento principal cuenta como retraso de LCP, y el umbral son 2,5s. * 4. `prefers-reduced-motion` lo desactiva por completo. * 5. Sin las tres imagenes "extra" que parpadean en el original: eran tres * descargas mas en el primer pintado a cambio de un destello de 50ms. * * El bloqueo del scroll se hace con la clase `jvl-cargando` en , que pone * y quita el JS. El original usaba `main:has(.is--loading){height:100dvh}`, que * depende de que exista un
y no se puede revertir desde JS con la misma * limpieza. */ .jvl-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--e-global-color-jvl-primario, #181B26); color: #F4F4F4; } /* Estado de partida: invisible hasta que el JS decide mostrarlo. */ .jvl-loader.is--hidden { display: none; } html.jvl-cargando, html.jvl-cargando body { overflow: hidden; } /* * El monograma. `line-height: .75` recorta el interlineado para que las cajas de * las mitades queden a la altura de las letras y el recorte del `overflow` no * deje aire por arriba al subirlas. */ .jvl-loader__h1 { position: relative; display: flex; justify-content: center; white-space: nowrap; font-family: Syne, sans-serif; font-weight: 700; font-size: clamp(3.25rem, 11vw, 11rem); line-height: 0.75; letter-spacing: 0.01em; } /* * Las dos mitades. A diferencia del original NO llevan ancho fijo: el suyo * (1.5256em) estaba medido a mano para "Wil"/"lem" en su tipografia. Con ancho * automatico y el padre centrado, "JV"/"LL" en Syne quedan centrados solos y no * hay numero magico que revisar si algun dia cambia el monograma. * El `overflow: hidden` es lo que hace de telon para la entrada de las letras. */ .jvl-loader__start, .jvl-loader__end { display: flex; overflow: hidden; } .jvl-loader__start { justify-content: flex-end; } .jvl-loader__end { justify-content: flex-start; } .jvl-loader__letra { display: block; position: relative; } /* La caja que se abre entre las dos mitades. */ .jvl-loader__box { position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center; width: 0; } .jvl-loader__box-inner { position: relative; display: flex; align-items: center; justify-content: center; min-width: 1em; height: 95%; } .jvl-loader__img { position: absolute; display: flex; align-items: center; justify-content: center; width: 0; height: 100%; overflow: hidden; } .jvl-loader__img-wrap { position: absolute; width: 100%; min-width: 1em; height: 100%; } .jvl-loader__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; } /* * Sin animacion: quien lo pide no ve cortina ninguna. No basta con acortarla ni * con quitar las transiciones, porque el movimiento lo genera GSAP desde JS: el * script comprueba esta misma preferencia y se retira antes de empezar. Esta * regla es el respaldo por si el nodo llegara a pintarse. */ @media (prefers-reduced-motion: reduce) { .jvl-loader { display: none !important; } }