/* ===========================================================================
* QCU Cooperative — Brand Motion (v2.0 · 2026-05-28)
* ---------------------------------------------------------------------------
* Motion tokens + 11 canonical animation patterns + reduced-motion gate.
* 3 easings × 3 durations. Don't invent new ones.
*
*
*
* Documentation: docs/MOTION.md + docs/brand/qcu-motion-demo.html
* ========================================================================= */
:root {
/* --- Easings ---
* Three, used everywhere. */
--qcu-ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* page arrivals */
--qcu-ease-quick: cubic-bezier(0.32, 0.72, 0, 1); /* snappy taps */
--qcu-ease-natural: cubic-bezier(0.4, 0, 0.2, 1); /* the workhorse */
/* --- Durations ---
* Three, used everywhere. */
--qcu-d-quick: 180ms;
--qcu-d-base: 280ms;
--qcu-d-page: 480ms;
}
/* Backwards-compat aliases (the motion-demo HTML uses these short names) */
:root {
--ease-soft: var(--qcu-ease-soft);
--ease-quick: var(--qcu-ease-quick);
--ease-natural: var(--qcu-ease-natural);
--d-quick: var(--qcu-d-quick);
--d-base: var(--qcu-d-base);
--d-page: var(--qcu-d-page);
}
/* ===========================================================================
* Pattern 1 — Page transitions
*
* .active to mount; .leaving while next page swaps in.
* brand.js auto-adds .active on DOMContentLoaded for any .qcu-page.
* ========================================================================= */
.qcu-page {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--qcu-d-page) var(--qcu-ease-soft),
transform var(--qcu-d-page) var(--qcu-ease-soft);
pointer-events: none;
}
.qcu-page.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.qcu-page.leaving {
opacity: 0;
transform: translateY(-8px);
transition: opacity 200ms var(--qcu-ease-natural),
transform 200ms var(--qcu-ease-natural);
}
/* ===========================================================================
* Pattern 2 — Stagger reveal
* Children of an active .qcu-page wrapped in .qcu-stagger rise 60ms apart.
* Up to 8 children explicit; rest fall through at 480ms.
* ========================================================================= */
.qcu-page.active .qcu-stagger > * {
opacity: 0;
transform: translateY(8px);
animation: qcu-rise var(--qcu-d-page) var(--qcu-ease-soft) forwards;
}
.qcu-page.active .qcu-stagger > *:nth-child(1) { animation-delay: 60ms; }
.qcu-page.active .qcu-stagger > *:nth-child(2) { animation-delay: 120ms; }
.qcu-page.active .qcu-stagger > *:nth-child(3) { animation-delay: 180ms; }
.qcu-page.active .qcu-stagger > *:nth-child(4) { animation-delay: 240ms; }
.qcu-page.active .qcu-stagger > *:nth-child(5) { animation-delay: 300ms; }
.qcu-page.active .qcu-stagger > *:nth-child(6) { animation-delay: 360ms; }
.qcu-page.active .qcu-stagger > *:nth-child(7) { animation-delay: 420ms; }
.qcu-page.active .qcu-stagger > *:nth-child(8) { animation-delay: 480ms; }
@keyframes qcu-rise {
to { opacity: 1; transform: translateY(0); }
}
/* ===========================================================================
* Pattern 3 — List row hover (shift right + warm to cream)
* ========================================================================= */
.qcu-list-row {
transition: background-color var(--qcu-d-quick) var(--qcu-ease-natural),
padding-left var(--qcu-d-base) var(--qcu-ease-soft);
cursor: pointer;
}
.qcu-list-row:hover {
background: var(--qcu-cream);
padding-left: 28px;
}
/* ===========================================================================
* Pattern 4 — Card lift (border → forest + 2-3px translate, no shadow)
* ========================================================================= */
.qcu-card-lift {
transition: border-color var(--qcu-d-base) var(--qcu-ease-natural),
transform var(--qcu-d-base) var(--qcu-ease-soft);
cursor: pointer;
}
.qcu-card-lift:hover {
border-color: var(--qcu-action-primary);
transform: translateY(-2px);
}
/* ===========================================================================
* Pattern 5 — Pulse dot (live / saving indicator)
* ========================================================================= */
@keyframes qcu-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.55; }
}
.qcu-pulse-dot::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--qcu-action-primary);
margin-right: 8px;
vertical-align: middle;
animation: qcu-pulse 1.6s var(--qcu-ease-natural) infinite;
}
.qcu-pulse-dot--warning::before { background: var(--qcu-warning); }
.qcu-pulse-dot--danger::before { background: var(--qcu-danger); }
/* ===========================================================================
* Pattern 6 — Fade-in (generic opacity transition)
* ========================================================================= */
.qcu-fade-in {
opacity: 0;
animation: qcu-fade var(--qcu-d-base) var(--qcu-ease-natural) forwards;
}
@keyframes qcu-fade {
to { opacity: 1; }
}
/* ===========================================================================
* Pattern 7 — Slide-up (subtle entrance for cards, modals)
* ========================================================================= */
.qcu-slide-up {
opacity: 0;
transform: translateY(8px);
animation: qcu-rise var(--qcu-d-base) var(--qcu-ease-soft) forwards;
}
/* ===========================================================================
* Pattern 8 — Tab indicator (sliding underline, wired by brand.js)
* ========================================================================= */
.qcu-tab-indicator {
position: absolute;
bottom: -0.5px;
height: 2px;
background: var(--qcu-action-primary);
border-radius: 1px 1px 0 0;
transition: left var(--qcu-d-base) var(--qcu-ease-soft),
width var(--qcu-d-base) var(--qcu-ease-soft);
}
/* ===========================================================================
* Pattern 9 — Skeleton shimmer (loading state)
* ========================================================================= */
.qcu-skeleton {
animation: qcu-shimmer 1.6s var(--qcu-ease-natural) infinite;
}
@keyframes qcu-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===========================================================================
* Pattern 10 — Toast enter/exit (paired with brand.js + brand-components.css)
* ========================================================================= */
.qcu-toast {
transition: opacity var(--qcu-d-base) var(--qcu-ease-soft),
transform var(--qcu-d-base) var(--qcu-ease-soft);
}
.qcu-toast--visible {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================================
* Pattern 11 — Button press (already on .qcu-btn in brand-components.css)
* (Documented here for completeness; scale(0.98) on :active.)
* ========================================================================= */
/* ===========================================================================
* Reduced-motion accessibility gate
* - OS-level preference via @media
* - User-toggle preference via data-attr (set by brand.js from localStorage)
* Either trigger disables all motion + transitions.
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.qcu-page,
.qcu-page.active .qcu-stagger > * {
opacity: 1 !important;
transform: none !important;
}
}
[data-qcu-reduced-motion="reduce"] *,
[data-qcu-reduced-motion="reduce"] *::before,
[data-qcu-reduced-motion="reduce"] *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-qcu-reduced-motion="reduce"] .qcu-page,
[data-qcu-reduced-motion="reduce"] .qcu-page.active .qcu-stagger > * {
opacity: 1 !important;
transform: none !important;
}