/* ==========================================================================
   MIND MIAMI — MOTION v2 · estilos del motor aditivo.
   Se carga DESPUÉS de motion.css y no la pisa: selectores y tokens propios.
   La API completa vive en la cabecera de js/motion2.js.

   Regla de oro (heredada de v1): todo lo que OCULTA o MUEVE cuelga de
   html.mm-motion2, clase que pone motion2.js solo si hay JS y NO hay
   prefers-reduced-motion. Sin motor → maquetación normal, todo visible.
   El bloque @media (prefers-reduced-motion: reduce) del final es la red de
   seguridad si el usuario lo activa a media sesión.
   ========================================================================== */

:root {
  --mm2-ease-out: var(--mm-ease-out, cubic-bezier(.19, 1, .22, 1));
  --mm2-ease-inout: var(--mm-ease-inout, cubic-bezier(.76, 0, .24, 1));
  --mm2-cursor-z: 140;
}

/* Medición: motion2.js activa html.mm-measure durante measure() —una fracción
   de frame, nunca se pinta— para leer posiciones NATURALES: sin sticky y sin
   los transforms que el propio motor escribe (si no, la medida se
   retroalimentaría con su propia animación). */
.mm-measure [data-stack] > *,
.mm-measure [data-hscroll-viewport] { position: static !important; }
.mm-measure [data-spring],
.mm-measure [data-magnetic],
.mm-measure [data-magnetic-inner],
.mm-measure [data-layer],
.mm-measure [data-stack] > * { transform: none !important; }

/* ==========================================================================
   1 · DIBUJO DE TRAZO SVG — data-draw
   ========================================================================== */
/* El trazo se dibuja con stroke-dasharray/dashoffset (no dispara layout) y lo
   escribe motion2.js. El dibujo trae su propio stroke/fill: aquí solo se evita
   que el borde del <svg> recorte el grosor del trazo. El grosor NO se fuerza a
   non-scaling-stroke: en un dibujo grande de marca el trazo debe escalar con
   el arte (añade tú vector-effect si quieres un filete constante). */
[data-draw] { overflow: visible; }

/* ==========================================================================
   2 · MUELLE — data-spring
   ========================================================================== */
.mm-motion2 [data-spring] { will-change: transform; }

/* ==========================================================================
   3 · STICKY STACK — data-stack
   ========================================================================== */
[data-stack] { position: relative; }
.mm-motion2 [data-stack] > * {
  position: sticky;
  top: var(--mm-stack-y, 96px);
  transform-origin: 50% 0%;          /* la tarjeta cubierta se va al fondo */
  will-change: transform, opacity;
  backface-visibility: hidden;       /* evita el temblor del texto al escalar */
}
/* Sin motor las tarjetas quedan una tras otra: separación honesta. */
:root:not(.mm-motion2) [data-stack] > * + * { margin-top: 26px; }

/* ==========================================================================
   4 · SCROLL HORIZONTAL — data-hscroll
   Base (móvil / sin JS): carrusel nativo con snap, accesible sin motor.
   ========================================================================== */
