@charset "UTF-8"; /* ============================================================= RemiseroStudio.com — Transición de entrada (scroll reveal) Archivo: /css/rs-reveal.css Copia EXACTA del sistema que ya usa /impresion-color/ (duración, easing, recorrido y retardos escalonados idénticos). Se activa únicamente cuando el JS añade .rs-ic-rev a , así que sin JavaScript el contenido se ve siempre. Pareja: /js/rs-reveal.js ============================================================= */ :root { --ic-ease: cubic-bezier(.22,.61,.36,1); } /* ════════ SCROLL REVEAL (se activa solo con JS) ════════ La sección hace un fundido corto y sus bloques suben escalonados. Al terminar, el JS retira las clases para no dejar transform residual. */ html.rs-ic-rev .rs-rev{ opacity:0; transition:opacity .55s var(--ic-ease); } html.rs-ic-rev .rs-rev.rs-in{opacity:1} html.rs-ic-rev .rs-rev .rs-head{ opacity:0;transform:translateY(18px); transition:opacity .6s var(--ic-ease),transform .6s var(--ic-ease); } html.rs-ic-rev .rs-rev.rs-in .rs-head{opacity:1;transform:none} html.rs-ic-rev .rs-rev .rs-stagger > *{ opacity:0;transform:translateY(22px); transition:opacity .6s var(--ic-ease),transform .6s var(--ic-ease); } html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *{opacity:1;transform:none} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(1){transition-delay:.10s} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(2){transition-delay:.19s} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(3){transition-delay:.28s} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(4){transition-delay:.37s} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(5){transition-delay:.46s} html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *:nth-child(6){transition-delay:.55s} /* Movimiento reducido: se conserva la opacidad, se elimina el desplazamiento */ @media (prefers-reduced-motion:reduce){ html.rs-ic-rev .rs-rev .rs-head, html.rs-ic-rev .rs-rev .rs-stagger > *, html.rs-ic-rev .rs-rev.rs-in .rs-head, html.rs-ic-rev .rs-rev.rs-in .rs-stagger > *{transform:none !important} } /* ════════ ANIMACIÓN DE ENTRADA DEL HERO ════════ Keyframes copiados literalmente de /impresion-color/. Aquí solo se declaran; cada página los engancha a sus propios elementos con sus tiempos. */ @keyframes rsIcUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes rsIcWipe{ 0%{transform:translateX(0);opacity:0} 14%{opacity:1} 82%{opacity:1} 100%{transform:translateX(100vw);opacity:0} } @keyframes rsIcBar{from{opacity:0;transform:skewX(-9deg) translateY(-34px)}to{opacity:1;transform:skewX(-9deg)}} @keyframes rsIcGlow{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}} /* Movimiento reducido: se conserva el fundido, se quita el desplazamiento */ @media (prefers-reduced-motion:reduce){ @keyframes rsIcUp{from{opacity:0}to{opacity:1}} @keyframes rsIcBar{from{opacity:0}to{opacity:1}} @keyframes rsIcGlow{from{opacity:0}to{opacity:1}} }