/* =========================================================== The Handloom House — shared motion layer transform/opacity only · reduced-motion safe · JS-gated =========================================================== */ /* Hidden states apply ONLY once JS has added .mo-ready to , so no-JS visitors and crawlers always see full content. */ html.mo-ready .mo{ opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } html.mo-ready .mo.mo-scale{transform:scale(.965)} html.mo-ready .mo.mo-in{opacity:1;transform:none} /* Button press micro-interaction (80–150ms band) */ .btn-wa:active{transform:scale(.96)} /* Gentle, slow hero image drift — adds life without distraction */ @media (prefers-reduced-motion: no-preference){ html.mo-ready .hero .bg img, html.mo-ready .hero .media img{ animation:hh-drift 18s ease-in-out infinite alternate; } } @keyframes hh-drift{ from{transform:scale(1.02) translateY(0)} to{transform:scale(1.09) translateY(-1.5%)} } /* Respect the user's system setting — kill all motion */ @media (prefers-reduced-motion: reduce){ html.mo-ready .mo{opacity:1 !important;transform:none !important;transition:none !important} html.mo-ready .hero .bg img, html.mo-ready .hero .media img{animation:none !important} html{scroll-behavior:auto !important} }