/* ─── Expressive motion layer ────────────────────────────────────────────── Paired with js/text-effects.js. IMPORTANT: no font-family / font-size / font-weight / letter-spacing is set anywhere in this file. Split spans inherit every type property from their parent, so typography is byte-for-byte unchanged — only transform, opacity and filter are animated. ------------------------------------------------------------------------- */ /* ─── 1. char-level mask reveal ─── */ .qx-split .qx-w { display: inline-block; overflow: hidden; /* the mask */ vertical-align: top; padding-bottom: 0.12em; /* room for descenders inside the mask */ margin-bottom: -0.12em; } .qx-split .qx-c { display: inline-block; transform: translate3d(0, 108%, 0) rotate(6deg); opacity: 0; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .qx-split.is-in .qx-c { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } /* drop will-change once settled to free compositor memory */ .qx-split.is-in { will-change: auto; } /* ─── 2. block rise ─── */ .qx-rise { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1); } .qx-rise.is-in { opacity: 1; transform: none; } /* stagger siblings inside a grid so rows cascade */ .qx-case-page__features .qx-rise:nth-child(2), .qx-case-page__related .qx-rise:nth-child(2), .qx-blog__list .qx-rise:nth-child(2) { transition-delay: 80ms; } .qx-case-page__features .qx-rise:nth-child(3), .qx-case-page__related .qx-rise:nth-child(3), .qx-blog__list .qx-rise:nth-child(3) { transition-delay: 160ms; } .qx-case-page__features .qx-rise:nth-child(4), .qx-blog__list .qx-rise:nth-child(4) { transition-delay: 240ms; } .qx-case-page__features .qx-rise:nth-child(5) { transition-delay: 320ms; } .qx-case-page__features .qx-rise:nth-child(6) { transition-delay: 400ms; } /* ─── 3. parallax + magnetic ─── */ [data-parallax] { will-change: transform; } [data-magnetic], .qx-case-page__cta .qx-btn { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); } /* ─── 4. richer hover on cards ─── */ .qx-case-page__related-card, .qx-blog__item, .qx-blog__featured { position: relative; overflow: hidden; } .qx-case-page__related-card::after, .qx-blog__item::after, .qx-blog__featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(212, 162, 76, 0.07) 50%, transparent 65%); transform: translateX(-120%); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .qx-case-page__related-card:hover::after, .qx-blog__item:hover::after, .qx-blog__featured:hover::after { transform: translateX(120%); } /* ─── 5. animated underline for prose links ─── */ .qx-article__body a:not(.qx-btn), .qx-case-page__prose a:not(.qx-btn) { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; text-decoration: none; transition: background-size 420ms cubic-bezier(0.16, 1, 0.3, 1); } .qx-article__body a:not(.qx-btn):hover, .qx-case-page__prose a:not(.qx-btn):hover { background-size: 100% 1px; } /* ─── 6. reduced motion — everything visible, nothing moves ─── */ @media (prefers-reduced-motion: reduce) { .qx-split .qx-c { transform: none !important; opacity: 1 !important; transition: none !important; } .qx-rise { opacity: 1 !important; transform: none !important; transition: none !important; } [data-parallax] { transform: none !important; } .qx-case-page__related-card::after, .qx-blog__item::after, .qx-blog__featured::after { display: none; } } /* JS sets .qx-reduced on and bails out; belt-and-braces for no-JS too */ .qx-reduced .qx-split .qx-c, .qx-reduced .qx-rise { transform: none !important; opacity: 1 !important; }