/* PROTOTIPO de movimiento para las páginas de línea — sólo vive en dist/.
   Todo transform/opacity. Nada se esconde si el JS no corre (gate html.mo). */

:root { --mo-ease: cubic-bezier(.22, .61, .36, 1); }

/* Microinteracciones que aplican siempre (color no es "motion") */
.foot nav a, nav a, .nav a { transition: color .18s ease, opacity .18s ease, border-color .18s ease; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Reveal de entrada, escalonado por sección ---- */
  html.mo [data-mo] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--mo-ease), transform .55s var(--mo-ease);
    transition-delay: calc(var(--mo-i, 0) * 90ms);
  }
  html.mo .mo-in [data-mo] { opacity: 1; transform: none; }

  /* ---- Pasos: pop del número y línea que se dibuja bajo el título ---- */
  html.mo .step .n { display: inline-block; }
  html.mo .step h3::after {
    content: ''; display: block; width: 44px; height: 3px; margin-top: 10px;
    border-radius: 2px; background: var(--primary, #2563eb);
    transform: scaleX(0); transform-origin: left;
    transition: transform .7s var(--mo-ease) calc(var(--mo-i, 0) * 90ms + .3s);
  }
  html.mo .mo-in .step h3::after { transform: scaleX(1); }

  /* ---- Capturas y ejemplos: destello diagonal al entrar + zoom sutil al hover ---- */
  html.mo .tour figure, html.mo .frame { position: relative; overflow: hidden; }
  html.mo .tour figure::after, html.mo .frame::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    transform: translateX(-130%) skewX(-18deg);
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  }
  html.mo .mo-in figure::after, html.mo .mo-in .frame::after {
    animation: mo-shine 1.15s ease .5s forwards;
  }
  html.mo .tour figure img, html.mo .frame img { transition: transform .5s var(--mo-ease); }
  html.mo .tour figure:hover img, html.mo .frame:hover img { transform: scale(1.025); }

  /* ---- Chat del Recepcionista: la conversación se escribe sola ---- */
  html.mo .wa-body .msg {
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
  }
  html.mo .wa-body .msg.mo-on { opacity: 1; transform: none; }
  html.mo .sleep-note { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
  html.mo .sleep-note.mo-on { opacity: 1; transform: none; }
  html.mo .sleep-note .moon { display: inline-block; animation: mo-pulse 3.2s ease-in-out 2.5s infinite; }
  html.mo .mo-typing span {
    display: inline-block; width: 6px; height: 6px; margin: 0 1.5px;
    border-radius: 50%; background: currentColor; opacity: .4;
    animation: mo-dot 1s infinite;
  }
  html.mo .mo-typing span:nth-child(2) { animation-delay: .15s; }
  html.mo .mo-typing span:nth-child(3) { animation-delay: .3s; }

  @keyframes mo-shine { to { transform: translateX(130%) skewX(-18deg); } }
  @keyframes mo-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-3px); opacity: .9; } }
  @keyframes mo-pulse { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
}