/* ============================================================
   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: #163a52; 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); } }

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