/* * Primordial — movimiento (js/movimiento.js), traído de primordial-web con sus mismos tiempos y curvas: * 1. Intro de la portada: una cortina tipea "Primordial Marketing Lab." y sube destapando la página; * las palabras del título entran cuando el borde de la cortina pasa por su renglón. * 2. Revelado: cada bloque sube 12 px y aparece al entrar en pantalla (las tarjetas, 8 px). * Nada queda oculto sin JavaScript: la cortina solo existe con html.pm-intro (lo pone el script del ) * y el revelado lo arma movimiento.js sobre lo que todavía está debajo de la pantalla. */ :root { --pm-expo: cubic-bezier(0.16, 1, 0.3, 1); --pm-cortina-curva: cubic-bezier(0.45, 0, 0.15, 1); } /* ── 1. Intro ── */ .pm-cortina { display: none; } html.pm-intro { /* La barra de desplazamiento reserva su lugar: al liberar el scroll la página no se corre. */ scrollbar-gutter: stable; } html.pm-intro:not(.pm-intro-sube) body { overflow: hidden; } html.pm-intro .pm-cortina { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: var(--pm-fondo); color: var(--pm-texto); transition: transform 1500ms var(--pm-cortina-curva); } html.pm-intro-sube .pm-cortina { transform: translateY(-100%); } /* Borde inferior: la misma línea con brillo que separa las secciones del diseño. */ html.pm-intro .pm-cortina::before, html.pm-intro .pm-cortina::after { content: ""; position: absolute; left: 50%; pointer-events: none; } html.pm-intro .pm-cortina::before { bottom: 0; width: 100%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(104 104 104 / 0.6) 46.6%, transparent); } html.pm-intro .pm-cortina::after { bottom: -7px; width: 329px; height: 15.5px; transform: translateX(-50%); background: url("../img/linea-destacada.svg") no-repeat center / 100% 100%; opacity: 0.7; } .pm-cortina__nombre { font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: clamp(40px, 2.2rem + 1.6vw, 62px); line-height: 1.08; letter-spacing: -0.02em; } .pm-cortina__renglon { position: relative; white-space: nowrap; } /* El texto completo, invisible, reserva el ancho y el alto: la caja no se mueve mientras se tipea. */ .pm-cortina__reserva { visibility: hidden; } .pm-cortina__tipeo { position: absolute; top: 0; left: 0; display: flex; align-items: center; white-space: pre; } .pm-cortina__punto { color: var(--pm-acento); } .pm-cortina__cursor { width: 3px; height: 1.1em; margin-left: 0.1em; border-radius: 3px; background: var(--pm-acento); box-shadow: 0 0 12px rgb(221 234 126 / 0.55); animation: pm-parpadeo 0.7s step-end infinite; } @keyframes pm-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Palabras del título: esperan debajo de la cortina y entran con ella (movimiento.js calcula --d). */ .pm-palabra { display: inline-block; } html.pm-intro .pm-palabras .pm-palabra { opacity: 0; transform: translateY(0.2em); transition: opacity 600ms var(--pm-expo) var(--d, 0ms), transform 600ms var(--pm-expo) var(--d, 0ms); } /* Desenfoque solo con mouse: en celulares se ve pesado. */ @media (hover: hover) and (pointer: fine) { html.pm-intro .pm-palabras .pm-palabra { filter: blur(6px); transition: opacity 600ms var(--pm-expo) var(--d, 0ms), transform 600ms var(--pm-expo) var(--d, 0ms), filter 600ms var(--pm-expo) var(--d, 0ms); } } html.pm-intro .pm-palabras.pm-entra .pm-palabra { opacity: 1; transform: none; filter: none; } /* ── 2. Revelado ── Usa `translate` (no `transform`) para no pisar el transform propio de ningún elemento, y las clases se quitan al terminar: el bloque vuelve a sus estilos y transiciones de siempre. */ .pm-rv:not(.pm-rv-in) { opacity: 0 !important; translate: 0 12px !important; transition: none !important; } .pm-rv--caja:not(.pm-rv-in) { translate: 0 8px !important; } .pm-rv.pm-rv-in { transition: opacity 520ms var(--pm-expo) var(--pm-rd, 0ms), translate 520ms var(--pm-expo) var(--pm-rd, 0ms) !important; } .pm-rv--caja.pm-rv-in { transition: opacity 480ms var(--pm-expo) var(--pm-rd, 0ms), translate 480ms var(--pm-expo) var(--pm-rd, 0ms) !important; } @media (prefers-reduced-motion: reduce) { /* Videos de fondo: queda la imagen de respaldo de Elementor. */ .elementor-background-video-container { display: none; } .pm-rv { opacity: 1 !important; translate: none !important; } html.pm-intro .pm-palabras .pm-palabra { opacity: 1; transform: none; filter: none; transition: none; } }