/* ========================================================================== AVEN — motion.css A drop-in, dependency-free motion layer for the Aven search site. Pairs with motion.js. Vanilla CSS only — no libraries, no build, no CDN. What it does 1. Scroll-reveal .reveal → gently rises + fades + un-blurs on enter. 2. Stagger card grids/rows cascade instead of popping together. 3. Tactile .btn / .door / .issue lift, press, and glow. 4. Alive optional .breathe for a single hero accent. 5. Reduced motion a complete prefers-reduced-motion path: everything visible immediately, zero transforms, zero animation. Safe-degrade contract - .reveal is ONLY hidden while is present. motion.js adds that class; if JS never runs, nothing is ever hidden, so no-JS visitors see the full page. (See wiring note in the handoff.) - The revealed state is the class `in` — the same hook the existing site already uses — so this is a superset, not a competitor. - Reveals fade via opacity (never display:none / visibility:hidden), so focusable controls stay in the tab order; motion.js also reveals any block the moment keyboard focus enters it, so focus never lands on an invisible element. Palette (matches the site's :root; literals used where alpha is needed) ink #0b171e · teal panels #102630/#16323c · bone #f3ecde signal lime #d3f227 · warm gold #e7ab5c · mist #c9d4d9 · orange #ff6a3d ========================================================================== */ /* ---- Tunable tokens (specificity 0 on the vars themselves; override freely) */ :root{ --mo-ease: cubic-bezier(.16, .84, .28, 1); /* gentle ease-out */ --mo-ease-soft: cubic-bezier(.4, 0, .2, 1); /* tactile ease */ --mo-rise: 24px; /* how far a reveal travels up */ --mo-dur: .9s; /* reveal opacity/transform duration */ --mo-blur: 4px; /* soft focus-in on reveal */ --mo-stagger: 70ms; /* delay step between cascaded items */ --mo-lift-card: -4px; /* hover lift for cards */ --mo-lift-btn: -2px; /* hover lift for buttons */ --mo-glow-gold: 231,171,92; /* --gold as r,g,b for rgba() glows */ --mo-glow-orange: 255,106,61; /* --orange */ } /* ========================================================================== 1 + 2 · SCROLL-REVEAL (+ row/grid auto-stagger via --stagger) ========================================================================== */ /* Hidden pre-state — applied only once JS has confirmed motion is on. */ html.motion-ready .reveal{ opacity: 0; transform: translateY(var(--mo-rise)) scale(.988); filter: blur(var(--mo-blur)); transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease), filter calc(var(--mo-dur) * .82) ease; /* --stagger (0 unless motion.js sets it on a row/grid item) shifts the start so a row of cards cascades rather than arriving all at once. */ transition-delay: calc(var(--stagger, 0) * var(--mo-stagger)); will-change: opacity, transform; } html.motion-ready .reveal.in{ opacity: 1; transform: none; filter: none; will-change: auto; /* release the compositor hint once settled */ } /* ========================================================================== 2b · EXPLICIT STAGGER CONTAINER Put class "stagger" (or [data-stagger]) on a grid/row and its direct children cascade in — the children need no class of their own. motion.js indexes each child into --stagger; the container gets `in` on enter. ========================================================================== */ html.motion-ready .stagger > *, html.motion-ready [data-stagger] > *{ opacity: 0; transform: translateY(20px); transition: opacity calc(var(--mo-dur) * .9) var(--mo-ease), transform calc(var(--mo-dur) * .95) var(--mo-ease); will-change: opacity, transform; } html.motion-ready .stagger.in > *, html.motion-ready [data-stagger].in > *{ opacity: 1; transform: none; transition-delay: calc(var(--stagger, 0) * var(--mo-stagger)); will-change: auto; } /* ========================================================================== 3 · TACTILE FEEDBACK — buttons and cards lift, press, and glow. Loaded after the site's own rules, so these win on equal ground and also stand alone on a site that has no such rules. ========================================================================== */ /* Soft, palette-tinted tap flash on every interactive surface. */ .btn, .door, .issue, .tapcard, .tier{ -webkit-tap-highlight-color: rgba(var(--mo-glow-gold), .13); } /* --- Buttons: lift on hover, settle-press on active, soft gold halo glow --- */ .btn{ transition: transform .14s var(--mo-ease-soft), box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease; } @media (hover: hover){ .btn:hover{ transform: translateY(var(--mo-lift-btn)); box-shadow: 0 8px 24px rgba(0,0,0,.30), 0 0 20px -6px rgba(var(--mo-glow-gold), .55); } } .btn:active{ transform: translateY(0) scale(.972); transition-duration: .06s; /* fast press, slow release reads as tactile */ } /* --- Cards: .door / .issue (plus the site's .tapcard / .tier) ------------- */ .door, .issue, .tapcard, .tier{ position: relative; /* anchor for the pointer-glow sheen */ transition: transform .22s var(--mo-ease-soft), border-color .22s ease, box-shadow .3s ease, background-color .22s ease; } @media (hover: hover){ .door:hover, .issue:not(.soon):hover, .tapcard:hover, .tier:hover{ transform: translateY(var(--mo-lift-card)); border-color: var(--gold, #e7ab5c); box-shadow: 0 16px 36px -12px rgba(0,0,0,.55); } } .door:active, .issue:not(.soon):active, .tapcard:active, .tier:active{ transform: translateY(-1px) scale(.99); transition-duration: .08s; } .issue.soon{ cursor: default; } /* coming-soon cards don't invite a press */ /* Pointer-tracked sheen: a soft radial highlight that follows the cursor. --mx/--my are set by motion.js; they default to centre, so even with no JS this degrades to a gentle centred glow on hover. pointer-events:none keeps clicks and focus untouched. */ .door::after, .issue::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient( circle 170px at var(--mx, 50%) var(--my, 50%), rgba(var(--mo-glow-gold), .14), transparent 62%); } @media (hover: hover){ .door:hover::after, .issue:not(.soon):hover::after{ opacity: 1; } } /* Keep the focus ring crisp on all interactive surfaces (belt-and-suspenders in case the host page lacks one). */ .btn:focus-visible, .door:focus-visible, .issue:focus-visible, .tapcard:focus-visible, .tier:focus-visible{ outline: 2px solid var(--gold, #e7ab5c); outline-offset: 3px; } /* ========================================================================== 4 · ALIVE — opt-in, restrained. Add class "breathe" to ONE hero accent. ========================================================================== */ @keyframes mo-breathe{ 0%, 100%{ transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } } .breathe{ animation: mo-breathe 6s ease-in-out infinite; will-change: transform; } /* ========================================================================== 5 · REDUCED MOTION — required path. Everything visible immediately; no transforms, no transitions, no keyframes. No content is hidden and no focus can be stranded on an invisible element. ========================================================================== */ @media (prefers-reduced-motion: reduce){ html.motion-ready .reveal, html.motion-ready .reveal.in, html.motion-ready .stagger > *, html.motion-ready .stagger.in > *, html.motion-ready [data-stagger] > *, html.motion-ready [data-stagger].in > *{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; will-change: auto !important; } .btn, .door, .issue, .tapcard, .tier{ transition: none !important; } .btn:hover, .door:hover, .issue:not(.soon):hover, .tapcard:hover, .tier:hover, .btn:active, .door:active, .issue:not(.soon):active, .tapcard:active, .tier:active{ transform: none !important; box-shadow: none !important; } .door::after, .issue::after{ display: none !important; } .breathe{ animation: none !important; } }