/* ================================================================
   MOTION SYSTEM V1
   Páginas interiores de EscapaHoy (todo excepto la Home). Movimiento
   ligero, natural, nunca cinematográfico.

   ÁMBITO: exclusivamente móvil/tablet (<960px). TODAS las reglas de
   este archivo viven dentro de @media (max-width: 959px) a propósito:
   así, en >=960px, ninguna clase mv1-* aporta ninguna declaración CSS
   — el elemento usa exactamente su CSS original de styles.css, sin
   necesidad de que JS "desactive" nada por separado. Es la forma más
   simple de garantizar "desktop = comportamiento original": no hay
   nada que anular, porque nunca hubo nada aplicado ahí.
================================================================ */

@media (max-width: 959px) {

  /* ---------------- A. REVEAL BLOCK ---------------- */
  /* Bloques/secciones grandes: opacity + translateY pequeño, sin stagger.
     No se aplica a cabeceras/hero above-the-fold — evita el parpadeo de
     contenido visible->oculto->revelado en el primer viewport. */
  .mv1-block {
    opacity: 1;
    transform: none;
  }
  html.mv1-ready .mv1-block {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  html.mv1-ready .mv1-block.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------------- B. REVEAL GRID ---------------- */
  /* Grupos de tarjetas/imágenes: mismo patrón, con transition-delay
     asignado por JS (stagger corto, siempre acotado). */
  .mv1-grid-item {
    opacity: 1;
    transform: none;
  }
  html.mv1-ready .mv1-grid-item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }
  html.mv1-ready .mv1-grid-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    html.mv1-ready .mv1-block,
    html.mv1-ready .mv1-grid-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* .plan-card ya trae su propia animación de entrada (fadeInUp, definida
     en css/styles.css, disparada al insertarse en el DOM, con
     animationDelay ya calculado por JS). Donde se activa Motion V1 sobre
     estas tarjetas se desactiva esa animación antigua para no solapar dos
     sistemas de entrada distintos sobre el mismo elemento. */
  .mv1-grid-item.plan-card {
    animation: none;
  }

  /* ---------------- C. TAP FEEDBACK ---------------- */
  /* Solo para elementos pulsables sin :active ya definido (auditado:
     .btn ya tiene :active en css/styles.css:246, no se toca aquí para
     no duplicar/entrar en conflicto). Nunca afecta layout (solo transform). */
  .mv1-tap {
    transition: transform 0.12s ease-out;
  }
  .mv1-tap:active {
    transform: scale(0.97);
  }
  /* Especificidad: cuando el mismo elemento combina reveal-grid/reveal-block
     y tap-feedback (ej. .preview-card, .nearby-card), la regla "is-visible"
     de la categoría B (translateY(0), especificidad 0-3-1) gana por cascada
     sobre .mv1-tap:active (0-2-0) y anularía el scale al pulsar. Se sube la
     especificidad explícitamente para el caso combinado en vez de bajar la
     de la regla de reveal.

     Además requiere `.mv1-tap-ready`: sin este requisito, tocar una tarjeta
     mientras su translateY de entrada todavía está en curso retargeta la
     transición de transform desde el valor interpolado actual hacia
     scale(0.97), produciendo una matriz híbrida (escala y traslación
     mezcladas) en vez de dejar que el Reveal termine su propio recorrido.
     Exigir mv1-tap-ready aquí también (no solo en la regla de duración)
     asegura que durante el Reveal el valor de transform siga siendo
     exclusivamente el translateY aprobado. */
  html.mv1-ready .mv1-grid-item.is-visible.mv1-tap.mv1-tap-ready:active,
  html.mv1-ready .mv1-block.is-visible.mv1-tap.mv1-tap-ready:active {
    transform: scale(0.97);
  }

  /* Segundo bug de especificidad, distinto del anterior: no es solo el
     VALOR de transform el que colisiona, sino la propia PROPIEDAD
     transition. `html.mv1-ready .mv1-grid-item`/`.mv1-block` (especificidad
     0-2-1) declaran `transition: opacity .45s/.5s, transform .45s/.5s` y
     ganan sobre `.mv1-tap { transition: transform .12s }` (0-1-0).

     Se usan dos estados explícitos y distintos en vez de acoplar la
     duración del tap a `.is-visible` directamente:
     - ".is-visible" solo dispara y gobierna el REVEAL (0.45s/0.5s, intacto,
       sin que ninguna regla de tap lo toque).
     - ".mv1-tap-ready" (añadida por JS solo cuando el Reveal ha terminado
       de verdad — ver js/motion-v1.js) es la que activa los 0.12s del tap.
       Mientras un elemento no tiene mv1-tap-ready, un toque durante el
       propio Reveal usa la duración que ya estuviera en curso (la del
       Reveal) — no rompe nada, solo no ofrece los 0.12s hasta que la
       entrada ha acabado, que es exactamente cuándo debe empezar a
       comportarse como interactivo "normal". */
  html.mv1-ready .mv1-block.is-visible.mv1-tap.mv1-tap-ready {
    transition: opacity 0.5s ease-out, transform 0.12s ease-out;
  }
  html.mv1-ready .mv1-grid-item.is-visible.mv1-tap.mv1-tap-ready {
    transition: opacity 0.45s ease-out, transform 0.12s ease-out;
  }

  /* Con reduced-motion, el scale de confirmación al pulsar se conserva
     (no es motion ambiental ni scroll, es feedback directo de una acción
     del usuario — mismo criterio que el :active nativo de cualquier botón
     del sistema operativo) pero sin transición animada: el cambio debe ser
     instantáneo, nunca una animación de 0.12s. */
  @media (prefers-reduced-motion: reduce) {
    .mv1-tap {
      transition: none;
    }
  }

}