/* ============================================================================ * AQUROV motion layer — the site's one animation vocabulary. * * Loaded on every page (functions.php). It carries no layout of its own: a * page opts in by adding the data attributes below, so nothing animates by * accident and the homepage (the reference implementation) can be adopted page * by page. * * Markup contract * data-aq-reveal element fades/rises in when scrolled into view * data-aq-reveal="up" up (default) | fade | left | right | scale * data-aq-delay="120" extra delay in ms: on its own element, or on * top of the stagger it inherits from a container * data-aq-stagger="70" container: its [data-aq-reveal] children get an * incremental delay, 70ms apart when no value is * given (the last ten children only) * data-aq-count="8" number counts up from 0 when it comes into view * data-aq-count-suffix=" m" text appended to the animated number * data-aq-count-decimals="1" decimals to keep (default 0) * data-aq-count-duration="900" how long the count takes, in ms (default 900) * data-aq-enter="180" hero entrance: the animation delay for an * element that is on screen when the page loads * data-aq-lift hover: the element rises 4px (its own sheet * supplies the border and shadow change) * data-aq-spin / -spin-rev / -pulse / -drift / -sweep * decorative loops; set --aq-spin-dur, * --aq-pulse-dur, --aq-drift-dur or --aq-sweep-dur * on the element to change the period * data-aq-underline draws the element's own ::after rule in * * Behaviour * The hidden state applies only while carries .aq-motion, a class the * runtime adds before the body is parsed. With JavaScript off the class never * appears, so every element is simply visible — no content is ever hidden * behind a script. The whole hidden state sits inside a * prefers-reduced-motion: no-preference query, so a visitor who asks for * reduced motion gets the same page, standing still. * ========================================================================= */ @keyframes aq-fade-up { from { opacity: 0; transform: translate3d(0, var(--aq-rise, 16px), 0); } to { opacity: 1; transform: none; } } @keyframes aq-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @keyframes aq-rotate { to { transform: rotate(360deg); } } @keyframes aq-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.03); } } @keyframes aq-sweep { 0% { transform: translateY(-110%); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: translateY(210%); opacity: 0; } } @keyframes aq-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference) { /* Scroll reveal --------------------------------------------------------- */ html.aq-motion [data-aq-reveal] { transition: opacity var(--aq-dur-slow, 640ms) var(--aq-ease, ease), transform var(--aq-dur-slow, 640ms) var(--aq-ease, ease); will-change: opacity, transform; } /* * The hidden state is written only on the :not(.aq-in) selector, and never * repeated on .aq-in itself: once the class is added the rule stops matching * and the element returns to its own computed style (opacity 1, no * transform). Writing "transform: none" on .aq-in instead would outrank * [data-aq-lift]:hover below and kill the hover response of every card that * is revealed on scroll. */ html.aq-motion [data-aq-reveal]:not(.aq-in) { opacity: 0; } html.aq-motion [data-aq-reveal="up"]:not(.aq-in) { transform: translate3d(0, 18px, 0); } html.aq-motion [data-aq-reveal="fade"]:not(.aq-in) { transform: none; } html.aq-motion [data-aq-reveal="left"]:not(.aq-in) { transform: translate3d(-22px, 0, 0); } html.aq-motion [data-aq-reveal="right"]:not(.aq-in) { transform: translate3d(22px, 0, 0); } html.aq-motion [data-aq-reveal="scale"]:not(.aq-in) { transform: scale(0.975); } /* Hero entrance: no scroll position is needed, so it simply plays --------- */ html.aq-motion [data-aq-enter] { animation: aq-fade-up var(--aq-dur-slow, 640ms) var(--aq-ease, ease) both; animation-delay: var(--aq-enter-delay, 0ms); } /* Decorative loops ------------------------------------------------------- */ [data-aq-spin] { animation: aq-rotate var(--aq-spin-dur, 42s) linear infinite; } [data-aq-spin-rev] { animation: aq-rotate var(--aq-spin-dur, 58s) linear infinite reverse; } [data-aq-pulse] { animation: aq-pulse var(--aq-pulse-dur, 6s) var(--aq-ease, ease) infinite; } [data-aq-drift] { animation: aq-drift var(--aq-drift-dur, 9s) var(--aq-ease, ease) infinite; } [data-aq-sweep] { animation: aq-sweep var(--aq-sweep-dur, 7s) linear infinite; animation-delay: var(--aq-sweep-delay, 1.2s); } /* A heading's eyebrow rule draws itself in ------------------------------- */ [data-aq-underline]::after { transform-origin: left center; animation: aq-underline 720ms var(--aq-ease, ease) both; animation-delay: var(--aq-underline-delay, 160ms); } /* Hover response, shared by linked cards --------------------------------- */ [data-aq-lift] { transition: transform var(--aq-dur) var(--aq-ease, ease), box-shadow var(--aq-dur) var(--aq-ease, ease), border-color var(--aq-dur) var(--aq-ease, ease); } [data-aq-lift]:hover { transform: translateY(-4px); } } /* Reduced motion: everything stands still, and nothing is hidden ---------- */ @media (prefers-reduced-motion: reduce) { html.aq-motion [data-aq-reveal], html.aq-motion [data-aq-enter] { opacity: 1 !important; transform: none !important; animation: none !important; } [data-aq-spin], [data-aq-spin-rev], [data-aq-pulse], [data-aq-drift], [data-aq-sweep] { animation: none !important; } }