/* ============================================================
DNA Agency — PREMIUM MOTION LAYER (motion.css)
------------------------------------------------------------
Drop-in companion to motion.js. Lifts a static build to the
"Lithko bar" (lithko.com / lutzconcreteconstruction.com) using
scroll-reveal, Ken Burns, parallax, animated underlines, hover
micro-interactions and a marquee — all GPU-only (transform/opacity),
so it stays at 60fps.
NAMESPACING: everything is prefixed .mo-* or driven by the
[data-reveal] attribute, and the revealed state is .in-view.
This deliberately does NOT touch the base template's own .reveal
(which is an on-LOAD animation) / .marquee / .stamp — the two
systems coexist: template does the hero on-load flourish, this
layer does scroll-paced reveals for every section below the fold.
NO-JS SAFE (progressive enhancement): reveal elements are hidden
ONLY under , a class motion.js adds as its
first act. If JS never runs, nothing is ever hidden and all
content stays visible. Counters carry their final number in the
HTML; video heroes fall back to a real poster.
ACCESSIBILITY: a single prefers-reduced-motion block at the bottom
kills ALL motion while keeping everything visible.
INSTALL: copy this file into the site's assets/css/ (keep it local,
never a CDN — GitHub-Pages / zero-external-dependency). In ,
after custom.css:
============================================================ */
/* ---- Tunable knobs (override per-site in :root if you like) --- */
:root{
--mo-dur: 720ms; /* reveal duration */
--mo-ease: cubic-bezier(.22,1,.36,1); /* expressive ease-out */
--mo-dist: 26px; /* reveal travel distance */
--mo-stagger: 90ms; /* per-child stagger step */
}
/* ============================================================
1. SCROLL-REVEAL
Elements start hidden ONLY when JS is present, then motion.js
adds .in-view when they scroll into the viewport.
Variants via the attribute value: fade / left / right / zoom.
Default (bare [data-reveal]) = fade-up.
============================================================ */
html.mo-js [data-reveal]{
opacity: 0;
transform: translateY(var(--mo-dist));
transition: opacity var(--mo-dur) var(--mo-ease),
transform var(--mo-dur) var(--mo-ease);
will-change: opacity, transform;
}
html.mo-js [data-reveal="fade"]{ transform: none; } /* opacity only */
html.mo-js [data-reveal="left"]{ transform: translateX(calc(var(--mo-dist) * -1)); } /* slide in from left */
html.mo-js [data-reveal="right"]{ transform: translateX(var(--mo-dist)); } /* slide in from right */
html.mo-js [data-reveal="zoom"]{ transform: scale(.94); } /* scale up into view */
/* revealed state (motion.js adds .in-view) */
html.mo-js [data-reveal].in-view{
opacity: 1;
transform: none;
will-change: auto; /* release the compositor once settled */
}
/* ---- Stagger: children of a [data-reveal-group] cascade in ----
motion.js sets --mo-i (0,1,2,...) on each child; delay scales it. */
html.mo-js [data-reveal-group] > *{
opacity: 0;
transform: translateY(var(--mo-dist));
transition: opacity var(--mo-dur) var(--mo-ease),
transform var(--mo-dur) var(--mo-ease);
}
html.mo-js [data-reveal-group].in-view > *{
opacity: 1;
transform: none;
transition-delay: calc(var(--mo-i, 0) * var(--mo-stagger));
}
/* ============================================================
2. KEN BURNS / SLOW-ZOOM
Wrap an (or