@birdycom/omniacss 0.11.0 → 0.11.1

package/scss/utilities/_motion_transforms.scss

@@ -1,167 +1,167 @@
-// SCSS Document
-// File: src/scss/utilities/_motion_transforms.scss
-// Map: transition -> animation -> transform -> rotate/scale/skew/translate -> perspective
-
-/* Transition property — with a default duration and easing as longhands, so .duration-*, .ease-* and .delay-* (below) override them */
-.transition-none { transition-property: none; }
-.transition-all { transition-property: all; }
-.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
-.transition-opacity { transition-property: opacity; }
-.transition-shadow { transition-property: box-shadow; }
-.transition-transform { transition-property: transform, translate, scale, rotate; }
-:is(.transition-all, .transition-colors, .transition-opacity, .transition-shadow, .transition-transform) {
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Transition duration */
-.duration-75 { transition-duration: 75ms; }
-.duration-100 { transition-duration: 100ms; }
-.duration-150 { transition-duration: 150ms; }
-.duration-200 { transition-duration: 200ms; }
-.duration-300 { transition-duration: 300ms; }
-.duration-500 { transition-duration: 500ms; }
-.duration-700 { transition-duration: 700ms; }
-.duration-1000 { transition-duration: 1000ms; }
-
-/* Transition timing */
-.ease-linear { transition-timing-function: linear; }
-.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
-.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-
-/* Transition delay */
-.delay-0 { transition-delay: 0ms; }
-.delay-75 { transition-delay: 75ms; }
-.delay-100 { transition-delay: 100ms; }
-.delay-150 { transition-delay: 150ms; }
-.delay-200 { transition-delay: 200ms; }
-.delay-300 { transition-delay: 300ms; }
-.delay-500 { transition-delay: 500ms; }
-
-/* Animation */
-@keyframes oc-spin {
-  to { transform: rotate(360deg); }
-}
-@keyframes oc-ping {
-  75%, 100% { transform: scale(2); opacity: 0; }
-}
-@keyframes oc-pulse {
-  50% { opacity: .5; }
-}
-@keyframes oc-bounce {
-  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
-  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-}
-
-.animate-none { animation: none; }
-.animate-spin { animation: oc-spin 1s linear infinite; }
-.animate-ping { animation: oc-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-.animate-pulse { animation: oc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-.animate-bounce { animation: oc-bounce 1s infinite; }
-
-/* Transform core */
-/* Rotate, scale and translate use the individual transform properties (rotate / scale / translate),
-   so every class works on its own and they combine freely. Skew has no own property: it uses transform. */
-.transform {
-  transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0));
-}
-.transform-none { transform: none; }
-
-/* Rotate */
-.rotate-0 { --oc-rotate: 0deg; rotate: 0deg; }
-.rotate-45 { --oc-rotate: 45deg; rotate: 45deg; }
-.rotate-90 { --oc-rotate: 90deg; rotate: 90deg; }
-.rotate-180 { --oc-rotate: 180deg; rotate: 180deg; }
-
-/* Scale */
-.scale-0 { --oc-scale-x: 0; --oc-scale-y: 0; scale: 0; }
-.scale-50 { --oc-scale-x: .5; --oc-scale-y: .5; scale: .5; }
-.scale-75 { --oc-scale-x: .75; --oc-scale-y: .75; scale: .75; }
-.scale-90 { --oc-scale-x: .9; --oc-scale-y: .9; scale: .9; }
-.scale-95 { --oc-scale-x: .95; --oc-scale-y: .95; scale: .95; }
-.scale-100 { --oc-scale-x: 1; --oc-scale-y: 1; scale: 1; }
-.scale-105 { --oc-scale-x: 1.05; --oc-scale-y: 1.05; scale: 1.05; }
-.scale-110 { --oc-scale-x: 1.1; --oc-scale-y: 1.1; scale: 1.1; }
-.scale-125 { --oc-scale-x: 1.25; --oc-scale-y: 1.25; scale: 1.25; }
-.scale-150 { --oc-scale-x: 1.5; --oc-scale-y: 1.5; scale: 1.5; }
-
-/* Skew */
-.skew-x-0 { --oc-skew-x: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-x-3 { --oc-skew-x: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-x-6 { --oc-skew-x: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-x-12 { --oc-skew-x: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-y-0 { --oc-skew-y: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-y-3 { --oc-skew-y: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-y-6 { --oc-skew-y: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-.skew-y-12 { --oc-skew-y: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
-
-/* Translate */
-.translate-x-0 { --oc-translate-x: 0; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-x-1 { --oc-translate-x: 0.25rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-x-2 { --oc-translate-x: 0.5rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-x-4 { --oc-translate-x: 1rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-x-8 { --oc-translate-x: 2rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-x-full { --oc-translate-x: 100%; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
-.translate-y-0 { --oc-translate-y: 0; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-.translate-y-1 { --oc-translate-y: 0.25rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-.translate-y-2 { --oc-translate-y: 0.5rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-.translate-y-4 { --oc-translate-y: 1rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-.translate-y-8 { --oc-translate-y: 2rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-.translate-y-full { --oc-translate-y: 100%; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
-
-/* Transform origin and style */
-.origin-center { transform-origin: center; }
-.origin-top { transform-origin: top; }
-.origin-top-right { transform-origin: top right; }
-.origin-right { transform-origin: right; }
-.origin-bottom-right { transform-origin: bottom right; }
-.origin-bottom { transform-origin: bottom; }
-.origin-bottom-left { transform-origin: bottom left; }
-.origin-left { transform-origin: left; }
-.origin-top-left { transform-origin: top left; }
-
-.transform-flat { transform-style: flat; }
-.transform-3d { transform-style: preserve-3d; }
-
-/* Backface visibility */
-.backface-visible { backface-visibility: visible; }
-.backface-hidden { backface-visibility: hidden; }
-
-/* Perspective */
-.perspective-none { perspective: none; }
-.perspective-250 { perspective: 250px; }
-.perspective-500 { perspective: 500px; }
-.perspective-750 { perspective: 750px; }
-.perspective-1000 { perspective: 1000px; }
-
-.perspective-origin-center { perspective-origin: center; }
-.perspective-origin-top { perspective-origin: top; }
-.perspective-origin-bottom { perspective-origin: bottom; }
-.perspective-origin-left { perspective-origin: left; }
-.perspective-origin-right { perspective-origin: right; }
-
-/* Hover variants — the transform changes on :hover, so .transition-* / .duration-* / .ease-* become visible.
-   Example: <div class="transition-transform duration-300 ease-out hover:scale-110"> */
-@each $key, $value in ("105": 1.05, "110": 1.1, "125": 1.25, "150": 1.5) {
-  .hover\:scale-#{$key}:hover { scale: $value; }
-}
-@each $key in (12, 45, 90, 180) {
-  .hover\:rotate-#{$key}:hover { rotate: #{$key}deg; }
-}
-@each $key, $value in ("1": 0.25rem, "2": 0.5rem, "4": 1rem, "8": 2rem) {
-  .hover\:translate-x-#{$key}:hover { translate: $value var(--oc-translate-y, 0); }
-  .hover\:-translate-y-#{$key}:hover { translate: var(--oc-translate-x, 0) calc(#{$value} * -1); }
-}
-@each $key in (6, 12) {
-  .hover\:skew-x-#{$key}:hover { transform: skewX(#{$key}deg); }
-  .hover\:skew-y-#{$key}:hover { transform: skewY(#{$key}deg); }
-}
-.hover\:opacity-50:hover { opacity: 0.5; }
-
-/* Group hover: hover the parent (.group) to change the child. */
-@each $key, $value in ("110": 1.1, "125": 1.25) {
-  .group:hover .group-hover\:scale-#{$key} { scale: $value; }
-}
-.group:hover .group-hover\:translate-x-full { translate: 100% 0; }
-.group:hover .group-hover\:rotate-180 { rotate: 180deg; }
+// SCSS Document
+// File: src/scss/utilities/_motion_transforms.scss
+// Map: transition -> animation -> transform -> rotate/scale/skew/translate -> perspective
+
+/* Transition property — with a default duration and easing as longhands, so .duration-*, .ease-* and .delay-* (below) override them */
+.transition-none { transition-property: none; }
+.transition-all { transition-property: all; }
+.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
+.transition-opacity { transition-property: opacity; }
+.transition-shadow { transition-property: box-shadow; }
+.transition-transform { transition-property: transform, translate, scale, rotate; }
+:is(.transition-all, .transition-colors, .transition-opacity, .transition-shadow, .transition-transform) {
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Transition duration */
+.duration-75 { transition-duration: 75ms; }
+.duration-100 { transition-duration: 100ms; }
+.duration-150 { transition-duration: 150ms; }
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+.duration-500 { transition-duration: 500ms; }
+.duration-700 { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+
+/* Transition timing */
+.ease-linear { transition-timing-function: linear; }
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* Transition delay */
+.delay-0 { transition-delay: 0ms; }
+.delay-75 { transition-delay: 75ms; }
+.delay-100 { transition-delay: 100ms; }
+.delay-150 { transition-delay: 150ms; }
+.delay-200 { transition-delay: 200ms; }
+.delay-300 { transition-delay: 300ms; }
+.delay-500 { transition-delay: 500ms; }
+
+/* Animation */
+@keyframes oc-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes oc-ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes oc-pulse {
+  50% { opacity: .5; }
+}
+@keyframes oc-bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+.animate-none { animation: none; }
+.animate-spin { animation: oc-spin 1s linear infinite; }
+.animate-ping { animation: oc-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse { animation: oc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce { animation: oc-bounce 1s infinite; }
+
+/* Transform core */
+/* Rotate, scale and translate use the individual transform properties (rotate / scale / translate),
+   so every class works on its own and they combine freely. Skew has no own property: it uses transform. */
+.transform {
+  transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0));
+}
+.transform-none { transform: none; }
+
+/* Rotate */
+.rotate-0 { --oc-rotate: 0deg; rotate: 0deg; }
+.rotate-45 { --oc-rotate: 45deg; rotate: 45deg; }
+.rotate-90 { --oc-rotate: 90deg; rotate: 90deg; }
+.rotate-180 { --oc-rotate: 180deg; rotate: 180deg; }
+
+/* Scale */
+.scale-0 { --oc-scale-x: 0; --oc-scale-y: 0; scale: 0; }
+.scale-50 { --oc-scale-x: .5; --oc-scale-y: .5; scale: .5; }
+.scale-75 { --oc-scale-x: .75; --oc-scale-y: .75; scale: .75; }
+.scale-90 { --oc-scale-x: .9; --oc-scale-y: .9; scale: .9; }
+.scale-95 { --oc-scale-x: .95; --oc-scale-y: .95; scale: .95; }
+.scale-100 { --oc-scale-x: 1; --oc-scale-y: 1; scale: 1; }
+.scale-105 { --oc-scale-x: 1.05; --oc-scale-y: 1.05; scale: 1.05; }
+.scale-110 { --oc-scale-x: 1.1; --oc-scale-y: 1.1; scale: 1.1; }
+.scale-125 { --oc-scale-x: 1.25; --oc-scale-y: 1.25; scale: 1.25; }
+.scale-150 { --oc-scale-x: 1.5; --oc-scale-y: 1.5; scale: 1.5; }
+
+/* Skew */
+.skew-x-0 { --oc-skew-x: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-3 { --oc-skew-x: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-6 { --oc-skew-x: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-12 { --oc-skew-x: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-0 { --oc-skew-y: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-3 { --oc-skew-y: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-6 { --oc-skew-y: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-12 { --oc-skew-y: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+
+/* Translate */
+.translate-x-0 { --oc-translate-x: 0; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-1 { --oc-translate-x: 0.25rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-2 { --oc-translate-x: 0.5rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-4 { --oc-translate-x: 1rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-8 { --oc-translate-x: 2rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-full { --oc-translate-x: 100%; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-y-0 { --oc-translate-y: 0; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-1 { --oc-translate-y: 0.25rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-2 { --oc-translate-y: 0.5rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-4 { --oc-translate-y: 1rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-8 { --oc-translate-y: 2rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-full { --oc-translate-y: 100%; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+
+/* Transform origin and style */
+.origin-center { transform-origin: center; }
+.origin-top { transform-origin: top; }
+.origin-top-right { transform-origin: top right; }
+.origin-right { transform-origin: right; }
+.origin-bottom-right { transform-origin: bottom right; }
+.origin-bottom { transform-origin: bottom; }
+.origin-bottom-left { transform-origin: bottom left; }
+.origin-left { transform-origin: left; }
+.origin-top-left { transform-origin: top left; }
+
+.transform-flat { transform-style: flat; }
+.transform-3d { transform-style: preserve-3d; }
+
+/* Backface visibility */
+.backface-visible { backface-visibility: visible; }
+.backface-hidden { backface-visibility: hidden; }
+
+/* Perspective */
+.perspective-none { perspective: none; }
+.perspective-250 { perspective: 250px; }
+.perspective-500 { perspective: 500px; }
+.perspective-750 { perspective: 750px; }
+.perspective-1000 { perspective: 1000px; }
+
+.perspective-origin-center { perspective-origin: center; }
+.perspective-origin-top { perspective-origin: top; }
+.perspective-origin-bottom { perspective-origin: bottom; }
+.perspective-origin-left { perspective-origin: left; }
+.perspective-origin-right { perspective-origin: right; }
+
+/* Hover variants — the transform changes on :hover, so .transition-* / .duration-* / .ease-* become visible.
+   Example: <div class="transition-transform duration-300 ease-out hover:scale-110"> */
+@each $key, $value in ("105": 1.05, "110": 1.1, "125": 1.25, "150": 1.5) {
+  .hover\:scale-#{$key}:hover { scale: $value; }
+}
+@each $key in (12, 45, 90, 180) {
+  .hover\:rotate-#{$key}:hover { rotate: #{$key}deg; }
+}
+@each $key, $value in ("1": 0.25rem, "2": 0.5rem, "4": 1rem, "8": 2rem) {
+  .hover\:translate-x-#{$key}:hover { translate: $value var(--oc-translate-y, 0); }
+  .hover\:-translate-y-#{$key}:hover { translate: var(--oc-translate-x, 0) calc(#{$value} * -1); }
+}
+@each $key in (6, 12) {
+  .hover\:skew-x-#{$key}:hover { transform: skewX(#{$key}deg); }
+  .hover\:skew-y-#{$key}:hover { transform: skewY(#{$key}deg); }
+}
+.hover\:opacity-50:hover { opacity: 0.5; }
+
+/* Group hover: hover the parent (.group) to change the child. */
+@each $key, $value in ("110": 1.1, "125": 1.25) {
+  .group:hover .group-hover\:scale-#{$key} { scale: $value; }
+}
+.group:hover .group-hover\:translate-x-full { translate: 100% 0; }
+.group:hover .group-hover\:rotate-180 { rotate: 180deg; }

package/scss/utilities/_scroll_animations.scss

@@ -1,80 +1,80 @@
-// SCSS Document
-// File: src/scss/utilities/_scroll_animations.scss
-// Description: Scroll-driven animation utilities — drive animations by scroll progress instead of time.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .timeline-*, .animate-range-*, .scroll-timeline-*, .view-timeline-* classes
-//          and ready-to-use .animate-scroll-* / .animate-view-* presets.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
-// Note: presets are wrapped in @supports so browsers without support keep the element fully visible.
-// Map: animation-timeline -> animation-range -> named timelines -> timeline-scope -> presets
-
-/* Animation timeline */
-.timeline-auto { animation-timeline: auto; }
-.timeline-none { animation-timeline: none; }
-.timeline-scroll { animation-timeline: scroll(); }
-.timeline-scroll-x { animation-timeline: scroll(x); }
-.timeline-scroll-root { animation-timeline: scroll(root); }
-.timeline-view { animation-timeline: view(); }
-.timeline-view-x { animation-timeline: view(x); }
-.timeline-oc { animation-timeline: --oc-timeline; }
-
-/* Animation range */
-.animate-range-normal { animation-range: normal; }
-.animate-range-cover { animation-range: cover; }
-.animate-range-contain { animation-range: contain; }
-.animate-range-entry { animation-range: entry; }
-.animate-range-exit { animation-range: exit; }
-.animate-range-entry-half { animation-range: entry 0% entry 50%; }
-
-/* Named scroll and view timelines */
-.scroll-timeline-oc { scroll-timeline: --oc-timeline block; }
-.scroll-timeline-oc-x { scroll-timeline: --oc-timeline inline; }
-.view-timeline-oc { view-timeline: --oc-timeline block; }
-.view-timeline-oc-x { view-timeline: --oc-timeline inline; }
-
-/* Timeline scope — expose a named timeline to siblings/descendants */
-.timeline-scope-oc { timeline-scope: --oc-timeline; }
-.timeline-scope-none { timeline-scope: none; }
-
-/* Presets */
-@keyframes oc-scroll-progress {
-  from { transform: scaleX(0); }
-  to { transform: scaleX(1); }
-}
-@keyframes oc-view-fade-in {
-  from { opacity: 0; transform: translateY(2rem); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes oc-view-zoom-in {
-  from { opacity: 0; transform: scale(0.8); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-@supports (animation-timeline: scroll()) {
-  .animate-scroll-progress {
-    transform-origin: 0 50%;
-    animation: oc-scroll-progress linear both;
-    animation-timeline: scroll(root);
-  }
-  .animate-view-fade-in {
-    animation: oc-view-fade-in linear both;
-    animation-timeline: view();
-    animation-range: entry 0% cover 30%;
-  }
-  .animate-view-zoom-in {
-    animation: oc-view-zoom-in linear both;
-    animation-timeline: view();
-    animation-range: entry 0% cover 30%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-scroll-progress,
-  .animate-view-fade-in,
-  .animate-view-zoom-in {
-    animation: none;
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_scroll_animations.scss
+// Description: Scroll-driven animation utilities — drive animations by scroll progress instead of time.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .timeline-*, .animate-range-*, .scroll-timeline-*, .view-timeline-* classes
+//          and ready-to-use .animate-scroll-* / .animate-view-* presets.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
+// Note: presets are wrapped in @supports so browsers without support keep the element fully visible.
+// Map: animation-timeline -> animation-range -> named timelines -> timeline-scope -> presets
+
+/* Animation timeline */
+.timeline-auto { animation-timeline: auto; }
+.timeline-none { animation-timeline: none; }
+.timeline-scroll { animation-timeline: scroll(); }
+.timeline-scroll-x { animation-timeline: scroll(x); }
+.timeline-scroll-root { animation-timeline: scroll(root); }
+.timeline-view { animation-timeline: view(); }
+.timeline-view-x { animation-timeline: view(x); }
+.timeline-oc { animation-timeline: --oc-timeline; }
+
+/* Animation range */
+.animate-range-normal { animation-range: normal; }
+.animate-range-cover { animation-range: cover; }
+.animate-range-contain { animation-range: contain; }
+.animate-range-entry { animation-range: entry; }
+.animate-range-exit { animation-range: exit; }
+.animate-range-entry-half { animation-range: entry 0% entry 50%; }
+
+/* Named scroll and view timelines */
+.scroll-timeline-oc { scroll-timeline: --oc-timeline block; }
+.scroll-timeline-oc-x { scroll-timeline: --oc-timeline inline; }
+.view-timeline-oc { view-timeline: --oc-timeline block; }
+.view-timeline-oc-x { view-timeline: --oc-timeline inline; }
+
+/* Timeline scope — expose a named timeline to siblings/descendants */
+.timeline-scope-oc { timeline-scope: --oc-timeline; }
+.timeline-scope-none { timeline-scope: none; }
+
+/* Presets */
+@keyframes oc-scroll-progress {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+@keyframes oc-view-fade-in {
+  from { opacity: 0; transform: translateY(2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes oc-view-zoom-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@supports (animation-timeline: scroll()) {
+  .animate-scroll-progress {
+    transform-origin: 0 50%;
+    animation: oc-scroll-progress linear both;
+    animation-timeline: scroll(root);
+  }
+  .animate-view-fade-in {
+    animation: oc-view-fade-in linear both;
+    animation-timeline: view();
+    animation-range: entry 0% cover 30%;
+  }
+  .animate-view-zoom-in {
+    animation: oc-view-zoom-in linear both;
+    animation-timeline: view();
+    animation-range: entry 0% cover 30%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll-progress,
+  .animate-view-fade-in,
+  .animate-view-zoom-in {
+    animation: none;
+  }
+}

package/scss/utilities/_scrollbar.scss

@@ -44,6 +44,7 @@
   --oc-scrollbar-track: transparent;
   scrollbar-color: var(--oc-scrollbar-thumb) var(--oc-scrollbar-track);
 }
-.scrollbar-omnia:hover {
+/* :has(:hover) keeps it while the pointer is over a popover or dialog (top layer), where <html> itself is not :hover. */
+.scrollbar-omnia:is(:hover, :has(:hover)) {
   --oc-scrollbar-thumb: light-dark(var(--color-vividblue-95), var(--color-vividblue-60));
 }

package/scss/utilities/_shadow_tokens.scss

@@ -1,21 +1,21 @@
-// File: src/scss/utilities/_shadow_tokens.scss
-// Shared light-dark() aware shadow values (Omnia tokens only). Emits no CSS itself.
-// Used by .shadow-* (_effects_advanced.scss), state variants (_state_variants.scss) and dark: utilities.
-@use "sass:string";
-$oc-shadow-c: string.unquote("var(--oc-shadow-color, var(--color-black-50))");
-@function oc-sh($l, $d) {
-  @return string.unquote("light-dark(oklch(from #{$oc-shadow-c} l c h / #{$l}), oklch(from #{$oc-shadow-c} l c h / #{$d}))");
-}
-$oc-shadow-edge: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.2))");
-$oc-shadow-edge-hi: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.22)), inset 0 1px 0 0 light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.14))");
-$oc-shadow-sm: 0 1px 2px 0 oc-sh(0.08, 0.6) + $oc-shadow-edge;
-$oc-shadow-md: 0 4px 6px -1px oc-sh(0.15, 0.7), 0 2px 4px -2px oc-sh(0.12, 0.6) + $oc-shadow-edge;
-$oc-shadow-lg: 0 10px 15px -3px oc-sh(0.18, 0.75), 0 4px 6px -4px oc-sh(0.14, 0.65) + $oc-shadow-edge-hi;
-$oc-shadow-xl: 0 20px 25px -5px oc-sh(0.22, 0.8), 0 8px 10px -6px oc-sh(0.16, 0.7) + $oc-shadow-edge-hi;
-// Dark-only variants (for .dark: utilities, where color-scheme is not guaranteed to be dark)
-@function oc-shd($d) { @return string.unquote("oklch(from #{$oc-shadow-c} l c h / #{$d})"); }
-$oc-dark-edge: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.2)");
-$oc-dark-edge-hi: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.22), inset 0 1px 0 0 oklch(from var(--color-white-50) l c h / 0.14)");
-$oc-dark-shadow-sm: 0 1px 2px 0 oc-shd(0.6) + $oc-dark-edge;
-$oc-dark-shadow-md: 0 4px 6px -1px oc-shd(0.7), 0 2px 4px -2px oc-shd(0.6) + $oc-dark-edge;
-$oc-dark-shadow-lg: 0 10px 15px -3px oc-shd(0.75), 0 4px 6px -4px oc-shd(0.65) + $oc-dark-edge-hi;
+// File: src/scss/utilities/_shadow_tokens.scss
+// Shared light-dark() aware shadow values (Omnia tokens only). Emits no CSS itself.
+// Used by .shadow-* (_effects_advanced.scss), state variants (_state_variants.scss) and dark: utilities.
+@use "sass:string";
+$oc-shadow-c: string.unquote("var(--oc-shadow-color, var(--color-black-50))");
+@function oc-sh($l, $d) {
+  @return string.unquote("light-dark(oklch(from #{$oc-shadow-c} l c h / #{$l}), oklch(from #{$oc-shadow-c} l c h / #{$d}))");
+}
+$oc-shadow-edge: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.2))");
+$oc-shadow-edge-hi: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.22)), inset 0 1px 0 0 light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.14))");
+$oc-shadow-sm: 0 1px 2px 0 oc-sh(0.08, 0.6) + $oc-shadow-edge;
+$oc-shadow-md: 0 4px 6px -1px oc-sh(0.15, 0.7), 0 2px 4px -2px oc-sh(0.12, 0.6) + $oc-shadow-edge;
+$oc-shadow-lg: 0 10px 15px -3px oc-sh(0.18, 0.75), 0 4px 6px -4px oc-sh(0.14, 0.65) + $oc-shadow-edge-hi;
+$oc-shadow-xl: 0 20px 25px -5px oc-sh(0.22, 0.8), 0 8px 10px -6px oc-sh(0.16, 0.7) + $oc-shadow-edge-hi;
+// Dark-only variants (for .dark: utilities, where color-scheme is not guaranteed to be dark)
+@function oc-shd($d) { @return string.unquote("oklch(from #{$oc-shadow-c} l c h / #{$d})"); }
+$oc-dark-edge: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.2)");
+$oc-dark-edge-hi: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.22), inset 0 1px 0 0 oklch(from var(--color-white-50) l c h / 0.14)");
+$oc-dark-shadow-sm: 0 1px 2px 0 oc-shd(0.6) + $oc-dark-edge;
+$oc-dark-shadow-md: 0 4px 6px -1px oc-shd(0.7), 0 2px 4px -2px oc-shd(0.6) + $oc-dark-edge;
+$oc-dark-shadow-lg: 0 10px 15px -3px oc-shd(0.75), 0 4px 6px -4px oc-shd(0.65) + $oc-dark-edge-hi;