/* Motion for every page: soft fade-ups, smooth page changes, gentle hovers. Content is only hidden once motion.js has added .js-motion to , so if the script never loads, nothing is hidden. Reduced-motion users get none of it. */ :root{--ease-out:cubic-bezier(.2,.7,.2,1)} /* 1. smooth page-to-page cross-fade (Chrome, Edge, Safari 18.2+); the header stays put */ @view-transition{navigation:auto} header{view-transition-name:site-header} ::view-transition-old(root){animation:mo-out .22s ease both} ::view-transition-new(root){animation:mo-in .38s var(--ease-out) both} @keyframes mo-out{to{opacity:0}} @keyframes mo-in{from{opacity:0;transform:translateY(8px)}} /* 2. fade-up on load and on scroll. Keep this list in sync with TARGETS in motion.js */ .js-motion :is( main > .wrap > *, main > section > .wrap > *, main > article > :nth-child(-n+4), main > article > :is(.dua,.step,.cta,h2), .grid > *, .method > li, .list > li, .rules > div, .items > li ):not(.grid,.method,.list,.rules,.items):not(.in){ opacity:0;transform:translateY(16px); } .js-motion .in{ opacity:1;transform:none; transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); } /* 3. hovers and taps */ html{scroll-behavior:smooth} nav a,footer a,a{transition:color .2s ease,text-decoration-color .2s ease} .btn,button,nav a.join{transition:background .2s ease,transform .15s ease,box-shadow .2s ease} .btn:active,button:active,nav a.join:active{transform:scale(.98)} a.card,.latest{transition:border-color .25s ease,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)} a.card:hover,.latest:hover{transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(11,11,11,.25)} .latest img{transition:transform .9s var(--ease-out)} .latest:hover img{transform:scale(1.025)} .list a{transition:opacity .2s ease} .list .thumb{transition:transform .9s var(--ease-out)} .list a:hover .thumb{transform:scale(1.015)} /* 4. FAQ answers slide open (newer Chrome/Edge; others simply open) */ :root{interpolate-size:allow-keywords} details::details-content{block-size:0;overflow:hidden;opacity:0; transition:block-size .35s var(--ease-out),opacity .35s ease,content-visibility .35s allow-discrete} details[open]::details-content{block-size:auto;opacity:1} /* 5. signup result + name step fade in */ .signup.is-done .result{animation:mo-rise .5s var(--ease-out) both} .namedone{animation:mo-rise .45s var(--ease-out) both} .signup.has-alert .alert{animation:mo-rise .3s var(--ease-out) both} @keyframes mo-rise{from{opacity:0;transform:translateY(8px)}} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} html{scroll-behavior:auto} *,*::before,*::after,::view-transition-group(*){animation:none!important;transition:none!important} a.card:hover,.latest:hover,.latest:hover img,.list a:hover .thumb{transform:none} }