/* ============================================================
MOTION KIT v2 · Cazador de Webs
Patrones de animación nivel agencia premium. Vanilla, sin
dependencias. Colores del cliente como variables:
:root { --mk-primario:#...; --mk-secundario:#...; --mk-fondo:#...; --mk-texto:#...; }
============================================================ */
/* --- INTRO: cortina con el logo del cliente ------------------ */
/* HTML:
============================================================ */
/* --- PIN: la escena se clava y el scroll "avanza la película" - */
.mk-pin { position: relative; height: 250vh; }
.mk-pin-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
/* --- Escenario 3D y capas con profundidad -------------------- */
.mk-scene3d { perspective: 1200px; transform-style: preserve-3d; }
.mk-layer {
position: absolute; inset: 0; display: grid; place-items: center;
will-change: transform;
/* cada capa se acerca desde su profundidad hasta el plano según avanza el scroll */
transform: translateZ(calc(var(--mk-depth, 0px) * (1 - var(--mk-p, 0))))
translateY(calc(var(--mk-depth, 0px) * (1 - var(--mk-p, 0)) * -0.25));
}
/* --- ZOOM-OUT del fondo: entra cerca, asienta lejos ----------- */
.mk-zoomout {
width: 100%; height: 100%; object-fit: cover;
transform: scale(calc(1.25 - 0.25 * var(--mk-p, 0)));
filter: brightness(calc(0.55 + 0.25 * var(--mk-p, 0)));
}
/* --- TILT por scroll: el producto rota en 3D ------------------ */
.mk-tilt-scroll {
will-change: transform;
transform: rotateX(calc((1 - var(--mk-p, 0)) * 24deg))
rotateY(calc((var(--mk-p, 0) - 0.5) * 14deg))
scale(calc(0.9 + 0.1 * var(--mk-p, 0)));
}
/* --- SECUENCIA: los hijos aparecen por umbrales de scroll ----- */
.mk-seq > * { opacity: calc((var(--mk-p, 0) - var(--mk-at, 0.2)) / 0.15); transform: translateY(calc(max(0, 1 - (var(--mk-p, 0) - var(--mk-at, 0.2)) / 0.15) * 26px)); }
.mk-seq > *:nth-child(1) { --mk-at: 0.15; }
.mk-seq > *:nth-child(2) { --mk-at: 0.35; }
.mk-seq > *:nth-child(3) { --mk-at: 0.55; }
.mk-seq > *:nth-child(4) { --mk-at: 0.75; }
/* --- STATEMENT: frase gigante que vive en el centro del scroll -
Sección normal con data-mk-scrolly; el texto aparece al llegar
al centro del viewport y se desvanece al pasarlo (pico en p=0.5). */
.mk-statement {
opacity: calc(1 - max(calc(var(--mk-p, 0) - 0.5), calc(0.5 - var(--mk-p, 0))) * 2.6);
transform: scale(calc(0.92 + 0.08 * (1 - max(calc(var(--mk-p, 0) - 0.5), calc(0.5 - var(--mk-p, 0))) * 2)));
will-change: transform, opacity;
}
/* --- GALERÍA HORIZONTAL conducida por scroll vertical ---------
fotos…
(ajusta --mk-shift al ancho del track) */
.mk-hscroll { display: flex; align-items: center; }
.mk-hscroll-track {
display: flex; gap: 3vw; padding: 0 8vw; will-change: transform;
transform: translateX(calc(var(--mk-p, 0) * var(--mk-shift, -60%)));
}
.mk-hscroll-track > * { flex-shrink: 0; }
/* --- WIPE: la siguiente imagen se abre en círculo con el scroll */
.mk-wipe {
clip-path: circle(calc(var(--mk-p, 0) * 120%) at 50% 50%);
will-change: clip-path;
}
/* --- COLORMORPH: el fondo de la sección muta con el progreso -- */
.mk-colormorph {
background: color-mix(in srgb,
var(--mk-fondo) calc(100% - var(--mk-p, 0) * 22%),
var(--mk-primario) calc(var(--mk-p, 0) * 22%));
}
/* ============================================================
LA PELÍCULA (v4) — experiencia de UN SOLO LIENZO.
Sin secciones: un contenedor .mk-film da la duración del scroll
y un lienzo sticky .mk-film-stage lo muestra todo. Cada bloque
de información es un "shot" con su ventana temporal --in/--out
dentro del timeline global --mk-p (0→1).
…fondo/logo…
…titular…
…
Solapa las ventanas (~4%) para que el lienzo nunca quede vacío.
NOTA: esta clase se llama .mk-filmshot (no .mk-shot) a propósito —
.mk-shot ya existe en site.css como envoltorio simple de capturas
("captura simple", con sombra y esquinas redondeadas). Si coincidieran
de nombre, esta regla (opacity: var(--alive), que vale 0 fuera de un
[data-mk-scrolly]) dejaría invisible CUALQUIER captura de producto
que use .mk-shot en el resto del sitio.
============================================================ */
.mk-film { position: relative; height: calc(var(--mk-shots, 8) * 120vh); }
.mk-film-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mk-filmshot {
/* progreso local del shot dentro de su ventana */
--lp: clamp(0, calc((var(--mk-p, 0) - var(--in, 0)) / max(0.001, calc(var(--out, 1) - var(--in, 0)))), 1);
/* rampas de entrada (primer 15% de la ventana) y salida (último 15%) */
--ramp-in: clamp(0, calc(var(--lp) / 0.15), 1);
--ramp-out: clamp(0, calc((1 - var(--lp)) / 0.15), 1);
--alive: min(var(--ramp-in), var(--ramp-out));
position: absolute; inset: 0; display: grid; place-items: center;
opacity: var(--alive);
pointer-events: none;
will-change: transform, opacity;
}
/* el shot sólo es interactivo mientras está en escena */
.mk-filmshot[data-live], .mk-filmshot:hover { pointer-events: auto; }
/* --- Efectos de shot (combinables) --------------------------- */
/* Sube al entrar y se eleva al despedirse */
.mk-fx-rise { transform: translateY(calc((1 - var(--ramp-in)) * 60px - (1 - var(--ramp-out)) * 60px)); }
/* Se acerca desde el fondo y sigue creciendo al salir (atraviesa la cámara) */
.mk-fx-zoom { transform: scale(calc(0.82 + var(--lp) * 0.28)); }
/* Entra desde un lateral y sale por el contrario */
.mk-fx-drift-l { transform: translateX(calc((1 - var(--ramp-in)) * -12vw + (1 - var(--ramp-out)) * 12vw)); }
.mk-fx-drift-r { transform: translateX(calc((1 - var(--ramp-in)) * 12vw + (1 - var(--ramp-out)) * -12vw)); }
/* Rota en 3D mientras vive */
.mk-fx-tilt { transform: perspective(1100px) rotateX(calc((1 - var(--lp)) * 18deg)) rotateY(calc((var(--lp) - 0.5) * 10deg)); }
/* Foto de fondo viva: zoom continuo durante toda su ventana */
.mk-fx-kenburns-live img, img.mk-fx-kenburns-live { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 + var(--lp) * 0.14)); }
/* Capas internas con profundidad (dentro de un shot) */
.mk-fx-parallax > * { transform: translateY(calc((1 - var(--lp)) * var(--mk-depth, 0px))); will-change: transform; }
/* ============================================================
EL TÚNEL 3D (v5) — la cámara VUELA A TRAVÉS de los contenidos.
Cada shot vive a una profundidad del túnel (--zi = su índice) y
el scroll avanza la cámara: los shots emergen del fondo, llegan
a foco, y PASAN POR ENCIMA de la cámara (nos metemos dentro).
…logo…
…titular + foto…
…
…CTA…
(--mk-nshots = número de shots; el mismo valor que data-mk-shots)
============================================================ */
.mk-tunnel { perspective: 1100px; perspective-origin: 50% 46%; }
.mk-zshot {
/* f = distancia de la cámara a este shot, en "unidades de shot".
f<0: aún lejos, al fondo · f=0: en foco · f>0: lo estamos atravesando */
--f: calc(var(--mk-p, 0) * (var(--mk-nshots, 10) - 1) - var(--zi, 0));
position: absolute; inset: 0; display: grid; place-items: center;
transform: translateZ(calc(var(--f) * 760px));
/* visible solo cerca del foco (~0,35 shots antes y después) para que el shot
siguiente/anterior no quede semi-opaco encima del que está en foco */
opacity: min(
clamp(0, calc((var(--f) + 0.95) / 0.6), 1),
clamp(0, calc((0.35 - var(--f)) / 0.3), 1)
);
pointer-events: none;
will-change: transform, opacity;
}
.mk-zshot[data-live] { pointer-events: auto; }
/* Dentro de un zshot: capas a distinta profundidad → paralaje al atravesar */
.mk-zdepth { transform: translateZ(var(--z, 0px)); }
/* DIVE: foto por la que ENTRAMOS — crece hasta tragarse la cámara.
Úsala como fondo de un zshot (la siguiente escena emerge de su interior). */
.mk-fx-dive { width: 100%; height: 100%; object-fit: cover; }
/* Niebla de profundidad: oscurece lo lejano para dar volumen al túnel */
.mk-zfog { filter: brightness(calc(1 + min(0, var(--f)) * 0.22)); }
/* Raíl de progreso de la película (lado derecho) — lo crea motion.js.
Es un SCRUBBER: se puede pinchar y arrastrar para moverse por la película. */
.mk-rail {
position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
width: 5px; height: 60vh; border-radius: 5px;
background: rgba(255,255,255,0.22); z-index: 9997;
pointer-events: auto; cursor: grab; touch-action: none;
}
/* zona de agarre generosa (invisible) alrededor del raíl */
.mk-rail::before { content: ""; position: absolute; inset: -10px -16px; }
.mk-rail.mk-dragging { cursor: grabbing; }
.mk-rail-thumb {
position: absolute; left: 0; width: 100%; height: 10%; border-radius: 5px;
background: var(--mk-primario, #fff);
top: calc(var(--mk-p, 0) * 90%);
box-shadow: 0 0 12px color-mix(in srgb, var(--mk-primario, #fff) 60%, transparent);
transition: transform .2s;
}
.mk-rail:hover .mk-rail-thumb, .mk-rail.mk-dragging .mk-rail-thumb { transform: scaleX(2.2); }
/* ============================================================
EDITORIAL REVEAL (v6) — alternativa clara/plana al túnel 3D,
inspirada en el ritmo de SaaS modernos: franjas de color a
sangre completa, revelado en cortinilla, tarjetas flotantes
con paralaje suave y un subrayado "a mano" como firma visual
recurrente. Sin dependencias, motor por IntersectionObserver.
Úsala para negocios que piden un look luminoso/corporativo en
vez del vuelo cinematográfico oscuro del túnel.
============================================================ */
/* --- FADE-UP: entra al hacer scroll (no al cargar) ------------ */
/* HTML:
*/
.mk-float { will-change: transform; }
/* --- SCRIBBLE: subrayado "a mano" que se traza al entrar ------- */
/* HTML: texto clave
El atributo pathLength="1" en el es obligatorio: hace que
el trazo dibujado sea proporcional pase lo que pase con la curva. */
.mk-scribble { position: relative; display: inline-block; }
.mk-scribble-svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .5em; overflow: visible; pointer-events: none; }
.mk-scribble-svg path { fill: none; stroke: var(--mk-secundario); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .1s; }
.mk-scribble.mk-in .mk-scribble-svg path { stroke-dashoffset: 0; }
/* --- BANDA a sangre completa (ritmo de color, sin gradientes) -- */
.mk-band { border-radius: 22px; }
.mk-band-accent { background: var(--mk-secundario); color: #08131a; }
.mk-band-dark { background: var(--mk-primario); color: #fff; }
.mk-band-light { background: color-mix(in srgb, var(--mk-texto) 6%, #fff); color: var(--mk-texto); }
/* --- TARJETA FLOTANTE tipo mock-UI (blanca, sombra suave) ------ */
.mk-ui-card { background: #fff; color: #1a1a1a; border-radius: 15px; box-shadow: 0 0 40px 8px rgba(0,0,0,.16); padding: .9rem 1.1rem; }
/* ============================================================
STICKY MEDIA SECTIONS — la imagen se queda fija en pantalla
mientras el texto pasa por pasos al hacer scroll; cada paso
cruza a su propia imagen. Sensación de "vídeo" al bajar.
Mecánica: capas superpuestas con opacity cross-fade + un
IntersectionObserver por paso con el umbral en el centro de
la pantalla (no hay matemática de scroll% continua).
…
(solo se ve en móvil)
…titular y texto del paso 1…
