/* ==========================================================================
   MIND MIAMI — MOTION-B v1 · coreografía servicios → conversión
   (03 SERVICIOS · 04 IDENTIDAD · 05 EXPERIENCIA · FÓRMULA · 06 CONTACTO)
   Se apoya en el motor motion.js (data-scrub / data-scramble): aquí solo
   viven los ajustes CSS que esa coreografía necesita. Todo lo que se mueve
   está condicionado a html.mm-motion (la pone motion.js SOLO con JS y sin
   prefers-reduced-motion); sin motor, todo queda estático y visible.
   ========================================================================== */

/* ------------------------------ 03 · SERVICIOS -------------------------- */
/* La coreografía scrubbed por elemento sustituye al reveal de bloque. */
.mm-motion .service-panel.reveal { opacity: 1; transform: none; transition: none; }

/* La cortina (clip-r) la lleva .service-image; el zoom 1.15→1, el <picture>
   interno — así el hover scale(1.045) del <img> (system.css) sigue vivo. */
.service-image > picture { display: block; width: 100%; height: 100%; }

/* Barras del chart: crecen con clip-t scrubbed (motion.js), no de una vez.
   Se anula el scaleY(0) reveal-once de system.css bajo el motor. */
.mm-motion .chart-bars i { transform: scaleY(1); transition: none; }

/* Elementos pequeños con scrub: sin capa de composición propia. */
.mm-motion .service-detail li[data-scrub],
.mm-motion .chart-bars i[data-scrub],
.mm-motion .flow-node[data-scrub],
.mm-motion .flow-meta[data-scrub],
.mm-motion .image-index[data-scrub] { will-change: auto; }

/* ------------------------------ 04 · IDENTIDAD -------------------------- */
/* Paralaje editorial de las páginas del manual (-30 / -70 / -50 en y).
   Va en la propiedad `translate`, que COMPONE con sus rotaciones base
   (transform en .manual-one/two/three) sin pisarlas. Scroll-driven CSS:
   scrubbed y en el compositor; sin soporte → collage estático intacto. */
@supports (animation-timeline: view()) {
  .mm-motion .manual-one,
  .mm-motion .manual-two,
  .mm-motion .manual-three { animation: mm-drift-a linear both; animation-timeline: view(); }
  .mm-motion .manual-two { animation-name: mm-drift-b; }
  .mm-motion .manual-three { animation-name: mm-drift-c; }
}
@keyframes mm-drift-a { from { translate: 0 30px; } to { translate: 0 -30px; } }
@keyframes mm-drift-b { from { translate: 0 70px; } to { translate: 0 -70px; } }
@keyframes mm-drift-c { from { translate: 0 50px; } to { translate: 0 -50px; } }

/* Chips de principios de marca: stagger corto colgado del reveal existente. */
.mm-motion .identity-copy.reveal .brand-principles span {
  opacity: 0; transform: translateY(14px);
  transition:
    opacity .6s var(--mm-ease-out) var(--bp-d, 0s),
    transform .6s var(--mm-ease-out) var(--bp-d, 0s);
}
.mm-motion .identity-copy.reveal.is-in .brand-principles span { opacity: 1; transform: none; }
.brand-principles span:nth-child(2) { --bp-d: .09s; }
.brand-principles span:nth-child(3) { --bp-d: .18s; }
.brand-principles span:nth-child(4) { --bp-d: .27s; }

/* ------------------------------ 05 · EXPERIENCIA ------------------------ */
/* Reveal escalonado (reutiliza el .reveal de system.js con delay por carta)
   + micro-lift en hover por `translate` (no colisiona con el transform del
   reveal) y sombra. */
.mm-motion .experience-grid .experience-card.reveal {
  transition:
    opacity .7s ease var(--xp-d, 0s),
    transform .7s cubic-bezier(.22, .61, .36, 1) var(--xp-d, 0s),
    translate .45s var(--mm-ease-out),
    box-shadow .45s var(--mm-ease-out);
}
.experience-grid .experience-card:nth-child(2) { --xp-d: .12s; }
.experience-grid .experience-card:nth-child(3) { --xp-d: .24s; }
.mm-motion .experience-card:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .32); }
.mm-motion .experience-card.cyan-card:hover { box-shadow: 0 18px 40px rgba(6, 214, 221, .26); }

/* Pulso sutil del número en la tarjeta cian.
   align-self:start es OBLIGATORIO: la carta es flex column, así que el <span>
   se estiraba a todo el ancho de la columna (641px @768). Escalarlo 1.14 desde
   `left center` empujaba su caja 26px fuera del documento → overflow-x real y
   oscilante (scrollWidth 768→794 al ritmo de los 3.2s). Encogido a su
   contenido, el glifo queda en el mismo sitio y el pulso ya no desborda. */
.mm-motion .cyan-card > span {
  align-self: start;
  animation: mm-num-pulse 3.2s var(--mm-ease-inout) infinite;
  transform-origin: left center;
}
@keyframes mm-num-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.14); opacity: 1; }
}

/* En móvil las cartas apilan y revelan una a una: sin delay extra. */
@media (max-width: 860px) {
  .experience-grid .experience-card { --xp-d: 0s; }
}

/* -------------------------------- FÓRMULA ------------------------------- */
/* Los beats ART / + / STRATEGY / = / GROWTH. llevan scrub propio: se anula
   el reveal de bloque de la línea. */
.mm-motion .formula-line.reveal { opacity: 1; transform: none; transition: none; }
/* La retícula deriva con scrub: sobredimensionada para no descubrir bordes
   (es un fondo absoluto: cero impacto de layout; la sección hace clip). */
.formula-grid { inset: -90px 0; }

/* ------------------------------ 06 · CONTACTO --------------------------- */
/* Hover del aro CTA por `scale`: compone con el transform inline del scrub
   (scale .6→1), que pisaría el transform:scale(1.04) de system.css. */
.mm-motion .contact-circle {
  transition: background .3s ease, color .3s ease, border-color .3s ease, scale .3s ease;
}
.mm-motion .contact-circle:hover { scale: 1.045; }
/* Rotación leve del texto interior en loop MUY lento (solo bajo el motor). */
.mm-motion .contact-circle > span { animation: mm-sway 16s ease-in-out infinite; }
@keyframes mm-sway {
  0%, 100% { rotate: -2.5deg; }
  50% { rotate: 2.5deg; }
}

/* -------------- REDUCED MOTION: red de seguridad explícita --------------
   El motor ya se apaga y limpia estilos inline; esto garantiza el estado
   estático y visible incluso a mitad de sesión, solo en MIS secciones. */
@media (prefers-reduced-motion: reduce) {
  .services-story [data-scrub],
  .identity-section [data-scrub],
  .experience-section [data-scrub],
  .formula-section [data-scrub],
  .contact-section [data-scrub] {
    transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .manual-one, .manual-two, .manual-three { animation: none; translate: none; }
  /* El índice de servicios no debe transicionar (color/padding/progreso). */
  .services-index a, .services-index a span, .service-progress i { transition: none !important; }
  .cyan-card > span, .contact-circle > span { animation: none; rotate: none; }
  .experience-card { translate: none; }
  .brand-principles span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .chart-bars i { transform: scaleY(1) !important; transition: none !important; }
}