/* ============================================================
   MOTION-KIT · Película 3D por scroll (patrón "mk-film")
   ------------------------------------------------------------
   Estructura obligatoria:

   <div class="mk-film" data-mk-scrolly data-mk-shots="16" style="--mk-nshots:16">
     <div class="mk-film-stage mk-tunnel">
       <section class="mk-zshot" style="--zi:0"> … </section>
       <section class="mk-zshot" style="--zi:1"> … </section>
       …
     </div>
   </div>

   · El scroll NUNCA se secuestra: .mk-film es un bloque alto de scroll
     nativo; .mk-film-stage queda pegado (sticky) y los .mk-zshot viven a
     distinta profundidad Z. Al hacer scroll la "cámara" avanza por el túnel:
     cada plano emerge del fondo con niebla, llega a foco y lo atraviesas.
   · JS escribe en cada zshot la variable --mkp (progreso local):
       --mkp = 0   → el plano está A FOCO
       --mkp > 0   → viene del fondo (todavía no llega)
       --mkp < 0   → ya lo atravesamos (sale hacia el espectador)
     Todos los efectos internos (mk-fx-*, mk-seq, mk-split, mk-zfog) se
     animan SOLO con esa variable: nada de listeners por elemento.
   · Solo se anima transform / opacity / filter (nunca layout).
   ============================================================ */

.mk-film { position: relative; }

/* position:sticky separado de overflow:hidden: WebKit/iOS deja de "pegar"
   un elemento sticky si el overflow:hidden vive en el mismo nodo. */
.mk-film-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  background: var(--mk-bg, #101116);
}

.mk-film-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 46%;
}

/* Viñeta cinematográfica fija del túnel */
.mk-tunnel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.mk-zshot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  visibility: hidden; /* JS la activa cuando el plano entra en rango */
}

/* Niebla de profundidad de cada plano: crece con --mkp (viene del fondo) */
.mk-zshot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: var(--mk-bg, #101116);
  opacity: calc(clamp(0, (var(--mkp, 1) - 0.45), 2.2) * 0.43);
}

/* Contenido del plano siempre por encima de su niebla cuando está a foco */
.mk-zshot > * { position: relative; z-index: 20; }

/* ---------- Volumen interno: capas a distinta profundidad ---------- */
.mk-zspace {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 10 !important;
}
.mk-zdepth { transform: translateZ(var(--z, 0px)); transform-style: preserve-3d; }

/* Foto/visual de fondo con niebla que se disipa al llegar a foco */
.mk-zfog {
  opacity: calc(1 - clamp(0, var(--mkp, 1), 1) * 0.45);
  filter: blur(calc(clamp(0, var(--mkp, 1), 1) * 9px));
}

/* ---------- Efectos de plano (dentro de un zshot) ---------- */
/* Todos usan --mkp: el elemento "llega" cuando el plano se acerca a foco */

.mk-fx-rise {
  transform: translateY(calc(clamp(0, var(--mkp, 1), 1) * 72px));
  opacity: calc(1 - clamp(0, var(--mkp, 1), 1));
}
.mk-fx-zoom {
  transform: scale(calc(0.86 + (1 - clamp(0, var(--mkp, 1), 1)) * 0.14));
  opacity: calc(1 - clamp(0, var(--mkp, 1), 1));
}
.mk-fx-drift {
  transform: translateX(calc(clamp(0, var(--mkp, 1), 1) * -56px));
  opacity: calc(1 - clamp(0, var(--mkp, 1), 1));
}
.mk-fx-tilt {
  transform: perspective(900px) rotateX(calc(clamp(0, var(--mkp, 1), 1) * 14deg))
    translateY(calc(clamp(0, var(--mkp, 1), 1) * 40px));
  opacity: calc(1 - clamp(0, var(--mkp, 1), 1));
}

/* Secuencia: los hijos entran escalonados (--si = índice de retardo) */
.mk-seq > * {
  --mkd: clamp(0, (var(--mkp, 1) - var(--si, 0) * 0.13), 1);
  transform: translateY(calc(var(--mkd) * 46px));
  opacity: calc(1 - var(--mkd));
}
.mk-seq > *:nth-child(1) { --si: 0; }
.mk-seq > *:nth-child(2) { --si: 1; }
.mk-seq > *:nth-child(3) { --si: 2; }
.mk-seq > *:nth-child(4) { --si: 3; }
.mk-seq > *:nth-child(5) { --si: 4; }
.mk-seq > *:nth-child(6) { --si: 5; }
.mk-seq > *:nth-child(7) { --si: 6; }
.mk-seq > *:nth-child(8) { --si: 7; }

/* Titular partido en palabras (JS envuelve en .mk-w con --wi) */
.mk-split .mk-w {
  display: inline-block;
  --mkd: clamp(0, (var(--mkp, 1) - var(--wi, 0) * 0.07), 1);
  transform: translateY(calc(var(--mkd) * 0.9em)) rotate(calc(var(--mkd) * 4deg));
  opacity: calc(1 - var(--mkd));
  filter: blur(calc(var(--mkd) * 8px));
  transform-origin: 0 100%;
}

/* Pulso suave e infinito para el CTA (no ligado a scroll) */
@keyframes mk-pulse-k {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 244, 246, 0.28); }
  50% { box-shadow: 0 0 0 14px rgba(244, 244, 246, 0); }
}
.mk-pulse { animation: mk-pulse-k 2.6s ease-in-out infinite; }

/* Brillo platino que recorre el texto */
@keyframes mk-sheen-k {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
.mk-platinum {
  background: linear-gradient(105deg, #8a8a91 0%, #ffffff 30%, #b0b0b7 55%, #ffffff 78%, #8a8a91 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mk-sheen-k 6s ease-in-out infinite;
}

/* Cinta infinita */
.mk-marquee { overflow: hidden; white-space: nowrap; }
.mk-marquee .mk-track {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  will-change: transform;
  animation: mk-marquee-k 26s linear infinite;
}
@keyframes mk-marquee-k {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Movimiento reducido: la película se vuelve lectura plana ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-film { height: auto !important; }
  .mk-film-stage { position: static; height: auto; overflow: visible; perspective: none; }
  .mk-tunnel::before { display: none; }
  .mk-zshot {
    position: relative;
    visibility: visible;
    opacity: 1 !important;
    transform: none !important;
    min-height: 70vh;
    padding: 4rem 0;
  }
  .mk-zshot::after { display: none; }
  .mk-zfog, .mk-fx-rise, .mk-fx-zoom, .mk-fx-drift, .mk-fx-tilt,
  .mk-seq > *, .mk-split .mk-w { transform: none !important; opacity: 1 !important; filter: none !important; }
  .mk-pulse, .mk-platinum, .mk-marquee .mk-track { animation: none !important; }
  .mk-zdepth { transform: none; }
}