/* ============================================================ SoS WebForge v1.0 · CAPA DE EXPERIENCIA (CSS reutilizable) Powered by Xplorers Startups · Designed by Soul Lens Studios Progressive enhancement: se activa con .fx en (lo añade flux-experience.js). Sin JS o con prefers-reduced-motion → la página queda 100% legible y funcional. Drop-in: Requiere variables de marca ya definidas: --volt, --panel, --line, --ash2, --display, --mono. ============================================================ */ :root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--dur-fast:.18s;--dur-med:.5s;--dur-slow:.9s} html.fx{scroll-behavior:smooth} section[id]{scroll-margin-top:78px} /* reveals escalonados */ .fx [data-rv]{opacity:0;transform:translateY(22px);will-change:opacity,transform} .fx [data-rv].in{opacity:1;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)} /* coreografía de entrada del hero (requiere .hero-copy y .visual) */ .fx .hero-copy>*{opacity:0;transform:translateY(16px)} .fx .hero-copy.in>*{opacity:1;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-spring)} .fx .hero-copy.in>*:nth-child(1){transition-delay:.04s}.fx .hero-copy.in>*:nth-child(2){transition-delay:.14s} .fx .hero-copy.in>*:nth-child(3){transition-delay:.24s}.fx .hero-copy.in>*:nth-child(4){transition-delay:.34s} .fx .hero-copy.in>*:nth-child(5){transition-delay:.44s} .fx .visual{opacity:0;transform:translateY(26px) scale(.985)} .fx .visual.in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:.18s} /* spotlight reactivo al cursor en el hero */ .hero{--mx:60%;--my:25%} .fx .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s; background:radial-gradient(460px 380px at var(--mx) var(--my),rgba(198,255,61,.12),transparent 70%)} .fx.fxp .hero::after{opacity:1} .fx .hero>*{position:relative;z-index:1} /* botones magnéticos + tilt + header glass */ .fx .btn{transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast),box-shadow var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)} .fx [data-tilt]{transition:transform var(--dur-med) var(--ease-out)} .fx header{transition:background .3s,box-shadow .3s,border-color .3s} .fx header.scrolled{background:rgba(10,10,10,.55);box-shadow:0 1px 0 rgba(255,255,255,.05),0 22px 60px -34px rgba(0,0,0,.95)} /* cursor de marca + easter egg */ .fxc{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--volt);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:width .2s,height .2s,background .2s,opacity .3s} .fxc.on{opacity:.85}.fxc.big{width:46px;height:46px;background:rgba(198,255,61,.18)} .fxbolt{position:fixed;top:-30px;z-index:9997;font-size:20px;pointer-events:none;animation:fxfall linear forwards} @keyframes fxfall{to{transform:translateY(110vh) rotate(40deg);opacity:0}} @media(hover:none){.fxc{display:none}} @media(prefers-reduced-motion:reduce){ .fx [data-rv],.fx .hero-copy>*,.fx .visual{opacity:1!important;transform:none!important;transition:none!important} .fx .hero::after{display:none}.fxc,.fxbolt{display:none!important}.fx [data-tilt]{transform:none!important} }