/* Coworking: coreografía de entrada y desplazamiento, sobre el diseño existente.
   Implementación propia en CSS y JavaScript, inspirada en componentes gratuitos de Skiper UI
   (https://skiper-ui.com, autor: gxuri): Text Scroll animation (31), Text roll navigation (58)
   y Scroll progress (89). No cambia el marcado: cowork-motion.js agrega las clases m-*.
   Todo depende de html.motion, que no se activa con prefers-reduced-motion. */
:root { --m-ease: cubic-bezier(.16, 1, .3, 1); }

.m-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; background: #c04221; transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Títulos: cada línea sube desde una máscara. El relleno evita recortar descendentes. */
m-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
m-line > m-in { display: block; }
html.motion .m-lines m-line > m-in { transform: translateY(112%); }
html.motion .m-lines.m-in m-line > m-in { transform: none; transition: transform 650ms var(--m-ease); transition-delay: calc(var(--m-i, 0) * 70ms + var(--m-d, 0ms)); }

/* Bloques: aparecen al entrar en pantalla. La transición vive en el estado final para no
   pisar las transiciones propias de cada componente; el script retira las clases al terminar. */
html.motion .m-reveal { opacity: 0; transform: translateY(16px); }
html.motion .m-reveal.m-in { opacity: 1; transform: none; transition: opacity 420ms var(--m-ease), transform 560ms var(--m-ease); transition-delay: calc(min(var(--m-i, 0), 4) * 60ms + var(--m-d, 0ms)); }

/* Presentación */
html.motion .hero-photo.m-open { clip-path: inset(100% 0 0 0 round 100px 0 0 0); }
html.motion .hero-photo.m-open.m-in { clip-path: inset(0 0 0 0 round 100px 0 0 0); transition: clip-path 850ms var(--m-ease) 60ms; }
html.motion .hero-seal.m-pop { scale: 0; }
html.motion .hero-seal.m-pop.m-in { scale: 1; transition: scale 600ms var(--m-ease) 450ms; }

/* Videos: el marco se abre a medida que llegan. Una vez abierto se libera el recorte,
   así el video en reproducción no se repinta recortado en cada cuadro. */
html.motion .m-frame { clip-path: inset(var(--m-clip, 9%)); will-change: clip-path; }
html.motion .m-frame.m-done { clip-path: none; will-change: auto; }

/* Tarjetas de elección: el título rueda letra por letra; la copia que entra es la sombra. */
.m-roll-word { display: inline-block; overflow: hidden; padding-block: .1em; margin-block: -.1em; vertical-align: top; white-space: nowrap; }
.m-roll-char { display: inline-block; text-shadow: 0 1.32em 0 currentColor; transition: translate 560ms var(--m-ease); transition-delay: calc(var(--m-i) * 14ms); }
.choice-card:focus-visible .m-roll-char { translate: 0 -1.32em; }
@media (hover: hover) and (pointer: fine) {
  .choice-card:hover .m-roll-char { translate: 0 -1.32em; }
}
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }