/** * Onda Motion — Preloader. * * Estilos del preloader global. El cover crítico (posición + fondo + bloqueo de * scroll) se inyecta inline en desde el loader para evitar FOUC; este * archivo aporta el detalle visual de cada preset y las transiciones de salida. * * Variables (inyectadas inline en :root desde PHP): * --onda-pl-bg Fondo del overlay. * --onda-pl-fg Color de texto/indicador. * --onda-pl-accent Color de relleno (barra/contador/logo fill). * --onda-pl-exit-dur Duración de la salida. * --onda-pl-exit-ease Easing de la salida. * * @package Onda_Motion */ .onda-preloader { /* El cover real arranca en 0 (vacío). El default de --onda-pl-p es 1 para que los rellenos se vean completos al editar la plantilla en Elementor. */ --onda-pl-p: 0; position: fixed; inset: 0; z-index: 2147483600; background: var( --onda-pl-bg, #0b0b0b ); color: var( --onda-pl-fg, #ffffff ); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: inherit; -webkit-font-smoothing: antialiased; will-change: transform, opacity, clip-path; } /* Skip pre-paint: si el bootstrap decidió no mostrarlo, jamás se ve. */ html.onda-preloader-skip .onda-preloader { display: none !important; } /* Sin JS no hay forma de removerlo: lo escondemos. */ .onda-preloader[data-nojs] { display: none !important; } .onda-pl-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: min( 80vw, 640px ); text-align: center; } /* Contenido por plantilla de Elementor: full-bleed, sin las restricciones del .onda-pl-inner de los presets. */ .onda-pl-inner.onda-pl-tpl { width: 100%; max-width: none; height: 100%; display: block; gap: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .onda-pl-inner.onda-pl-tpl > .elementor, .onda-pl-inner.onda-pl-tpl > * { min-height: 100%; } /* ── Elementos "vivos" guiados por el progreso ──────────────────────────── Utilidades que cualquier elemento DENTRO del preloader (incluso widgets de una plantilla de Elementor) puede usar agregando la clase en su campo Avanzado → Clases CSS. Consumen la variable --onda-pl-p (0→1) que el runtime actualiza en .onda-preloader en cada frame. - onda-pl-fill-up/down/left/right: el elemento se "rellena" en esa dirección (ideal para un LOGO que se llena de abajo hacia arriba). - onda-pl-num: el runtime le escribe el porcentaje (0→100) como texto. - onda-pl-fill: el runtime le anima el ancho (barra de progreso). */ .onda-pl-fill-up, .onda-pl-fill-down, .onda-pl-fill-left, .onda-pl-fill-right { transition: -webkit-clip-path 0.15s linear, clip-path 0.15s linear; will-change: clip-path; } .onda-pl-fill-up { -webkit-clip-path: inset( calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 0 ); clip-path: inset( calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 0 ); } .onda-pl-fill-down { -webkit-clip-path: inset( 0 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 ); clip-path: inset( 0 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 ); } .onda-pl-fill-left { -webkit-clip-path: inset( 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 ); clip-path: inset( 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 ); } .onda-pl-fill-right { -webkit-clip-path: inset( 0 0 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) ); clip-path: inset( 0 0 0 calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) ); } /* Helper opcional para apilar un logo tenue + su relleno (dos imágenes iguales, la de arriba con la clase de relleno). */ .onda-pl-fill-base { opacity: 0.18; } /* ── Preset: minimal (spinner) ───────────────────────────────────────── */ .onda-pl-spinner { width: 38px; height: 38px; border-radius: 50%; border: 2px solid color-mix( in srgb, var( --onda-pl-fg, #fff ) 22%, transparent ); border-top-color: var( --onda-pl-accent, #ff3d00 ); animation: onda-pl-spin 0.7s linear infinite; } @keyframes onda-pl-spin { to { transform: rotate( 360deg ); } } /* ── Preset: counter (porcentaje grande) ─────────────────────────────── */ .onda-pl-count { display: flex; align-items: flex-start; justify-content: center; line-height: 0.9; font-weight: 600; letter-spacing: -0.03em; font-size: clamp( 56px, 14vw, 160px ); font-variant-numeric: tabular-nums; } .onda-pl-count .onda-pl-pct { font-size: 0.32em; margin-top: 0.18em; margin-left: 0.08em; opacity: 0.65; } /* ── Preset: bar (barra de progreso + label) ─────────────────────────── */ .onda-pl-label { font-size: clamp( 13px, 2vw, 16px ); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .onda-pl-track { position: relative; width: min( 70vw, 380px ); height: 2px; background: color-mix( in srgb, var( --onda-pl-fg, #fff ) 16%, transparent ); overflow: hidden; border-radius: 2px; } .onda-pl-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var( --onda-pl-accent, #ff3d00 ); transition: width 0.25s linear; } /* counter trae además una barra fina debajo */ .onda-preloader[data-preset="counter"] .onda-pl-track { width: min( 70vw, 280px ); } /* ── Preset: logo (relleno de abajo hacia arriba) ────────────────────── */ .onda-pl-logo { position: relative; display: inline-block; line-height: 0; } .onda-pl-logo img { display: block; /* ancho CONCRETO (no auto) → un SVG con viewBox pero sin width/height intrínsecos se renderiza igual (con auto colapsaba a 0). Sirve para SVG y raster por igual, manteniendo el aspecto. */ width: min( 60vw, 240px ); height: auto; max-height: 40vh; object-fit: contain; } /* Capa base, tenue */ .onda-pl-logo .onda-pl-logo-base { opacity: 0.18; } /* Capa de relleno, recortada por progreso (revela de abajo hacia arriba) */ .onda-pl-logo .onda-pl-logo-fg { position: absolute; inset: 0; opacity: 1; -webkit-clip-path: inset( calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 0 ); clip-path: inset( calc( ( 1 - var( --onda-pl-p, 1 ) ) * 100% ) 0 0 0 ); } /* ── Preset: words (saludos que ciclan) ──────────────────────────────── */ .onda-pl-words { position: relative; display: grid; place-items: center; min-height: 1.4em; font-size: clamp( 34px, 8vw, 96px ); font-weight: 600; letter-spacing: -0.02em; } .onda-pl-words > span { grid-area: 1 / 1; opacity: 0; transform: translateY( 14px ); filter: blur( 8px ); transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease; } .onda-pl-words > span.is-on { opacity: 1; transform: translateY( 0 ); filter: blur( 0 ); } .onda-pl-words > span.is-out { opacity: 0; transform: translateY( -14px ); filter: blur( 8px ); } /* ── Slats (para la salida "curtains") ───────────────────────────────── */ .onda-pl-slats { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 2; } .onda-pl-slats > i { flex: 1 1 0; background: var( --onda-pl-bg, #0b0b0b ); transform: translateY( 0 ); transition: transform var( --onda-pl-exit-dur, 0.7s ) var( --onda-pl-exit-ease, cubic-bezier( 0.7, 0, 0.3, 1 ) ); } /* ── Salidas ─────────────────────────────────────────────────────────── */ .onda-preloader.is-exit { transition: opacity var( --onda-pl-exit-dur, 0.7s ) var( --onda-pl-exit-ease, cubic-bezier( 0.7, 0, 0.3, 1 ) ), transform var( --onda-pl-exit-dur, 0.7s ) var( --onda-pl-exit-ease, cubic-bezier( 0.7, 0, 0.3, 1 ) ), clip-path var( --onda-pl-exit-dur, 0.7s ) var( --onda-pl-exit-ease, cubic-bezier( 0.7, 0, 0.3, 1 ) ); } /* El contenido se atenúa apenas arranca la salida en todos los modos. */ .onda-preloader.is-exit .onda-pl-inner { opacity: 0; transition: opacity 0.3s ease; } /* fade */ .onda-preloader.exit-fade.is-exit { opacity: 0; } /* wipe-up / wipe-down */ .onda-preloader.exit-wipe-up.is-exit { transform: translateY( -100% ); } .onda-preloader.exit-wipe-down.is-exit { transform: translateY( 100% ); } /* split (se parte en dos mitades verticales) */ .onda-preloader.exit-split.is-exit { -webkit-clip-path: inset( 0 0 0 0 ); clip-path: inset( 0 0 0 0 ); /* el efecto real lo hacen las dos mitades, abajo */ background: transparent; } .onda-preloader .onda-pl-half { position: absolute; left: 0; right: 0; height: 50%; background: var( --onda-pl-bg, #0b0b0b ); z-index: 1; transition: transform var( --onda-pl-exit-dur, 0.7s ) var( --onda-pl-exit-ease, cubic-bezier( 0.7, 0, 0.3, 1 ) ); } .onda-preloader .onda-pl-half.top { top: 0; } .onda-preloader .onda-pl-half.bottom { bottom: 0; } .onda-preloader.exit-split.is-exit .onda-pl-half.top { transform: translateY( -100% ); } .onda-preloader.exit-split.is-exit .onda-pl-half.bottom { transform: translateY( 100% ); } /* curtains: el fondo se vuelve transparente y los slats suben escalonados */ .onda-preloader.exit-curtains.is-exit { background: transparent; } .onda-preloader.exit-curtains.is-exit .onda-pl-slats > i { transform: translateY( -110% ); } /* Reduced motion / failsafe: oculta sin movimiento. */ .onda-preloader.onda-pl-instant { transition: none !important; opacity: 0 !important; } .onda-preloader.onda-pl-instant * { transition: none !important; animation: none !important; } /* hold=click: el cover ya cargó, espera el click del visitante para entrar. */ .onda-preloader.onda-pl-can-enter { cursor: pointer; } /* ══ Entrada/Salida del CONTENIDO del cover (motor in/out, presets premium) ══ Va en el CSS core (siempre encolado con el cover) para que funcione aunque la plantilla NO use nuestros widgets. El runtime etiqueta los bloques con .onda-pl-anim + data-onda-in/out + vars de delay (stagger). Anti-FOUC: el contenido arranca oculto por el blanket crítico inline (.onda-pl-content-armed) hasta que el runtime arma el estado por-elemento y lo destapa. */ .onda-pl-anim[data-onda-in] { transition: opacity var( --onda-in-dur, 700ms ) cubic-bezier( 0.16, 1, 0.3, 1 ) var( --onda-in-delay, 0ms ), transform var( --onda-in-dur, 700ms ) cubic-bezier( 0.16, 1, 0.3, 1 ) var( --onda-in-delay, 0ms ), filter var( --onda-in-dur, 700ms ) ease var( --onda-in-delay, 0ms ), clip-path var( --onda-in-dur, 700ms ) cubic-bezier( 0.16, 1, 0.3, 1 ) var( --onda-in-delay, 0ms ); will-change: opacity, transform, filter, clip-path; } .onda-pl-armed .onda-pl-anim[data-onda-in]:not( [data-onda-in="none"] ):not( .is-in ) { opacity: 0; } .onda-pl-armed .onda-pl-anim[data-onda-in="up"]:not( .is-in ) { transform: translateY( 40px ); } .onda-pl-armed .onda-pl-anim[data-onda-in="down"]:not( .is-in ) { transform: translateY( -40px ); } .onda-pl-armed .onda-pl-anim[data-onda-in="left"]:not( .is-in ) { transform: translateX( 40px ); } .onda-pl-armed .onda-pl-anim[data-onda-in="right"]:not( .is-in ) { transform: translateX( -40px ); } .onda-pl-armed .onda-pl-anim[data-onda-in="scale"]:not( .is-in ) { transform: scale( 0.86 ); } .onda-pl-armed .onda-pl-anim[data-onda-in="blur"]:not( .is-in ) { filter: blur( 14px ); } .onda-pl-armed .onda-pl-anim[data-onda-in="clip-up"]:not( .is-in ) { -webkit-clip-path: inset( 100% 0 0 0 ); clip-path: inset( 100% 0 0 0 ); } /* Premium: revelado con cortina (clip) + desenfoque que se despeja + leve subida. */ .onda-pl-armed .onda-pl-anim[data-onda-in="reveal"]:not( .is-in ) { -webkit-clip-path: inset( 100% 0 0 0 ); clip-path: inset( 100% 0 0 0 ); filter: blur( 14px ); transform: translateY( 30px ); } .onda-pl-anim[data-onda-out].is-out { transition: opacity var( --onda-out-dur, 560ms ) ease var( --onda-out-delay, 0ms ), transform var( --onda-out-dur, 560ms ) cubic-bezier( 0.5, 0, 0.75, 0 ) var( --onda-out-delay, 0ms ), filter var( --onda-out-dur, 560ms ) ease var( --onda-out-delay, 0ms ), clip-path var( --onda-out-dur, 560ms ) ease var( --onda-out-delay, 0ms ); opacity: 0; } .onda-pl-anim[data-onda-out="up"].is-out { transform: translateY( -40px ); } .onda-pl-anim[data-onda-out="down"].is-out { transform: translateY( 40px ); } .onda-pl-anim[data-onda-out="left"].is-out { transform: translateX( -40px ); } .onda-pl-anim[data-onda-out="right"].is-out { transform: translateX( 40px ); } .onda-pl-anim[data-onda-out="scale"].is-out { transform: scale( 0.86 ); } .onda-pl-anim[data-onda-out="clip-up"].is-out { -webkit-clip-path: inset( 0 0 100% 0 ); clip-path: inset( 0 0 100% 0 ); } /* Premium: salida con desenfoque + leve acercamiento (no un fade plano). */ .onda-pl-anim[data-onda-out="fade-blur"].is-out { filter: blur( 16px ); transform: scale( 1.04 ); } @media ( prefers-reduced-motion: reduce ) { .onda-pl-anim[data-onda-in], .onda-pl-anim[data-onda-out].is-out { transition-duration: 1ms !important; } }