/* ==========================================================================
   MIND MIAMI — MOTION-A · Narrativa oscura (HERO → MINDSET → ENGINE)
   Capa de presentación sobre el motor motion.js/motion.css. Todo lo que se
   mueve u oculta vive bajo html.mm-motion (la pone motion.js SOLO con JS y
   sin prefers-reduced-motion). Sin motor: todo estático, visible, layout
   original. Solo transform/opacity/clip-path en animaciones.
   ========================================================================== */

/* ------------------------------- HERO ------------------------------------ */
/* La sombra pasa del <figure> al <picture> para que la entrada (data-enter
   en picture) arrastre también la sombra; el marco <figure> lleva el scrub
   de parallax y la figcaption entra con su propio fade. */
.hero-photo picture { display: block; height: 100%; }
.mm-motion .hero-photo { box-shadow: none; }
.mm-motion .hero-photo picture { box-shadow: 0 30px 70px rgba(0, 0, 0, .42); }
/* La foto principal escala 1→1.06 (scrub en el img): se recorta en su marco. */
.mm-motion .hero-photo-main picture { overflow: clip; }
/* El grid del fondo deriva hacia abajo (lag de profundidad): se extiende por
   arriba para que el drift nunca descubra un borde sin pintar. La extensión NO
   se condiciona a .mm-motion: `top` es una propiedad de layout y aplicarla al
   arrancar el motor provocaba un layout shift real (CLS .051 / .087). Aquí
   entra en la primera pintura, idéntica con y sin JS → CLS 0. El movimiento
   sigue siendo solo transform (data-scrub y:0,50). */
.hero-grid { top: -80px; }

/* Sello: aparece al final de la timeline con scale y arranca su giro después.
   (animation en vez de transition: el spin infinito pisa las transitions.) */
