/* AGI Automations — site motion. Only active when motion.js adds .m-on to . */ :root { --m-ease: cubic-bezier(.2, .7, .2, 1); --m-purple: #6430EC; } /* 1. Scroll reveal */ .m-on .m-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--m-ease) var(--m-d, 0ms), transform .7s var(--m-ease) var(--m-d, 0ms); } .m-on .m-rv.m-in { opacity: 1; transform: none; } .m-on .m-accent { background-image: linear-gradient(rgba(100, 48, 236, .16), rgba(100, 48, 236, .16)); background-repeat: no-repeat; background-position: 0 90%; background-size: 0% .32em; transition: background-size 1s var(--m-ease) .45s; } .m-on .m-accent.m-in { background-size: 100% .32em; } /* 2. Hover life */ .m-on .m-card, .m-on .m-rv.m-card { transition: opacity .7s var(--m-ease) var(--m-d, 0ms), transform .45s var(--m-ease) var(--m-d, 0ms), box-shadow .3s ease, border-color .3s ease; } .m-on .m-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(26, 26, 46, .35); border-color: #CBBEF7 !important; } .m-on .m-btn { position: relative; overflow: hidden; display: inline-block; transition: transform .25s var(--m-ease), box-shadow .25s ease, background-color .25s ease; } .m-on .m-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); pointer-events: none; } .m-on .m-btn:hover { transform: translateY(-1px); background: #5528CC !important; box-shadow: 0 10px 22px -10px rgba(100, 48, 236, .65); } .m-on .m-btn:hover::after { left: 130%; transition: left .7s var(--m-ease); } .m-on .m-btn:active { transform: translateY(0); } .m-on .m-arrow { display: inline-block; transition: transform .25s var(--m-ease); } .m-on a:hover .m-arrow { transform: translateX(4px); } .m-on .m-navlink { background-image: linear-gradient(var(--m-purple), var(--m-purple)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; padding-bottom: 3px; transition: background-size .3s var(--m-ease), color .2s ease; } .m-on .m-navlink:hover { background-size: 100% 1.5px; color: #1A1A2E !important; } .m-on .m-navlink.m-current { background-size: 100% 1.5px; color: #1A1A2E !important; } .m-on .m-row { transition: background-color .25s ease; } .m-on .m-row:hover { background: #F8F7FF; } .m-on .m-row > span { display: inline-block; transition: transform .25s var(--m-ease); } .m-on .m-row:hover > span { transform: translateX(3px); } /* 3. Page chrome */ .m-on nav { transition: box-shadow .3s ease; } .m-on nav.m-scrolled { box-shadow: 0 6px 24px -18px rgba(26, 26, 46, .45); } .m-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--m-purple); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } .m-on .m-in .m-row { animation: m-pulse 1.3s ease var(--m-r, 0ms); } @keyframes m-pulse { 0%, 100% { background-color: transparent; } 35% { background-color: #F3F0FF; } } @media (prefers-reduced-motion: reduce) { .m-on .m-rv { opacity: 1 !important; transform: none !important; transition: none !important; } .m-on .m-row { animation: none !important; } }