/* ============================================================ site-motion.css — reusable motion + micro-interaction layer ------------------------------------------------------------ Drop-in for the homepage + landing pages. Additive only, fully .js-gated (content is never hidden without JS), and completely silenced under prefers-reduced-motion. Colour-agnostic: accents inherit each page's own palette via --sm-accent (falls back to the brand coral). Matches the food-directory v3 idiom. Requires: (set inline in ) and /js/site-motion.js. Load this AFTER a page's own styles. ============================================================ */ :root { --sm-accent: #FF8A73; /* brand coral, overridable per page */ --sm-ease: cubic-bezier(.22, .61, .36, 1); --sm-ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* ---------- Scroll reveal ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sm-ease), transform .7s var(--sm-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* directional + scale variants */ .js [data-reveal="left"] { transform: translateX(-26px); } .js [data-reveal="right"] { transform: translateX(26px); } .js [data-reveal="scale"] { transform: scale(.94); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="left"].is-visible, .js [data-reveal="right"].is-visible, .js [data-reveal="scale"].is-visible { transform: none; } /* ---------- One-shot hero entrance (fires on load, not scroll) ---------- */ .js [data-enter] > * { opacity: 0; transform: translateY(16px); animation: sm-enter .8s var(--sm-ease) forwards; } .js [data-enter] > *:nth-child(1) { animation-delay: .05s; } .js [data-enter] > *:nth-child(2) { animation-delay: .14s; } .js [data-enter] > *:nth-child(3) { animation-delay: .23s; } .js [data-enter] > *:nth-child(4) { animation-delay: .32s; } .js [data-enter] > *:nth-child(5) { animation-delay: .41s; } .js [data-enter] > *:nth-child(6) { animation-delay: .50s; } @keyframes sm-enter { to { opacity: 1; transform: none; } } /* ---------- Count-up numbers ---------- */ [data-countup] { font-variant-numeric: tabular-nums; } /* ---------- Floating accent art ---------- */ .sm-bob { animation: sm-bob 6s ease-in-out infinite; } .sm-bob-2 { animation: sm-bob 6s ease-in-out infinite .8s; } .sm-bob-3 { animation: sm-bob 7s ease-in-out infinite 1.6s; } .sm-sway { transform-origin: bottom center; animation: sm-sway 8s ease-in-out infinite; } .sm-spin-slow { animation: sm-spin 26s linear infinite; } @keyframes sm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes sm-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } @keyframes sm-spin { to { transform: rotate(360deg); } } /* Soft drifting background blobs (decorative, pointer-events off) */ .sm-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .5; pointer-events: none; z-index: 0; animation: sm-drift 18s ease-in-out infinite; } @keyframes sm-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18px, -22px) scale(1.06); } 66% { transform: translate(-16px, 14px) scale(.96); } } /* ---------- Generic refined interactions ---------- */ /* Buttons: gentle press feedback (no big lift — on brand). */ .sm-btn { transition: transform .18s var(--sm-ease), box-shadow .18s var(--sm-ease), background .18s var(--sm-ease); } .sm-btn:hover { transform: translateY(-1px); } .sm-btn:active { transform: translateY(0) scale(.99); } /* Shine sweep for primary CTAs */ .sm-shine { position: relative; overflow: hidden; } .sm-shine::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); pointer-events: none; } .sm-shine:hover::after { animation: sm-shine .85s var(--sm-ease); } @keyframes sm-shine { to { left: 130%; } } /* Card lift + chevron reveal (subtle; used where a card links out) */ .sm-card { transition: box-shadow .25s var(--sm-ease), transform .25s var(--sm-ease), border-color .25s var(--sm-ease); } /* ---------- Reduced motion: silence everything ---------- */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .js [data-enter] > * { opacity: 1 !important; transform: none !important; animation: none !important; } .sm-bob, .sm-bob-2, .sm-bob-3, .sm-sway, .sm-spin-slow, .sm-blob { animation: none !important; } .sm-btn, .sm-card { transition: none; } .sm-btn:hover, .sm-btn:active { transform: none; } .sm-shine:hover::after { animation: none; } }