/* ==========================================================================
motion.css — drop-in animation + interaction utilities for mobile web apps
Zero dependencies. Pairs with motion.js. Animate only transform/opacity.
Usage: link in . Add classes / data-attrs. Reduced-motion respected.
========================================================================== */
:root {
/* easing */
--ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* smooth reveals */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* pop / overshoot */
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
/* durations */
--dur-fast: 160ms;
--dur-med: 380ms;
--dur-slow: 640ms;
}
/* --- global niceties for app-like feel ---------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
overscroll-behavior-y: none; /* kill rubber-band on PWAs */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
/* respect the notch / home bar */
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-x { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
img, svg, video { display: block; max-width: 100%; }
/* ==========================================================================
1. SCROLL REVEAL (add data-reveal in HTML; motion.js adds .is-in)
Variants: data-reveal="up|down|left|right|scale|blur" (default up)
========================================================================== */
[data-reveal] {
opacity: 0;
transition: opacity var(--dur-slow) var(--ease-out-expo),
transform var(--dur-slow) var(--ease-out-expo),
filter var(--dur-slow) var(--ease-out-expo);
will-change: transform, opacity;
}
[data-reveal="up"], [data-reveal]:not([data-reveal]) { transform: translateY(28px); }
[data-reveal="up"] { transform: translateY(28px); }
[data-reveal="down"] { transform: translateY(-28px); }
[data-reveal="left"] { transform: translateX(28px); }
[data-reveal="right"] { transform: translateX(-28px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="blur"] { filter: blur(10px); opacity: 0; }
[data-reveal].is-in {
opacity: 1;
transform: none;
filter: none;
}
/* stagger: set style="--i:0" (1,2,3…) on children; motion.js also auto-indexes */
[data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); }
/* ==========================================================================
2. KEYFRAME LIBRARY
========================================================================== */
@keyframes fadeInUp { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform:none;} }
@keyframes pop { 0%{transform:scale(.8);opacity:0;} 60%{transform:scale(1.05);opacity:1;} 100%{transform:scale(1);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.06);opacity:.85;} }
@keyframes spin { to { transform: rotate(360deg);} }
@keyframes shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes drift { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(3%,-4%) scale(1.05);} 66%{transform:translate(-3%,3%) scale(.97);} 100%{transform:translate(0,0) scale(1);} }
@keyframes twinkle { 0%,100%{opacity:.15;transform:scale(.8);} 50%{opacity:1;transform:scale(1.15);} }
@keyframes marchDash{ to { stroke-dashoffset: 0; } }
@keyframes gradientMove { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.anim-float { animation: float 5s var(--ease-in-out) infinite; }
.anim-pulse { animation: pulse 2.4s var(--ease-in-out) infinite; }
.anim-pop { animation: pop var(--dur-med) var(--ease-spring) both; }
.anim-spin { animation: spin 1s linear infinite; }
/* ==========================================================================
3. MICRO-INTERACTIONS (buttons, cards, taps)
========================================================================== */
.press { transition: transform var(--dur-fast) var(--ease-spring); }
.press:active { transform: scale(.96); }
.lift { transition: transform var(--dur-med) var(--ease-out-expo),
box-shadow var(--dur-med) var(--ease-out-expo); }
@media (hover: hover) {
.lift:hover { transform: translateY(-4px); }
}
/* ripple container: motion.js injects .ripple span on tap */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
position: absolute; border-radius: 50%; pointer-events: none;
transform: scale(0); opacity: .5;
background: currentColor;
animation: rippleGo 600ms var(--ease-out-expo) forwards;
}
@keyframes rippleGo { to { transform: scale(2.6); opacity: 0; } }
/* shimmer text (premium headline sweep) */
.shimmer-text {
background: linear-gradient(100deg,
currentColor 30%, #fff 45%, #fff 55%, currentColor 70%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
animation: shimmer 3.5s linear infinite;
}
/* animated gradient text/bg */
.gradient-animate {
background-size: 200% 200%;
animation: gradientMove 8s var(--ease-in-out) infinite;
}
/* skeleton loading shimmer */
.skeleton {
background: linear-gradient(100deg,
rgba(255,255,255,.06) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 70%);
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
border-radius: 8px;
}
/* ==========================================================================
4. PREMIUM BACKGROUNDS (keep slow + low-contrast; text stays readable)
========================================================================== */
/* aurora: slow drifting color blobs. Put as a fixed layer behind content. */
.bg-aurora { position: relative; isolation: isolate; }
.bg-aurora::before {
content: ""; position: absolute; inset: -20%; z-index: -1;
background:
radial-gradient(40% 40% at 20% 30%, var(--accent, #c9a24b) 0, transparent 60%),
radial-gradient(35% 35% at 80% 20%, var(--accent-2, #6d5bd0) 0, transparent 60%),
radial-gradient(45% 45% at 60% 80%, var(--accent, #c9a24b) 0, transparent 60%);
filter: blur(60px); opacity: .35;
animation: drift 24s var(--ease-in-out) infinite;
}
/* grain overlay (adds texture / kills banding). Layer over anything. */
.bg-grain::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: .04; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* sparkles: motion.js populates .bg-sparkles with .spark dots, OR use these
static demo sparkles by adding several children. */
.bg-sparkles { position: relative; overflow: hidden; }
.bg-sparkles .spark {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: var(--accent, #f2d489);
box-shadow: 0 0 6px 1px var(--accent, #f2d489);
animation: twinkle 3s ease-in-out infinite;
}
/* glass panel */
.glass {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-radius: 18px;
}
/* ==========================================================================
5. SVG ANIMATION HELPERS
========================================================================== */
/* stroke draw-on: add .draw to an