/* ==========================================================================
   MIND MIAMI — MOTION v1 · estilos del motor (la API completa vive en
   el comentario de cabecera de js/motion.js).
   Todo lo que oculta o mueve está condicionado a html.mm-motion — clase que
   pone motion.js SOLO si hay JS y NO hay prefers-reduced-motion. Sin motor,
   todo queda estático y visible; @media reduce actúa además como red de
   seguridad si el usuario activa reduced-motion a mitad de sesión.
   ========================================================================== */

:root {
  --mm-ease-out: cubic-bezier(.19, 1, .22, 1);    /* tipo Power4.out   */
  --mm-ease-inout: cubic-bezier(.76, 0, .24, 1);  /* tipo Power4.inOut */
  --mm-enter-dur: .9s;                            /* sincronizado con motion.js */
}

/* --------------------------- 3 · ENTRANCE ------------------------------- */
.mm-motion [data-enter] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--mm-enter-dur) var(--mm-ease-out) var(--enter-delay, 0s),
    transform var(--mm-enter-dur) var(--mm-ease-out) var(--enter-delay, 0s);
}
.mm-motion [data-enter="slide-up"]    { transform: translateY(44px); }
.mm-motion [data-enter="slide-left"]  { transform: translateX(-44px); }
.mm-motion [data-enter="slide-right"] { transform: translateX(44px); }
.mm-motion [data-enter].mm-in { opacity: 1; transform: none; }
html.is-entered [data-enter] { transition: none; will-change: auto; }

/* ----------------------------- 1 · SCRUB -------------------------------- */
/* Los valores interpolados los escribe motion.js en línea. */
.mm-motion [data-scrub] { will-change: transform, opacity; }

/* --------------------------- 2 · PIN SCENE ------------------------------ */
[data-pin-scene] { --scene-p: 0; position: relative; }
:root:not(.mm-motion) [data-pin-scene] { --scene-p: 1; }
.mm-motion [data-pin-scene] { height: var(--scene-h, 300vh); }
.mm-motion [data-pin-stage] {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}

/* Pasos: el activo entra; el resto se oculta (solo opacity/transform). */
.mm-motion [data-pin-scene] [data-scene-step] {
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition:
    opacity .4s var(--mm-ease-out),
    transform .4s var(--mm-ease-out),
    visibility 0s .4s;
}
.mm-motion [data-pin-scene] [data-scene-step][data-step-active] {
  opacity: 1; visibility: visible; transform: none;
  transition:
    opacity .45s var(--mm-ease-out) .06s,
    transform .45s var(--mm-ease-out) .06s,
    visibility 0s;
}

/* Helper opcional: apila los hijos en la misma celda (pasos superpuestos). */
.mm-motion .mm-stack { display: grid; }
.mm-motion .mm-stack > * { grid-area: 1 / 1; }

/* ------------- REDUCED MOTION: todo estático y visible ------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-enter] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-scrub] { will-change: auto !important; }
  [data-pin-scene] { --scene-p: 1 !important; height: auto !important; }
  [data-pin-stage] { position: static !important; height: auto !important; }
  [data-scene-step] {
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; transition: none !important;
  }
  .mm-stack { display: block !important; }
}