/* ===================================================================== LEY SALVAJE - CAPA DE MOVIMIENTO --------------------------------------------------------------------- Todo lo de aqui depende de la clase .js-motion, que motion.js pone en el nada mas cargar. Consecuencia buscada: si el JS falla, o si el visitante tiene activado "reducir movimiento" en su sistema, no se aplica nada y la web se ve exactamente igual que sin este archivo. Nunca ocultar contenido sin esa clase de por medio. ===================================================================== */ /* --- Barra de progreso de lectura --- */ .ley-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 1001; background: var(--gold-gradient); box-shadow: 0 0 10px rgba(212, 165, 66, 0.5); transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* --- Cabecera que se condensa al bajar --- */ .js-motion .main-header { transition: box-shadow 0.35s ease; } .js-motion .header-content { transition: min-height 0.35s ease, padding 0.35s ease; } .js-motion .main-header.is-condensed { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62); } .js-motion .main-header.is-condensed .header-content { min-height: 52px; padding-top: 3px; padding-bottom: 3px; } /* --- Parallax del hero --- El slider recibe margen extra arriba y abajo para que al desplazarse no asome el borde. El velo se contra-desplaza desde JS para que la degradacion siga clavada a la pantalla. */ .js-motion .hero-bg-slider { top: -14%; height: 128%; will-change: transform; } .js-motion .hero-content { will-change: transform, opacity; } /* --- Aparicion al entrar en pantalla --- El retraso escalonado lo marca --i, que asigna motion.js segun la posicion del elemento dentro de su grupo. */ .js-motion .ley-rev { opacity: 0; transform: translateY(26px); } .js-motion .ley-rev.is-in { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 90ms); } /* --- Filete dorado que se dibuja bajo cada titulo de seccion --- Se monta encima del borde inferior que ya tenia .block-header, sin sustituirlo: si el JS no llega, el borde original sigue ahi. */ .js-motion .block-header { position: relative; } .js-motion .block-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .js-motion .block-header.is-in::after { transform: scaleX(1); } /* --- Micro-interacciones --- */ .js-motion .live-stat-card, .js-motion .feed-card, .js-motion .value-card { transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .js-motion .live-stat-card:hover, .js-motion .feed-card:hover, .js-motion .value-card:hover { transform: translateY(-5px); border-color: var(--line-gold-strong); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.6); } .js-motion .card-image { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-motion .value-card:hover .card-image { transform: scale(1.07); } /* Red de seguridad: aunque motion.js ya comprueba esta preferencia antes de activarse, la repetimos aqui por si la clase se quedara puesta por cualquier via. */ @media (prefers-reduced-motion: reduce) { .js-motion .ley-rev { opacity: 1; transform: none; transition: none; } .js-motion .block-header::after { transform: scaleX(1); transition: none; } .js-motion .hero-bg-slider { top: 0; height: 100%; transform: none !important; } .js-motion .hero-content { transform: none !important; opacity: 1 !important; } .ley-progress { display: none; } }