/* GGM Soluciones - animaciones de entrada al hacer scroll El contenido es visible por defecto: solo se oculta si el JS confirma que puede animarlo (clase .ggm-anim en ). Asi nunca se pierde contenido si el JS falla o el navegador no lo ejecuta. */ :root { /* Easing tipo "ease-out-expo": arranca rapido y frena muy suave */ --ease-suave: cubic-bezier(.16, 1, .3, 1); --dur: .9s; } /* ---------- Estado inicial (solo con JS activo) ---------- */ .ggm-anim .rv { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); transition: opacity var(--dur) var(--ease-suave), transform var(--dur) var(--ease-suave), filter var(--dur) var(--ease-suave); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; } /* Variantes */ .ggm-anim .rv-izq { transform: translate3d(-30px, 0, 0); } .ggm-anim .rv-der { transform: translate3d(30px, 0, 0); } .ggm-anim .rv-zoom { transform: translate3d(0, 26px, 0) scale(.965); } .ggm-anim .rv-suave { transform: translate3d(0, 18px, 0); filter: blur(3px); } /* ---------- Estado visible ---------- */ .ggm-anim .rv.visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } /* Una vez terminada la entrada, liberamos la capa de composicion */ .ggm-anim .rv.hecho { will-change: auto; } /* ---------- Cabecera que reacciona al scroll ---------- */ .cab { transition: background-color .5s var(--ease-suave), border-color .5s var(--ease-suave), box-shadow .5s var(--ease-suave); } .cab.scrolled { background: rgba(0, 2, 15, .72); border-bottom-color: #1b2450; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); } /* Barra de progreso de lectura */ .ggm-progreso { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #4c75ff, #7aa2ff); z-index: 60; pointer-events: none; } /* ---------- Microinteracciones ---------- */ .tarjeta { transition: transform .5s var(--ease-suave), border-color .5s var(--ease-suave), background-color .5s var(--ease-suave); } .tarjeta:hover { transform: translateY(-5px); border-color: #2a3568; background-color: #080f28; } ul.lista li { transition: transform .4s var(--ease-suave), color .4s var(--ease-suave); } ul.lista li:hover { transform: translateX(5px); color: #c9cfe2; } details { transition: border-color .4s var(--ease-suave); } details[open] summary { color: #4c75ff; } details[open] p { animation: ggm-desplegar .55s var(--ease-suave); } @keyframes ggm-desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Accesibilidad: si el usuario pide menos movimiento ---------- */ @media (prefers-reduced-motion: reduce) { .ggm-anim .rv, .ggm-anim .rv-izq, .ggm-anim .rv-der, .ggm-anim .rv-zoom, .ggm-anim .rv-suave { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .tarjeta:hover, ul.lista li:hover { transform: none; } details[open] p { animation: none; } .ggm-progreso { display: none; } }