/* ========================================================================= APARICIÓN AL SCROLLEAR — archivo de prueba Se carga DESPUÉS de styles.css y no pisa nada: sólo agrega el estado "todavía no apareció" y la transición hacia "ya apareció". Regla de seguridad: nada de esto se activa si no tiene la clase "anim". Esa clase la pone un script chiquito en el . Si la persona tiene el JavaScript apagado, o pidió menos animación en su celular, la clase nunca se agrega y la página se ve entera y quieta, como siempre. ========================================================================= */ :root{ --rv-dur:.72s; /* cuánto tarda en aparecer */ --rv-ease:cubic-bezier(.16,.84,.44,1); /* arranca rápido, frena suave*/ --rv-y:18px; /* cuánto sube al aparecer */ } /* ------------------------------------------------------------------------- 1. HERO — aparece solo al cargar, sin depender de JavaScript. Es lo primero que ve quien escanea el QR, así que no puede quedar colgado esperando nada. ------------------------------------------------------------------------- */ @keyframes rv-entrada{ from{opacity:0;transform:translateY(22px)} to {opacity:1;transform:none} } @keyframes rv-foto{ from{transform:scale(1.055)} to {transform:scale(1)} } /* "Cómo trabajamos" ya venía centrado a mano, corriéndose media palabra hacia la izquierda (translateX(-50%)). Si lo animo con rv-entrada le piso ese centrado y queda escrachado a la derecha. Por eso tiene su propia animación: sube igual que el resto, pero sin soltar nunca el -50%. */ @keyframes rv-entrada-centrado{ from{opacity:0;transform:translate(-50%,22px)} to {opacity:1;transform:translateX(-50%)} } html.anim .hero{overflow:hidden} /* la foto arranca apenas más grande */ html.anim .hero__media img{animation:rv-foto 2.2s var(--rv-ease) both} html.anim .hero__inner>*{animation:rv-entrada .78s var(--rv-ease) both} html.anim .hero__inner>*:nth-child(1){animation-delay:.05s} html.anim .hero__inner>*:nth-child(2){animation-delay:.13s} html.anim .hero__inner>*:nth-child(3){animation-delay:.21s} html.anim .hero__inner>*:nth-child(4){animation-delay:.29s} /* los botones */ html.anim .hero__inner>*:nth-child(5){animation-delay:.37s} html.anim .hero__more{animation:rv-entrada-centrado .78s var(--rv-ease) .55s both} /* ------------------------------------------------------------------------- 2. EL RESTO — aparece cuando entra en pantalla. OJO: esta lista de bloques tiene que ser IGUAL a la de anim.js. Acá se esconden; allá se les avisa que ya se pueden mostrar. ------------------------------------------------------------------------- */ html.anim .head>*, html.anim .exp-list>.exp, html.anim .route__intro>*, html.anim .route__stages>li, html.anim .drawer, html.anim .offer__left>*, html.anim .offer__right, html.anim .reviews>.review, html.anim .team>.member, html.anim #nosotros .center, html.anim .fgrid__left>*, html.anim .fgrid__right, html.anim .footer__top>*, html.anim .footer__bottom{ opacity:0; transform:translateY(var(--rv-y)); transition:opacity var(--rv-dur) var(--rv-ease) var(--rv-d,0ms), transform var(--rv-dur) var(--rv-ease) var(--rv-d,0ms); } /* El interruptor. anim.js lo prende cuando el bloque entra en pantalla y lo deja prendido: cada bloque se anima UNA vez y después se queda quieto. Sólo lo apaga si soltás la página unos segundos, y nada más para lo que en ese momento esté fuera de la pantalla. */ html.anim .is-in{opacity:1 !important;transform:none !important} /* Los bloques grandes suben un poco menos: si todos se mueven la misma distancia, los grandes parecen pesados y lentos. */ html.anim .exp-list>.exp, html.anim .reviews>.review, html.anim .fgrid__right, html.anim .offer__right, html.anim .drawer{--rv-y:14px} /* ------------------------------------------------------------------------- 3. Red de seguridad Si alguien pidió menos animación después de cargar la página, todo queda visible al instante en vez de quedarse escondido. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html.anim *, html.anim *::before, html.anim *::after{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; } }