/* ============================================================ SocialSpark360 motion layer v1 Loaded on every themed site. Zero theme edits: effects attach to markup the themes already produce. Rules that keep this from hurting sales: - text stays readable while it animates (never hidden if JS fails) - 3D tilt only where a real cursor exists (never on touch) - all of it collapses under prefers-reduced-motion - one kill switch: ============================================================ */ :root{ --mo-ease: cubic-bezier(.16,1,.3,1); --mo-tilt: 6deg; /* raise for more 3D. above ~10deg it starts to look cheap */ --mo-lift: 8px; } /* ---------- reveal on scroll (text + blocks) ---------- */ [data-mo]{ opacity:0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--mo-ease), transform 1s var(--mo-ease); will-change: opacity, transform; } [data-mo].mo-in{ opacity:1; transform:none; } [data-mo="fade"]{ transform:none; } [data-mo="left"] { transform: translate3d(-26px,0,0); } [data-mo="right"]{ transform: translate3d(26px,0,0); } [data-mo="zoom"] { transform: scale(.965); } /* stagger children (photo strips, dish grids) */ [data-mo-stagger] > *{ opacity:0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--mo-ease), transform .9s var(--mo-ease); } [data-mo-stagger].mo-in > *{ opacity:1; transform:none; } /* ---------- headings reveal word by word ---------- */ .mo-w{ display:inline-block; overflow:hidden; vertical-align:top; } .mo-w > i{ display:inline-block; font-style:inherit; transform: translate3d(0,110%,0); transition: transform .95s var(--mo-ease); } .mo-line.mo-in .mo-w > i{ transform:none; } /* ---------- hero photo: depth ---------- The drift is driven by JS (parallax), not a keyframe animation. A CSS animation would override the inline transform JS sets and the parallax would silently do nothing. So: static scale here, motion there. */ .ssm-hero{ will-change: transform; transform: scale(1.08); } /* ---------- photo strip: 3D depth on hover ---------- */ .ssm-strip{ perspective: 900px; } .ssm-cell{ transform-style: preserve-3d; transition: transform .7s var(--mo-ease), box-shadow .7s var(--mo-ease), z-index 0s; will-change: transform; } .ssm-cell:hover{ transform: translate3d(0,calc(var(--mo-lift) * -1),0) scale(1.04); box-shadow: 0 26px 44px -22px rgba(0,0,0,.55); z-index: 2; } .ssm-cell img{ backface-visibility:hidden; } /* ---------- dish / menu photos: card tilt ---------- */ .mo-tilt{ transform-style: preserve-3d; transition: transform .55s var(--mo-ease), box-shadow .55s var(--mo-ease); will-change: transform; } .mo-tilt-on{ transition: transform .12s linear; } /* while the cursor is on it */ .mo-tilt img{ transform: translateZ(18px); } /* thumbnails get a gentler pop */ .ssm-thumb{ transition: transform .5s var(--mo-ease), box-shadow .5s var(--mo-ease); will-change: transform; } .ssm-thumb:hover{ transform: scale(1.12) rotate(-1.5deg); box-shadow: 0 14px 26px -12px rgba(0,0,0,.5); } /* ---------- buttons: lift ---------- */ a[class*="bt"], button[class*="bt"]{ transition: transform .45s var(--mo-ease), box-shadow .45s var(--mo-ease), opacity .45s var(--mo-ease); } a[class*="bt"]:hover, button[class*="bt"]:hover{ transform: translateY(-2px); } /* ---------- honour the user's wishes, always ---------- */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } [data-mo], [data-mo-stagger] > *{ opacity:1 !important; transform:none !important; } .mo-w > i{ transform:none !important; } .ssm-hero{ transform:none !important; } } html[data-motion="off"] [data-mo], html[data-motion="off"] [data-mo-stagger] > *{ opacity:1 !important; transform:none !important; } html[data-motion="off"] .mo-w > i{ transform:none !important; } html[data-motion="off"] .ssm-hero{ transform:none !important; } /* touch devices: no tilt, no parallax. they get reveals only. */ @media (hover: none){ .ssm-cell:hover, .ssm-thumb:hover{ transform:none; box-shadow:none; } .ssm-hero{ transform:none; } }