/* ========================================================================= Monema Adi — animaciones. A) entrada (una sola vez) B) estáticas C) scroll D) micro-interacciones E) reglas no negociables Regla de oro: el contenido existe aunque el JavaScript no llegue. Todo lo que se oculta aquí está bajo `.js` y se revela con `.sin-js` (el temporizador de seguridad del ) o con el observador de monema.js. ========================================================================= */ /* ---------- A. Entrada ---------- */ .cortina{ position:fixed;inset:0;z-index:300;display:grid;place-items:center; background:var(--marino); transition:opacity .45s var(--salida),visibility .45s var(--salida); } .cortina__iso{ width:96px;height:96px;background-color:var(--rosa); -webkit-mask:url("/assets/img/monema-iso.svg") center/contain no-repeat; mask:url("/assets/img/monema-iso.svg") center/contain no-repeat; animation:latido 1.15s var(--salida) infinite; } .cortina.se-fue{opacity:0;visibility:hidden;pointer-events:none} /* Ya se fue: se detiene el bucle en lugar de dejarlo corriendo invisible. */ .cortina.se-fue .cortina__iso{animation:none} /* Sin JS no hay quien la quite: no se muestra nunca. */ html:not(.js) .cortina,html.sin-cortina .cortina{display:none} @keyframes latido{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.9);opacity:.75} } /* Hero escalonado: fondo → título → bajada → CTA → notas. */ html.js .hero [data-entra]{opacity:0;transform:translateY(22px)} html.js .hero.ya-entro [data-entra]{ opacity:1;transform:none; transition:opacity .6s var(--salida),transform .6s var(--salida); } html.js .hero.ya-entro [data-entra="1"]{transition-delay:.00s} html.js .hero.ya-entro [data-entra="2"]{transition-delay:.08s} html.js .hero.ya-entro [data-entra="3"]{transition-delay:.16s} html.js .hero.ya-entro [data-entra="4"]{transition-delay:.24s} html.js .hero.ya-entro [data-entra="5"]{transition-delay:.32s} /* Red de seguridad: si el JS no llegó, esto lo deja todo en su estado final. */ html.sin-js .hero [data-entra]{opacity:1!important;transform:none!important} /* ---------- B. Estáticas (tres, no más) ---------- */ /* B1. Luz del hero que se desplaza muy lento. */ .hero__luz{animation:deriva 26s ease-in-out infinite alternate} @keyframes deriva{ from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.06)} } /* B2. Flotación mínima de la insignia + halo que respira. */ .hero__insignia{animation:flota 7s ease-in-out infinite} .hero__halo{animation:respira 7s ease-in-out infinite} @keyframes flota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @keyframes respira{ 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.05);opacity:.9} } /* B3. Marquesina continua. El grupo se duplica por JS para que no haya salto. */ .marquesina__pista{animation:corre 38s linear infinite} .marquesina:hover .marquesina__pista{animation-play-state:paused} @keyframes corre{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } /* Sin duplicado no hay bucle limpio: se queda quieta. */ .marquesina__pista:not(.esta-duplicada){animation:none} /* B4. Latido discreto del indicador de scroll. */ .hero__scroll span{animation:baja 1.9s var(--salida) infinite} @keyframes baja{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(14px);opacity:0} 100%{transform:translateY(0);opacity:0} } /* ---------- C. Scroll ---------- */ html.js [data-revela]{opacity:0;transform:translateY(26px)} html.js [data-revela].se-ve{ opacity:1;transform:none; transition:opacity .65s var(--salida),transform .65s var(--salida); } html.sin-js [data-revela]{opacity:1!important;transform:none!important} /* Escalonado de listas y tarjetas: entran una tras otra, no en bloque. */ html.js [data-escalona] > *{opacity:0;transform:translateY(22px)} html.js [data-escalona].se-ve > *{ opacity:1;transform:none; transition:opacity .55s var(--salida),transform .55s var(--salida); } html.js [data-escalona].se-ve > :nth-child(1){transition-delay:.00s} html.js [data-escalona].se-ve > :nth-child(2){transition-delay:.07s} html.js [data-escalona].se-ve > :nth-child(3){transition-delay:.14s} html.js [data-escalona].se-ve > :nth-child(4){transition-delay:.21s} html.js [data-escalona].se-ve > :nth-child(5){transition-delay:.28s} html.js [data-escalona].se-ve > :nth-child(6){transition-delay:.35s} html.js [data-escalona].se-ve > :nth-child(n+7){transition-delay:.42s} html.sin-js [data-escalona] > *{opacity:1!important;transform:none!important} /* ---------- D. Micro-interacciones ---------- */ /* El acordeón abre con altura animada mediante grid, sin animar `height`. */ .pregunta__cuerpo{ display:grid;grid-template-rows:1fr; } .pregunta[open] summary ~ .pregunta__cuerpo > p{ animation:asoma .32s var(--salida) both; } @keyframes asoma{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } /* El CTA principal es el que más reacciona de la página. */ .boton--solido,.boton--rosa{position:relative;overflow:hidden} .boton--solido::after,.boton--rosa::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(60% 120% at 50% 120%,rgba(255,255,255,.28),transparent 70%); opacity:0;transition:opacity .25s var(--salida); } .boton--solido:hover::after,.boton--rosa:hover::after{opacity:1} /* Puntero fino: realce de acento en enlaces de navegación. */ @media (hover:hover) and (pointer:fine){ .tarjeta::after{ content:"";position:absolute;inset:auto 0 0 0;height:3px;border-radius:0 0 var(--radio) var(--radio); background:var(--rosa-hondo);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--salida); } .tarjeta:hover::after{transform:scaleX(1)} .tarjeta--cta::after{background:var(--rosa)} } /* Aparición del aviso del formulario. */ .formulario__aviso:not(:empty){animation:asoma .3s var(--salida) both} /* ---------- E. No negociables ---------- */ @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } /* Todo queda en su estado final: nada oculto, nada en bucle, nada de parallax. */ html.js .hero [data-entra], html.js [data-revela], html.js [data-escalona] > *{opacity:1!important;transform:none!important} .cortina{display:none!important} .hero__luz,.hero__insignia,.hero__halo,.marquesina__pista,.hero__scroll span{animation:none!important} }