` is still emitted by `Layout::render` above `` as a fallback for any page that loads motion.css without the body pseudo-element (e.g. a future app that scopes motion.css to a child element). Phase 17.5 layers a body::after pseudo-element on top so the same visual is available without an extra DOM node. The two implementations are mutually compatible — both honor `html:not([data-noise="off"])` and the reduced-motion media query. */ html:not([data-noise="off"]) .kinetic-noise { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; background-repeat: repeat; opacity: 0.03; mix-blend-mode: overlay; display: block; } .kinetic-noise { display: none; } /* Phase 17.5: layered body::after noise pseudo-element. Lives on so every admin page gets the texture without an explicit element in the DOM tree. The SVG `feTurbulence` filter is inlined as a background-image (no extra request). The :not([data-noise="off"]) selector preserves the per-user opt-out wired in Phase 0.8. */ html:not([data-noise="off"])::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; background-repeat: repeat; opacity: 0.03; mix-blend-mode: overlay; } @media (prefers-reduced-motion: no-preference) { html:not([data-noise="off"]) .kinetic-noise { display: block; } } /* ---- 2. Marquee keyframes ------------------------------------------ */ /* Phase 17.1 — the prompt's two marquee patterns. `.k-marquee-fast` is the default; `.k-marquee-slow` is the relaxed pace for higher-density strips (e.g. the system dashboard stat hero). The keyframes translate the track by -50% over one full pass; the track itself duplicates its children so the seam is invisible (the second copy is what shows as the track wraps back to translateX(0)). The legacy `k-marquee-left` / `k-marquee-right` aliases remain so any existing markup that targets them still works (the Phase 2 placements used them). */ @keyframes k-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes k-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes kinetic-marquee-fast { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes kinetic-marquee-slow { from { transform: translateX(0); } to { transform: translateX(-50%); } } .k-marquee { display: flex; overflow: hidden; width: 100%; min-height: 6rem; align-items: center; position: relative; background: var(--gp-bg); } .k-marquee__track { display: flex; flex: 0 0 auto; gap: var(--gp-sp-12); min-width: 100%; align-items: center; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .k-marquee__track--left { animation: k-marquee-left 30s linear infinite; } .k-marquee__track--right { animation: k-marquee-right 30s linear infinite; } .k-marquee--fast .k-marquee__track { animation: kinetic-marquee-fast 30s linear infinite; } .k-marquee--slow .k-marquee__track { animation: kinetic-marquee-slow 60s linear infinite; } .k-marquee--reverse .k-marquee__track { animation-direction: reverse; } .k-marquee--paused .k-marquee__track { animation-play-state: paused; } } /* Per-track content cells. Used by the login page tool-name strip, the DadDev widget status marquee, the 403/404/500 error pages, and the system dashboard hero (when promoted to a real marquee in Phase 5 follow-up). Each cell is 1/4 width on desktop and full-width on mobile; the track duplicates the children so the scroll loop is seamless. */ .k-marquee__cell { flex: 0 0 auto; min-width: 12rem; text-align: center; font-family: var(--gp-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--gp-fg); padding: 0 var(--gp-sp-4); } .k-marquee__cell--accent { color: var(--gp-accent); font-weight: 700; } .k-marquee__cell--muted { color: var(--gp-muted-foreground); } .k-marquee__cell--strong { font-weight: 700; color: var(--gp-accent); } /* ---- 3. Sidebar treeview transitions ------------------------------- */ @media (prefers-reduced-motion: no-preference) { .kinetic-sidebar__group .kinetic-sidebar__group-children { overflow: hidden; max-height: 0; transition: max-height var(--gp-dur-slow) var(--gp-ease); } .kinetic-sidebar__group.is-open > .kinetic-sidebar__group-children { max-height: 100rem; } .kinetic-sidebar__group .kinetic-sidebar__group-toggle .kinetic-sidebar__chevron { transition: transform var(--gp-dur) var(--gp-ease); } .kinetic-sidebar__group.is-open .kinetic-sidebar__chevron { transform: rotate(90deg); } .kinetic-sidebar__link { transition: background-color var(--gp-dur) var(--gp-ease), color var(--gp-dur) var(--gp-ease); } .kinetic-sidebar__link:hover { background: var(--gp-muted); color: var(--gp-accent); } .kinetic-sidebar__link.is-active { background: var(--gp-accent); color: var(--gp-accent-fg); } } /* ---- 4. Micro-interactions (Phase 2) --------------------------------- */ /* * Color flood: the prompt's hard color inversion (yellow bg + black * text) for the `.k-card--hover` and any element tagged with * `.k-color-flood` (or `data-kinetic-flood`). The keyframe * supplements the CSS `transition` rules in `components.css`; the * transition handles the steady-state hover, the keyframe adds a * subtle scale-flicker on enter that the transition alone can't * produce. */ @keyframes k-color-flood { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .k-card--hover:hover, .k-card--group:hover, .k-color-flood:hover, [data-kinetic-flood]:hover { animation: k-color-flood var(--gp-dur-slow) var(--gp-ease); } } /* * Toast enter/exit: slide up 12px + fade in (200ms), slide right * 12px + fade out (200ms). The Bootstrap `.toast.showing` and * `.toast.hide` lifecycle classes are already in place; the * keyframes are wired by the `gp-toast` shim and by the new * `kinetic/components.js` helper. The transitions on the rule * itself provide the fallback for users with reduced motion. */ @keyframes k-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes k-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(12px); } } @media (prefers-reduced-motion: no-preference) { .k-toast, .gp-toast.toast { animation: k-toast-in var(--gp-dur) var(--gp-ease) both; } .k-toast.is-leaving, .gp-toast.toast.hide { animation: k-toast-out var(--gp-dur) var(--gp-ease) both; } } /* * Modal enter: scale up from 0.95 to 1.0 + fade in (200ms). The * Bootstrap `.modal.fade .modal-dialog` lifecycle already animates * the dialog; the keyframe is wired to `.k-modal.is-open` and to * the new `.k-modal` panel as a fallback when the JS bus doesn't * apply the `is-open` class on time. */ @keyframes k-modal-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .k-modal.is-open .k-modal__panel, .modal.fade.show .modal-dialog, .modal.show .modal-dialog { animation: k-modal-in var(--gp-dur) var(--gp-ease) both; } } /* * Button press: a 150ms scale-down to 0.95 on `:active`. The * `components.css` rules already do the scale; the keyframe adds * a tiny downward translation on press for kinetic snap. */ @keyframes k-btn-press { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(1px) scale(0.95); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: no-preference) { .k-btn:active, .btn:not(.btn-link):active { animation: k-btn-press var(--gp-dur) var(--gp-ease); } } /* * Pulse (used by inline save indicators, the DadDev FAB badge, * and the `gpToast` success tick). Subtle 2.4s box-shadow pulse * in the accent color. The `.kinetic-topbar .dadkit-sync-dot` * rule already has its own pulse; this is the standalone helper. */ @keyframes k-pulse-accent { 0% { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0.55); } 70% { box-shadow: 0 0 0 0.6rem rgba(223, 225, 4, 0); } 100% { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0); } } @media (prefers-reduced-motion: no-preference) { .k-pulse, [data-kinetic-pulse] { animation: k-pulse-accent 2.4s ease-out infinite; } } /* * Fade-in (also defined in components.css for the `.k-fade-in` * hook; duplicated here so the keyframe is reachable from the * `kinetic/components.js` helper without depending on * components.css being parsed first). */ @keyframes k-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- 5. Scroll-triggered animations (Phase 17.3) --------------------- */ /* * The prompt's scroll-triggered scale / parallax / fade helpers. * The kinetic/components.js `kineticOnScroll(el, options)` helper * wires `[data-kinetic-scroll]` elements to an * IntersectionObserver + requestAnimationFrame that interpolates * a CSS custom property `--kinetic-scroll` (0 to 1) from element * entry (top hits the viewport top) to element exit (bottom hits * the viewport bottom). The CSS rules below consume the property * via the helper classes `.k-scroll-scale`, `.k-scroll-fade`, and * `.k-scroll-translate`. The helpers compose with the static * `k-fade-in` keyframe (Phase 2 surface) so a card can fade in * AND scale on scroll. */ @keyframes k-scroll-pulse { 0% { transform: scale(var(--kinetic-scroll-from, 0.9)); opacity: 0; } 100% { transform: scale(var(--kinetic-scroll-to, 1)); opacity: 1; } } /* * Default state is FULLY VISIBLE. The JS sets --kinetic-scroll * (0..1) based on scroll position; the CSS interpolates the * visual effect from that variable. If JS doesn't run, the * element stays fully visible (no flash, no invisible content). * * Previously these rules hardcoded opacity: 0 + transform: * scale(--kinetic-scroll-from) which made the element invisible * until the JS added `.is-in`. That broke any element that was * already in the viewport on page load (e.g. the login card * centered in the viewport) because the IntersectionObserver * value never reached the 0.999 threshold required to add * `.is-in`. The fix is to derive opacity and transform from * --kinetic-scroll directly (with a fallback of 1 = fully * visible) so the element is always visible, and the scroll * trigger is purely additive motion. */ .k-scroll-scale, [data-kinetic-scroll="scale"] { transform: scale(var(--kinetic-scroll, 1)); opacity: var(--kinetic-scroll, 1); will-change: transform, opacity; } .k-scroll-fade, [data-kinetic-scroll="fade"] { opacity: var(--kinetic-scroll, 1); transform: translateY( calc((1 - var(--kinetic-scroll, 1)) * var(--kinetic-scroll-from, 0.5) * 1rem) ); will-change: transform, opacity; } .k-scroll-translate, [data-kinetic-scroll="translate"] { transform: translate3d( 0, calc((1 - var(--kinetic-scroll, 1)) * 1rem), 0 ); will-change: transform; } @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .k-scroll-scale, html:not([data-motion="off"]) [data-kinetic-scroll="scale"] { transition: transform 50ms linear, opacity 50ms linear; } html:not([data-motion="off"]) .k-scroll-fade, html:not([data-motion="off"]) [data-kinetic-scroll="fade"] { transition: transform 50ms linear, opacity 50ms linear; } html:not([data-motion="off"]) .k-scroll-translate, html:not([data-motion="off"]) [data-kinetic-scroll="translate"] { transition: transform 50ms linear; } } /* * Apply the helpers in their "fully visible" state when the user * has `prefers-reduced-motion: reduce` (or when theme.js sets * `data-motion="off"`). The transition is still 50ms so a layout * shift (e.g. opening a drawer) doesn't make the element jump. */ .k-scroll-scale.is-in, .k-scroll-fade.is-in, .k-scroll-translate.is-in, [data-kinetic-scroll].is-in { transform: scale(1); opacity: 1; } /* ---- 6. Sticky card stack (Phase 17.4) -------------------------------- */ /* * Sticky-stacked cards. The first child is `position: sticky; top: 96px` * (80px topbar + 16px breathing room). Subsequent children appear * to slide over the sticky card as the page scrolls. Used by the * wholesale admin lead detail right column and the system * dashboard historical section. `top: 96px` accommodates the * topbar height (clamp(64px, 5vw, 80px) + 16px). */ .k-sticky-stack { display: flex; flex-direction: column; gap: var(--gp-sp-4); } .k-sticky-stack__item { border: var(--gp-border-w) solid var(--gp-border); background: var(--gp-bg); padding: var(--gp-sp-6); /* The stack container needs room for the sticky child to stay in view as later children scroll past. The `min-height` ensures the container is tall enough that the sticky child has somewhere to stick. */ } .k-sticky-stack__item--sticky { position: sticky; top: calc(var(--gp-topbar-h, 80px) + var(--gp-sp-4)); z-index: 5; background: var(--gp-muted); } /* Mobile: drop the sticky behavior — small viewports benefit from a normal flow more than from a card that doesn't scroll out of the way. */ @media (max-width: 768px) { .k-sticky-stack__item--sticky { position: static; } } /* ---- 7. prefers-reduced-motion guard helpers ------------------------- */ /* * Belt-and-suspenders motion guards. The base.css global * `prefers-reduced-motion: reduce` rule already kills every * transition / animation / marquee / noise overlay in the * kinetic/* chain. These helpers let per-element overrides * opt back into a no-motion state without changing the * `` data attribute. The `data-motion="off"` attribute * is set by kinetic/theme.js when reduced motion is on so * JS-driven scroll triggers can be guarded at the source. */ .k-no-motion, [data-kinetic-no-motion] { animation: none !important; transition: none !important; }