(a div gets no such override and was never affected). A
Left/Right or Size=Full Drawer DOES have a definite height, but for
consistency — a form must behave the SAME as a div in every Drawer
configuration, exactly as docs/long-forms-in-sheets already tells
consumers to opt a
/
body into flex-col scrolling
THEMSELVES via explicit classes — Drawer gets no automatic override at
all; see DrawerPage's "Drawer with a form" example. */
[role="dialog"][id^="sheet-"] > form,
[role="dialog"][id^="dialog-"] > form {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}
/* vaul-style background scaling (#346, Drawer.ScaleBackground). The CONSUMER
marks their own page-root element with data-lumeo-drawer-wrapper — Lumeo
never renders this element itself, it lives outside any Drawer's DOM.
DrawerContent toggles data-lumeo-drawer-scaled on it via
Interop.SetDrawerBackgroundScaled (components.js) whenever a bottom
Drawer with ScaleBackground is open; this is the CSS half. Mirrors vaul's
own [data-vaul-drawer-wrapper][data-vaul-drawer-visible] transform/radius,
using theme tokens instead of a raw rgba background darken. */
[data-lumeo-drawer-wrapper] {
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-lumeo-drawer-wrapper][data-lumeo-drawer-scaled="true"] {
overflow: hidden;
border-radius: 8px;
background-color: var(--color-muted);
transform: scale(0.97) translateY(14px);
}
/* Accordion / Collapsible open/close transitions are now driven by a CSS
* grid-template-rows: 0fr -> 1fr trick on the content wrapper, so no
* accordion-down keyframe is needed — and crucially, no JS measurement
* of the content height (the prior `height: 0 -> var(--radix-...)` approach
* couldn't interpolate to `auto` and snapped instantly). */
/* `animate-toast-in` (below) uses `animation-fill-mode: both`, so once this
settles it permanently pins opacity:1/transform:none on the toast — a
filled keyframe always wins over a plain declared value for the same
property regardless of selector specificity. Left alone that silently
overrides the "Toast stacking" transforms below the moment a toast is no
longer at data-index="0" (translateY/scale never visibly apply) and, on
dismiss, made animate-toast-out never win either (both classes at equal
specificity, animate-toast-in declared later). Toast.razor strips the
`animate-toast-in` class once the entrance finishes — via a local fallback
timer sized comfortably above this animation's duration (no JS callback:
Toast.razor is vendored verbatim into consumer projects, so it can't
depend on any Lumeo interop surface newer than whatever package is
referenced) — so a settled toast carries NO animation and both the
stacking transform and a later exit apply cleanly. */
@keyframes toast-in {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
from { opacity: 1; transform: translateX(0); max-height: 200px; margin-top: 0; margin-bottom: 0; padding-top: var(--lumeo-toast-py, 1rem); padding-bottom: var(--lumeo-toast-py, 1rem); }
to { opacity: 0; transform: translateX(110%); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
.animate-toast-out {
animation: toast-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
pointer-events: none;
}
/* =====================================================
* Toast stacking (sonner-style) — ToastProvider.StackToasts (default true)
*
* ToastViewport stamps `data-stacked`/`data-expanded`/`data-stack-edge` on
* the group container and each gets `data-index` (0 = newest/front)
* from ToastProvider. All rules below are scoped to
* `.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"])`
* — hover/focus-within on the group flips `data-expanded="true"`
* (ToastViewport's onmouseenter/leave + onfocusin/out), which drops out of
* every selector here and the group instantly reverts to the plain flex-col
* list with gaps (pre-stacking behavior, untouched).
*
* PR #357 (Codex finding): the `.lumeo-toast-viewport` class (stamped on
* ToastViewport's own root div, see its CssClass doc comment) is REQUIRED on
* every selector below — data-stacked/data-index are generic enough that,
* loaded app-wide, a host app or third-party widget rendering its own
* data-stacked="true"/data-index="N" markup would otherwise also match these
* rules and have its non-zero children silently pulled out of flow and made
* non-interactive.
*
* Only `data-index="0"` stays in normal flow (`position: relative`, so
* z-index applies) — every other index is pulled out of flow via
* `position: absolute` anchored to the container's own top edge. That means
* the container's intrinsic height is driven by the front toast alone (no
* JS measurement needed): "the group's hit-area follows the front toast".
* `data-stack-edge` ("up" for Bottom* positions, "down" for Top*) sets the
* peek direction so the older toasts always peek out AWAY from the screen
* edge the group anchors to (bottom groups: peek above the front toast;
* top groups: peek below it), per sonner. The absolute anchor follows the
* peeking edge — top-aligned for an upward peek, bottom-aligned for a
* downward peek — so the peek stays visible whatever the toast heights.
*
* Leaving toasts keep animating correctly while stacked: `.animate-toast-out`
* is a CSS `animation`, and a running keyframe animation always wins over a
* plain declared value for the same property (transform/opacity) regardless
* of selector specificity — so the exit slide plays normally even on a
* stacked/transformed element.
* ===================================================== */
.lumeo-toast-viewport[data-stack-edge="up"] { --lumeo-stack-y1: -10px; --lumeo-stack-y2: -20px; }
.lumeo-toast-viewport[data-stack-edge="down"] { --lumeo-stack-y1: 10px; --lumeo-stack-y2: 20px; }
.lumeo-toast-viewport[data-stacked="true"] {
transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) {
max-height: max-content;
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index] {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.lumeo-toast-viewport[data-stack-edge="up"]:not([data-expanded="true"]) > [data-index] { transform-origin: top center; }
.lumeo-toast-viewport[data-stack-edge="down"]:not([data-expanded="true"]) > [data-index] { transform-origin: bottom center; }
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index="0"] {
position: relative;
z-index: 3;
transform: none;
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index]:not([data-index="0"]) {
position: absolute;
inset-inline: 0;
pointer-events: none;
}
/* Anchor the hidden toasts to the PEEKING edge so the offset stays visible
regardless of per-toast height differences. */
.lumeo-toast-viewport[data-stack-edge="up"]:not([data-expanded="true"]) > [data-index]:not([data-index="0"]) { top: 0; }
.lumeo-toast-viewport[data-stack-edge="down"]:not([data-expanded="true"]) > [data-index]:not([data-index="0"]) { bottom: 0; }
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index="1"] {
transform: translateY(var(--lumeo-stack-y1)) scale(0.94);
z-index: 2;
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index="2"] {
transform: translateY(var(--lumeo-stack-y2)) scale(0.88);
z-index: 1;
}
/* Index 3+ collapse into the same (invisible) 3rd slot so a promotion to
index 2 (front toasts dismissed) animates in from a defined position
instead of popping in from nowhere. `visibility: hidden` (not just
opacity: 0) is load-bearing here: a depth>=3 toast that auto-dismisses or
gets evicted WHILE still collapsed also picks up `.animate-toast-out`, and
a running CSS `animation` always wins over a plain declared value for the
SAME property regardless of specificity — `toast-out`'s `from { opacity:
1; }` would otherwise flash this hidden toast visible as it slides out
from behind the stack. `visibility` isn't one of the properties
`@keyframes toast-out` animates, so the plain declaration here keeps
winning throughout the exit.
PR #357 round-2: a depth>=3 toast's `data-index` used to be recomputed
every render from its live position in the (oldest-first) toast list —
so if a NEWER toast ahead of it finished dismissing/timing out WHILE this
one was still mid-exit, ToastProvider would promote it (e.g. depth 3 -> 2)
and it fell out of this selector with `.animate-toast-out` still running
from `opacity: 1`, flashing it visible for the rest of its exit. Fixed at
the source, not here: ToastProvider now freezes a toast's `data-index` the
INSTANT it starts leaving (`ToastItem.FrozenIndex`, stamped in
RemoveWithExitAsync) — reshuffling among its still-live siblings can no
longer move it out of whatever selector (this one included) it was in the
moment dismissal began. */
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index]:not([data-index="0"]):not([data-index="1"]):not([data-index="2"]) {
transform: translateY(var(--lumeo-stack-y2)) scale(0.88);
opacity: 0;
visibility: hidden;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.lumeo-toast-viewport[data-stacked="true"],
.lumeo-toast-viewport[data-stacked="true"] > [data-index] {
transition: none !important;
}
}
/* Below `sm` (640px) ToastViewport's PositionClasses anchor EVERY position —
including Top* — to a bottom strip (see the mobile comment there), but
StackEdge still reflects the desktop intent: Top* groups keep emitting
data-stack-edge="down" (peek trails below the front toast). On a group
that's actually bottom-anchored, a downward peek points off the bottom of
the viewport instead of trailing toward the (mobile) anchored edge. Force
every stacked group to the "up" peek below `sm`, regardless of the emitted
edge attribute — matching the real mobile layout. Selector specificity
matches the base `[data-stack-edge="*"]` rules above 1:1 (attribute-level
selector for selector); being declared later in the same cascade layer is
what makes this win for `data-stack-edge="down"` groups on mobile only. */
@media (max-width: 639.98px) {
.lumeo-toast-viewport[data-stacked="true"] {
--lumeo-stack-y1: -10px;
--lumeo-stack-y2: -20px;
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index] {
transform-origin: top center;
}
.lumeo-toast-viewport[data-stacked="true"]:not([data-expanded="true"]) > [data-index]:not([data-index="0"]) {
top: 0;
bottom: auto;
}
}
/* =====================================================
* Animation Utility Classes
* ===================================================== */
.animate-fade-in {
animation: fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-zoom-in {
animation: zoom-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-slide-in-from-bottom {
animation: slide-in-from-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-slide-in-from-top {
animation: slide-in-from-top 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-slide-in-from-left {
animation: slide-in-from-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-slide-in-from-right {
animation: slide-in-from-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-toast-in {
animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Exit animations for Sheet (and any future slide-in overlay) — the close
counterpart to fade-in / slide-in-from-*. The component keeps the panel
mounted for the duration of these animations, then unmounts it, so the user
sees it slide/fade out instead of vanishing instantly. Exit easing is the
accelerate curve (fast-out) which reads better for dismissals. The slide-out
keyframes intentionally finish at a translated (off-screen) transform: the
element is removed from the DOM right after, so the lingering transform never
establishes a containing block for fixed descendants (unlike the slide-in
case, which clears its transform via AttachOverlaySlideEnd). */
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* --lumeo-sheet-exit-from (field report #464, finding 3) — a slow swipe-to-close
release used to snap the panel back to fully open before this keyframe took
over, because `from` always started at 0 regardless of the drag offset the
panel was actually sitting at. SheetContent now stamps this custom property
(a signed px length along the SAME axis the keyframe animates) on the panel
right before the exit class is applied, so a swipe release continues smoothly
from wherever the finger let go. The default (0) preserves the original
behaviour for every non-swipe close (Escape / backdrop / X / programmatic) —
those never set the property, so `var(..., 0)` is what runs. Also picked up
by Drawer (which shares these keyframes) for the same reason, defaulting to 0
there since DrawerContent doesn't set it. */
@keyframes slide-out-to-bottom {
from { transform: translateY(var(--lumeo-sheet-exit-from, 0)); }
to { transform: translateY(100%); }
}
@keyframes slide-out-to-top {
from { transform: translateY(var(--lumeo-sheet-exit-from, 0)); }
to { transform: translateY(-100%); }
}
@keyframes slide-out-to-left {
from { transform: translateX(var(--lumeo-sheet-exit-from, 0)); }
to { transform: translateX(-100%); }
}
@keyframes slide-out-to-right {
from { transform: translateX(var(--lumeo-sheet-exit-from, 0)); }
to { transform: translateX(100%); }
}
/* Zoom-out — the close counterpart to zoom-in (Dialog / AlertDialog). Mirrors
zoom-in in reverse: the panel scales down slightly and fades while it is kept
mounted for the exit window, then unmounts. Like the slide-out keyframes it
ends at the dismissed state (scale 0.95 + opacity 0); the element is removed
from the DOM immediately after, so the lingering transform never establishes
a containing block for fixed descendants. */
@keyframes zoom-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: scale(0.95); }
}
.animate-fade-out {
/* 0.15s mirrors animate-fade-in 0.15s — enter/exit pairs are now symmetric. */
animation: fade-out 0.15s cubic-bezier(0.4, 0, 1, 1) both;
}
.animate-slide-out-to-bottom {
/* 0.3s mirrors animate-slide-in-from-bottom 0.3s — enter/exit symmetric. */
animation: slide-out-to-bottom 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
.animate-slide-out-to-top {
animation: slide-out-to-top 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
.animate-slide-out-to-left {
animation: slide-out-to-left 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
.animate-slide-out-to-right {
animation: slide-out-to-right 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}
.animate-zoom-out {
animation: zoom-out 0.15s cubic-bezier(0.4, 0, 1, 1) both;
}
/* Overlay exit animations honor reduced-motion too: collapse the duration so
dismissal is instant (animationend still fires for listeners) instead of a
visible slide. `.animate-toast-out` joins this family for the same reason:
ToastProvider's removal timer (ExitAnimationMs, 220ms) is independent of
this animation-duration, so collapsing it to 1ms only changes what's
visually shown during that fixed unmount window — a snap/fade instead of
the 220ms translate-X slide — without touching the unmount timing itself. */
@media (prefers-reduced-motion: reduce) {
.animate-fade-out,
.animate-zoom-out,
.animate-slide-out-to-bottom,
.animate-slide-out-to-top,
.animate-slide-out-to-left,
.animate-slide-out-to-right,
.animate-toast-out {
animation-duration: 1ms !important;
}
}
/* Overlay ENTRY animations honor reduced-motion too: collapse the duration so
content appears instantly instead of sliding/zooming/fading in for users who
request reduced motion (WCAG 2.3.3). 1ms (not 0) preserves the `both` fill and
keeps any animationend listeners firing — matching the exit guard above. */
@media (prefers-reduced-motion: reduce) {
.animate-fade-in,
.animate-zoom-in,
.animate-slide-in-from-bottom,
.animate-slide-in-from-top,
.animate-slide-in-from-left,
.animate-slide-in-from-right,
.animate-toast-in {
animation-duration: 1ms !important;
}
}
/* =====================================================
* === motion ===
* Keyframes and utilities for the motion primitives:
* Marquee, BorderBeam, ShimmerButton, Sparkles, TextReveal, BlurFade.
* ===================================================== */
/* --- Marquee --- */
@keyframes lumeo-marquee-x {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes lumeo-marquee-x-reverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes lumeo-marquee-y {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@keyframes lumeo-marquee-y-reverse {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
.lumeo-marquee {
overflow: hidden;
display: flex;
position: relative;
--lumeo-marquee-duration: 30s;
}
.lumeo-marquee[data-vertical="true"] { flex-direction: column; }
.lumeo-marquee-track {
display: flex;
flex-shrink: 0;
gap: 1rem;
animation: lumeo-marquee-x var(--lumeo-marquee-duration) linear infinite;
min-width: 100%;
}
.lumeo-marquee[data-direction="right"] .lumeo-marquee-track {
animation-name: lumeo-marquee-x-reverse;
}
.lumeo-marquee[data-vertical="true"] .lumeo-marquee-track {
flex-direction: column;
animation-name: lumeo-marquee-y;
min-width: 0;
min-height: 100%;
}
.lumeo-marquee[data-vertical="true"][data-direction="right"] .lumeo-marquee-track {
animation-name: lumeo-marquee-y-reverse;
}
.lumeo-marquee[data-pause-hover="true"]:hover .lumeo-marquee-track {
animation-play-state: paused;
}
/* Marquee — reduced motion: stop auto-scrolling; content stays static and visible. */
@media (prefers-reduced-motion: reduce) {
.lumeo-marquee-track {
animation: none;
transform: none;
}
}
/* --- BorderBeam --- */
@property --lumeo-beam-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes lumeo-border-beam {
to { --lumeo-beam-angle: 360deg; }
}
.lumeo-border-beam {
position: relative;
isolation: isolate;
overflow: hidden;
}
.lumeo-border-beam::before {
content: '';
position: absolute;
inset: 0;
padding: var(--lumeo-beam-size, 1.5px);
border-radius: inherit;
background: conic-gradient(
from var(--lumeo-beam-angle),
transparent 0deg,
var(--lumeo-beam-from, var(--color-primary)) 90deg,
var(--lumeo-beam-to, var(--color-primary)) 180deg,
transparent 270deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
animation: lumeo-border-beam var(--lumeo-beam-duration, 8s) linear infinite;
pointer-events: none;
}
/* BorderBeam — reduced motion: stop the rotating conic sweep. */
@media (prefers-reduced-motion: reduce) {
.lumeo-border-beam::before {
animation: none;
}
}
/* --- ShimmerButton --- */
@keyframes lumeo-shimmer-sweep {
0% { transform: translateX(-150%); }
100% { transform: translateX(250%); }
}
.lumeo-shimmer {
position: relative;
overflow: hidden;
isolation: isolate;
}
.lumeo-shimmer::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(
100deg,
transparent 20%,
var(--lumeo-shimmer-color, rgb(255 255 255 / 0.45)) 50%,
transparent 80%
);
transform: translateX(-150%);
animation: lumeo-shimmer-sweep 2.5s linear infinite;
pointer-events: none;
mix-blend-mode: overlay;
}
/* ShimmerButton — reduced motion: drop the sweeping highlight entirely. */
@media (prefers-reduced-motion: reduce) {
.lumeo-shimmer::before {
animation: none;
display: none;
}
}
/* --- Sparkles --- */
@keyframes lumeo-sparkle-twinkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
/* :where() keeps specificity at 0 so consumer utilities like `absolute inset-0` can still win. */
:where(.lumeo-sparkles) {
position: relative;
display: inline-block;
}
/* --- ImageCompare: transparent range input with a full-height invisible thumb so
clicks anywhere on the image move the divider exactly under the cursor. --- */
.lumeo-image-compare-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 100%;
background: transparent;
cursor: inherit;
}
.lumeo-image-compare-slider::-moz-range-thumb {
width: 100%;
height: 100%;
background: transparent;
border: 0;
cursor: inherit;
}
.lumeo-image-compare-slider::-webkit-slider-runnable-track { background: transparent; }
.lumeo-image-compare-slider::-moz-range-track { background: transparent; }
.lumeo-image-compare-slider:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; opacity: 0.001; }
.lumeo-sparkle {
position: absolute;
pointer-events: none;
opacity: 0;
animation: lumeo-sparkle-twinkle 2.2s ease-in-out infinite;
transform-origin: center;
will-change: transform, opacity;
}
/* Sparkles — reduced motion: silence the decorative twinkle. The wrapped
children stay visible; only the ornamental sparkle layer is suppressed. */
@media (prefers-reduced-motion: reduce) {
.lumeo-sparkle {
animation: none;
opacity: 0;
}
}
/* --- TextReveal --- */
.lumeo-reveal [data-motion-word] {
display: inline-block;
opacity: 0;
transform: translateY(0.35em);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.lumeo-reveal[data-motion-revealed="true"] [data-motion-word] {
opacity: 1;
transform: translateY(0);
}
/* TextReveal — reduced motion: reveal every word at once, no per-word stagger. */
@media (prefers-reduced-motion: reduce) {
.lumeo-reveal [data-motion-word] {
transition: none;
opacity: 1;
transform: none;
}
}
/* --- BlurFade ---
* Default: visible. The old default of `opacity: 0` caused a 1-2s blank flash on
* prerendered pages because above-the-fold elements stayed hidden until Blazor
* WASM finished loading and the IntersectionObserver fired. Now the element is
* visible as soon as CSS paints; the JS observer only HIDES elements that it has
* explicitly marked as "not yet seen" via data-motion-visible="false", and
* transitions them back to visible on scroll-in. Above-the-fold content stays
* visible throughout; below-fold still gets the fade-in animation. */
.lumeo-blur-fade {
transition:
opacity var(--lumeo-blur-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
filter var(--lumeo-blur-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
transform var(--lumeo-blur-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, filter, transform;
}
.lumeo-blur-fade[data-motion-visible="false"] {
opacity: 0;
filter: blur(var(--lumeo-blur-px, 8px));
transform: translateY(var(--lumeo-blur-y, 8px));
}
.lumeo-blur-fade[data-motion-visible="true"] {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* BlurFade — reduced motion: show content immediately, no blur/translate. */
@media (prefers-reduced-motion: reduce) {
.lumeo-blur-fade {
transition: none;
}
.lumeo-blur-fade[data-motion-visible="false"] {
opacity: 1;
filter: blur(0);
transform: none;
}
}
/* =====================================================
* === Motion: AnimatedBeam ===
* SVG beam that traces between two DOM nodes.
* The beam path + gradient are drawn by motion.js.
* ===================================================== */
.lumeo-animated-beam {
pointer-events: none;
overflow: visible;
}
/* =====================================================
* === Motion: Dock ===
* macOS-style icon dock with magnification effect.
* Per-item scale is applied via motion.js mousemove handler.
* ===================================================== */
.lumeo-dock {
display: flex;
align-items: flex-end;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--color-card) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.lumeo-dock > * {
transform-origin: bottom center;
transition: transform 120ms ease-out;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.lumeo-dock > * { transition: none; }
}
/* =====================================================
* === Motion: Confetti ===
* Canvas overlay for confetti bursts.
* ===================================================== */
.lumeo-confetti {
display: inline-block;
}
.lumeo-confetti-canvas {
/* Idle: out of flow AND zero-size, so the canvas neither shifts the trigger
(host stays content-sized → trigger stays centred) nor contributes any overflow
of its own. A bare