[data-hscroll-viewport] {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
[data-hscroll-viewport]:focus-visible { outline: 2px solid var(--cyan, #06d6dd); outline-offset: 4px; }
[data-hscroll-track] { display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 34px); }
[data-hscroll-track] > * { scroll-snap-align: start; flex: 0 0 auto; }
[data-hscroll-bar] { display: none; }

@media (min-width: 1080px) {
  .mm-motion2 [data-hscroll][data-hs-on] {
    position: relative;
    height: var(--mm-hs-h);          /* px exactos desde JS; sin var → auto */
  }
  .mm-motion2 [data-hscroll][data-hs-on] [data-hscroll-viewport] {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: clip;                  /* el track se mueve con transform */
    scroll-snap-type: none;
  }
  .mm-motion2 [data-hscroll][data-hs-on] [data-hscroll-track] {
    will-change: transform;
    width: max-content;
  }
  .mm-motion2 [data-hscroll][data-hs-on] [data-hscroll-bar] {
    display: block;
    position: relative;
    height: 2px;
    margin: clamp(26px, 3.4vw, 44px) var(--pad-x, 5vw) 0;
    background: var(--line-paper, rgba(246, 244, 241, .18));
  }
  .mm-motion2 [data-hscroll][data-hs-on] [data-hscroll-bar] i {
    position: absolute; inset: 0;
    display: block;
    background: var(--cyan, #06d6dd);
    transform-origin: 0 50%;
    transform: scaleX(0);
  }
}

/* ==========================================================================
   5 · CURSOR — data-cursor-follow / data-magnetic (solo pointer:fine)
   ========================================================================== */
[data-cursor-follow] { display: none; }

@media (pointer: fine) {
  .mm-motion2 [data-cursor-follow] {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0;
    z-index: var(--mm2-cursor-z);
    pointer-events: none;
    will-change: transform;
    opacity: 1;
    transition: opacity .3s var(--mm2-ease-out);
  }
  .mm-motion2 [data-cursor-follow].is-off { opacity: 0; }
}

.mm-motion2 [data-magnetic] { will-change: transform; }
.mm-motion2 [data-magnetic-inner] { will-change: transform; display: inline-block; }

/* ==========================================================================
   6 · TEXTO PARTIDO — data-split
   Máscara por unidad: el padding/margen compensados evitan que se corten
   las colas de g/j/y (overflow:hidden sobre inline-block las comería).
   ========================================================================== */
.mm-motion2 [data-split] .mm-sp {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.mm-motion2 [data-split] .mm-sp-w { display: inline-block; white-space: nowrap; }
.mm-motion2 [data-split] .mm-sp-line { display: block; }
/* La línea ya viene medida a la anchura real: nowrap impide que un redondeo
   de medio píxel la parta otra vez dentro de su propia máscara. */
.mm-motion2 [data-split] .mm-sp-line .mm-sp-i { white-space: nowrap; }
.mm-motion2 [data-split] .mm-sp-i {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  opacity: 0;
  transition:
    transform .86s var(--mm2-ease-out) var(--mm-sp-d, 0ms),
    opacity .5s linear var(--mm-sp-d, 0ms);
}
.mm-motion2 [data-split] .mm-sp {
  --mm-sp-d: calc(var(--mm-sp-i, 0) * var(--mm-sp-step, 30ms) + var(--mm-sp-delay, 0ms));
}
.mm-motion2 [data-split].mm-in .mm-sp-i { transform: none; opacity: 1; }
/* Modo scrub: los valores los escribe motion2.js frame a frame. */
.mm-motion2 [data-split][data-split-scrub] .mm-sp-i { transition: none; }

/* ==========================================================================
   8 · PARALLAX MULTICAPA — data-parallax-scene / data-layer
   ========================================================================== */
[data-parallax-scene] { position: relative; }
.mm-motion2 [data-layer] { will-change: transform; }

/* ==========================================================================
   RED DE SEGURIDAD — reduced motion: todo estático, visible y en su sitio
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-spring],
  [data-layer],
  [data-magnetic],
  [data-magnetic-inner],
  [data-stack] > * {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    transition: none !important;
  }
  [data-stack] > * { position: static !important; }
  [data-stack] > * + * { margin-top: 26px; }
  [data-hscroll] { height: auto !important; }
  [data-hscroll-viewport] {
    position: static !important;
    height: auto !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }
  [data-hscroll-track] { transform: none !important; width: auto !important; }
  [data-hscroll-bar] { display: none !important; }
  [data-cursor-follow] { display: none !important; }
  [data-split] .mm-sp-i {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  [data-draw] path,
  [data-draw] line,
  [data-draw] polyline,
  [data-draw] polygon,
  [data-draw] circle,
  [data-draw] ellipse,
  [data-draw] rect,
  path[data-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}