/* ============================================================= SynBio — Motion layer (additive, optional) Each effect is gated by a data-fx-* attribute on so it can be toggled independently. Loads after styles.css. Pure CSS/JS, no framework. Safe to drop into production. ============================================================= */ /* ---------- 1 · hero molecular network canvas ---------- */ .hero-fx{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease); } :root[data-fx-particles="on"] .hero-fx{opacity:1} /* keep hero text above the canvas */ .hero-inner{position:relative; z-index:2} /* ---------- 2 · count-up: no layout shift while counting ---------- */ .hero-meta b, .stat b, .metric b{font-variant-numeric:tabular-nums} /* ---------- 4 · spotlight + tilt cards ---------- */ :root[data-fx-tilt="on"] .cards{perspective:1100px} :root[data-fx-tilt="on"] .card{ transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .3s, background-color .4s; will-change:transform; } /* cursor-tracking glow — driven by --mx/--my set in JS */ :root[data-fx-tilt="on"] .card::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0; pointer-events:none; background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--orange) 16%, transparent), transparent 60%); transition:opacity .35s var(--ease); } :root[data-theme="dark"][data-fx-tilt="on"] .card::after{ background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--teal-bright) 30%, transparent), transparent 60%); } :root[data-fx-tilt="on"] .card:hover::after{opacity:1} /* lift the card's own content above the glow */ :root[data-fx-tilt="on"] .card > *{position:relative; z-index:1} /* JS toggles the lift so the existing :hover translate doesn't fight the tilt */ :root[data-fx-tilt="on"] .card.fx-tilting:hover{transform:none} /* ---------- 5 · magnetic primary button ---------- */ :root[data-fx-magnetic="on"] .btn{will-change:transform} /* ---------- 6 · scroll progress bar ---------- */ .fx-progress{ position:fixed; left:0; top:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; z-index:200; background:linear-gradient(90deg, var(--orange), var(--amber)); opacity:0; transition:opacity .3s var(--ease); pointer-events:none; } :root[data-fx-progress="on"] .fx-progress{opacity:1} @media (prefers-reduced-motion: reduce){ .hero-fx{display:none} }