@keyframes mm-seal-in {
  from { opacity: 0; transform: scale(.55) rotate(-40deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.mm-motion .hero-seal {
  animation:
    mm-seal-in .85s var(--mm-ease-out) 1.05s backwards,
    seal-spin 26s linear 1.9s infinite;
}

/* Micro bounce del indicador del round-link "Explore". */
@keyframes mm-nudge {
  0%, 100% { transform: translateY(0); }
  12%      { transform: translateY(5px); }
  24%      { transform: translateY(0); }
  34%      { transform: translateY(3px); }
  46%      { transform: translateY(0); }
}
.mm-motion .round-link i { animation: mm-nudge 2.6s var(--mm-ease-inout) 2.4s infinite; }
.mm-motion .round-link:hover i { animation: none; }

/* ---------------------------- 01 · MINDSET ------------------------------- */
/* El subrayado cian de los <em> se dibuja de izquierda a derecha al pasar
   (background-size animado = se comporta bien aunque el <em> parta de línea;
   la franja de papel del box-shadow original se conserva como máscara). */
.mm-motion .story-statement h2 em {
  box-shadow: inset 0 -0.16em var(--paper);
  background-image: linear-gradient(rgba(6, 214, 221, .55), rgba(6, 214, 221, .55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% .3em;
  box-decoration-break: slice;
  transition: background-size .9s var(--mm-ease-inout) .55s;
}
.mm-motion .story-statement h2 em + em,
.mm-motion .story-statement h2 em:nth-of-type(2) { transition-delay: 1.15s; }
.mm-motion .story-statement.is-in h2 em { background-size: 100% .3em; }

/* ----------------------- 02 · ENGINE (escena pinned) --------------------- */
/* Sin motor / en móvil, .engine-stage desaparece del layout (display:
   contents) y la sección conserva su grid original de system.css. */
.engine-stage { display: contents; }

@media (min-width: 1081px) {
  .mm-motion .engine-section[data-pin-scene] { display: block; padding: 0; }
  .mm-motion .engine-section[data-pin-scene] .engine-stage {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: center;
    padding: clamp(40px, 6vh, 80px) var(--pad-x);
  }
  .mm-motion .engine-section[data-pin-scene] .engine-sticky { position: static; align-self: center; }
  /* Los anillos crecen para llenar la columna izquierda de la escena (en el
     apilado original comparten sitio con la lista; aquí mandan ellos). */
  .mm-motion .engine-section[data-pin-scene] .engine-visual { width: min(100%, 420px, 46svh); }

  /* El espejo del sticky (lo sigue escribiendo system.js con is-active) baja
     de titular a LECTURA DE ESTADO: en la escena el titular grande ya vive en
     el paso activo de la derecha, así que aquí duplicaría la jerarquía. Se
     conserva el nodo, el aria-live y el texto — solo cambia su peso visual. */
  .mm-motion .engine-section[data-pin-scene] .engine-current {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    max-width: min(100%, 440px);
    padding-top: 16px;
    border-top: 1px solid var(--line-paper);
  }
  .mm-motion .engine-section[data-pin-scene] .engine-current p { font-size: 11px; }
  .mm-motion .engine-section[data-pin-scene] .engine-current h3 {
    margin-top: 0;
    font-family: var(--body);
    font-size: 15px; font-weight: 500; letter-spacing: 0;
    color: var(--muted-on-navy);
  }

  /* Los 5 pasos se apilan en la misma celda y se muestran de a uno. */
  .mm-motion .engine-section[data-pin-scene] .engine-steps {
    display: grid;
    align-self: stretch;
    align-content: center;
  }
  .mm-motion .engine-section[data-pin-scene] .engine-steps > * { grid-area: 1 / 1; }
  .mm-motion .engine-section[data-pin-scene] .engine-step { border-top: 0; }
  .mm-motion .engine-section[data-pin-scene] .engine-step h3 { font-size: clamp(28px, 2.7vw, 46px); }
  .mm-motion .engine-section[data-pin-scene] .step-number { font-size: 40px; line-height: 1.1; }

  /* Los pasos inactivos esperan abajo (30vh) y entran deslizando hacia
     arriba. Además de la sensación de escena, esto mantiene sus cajas fuera
     de la banda central del IntersectionObserver de system.js, que así solo
     "ve" el paso activo y sigue marcando is-active + contador + espejo. */
  .mm-motion .engine-section[data-pin-scene] [data-scene-step]:not([data-step-active]) {
    transform: translate3d(0, 30vh, 0);
  }
  .mm-motion .engine-section[data-pin-scene] [data-scene-step] {
    transition:
      opacity .5s var(--mm-ease-out),
      transform .65s var(--mm-ease-inout),
      visibility 0s .65s;
  }
  .mm-motion .engine-section[data-pin-scene] [data-scene-step][data-step-active] {
    transition:
      opacity .55s var(--mm-ease-out) .12s,
      transform .7s var(--mm-ease-inout) .06s,
      visibility 0s;
  }

  /* Anillos ligados al progreso de la escena (--scene-p, 0..1). */
  .mm-motion .engine-section[data-pin-scene] .ring-a {
    animation: none;
    transform: rotate(calc(var(--scene-p, 0) * 200deg));
  }
  .mm-motion .engine-section[data-pin-scene] .ring-b {
    animation: none;
    transform: rotate(calc(var(--scene-p, 0) * -300deg));
  }
  .mm-motion .engine-section[data-pin-scene] .ring-c {
    animation: none;
    transform: scale(calc(.94 + var(--scene-p, 0) * .1));
  }

  /* Raíl vertical de progreso en el canal entre las dos columnas: la pista
     fija (::before) y el relleno cian ligado a --scene-p (::after, scaleY).
     Ambos son absolutos, así que no entran en el grid apilado de los pasos. */
  .mm-motion .engine-section[data-pin-scene] .engine-steps { position: relative; }
  .mm-motion .engine-section[data-pin-scene] .engine-steps::before,
  .mm-motion .engine-section[data-pin-scene] .engine-steps::after {
    content: "";
    position: absolute;
    top: 14%; bottom: 14%;
    left: calc(clamp(30px, 5vw, 90px) / -2);
    width: 1px;
  }
  .mm-motion .engine-section[data-pin-scene] .engine-steps::before { background: var(--line-paper); }
  .mm-motion .engine-section[data-pin-scene] .engine-steps::after {
    background: var(--cyan);
    transform-origin: 50% 0;
    transform: scaleY(var(--scene-p, 0));
  }
}

/* MÓVIL (≤1080px): la escena pinned se desactiva y vuelve el apilado
   original; se replica el patrón is-active de system.css porque motion.css
   ocultaría los pasos sin data-step-active. */
@media (max-width: 1080px) {
  .mm-motion .engine-section[data-pin-scene] { height: auto; }
  .mm-motion .engine-section[data-pin-scene] [data-scene-step] {
    visibility: visible;
    transform: none;
    opacity: .38;
    transition: opacity .45s ease;
  }
  .mm-motion .engine-section[data-pin-scene] [data-scene-step].is-active { opacity: 1; }
}

/* ------------- REDUCED MOTION: todo estático y visible ------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-seal, .round-link i { animation: none !important; }
  /* .hero-grid conserva su top:-80px también aquí: sin drift el borde inferior
     sigue coincidiendo con el del hero, así la geometría no cambia entre modos. */
  [data-scrub] { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .story-statement h2 em {
    background: none !important;
    transition: none !important;
    box-shadow: inset 0 -0.16em var(--paper), inset 0 -0.3em rgba(6, 214, 221, .55) !important;
  }
  .engine-stage { display: contents !important; }
  .engine-section .ring-a, .engine-section .ring-b, .engine-section .ring-c {
    animation: none !important; transform: none !important;
  }
  .engine-steps::before, .engine-steps::after { content: none !important; }
  .engine-section[data-pin-scene] [data-scene-step] {
    visibility: visible !important; transform: none !important; opacity: 1 !important; transition: none !important;
  }
}