/* ============================================================
   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:#...; }
   ============================================================ */

.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%); } }

.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); }

.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; } }
.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; }

.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; } }

.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; } }

.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%); } }

.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); }

.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; }

.mk-parallax { background-size: cover; background-position: center 0px; background-attachment: fixed; }
@supports (-webkit-touch-callout: none) { .mk-parallax { background-attachment: scroll; } }

.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)); }

.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%); } }

.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); } }

@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; }
}