/* motion-web: estilos base. vendor.mjs lo copia a /assets/css/motion-base.css; cargar antes del CSS del sitio. * * El nivel de movimiento vive en (lo pone motion-base.js). * Regla: cada movimiento define acá o en su propio CSS qué queda en cada nivel. Nunca un "display:none" * suelto para móvil: el contenido tiene que seguir existiendo, solo cambia cómo se mueve. */ html { scroll-behavior: auto; } /* Lenis maneja el suave; el nativo pelearía */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Etapa fija para movimientos pineados: la sección alta da el recorrido, la etapa queda pegada. */ .mw-pin { position: relative; } .mw-pin__etapa { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .mw-pin__etapa > canvas, .mw-pin__etapa > video, .mw-pin__etapa > .mw-capa, .mw-pin__etapa > .mw-poster { position: absolute; inset: 0; width: 100%; height: 100%; } .mw-pin__etapa > video, .mw-pin__etapa > .mw-poster { object-fit: cover; } /* Poster: la primera pintura de una secuencia o un video. Siempre visible debajo del canvas; el runtime lo apaga al primer cuadro dibujado. En estático es lo único que se ve. */ .mw-poster { z-index: 0; } .mw-pin__etapa > canvas { z-index: 1; background: transparent; } /* Capa de texto sobre la escena: siempre legible, siempre encima, nunca tapa el CTA del sitio. Los hijos se apilan en la misma celda (no en filas) para que titular, beats y CTA convivan. */ .mw-copy { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; padding: clamp(1rem, 4vw, 3rem); } .mw-copy > * { grid-area: 1 / 1; pointer-events: auto; } .mw-copy--sombra { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); } .mw-copy--placa > * { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); padding: 1.5rem 2rem; border-radius: .5rem; } /* Pista de scroll: se muestra hasta el primer scroll. Un sitio con recorrido tiene que decir "bajá". */ .mw-pista { position: absolute; left: 50%; bottom: 1.5rem; z-index: 3; transform: translateX(-50%); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; transition: opacity .4s; } .mw-pista::after { content: ''; display: block; width: 1px; height: 2.5rem; margin: .5rem auto 0; background: currentColor; transform-origin: top; animation: mw-pista 1.6s ease-in-out infinite; } html[data-scrolled] .mw-pista { opacity: 0; } @keyframes mw-pista { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Progreso de carga real (anillo). Se completa con --mw-carga de 0 a 1. Nunca animación falsa de espera. */ .mw-carga { --mw-carga: 0; position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 3; width: 40px; height: 40px; } .mw-carga circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 113; stroke-dashoffset: calc(113 * (1 - var(--mw-carga))); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .15s linear; } .mw-carga.mw-carga--lista { opacity: 0; transition: opacity .4s .2s; } /* Toggle de audio: siempre visible cuando hay sonido, siempre arranca muteado. Ver materiales.md, sección Audio. */ .mw-audio { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: inline-flex; gap: .5rem; align-items: center; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; background: none; color: inherit; border: 1px solid currentColor; padding: .5rem .8rem; border-radius: 999px; cursor: pointer; } .mw-audio::before { content: 'Sonido off'; } .mw-audio[aria-pressed="true"]::before { content: 'Sonido on'; } html[data-motion="estatico"] .mw-audio { display: none; } /* Nivel estático: nada se mueve solo. Los movimientos muestran su poster + copy + CTA. */ html[data-motion="estatico"] .mw-pista::after { animation: none; transform: none; } html[data-motion="estatico"] .mw-solo-movimiento { display: none !important; } html[data-motion="estatico"] .mw-solo-estatico { display: block !important; } .mw-solo-estatico { display: none; } /* Nivel plano (sin WebGL o WebGL por software): las escenas 3D muestran su fallback. */ html[data-motion="plano"] .mw-solo-webgl { display: none !important; } html[data-motion="plano"] .mw-fallback-webgl { display: block !important; } .mw-fallback-webgl { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }