/* ============================================================
   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: <div class="mk-intro"><img src="logo" alt=""></div> (primer hijo del body) */
.mk-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--mk-fondo); animation: mkCurtain 1s cubic-bezier(.76,0,.24,1) 1.6s forwards; }
.mk-intro img { max-width: min(42vw, 260px); max-height: 30vh; opacity: 0; animation: mkLogoIn 1.1s cubic-bezier(.22,1,.36,1) .15s forwards; }
@keyframes mkLogoIn { from { opacity: 0; transform: scale(.86); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: none; } }
@keyframes mkCurtain { to { transform: translateY(-100%); } }

/* --- BARRA DE PROGRESO de scroll (motion.js la crea) --------- */
.mk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9998; background: var(--mk-primario); transform-origin: 0 50%; transform: scaleX(0); }

/* --- HERO: entrada escalonada -------------------------------- */
.mk-hero > * { opacity: 0; animation: mkRise .9s cubic-bezier(.22,1,.36,1) forwards; }
.mk-hero > *:nth-child(1) { animation-delay: 2.1s; }
.mk-hero > *:nth-child(2) { animation-delay: 2.25s; }
.mk-hero > *:nth-child(3) { animation-delay: 2.4s; }
.mk-hero > *:nth-child(4) { animation-delay: 2.55s; }
@keyframes mkRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* Si no hay .mk-intro en la página, usa .mk-hero--solo (sin espera) */
.mk-hero--solo > *:nth-child(1) { animation-delay: .1s; } .mk-hero--solo > *:nth-child(2) { animation-delay: .25s; }
.mk-hero--solo > *:nth-child(3) { animation-delay: .4s; } .mk-hero--solo > *:nth-child(4) { animation-delay: .55s; }

/* --- SPLIT-TEXT: titular palabra a palabra (motion.js trocea) - */
/* HTML: <h1 class="mk-split">Tu titular aquí</h1> */
.mk-split .mk-w { display: inline-block; overflow: hidden; vertical-align: top; }
.mk-split .mk-w > span { display: inline-block; transform: translateY(110%); animation: mkWord .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--mk-i) * .07s + var(--mk-split-base, 2.1s)); }
@keyframes mkWord { to { transform: none; } }

/* --- GLOW de fondo con el color primario --------------------- */
.mk-glow { position: relative; overflow: hidden; }
.mk-glow::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--mk-primario) 26%, transparent), transparent 70%);
  animation: mkGlow 9s ease-in-out infinite alternate; }
.mk-glow > * { position: relative; z-index: 1; }
@keyframes mkGlow { from { transform: translateX(-4%) scale(1); opacity: .8; } to { transform: translateX(4%) scale(1.08); opacity: 1; } }

/* --- KEN BURNS: fotos reales del cliente con zoom lento ------ */
/* HTML: <figure class="mk-kenburns"><img src="foto-real.jpg"></figure> */
.mk-kenburns { overflow: hidden; }
.mk-kenburns img { width: 100%; height: 100%; object-fit: cover; animation: mkKen 14s ease-in-out infinite alternate; }
@keyframes mkKen { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, 1.5%); } }

/* --- REVELADO DE IMAGEN con cortinilla (clip-path) ----------- */
.mk-unveil { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.76,0,.24,1); }
.mk-unveil.mk-in { clip-path: inset(0 0 0 0); }

/* --- REVEAL al scroll ---------------------------------------- */
.mk-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.mk-reveal.mk-in { opacity: 1; transform: none; }
.mk-reveal:nth-child(2) { transition-delay: .1s; } .mk-reveal:nth-child(3) { transition-delay: .2s; } .mk-reveal:nth-child(4) { transition-delay: .3s; }

/* --- PARALLAX a sangre completa (motion.js mueve el fondo) --- */
/* HTML: <section class="mk-parallax" style="background-image:url(foto-real.jpg)">…</section> */
.mk-parallax { background-size: cover; background-position: center 0px; background-attachment: fixed; }
@supports (-webkit-touch-callout: none) { .mk-parallax { background-attachment: scroll; } }

/* --- CARDS con tilt 3D (motion.js) --------------------------- */
.mk-card { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; will-change: transform; transform-style: preserve-3d; }
.mk-card:hover { box-shadow: 0 24px 60px color-mix(in srgb, var(--mk-primario) 22%, rgba(0,0,0,.25)); }

/* --- MARQUEE (reseñas / platos / marcas) --------------------- */
.mk-marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mk-marquee-track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: mkMarquee 26s linear infinite; }
.mk-marquee:hover .mk-marquee-track { animation-play-state: paused; }
@keyframes mkMarquee { to { transform: translateX(-50%); } }

/* --- CTA con pulso ------------------------------------------- */
.mk-pulse { position: relative; }
.mk-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--mk-primario); animation: mkPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes mkPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

/* ============================================================
   SCROLLYTELLING 3D — patrones conducidos por --mk-p (0→1),
   que escribe motion.js en cada [data-mk-scrolly].
   Uso típico del hero:
   <section class="mk-pin" data-mk-scrolly>
     <div class="mk-pin-stage mk-scene3d">
       <div class="mk-layer" style="--mk-depth:-220px"><img class="mk-zoomout" src="ambiente.jpg"></div>
       <div class="mk-layer" style="--mk-depth:-80px"><img src="plato.jpg"></div>
       <div class="mk-layer mk-seq" style="--mk-depth:40px"> logo + titular + claims </div>
     </div>
   </section>
   ============================================================ */

/* --- 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 ---------
   <section class="mk-pin" data-mk-scrolly>
     <div class="mk-pin-stage mk-hscroll">
       <div class="mk-hscroll-track" style="--mk-shift:-60%"> fotos… </div>
     </div>
   </section>  (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).

   <div class="mk-film" data-mk-scrolly style="--mk-shots:10">
     <div class="mk-film-stage">
       <div class="mk-shot mk-fx-zoom" style="--in:0; --out:.14">  …fondo/logo… </div>
       <div class="mk-shot mk-fx-rise" style="--in:.10; --out:.26"> …titular…  </div>
       …
     </div>
   </div>
   <footer> …cierre estático (CTA/contacto), fuera de la película… </footer>

   Solapa las ventanas (~4%) para que el lienzo nunca quede vacío.
   ============================================================ */
.mk-film { position: relative; height: calc(var(--mk-shots, 8) * 120vh); }
.mk-film-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.mk-shot {
  /* 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-shot[data-live], .mk-shot: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).

   <div class="mk-film" data-mk-scrolly data-mk-shots="16" style="--mk-nshots:16">
     <div class="mk-film-stage mk-tunnel">
       <div class="mk-zshot" style="--zi:0">  …logo…            </div>
       <div class="mk-zshot" style="--zi:1">  …titular + foto…  </div>
       …
       <div class="mk-zshot" style="--zi:15"> …CTA…             </div>
     </div>
   </div>
   (--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));
  /* nace desde el fondo (~1,7 shots de profundidad) y muere al atravesarlo */
  /* La ventana es estrecha a propósito: con la anterior (+1.7 / 0.42) dos
     planos seguidos estaban al 100% y al 78% a la vez, y sus titulares se
     cruzaban ilegibles. Ahora el plano de al lado entra mucho más tenue. */
  opacity: min(
    clamp(0, calc((var(--f) + 1.15) / 0.62), 1),
    clamp(0, calc((0.55 - var(--f)) / 0.42), 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)); }

/* TEXTO DEL PLANO: ventana aún más estrecha que la del plano, para que el
   titular de uno se haya ido del todo antes de que llegue el del siguiente.
   Entre medias solo se ve la foto — que es justo el momento de atravesarla.
   HTML: <div class="mk-zshot"><img class="bg"><div class="mk-ztext">…</div></div> */
.mk-ztext {
  opacity: min(
    clamp(0, calc((var(--f) + 0.44) / 0.22), 1),
    clamp(0, calc((0.44 - var(--f)) / 0.22), 1)
  );
}

/* 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); }

/* --- Accesibilidad ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mk-intro { display: none; }
  .mk-hero > *, .mk-split .mk-w > span, .mk-reveal, .mk-unveil, .mk-marquee-track, .mk-pulse::after, .mk-glow::before, .mk-kenburns img { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .mk-pin { height: auto; }
  .mk-pin-stage { position: relative; height: auto; min-height: 100vh; }
  .mk-layer { position: relative; transform: none !important; }
  .mk-zoomout, .mk-tilt-scroll, .mk-seq > *, .mk-statement, .mk-hscroll-track { transform: none !important; opacity: 1 !important; filter: none !important; }
  .mk-wipe { clip-path: none !important; }
  .mk-hscroll { overflow-x: auto; }
  /* La película se despliega como documento normal: shots apilados, todo visible */
  .mk-rail { display: none; }
  .mk-film { height: auto; }
  .mk-film-stage { position: relative; height: auto; overflow: visible; }
  .mk-shot, .mk-zshot { position: relative; inset: auto; min-height: 60vh; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .mk-ztext { opacity: 1 !important; }
  .mk-zfog { filter: none !important; }
}