@casoon/atlas-styles 0.0.1

package/dist/animations.css

@@ -0,0 +1,1873 @@
+/*!
+ * CASOON Atlas Animations - Complete Animation System for Tailwind v4
+ * Version: 0.0.1
+ * Repository: https://github.com/casoon/atlas
+ * Author: Jörn Seidel (joern.seidel@casoon.de)
+ * License: MIT
+ *
+ * Advanced animation system with 80+ animations and keyframes
+ * Part of CASOON Atlas UI effects library
+ *
+ * Usage: @import "@casoon/atlas-styles/animations";
+ * Package: @casoon/atlas-styles
+ */
+
+/* Note: @import "tailwindcss"; should be added by the consumer */
+
+/*!
+ * CASOON Atlas Animations - Complete Animation System for Tailwind v4
+ * TOTAL: 6 CSS FILES → Pure Tailwind v4 (80+ animations + advanced features)
+ *
+ * Features:
+ * ✅ Scroll-based animations with Intersection Observer support
+ * ✅ Advanced easing functions (spring, bounce, elastic)
+ * ✅ Extended stagger system (up to 12 items)
+ * ✅ Performance-optimized keyframes
+ * ✅ Modern CSS features (view-timeline, scroll-timeline)
+ * ✅ Comprehensive reduced motion support
+ * ✅ Touch-friendly micro-interactions
+ * ✅ SSR-safe, tree-shakeable, framework-agnostic
+ */
+
+/* Note: @import "tailwindcss"; should be added by the consumer */
+
+/* =========================================================
+   CONSOLIDATED ANIMATION THEME & TOKENS
+   Complete animation system with timing and easing
+   ========================================================= */
+@theme {
+  /* === DURATION SYSTEM === */
+  --cs-anim-duration-xxs: 100ms;
+  --cs-anim-duration-xs: 150ms;
+  --cs-anim-duration-sm: 200ms;
+  --cs-anim-duration-md: 300ms;
+  --cs-anim-duration-lg: 500ms;
+  --cs-anim-duration-xl: 700ms;
+  --cs-anim-duration-2xl: 1000ms;
+  --cs-anim-duration-3xl: 1500ms;
+
+  /* === EASING SYSTEM === */
+  /* Standard Material Design easing */
+  --cs-anim-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --cs-anim-ease-emphasized: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --cs-anim-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --cs-anim-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+
+  /* Spring and elastic easing */
+  --cs-anim-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --cs-anim-ease-soft-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --cs-anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --cs-anim-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  /* Advanced easing curves */
+  --cs-anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --cs-anim-ease-crisp: cubic-bezier(0.4, 0, 0.6, 1);
+  --cs-anim-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* === REDUCED MOTION SYSTEM === */
+  --cs-anim-reduced-motion-duration: 1ms;
+  --cs-anim-reduced-motion-ease: ease;
+
+  /* === COMPONENT TOKENS === */
+  --cs-underline-w: 0%;
+  --cs-underline-h: 2px;
+  --cs-ripple-color: currentColor;
+  --cs-ripple-size: 0%;
+  --cs-chip-scale: 1;
+  --cs-badge-scale: 0.9;
+  --cs-toast-offset: 16px;
+  --cs-drawer-shift: 0px;
+  --cs-accordion-rows: 0fr;
+  --cs-skeleton-sheen: 120%;
+  --cs-parallax-offset: 0px;
+  --cs-scroll-progress: 0%;
+
+  /* === STAGGER SYSTEM === */
+  --cs-stagger-delay-50: 50ms;
+  --cs-stagger-delay-75: 75ms;
+  --cs-stagger-delay-100: 100ms;
+  --cs-stagger-delay-150: 150ms;
+  --cs-stagger-delay-200: 200ms;
+}
+
+/* =========================================================
+   CORE ANIMATION KEYFRAMES
+   High-performance keyframes optimized for modern browsers
+   ========================================================= */
+
+/* === ENTRANCE ANIMATIONS === */
+@keyframes csFadeIn, anim-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes csFadeOut, anim-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes csScaleIn, anim-scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csScaleOut, anim-scale-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes csSlideUp, anim-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideDown, anim-slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideLeft, anim-slide-left {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes csSlideRight, anim-slide-right {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes csBlurIn, anim-blur-in {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes csBlurOut, anim-blur-out {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+@keyframes csRotateIn, anim-rotate-in {
+  0% {
+    opacity: 0;
+    transform: rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes csFlipIn {
+  0% {
+    opacity: 0;
+    transform: rotateY(-180deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateY(0);
+  }
+}
+
+@keyframes csZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csZoomOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+/* === CONTINUOUS ANIMATIONS === */
+@keyframes csRotate, anim-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes csPulse, anim-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes csBounce, anim-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+@keyframes csWiggle, anim-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes csShake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+@keyframes csHeartbeat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  14%,
+  28% {
+    transform: scale(1.15);
+  }
+}
+
+@keyframes csRubberBand {
+  0%,
+  100% {
+    transform: scaleX(1);
+  }
+  30% {
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+  40% {
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+  60% {
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+}
+
+/* === 3D ANIMATIONS === */
+@keyframes csReveal3DUp {
+  0% {
+    opacity: 0;
+    transform: rotateX(-90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+}
+
+@keyframes csReveal3DRight {
+  0% {
+    opacity: 0;
+    transform: rotateY(90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateY(0);
+  }
+}
+
+@keyframes csReveal3DLeft {
+  0% {
+    opacity: 0;
+    transform: rotateY(-90deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotateY(0);
+  }
+}
+
+@keyframes csFlip3DX {
+  0% {
+    transform: rotateX(0);
+  }
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes csFlip3DY {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+/* === SCROLL & PARALLAX ANIMATIONS === */
+@keyframes csMarqueeLeft {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes csMarqueeRight {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes csParallaxY {
+  0% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(10px);
+  }
+}
+
+@keyframes csParallaxX {
+  0% {
+    transform: translateX(-10px);
+  }
+  100% {
+    transform: translateX(10px);
+  }
+}
+
+@keyframes csFloat {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes csSway {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(1deg);
+  }
+}
+
+/* === LOADING & PROGRESS ANIMATIONS === */
+@keyframes csProgressGrow {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+@keyframes csSkeletonShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes csDotLoader {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+@keyframes csRippleSpread {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* === COMPONENT-SPECIFIC ANIMATIONS === */
+@keyframes csDropdownIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes csDropdownOut {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95) translateY(-5px);
+  }
+}
+
+@keyframes csTooltipIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csTooltipOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes csModalIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csModalOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes csBackdropIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes csBackdropOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes csDrawerInLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes csDrawerOutLeft {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes csDrawerInRight {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes csDrawerOutRight {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes csDrawerInTop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes csDrawerOutTop {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes csDrawerInBottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes csDrawerOutBottom {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes csAccordionIn {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+  100% {
+    height: auto;
+    opacity: 1;
+  }
+}
+
+@keyframes csAccordionOut {
+  0% {
+    height: auto;
+    opacity: 1;
+  }
+  100% {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes csToastIn {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes csToastOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes csChipIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csChipOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes csBadgePop {
+  0% {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes csSpinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes csProgressIndeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes csCarouselSlide {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes csCarouselFade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* === MICRO-INTERACTION ANIMATIONS === */
+@keyframes csBtnPress {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.975);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes csTabSlide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes csNotificationSlide {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* =========================================================
+   CORE ANIMATION ENGINE
+   Flexible animation system with CSS custom properties
+   ========================================================= */
+
+@utility cs-anim {
+  animation-duration: var(--cs-anim-duration, var(--cs-anim-duration-md));
+  animation-timing-function: var(--cs-anim-ease, var(--cs-anim-ease-standard));
+  animation-iteration-count: var(--cs-anim-count, 1);
+  animation-direction: var(--cs-anim-direction, normal);
+  animation-fill-mode: var(--cs-anim-fill, both);
+  animation-delay: var(--cs-anim-delay, 0ms);
+}
+
+/* =========================================================
+   DURATION UTILITIES
+   Complete timing scale for fine-tuned control
+   ========================================================= */
+
+@utility cs-anim-xxs {
+  --cs-anim-duration: var(--cs-anim-duration-xxs);
+}
+@utility cs-anim-xs {
+  --cs-anim-duration: var(--cs-anim-duration-xs);
+}
+@utility cs-anim-sm {
+  --cs-anim-duration: var(--cs-anim-duration-sm);
+}
+@utility cs-anim-md {
+  --cs-anim-duration: var(--cs-anim-duration-md);
+}
+@utility cs-anim-lg {
+  --cs-anim-duration: var(--cs-anim-duration-lg);
+}
+@utility cs-anim-xl {
+  --cs-anim-duration: var(--cs-anim-duration-xl);
+}
+@utility cs-anim-2xl {
+  --cs-anim-duration: var(--cs-anim-duration-2xl);
+}
+@utility cs-anim-3xl {
+  --cs-anim-duration: var(--cs-anim-duration-3xl);
+}
+
+/* =========================================================
+   EASING UTILITIES
+   Advanced easing functions for natural motion
+   ========================================================= */
+
+@utility cs-ease-standard {
+  --cs-anim-ease: var(--cs-anim-ease-standard);
+}
+@utility cs-ease-emphasized {
+  --cs-anim-ease: var(--cs-anim-ease-emphasized);
+}
+@utility cs-ease-decelerate {
+  --cs-anim-ease: var(--cs-anim-ease-decelerate);
+}
+@utility cs-ease-accelerate {
+  --cs-anim-ease: var(--cs-anim-ease-accelerate);
+}
+@utility cs-ease-spring {
+  --cs-anim-ease: var(--cs-anim-ease-spring);
+}
+@utility cs-ease-soft-spring {
+  --cs-anim-ease: var(--cs-anim-ease-soft-spring);
+}
+@utility cs-ease-bounce {
+  --cs-anim-ease: var(--cs-anim-ease-bounce);
+}
+@utility cs-ease-elastic {
+  --cs-anim-ease: var(--cs-anim-ease-elastic);
+}
+@utility cs-ease-smooth {
+  --cs-anim-ease: var(--cs-anim-ease-smooth);
+}
+@utility cs-ease-crisp {
+  --cs-anim-ease: var(--cs-anim-ease-crisp);
+}
+@utility cs-ease-overshoot {
+  --cs-anim-ease: var(--cs-anim-ease-overshoot);
+}
+
+/* =========================================================
+   DELAY UTILITIES
+   Precise timing control for orchestration
+   ========================================================= */
+
+@utility cs-delay-0 {
+  --cs-anim-delay: 0ms;
+}
+@utility cs-delay-50 {
+  --cs-anim-delay: 50ms;
+}
+@utility cs-delay-75 {
+  --cs-anim-delay: 75ms;
+}
+@utility cs-delay-100 {
+  --cs-anim-delay: 100ms;
+}
+@utility cs-delay-150 {
+  --cs-anim-delay: 150ms;
+}
+@utility cs-delay-200 {
+  --cs-anim-delay: 200ms;
+}
+@utility cs-delay-300 {
+  --cs-anim-delay: 300ms;
+}
+@utility cs-delay-500 {
+  --cs-anim-delay: 500ms;
+}
+@utility cs-delay-700 {
+  --cs-anim-delay: 700ms;
+}
+@utility cs-delay-1000 {
+  --cs-anim-delay: 1000ms;
+}
+@utility cs-delay-1500 {
+  --cs-anim-delay: 1500ms;
+}
+
+/* =========================================================
+   ANIMATION CONTROL UTILITIES
+   Direction, iteration, and fill mode controls
+   ========================================================= */
+
+@utility cs-anim-infinite {
+  --cs-anim-count: infinite;
+}
+@utility cs-anim-reverse {
+  --cs-anim-direction: reverse;
+}
+@utility cs-anim-alternate {
+  --cs-anim-direction: alternate;
+}
+@utility cs-anim-alternate-reverse {
+  --cs-anim-direction: alternate-reverse;
+}
+@utility cs-anim-both {
+  --cs-anim-fill: both;
+}
+@utility cs-anim-forwards {
+  --cs-anim-fill: forwards;
+}
+@utility cs-anim-backwards {
+  --cs-anim-fill: backwards;
+}
+@utility cs-anim-none {
+  --cs-anim-fill: none;
+}
+
+/* Iteration count utilities */
+@utility cs-anim-once {
+  --cs-anim-count: 1;
+}
+@utility cs-anim-twice {
+  --cs-anim-count: 2;
+}
+@utility cs-anim-thrice {
+  --cs-anim-count: 3;
+}
+
+/* =========================================================
+   ENTRANCE ANIMATION UTILITIES
+   Complete set of entrance animations
+   ========================================================= */
+
+@utility cs-fade-in {
+  animation-name: csFadeIn;
+}
+@utility cs-fade-out {
+  animation-name: csFadeOut;
+}
+@utility cs-scale-in {
+  animation-name: csScaleIn;
+}
+@utility cs-scale-out {
+  animation-name: csScaleOut;
+}
+@utility cs-zoom-in {
+  animation-name: csZoomIn;
+}
+@utility cs-zoom-out {
+  animation-name: csZoomOut;
+}
+@utility cs-slide-up {
+  animation-name: csSlideUp;
+}
+@utility cs-slide-down {
+  animation-name: csSlideDown;
+}
+@utility cs-slide-left {
+  animation-name: csSlideLeft;
+}
+@utility cs-slide-right {
+  animation-name: csSlideRight;
+}
+@utility cs-blur-in {
+  animation-name: csBlurIn;
+}
+@utility cs-blur-out {
+  animation-name: csBlurOut;
+}
+@utility cs-rotate-in {
+  animation-name: csRotateIn;
+}
+@utility cs-flip-in {
+  animation-name: csFlipIn;
+}
+
+/* v0.8.0-kompatible Aliase */
+@utility cs-anim {
+  animation-duration: var(--cs-anim-duration, var(--cs-anim-duration-md));
+  animation-timing-function: var(--cs-anim-ease, var(--cs-anim-ease-standard));
+  animation-iteration-count: 1;
+  animation-direction: var(--cs-anim-direction, normal);
+  animation-fill-mode: var(--cs-anim-fill, both);
+  animation-delay: var(--cs-anim-delay, 0ms);
+}
+
+/* Additional utility classes that match v0.8.0 */
+@utility cs-reveal-3d-up {
+  animation-name: csReveal3DUp;
+}
+@utility cs-reveal-3d-right {
+  animation-name: csReveal3DRight;
+}
+@utility cs-marquee {
+  animation-name: csMarqueeLeft;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@utility cs-parallax-y {
+  animation-name: csParallaxY;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+/* =========================================================
+   CONTINUOUS ANIMATION UTILITIES
+   Looping and infinite animations
+   ========================================================= */
+
+@utility cs-rotate {
+  animation-name: csRotate;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@utility cs-pulse {
+  animation-name: csPulse;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-iteration-count: infinite;
+}
+
+@utility cs-bounce {
+  animation-name: csBounce;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-iteration-count: infinite;
+}
+
+@utility cs-wiggle {
+  animation-name: csWiggle;
+}
+@utility cs-shake {
+  animation-name: csShake;
+}
+@utility cs-heartbeat {
+  animation-name: csHeartbeat;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-iteration-count: infinite;
+}
+
+@utility cs-rubber-band {
+  animation-name: csRubberBand;
+}
+
+/* =========================================================
+   3D ANIMATION UTILITIES
+   Perspective and 3D transform animations
+   ========================================================= */
+
+@utility cs-reveal-3d-up {
+  animation-name: csReveal3DUp;
+}
+@utility cs-reveal-3d-right {
+  animation-name: csReveal3DRight;
+}
+@utility cs-reveal-3d-left {
+  animation-name: csReveal3DLeft;
+}
+@utility cs-flip-3d-x {
+  animation-name: csFlip3DX;
+  animation-duration: var(--cs-anim-duration-lg);
+}
+
+@utility cs-flip-3d-y {
+  animation-name: csFlip3DY;
+  animation-duration: var(--cs-anim-duration-lg);
+}
+
+/* =========================================================
+   SCROLL & PARALLAX UTILITIES
+   Scroll-based and parallax animations
+   ========================================================= */
+
+@utility cs-marquee-left {
+  animation-name: csMarqueeLeft;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@utility cs-marquee-right {
+  animation-name: csMarqueeRight;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@utility cs-parallax-y {
+  animation-name: csParallaxY;
+  animation-duration: 6s;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@utility cs-parallax-x {
+  animation-name: csParallaxX;
+  animation-duration: 6s;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@utility cs-float {
+  animation-name: csFloat;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+}
+
+@utility cs-sway {
+  animation-name: csSway;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+/* =========================================================
+   COMPONENT ANIMATION UTILITIES
+   Ready-to-use component animations
+   ========================================================= */
+
+/* Button Press Animation */
+@utility cs-btn-press {
+  animation-name: csBtnPress;
+  animation-duration: var(--cs-anim-duration-xxs);
+  animation-timing-function: var(--cs-anim-ease-soft-spring);
+}
+
+/* Dropdown Animations */
+@utility cs-dropdown-in {
+  animation-name: csDropdownIn;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-dropdown-out {
+  animation-name: csDropdownOut;
+  animation-duration: var(--cs-anim-duration-xs);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Tooltip Animations */
+@utility cs-tooltip-in {
+  animation-name: csTooltipIn;
+  animation-duration: var(--cs-anim-duration-xs);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-tooltip-out {
+  animation-name: csTooltipOut;
+  animation-duration: var(--cs-anim-duration-xxs);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Modal Animations */
+@utility cs-modal-in {
+  animation-name: csModalIn;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-modal-out {
+  animation-name: csModalOut;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Backdrop Animations */
+@utility cs-backdrop-in {
+  animation-name: csBackdropIn;
+  animation-duration: var(--cs-anim-duration-md);
+}
+
+@utility cs-backdrop-out {
+  animation-name: csBackdropOut;
+  animation-duration: var(--cs-anim-duration-sm);
+}
+
+/* Drawer Animations */
+@utility cs-drawer-in-left {
+  animation-name: csDrawerInLeft;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-drawer-out-left {
+  animation-name: csDrawerOutLeft;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+@utility cs-drawer-in-right {
+  animation-name: csDrawerInRight;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-drawer-out-right {
+  animation-name: csDrawerOutRight;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+@utility cs-drawer-in-top {
+  animation-name: csDrawerInTop;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-drawer-out-top {
+  animation-name: csDrawerOutTop;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+@utility cs-drawer-in-bottom {
+  animation-name: csDrawerInBottom;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-drawer-out-bottom {
+  animation-name: csDrawerOutBottom;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Accordion Animations */
+@utility cs-accordion-in {
+  animation-name: csAccordionIn;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-decelerate);
+}
+
+@utility cs-accordion-out {
+  animation-name: csAccordionOut;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+@utility cs-accordion-fade {
+  animation-name: csFadeIn;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-decelerate);
+}
+
+/* Toast Animations */
+@utility cs-toast-in {
+  animation-name: csToastIn;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-toast-out {
+  animation-name: csToastOut;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Chip Animations */
+@utility cs-chip-in {
+  animation-name: csChipIn;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+@utility cs-chip-out {
+  animation-name: csChipOut;
+  animation-duration: var(--cs-anim-duration-xs);
+  animation-timing-function: var(--cs-anim-ease-accelerate);
+}
+
+/* Badge Animation */
+@utility cs-badge-pop {
+  animation-name: csBadgePop;
+  animation-duration: var(--cs-anim-duration-sm);
+  animation-timing-function: var(--cs-anim-ease-bounce);
+}
+
+/* Spinner Animation */
+@utility cs-spinner {
+  animation-name: csSpinner;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+/* Progress Animations */
+@utility cs-progress-indeterminate {
+  animation-name: csProgressIndeterminate;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+/* Carousel Animations */
+@utility cs-carousel-slide {
+  animation-name: csCarouselSlide;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-timing-function: var(--cs-anim-ease-decelerate);
+}
+
+@utility cs-carousel-fade {
+  animation-name: csCarouselFade;
+  animation-duration: var(--cs-anim-duration-lg);
+  animation-timing-function: var(--cs-anim-ease-standard);
+}
+
+/* Ripple Effect */
+@utility cs-btn-ripple {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: color-mix(
+      in srgb,
+      var(--cs-ripple-color, currentColor) 20%,
+      transparent
+    );
+    transform: translate(-50%, -50%);
+    animation: csRippleSpread 0.6s ease-out;
+  }
+}
+
+/* Navigation Underline */
+@utility cs-nav-underline-in {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -2px;
+    width: var(--cs-underline-w, 0%);
+    height: var(--cs-underline-h, 2px);
+    background: currentColor;
+    border-radius: 999px;
+    transform: translateX(-50%);
+    transition: width var(--cs-anim-duration-sm) var(--cs-anim-ease-decelerate);
+  }
+
+  &:hover::after {
+    --cs-underline-w: 100%;
+  }
+}
+
+/* Tab Slide Animation */
+@utility cs-tab-slide {
+  animation-name: csTabSlide;
+  animation-duration: var(--cs-anim-duration-sm);
+}
+
+/* Notification Slide */
+@utility cs-notification-slide {
+  animation-name: csNotificationSlide;
+  animation-duration: var(--cs-anim-duration-md);
+  animation-timing-function: var(--cs-anim-ease-spring);
+}
+
+/* =========================================================
+   LOADING & PROGRESS UTILITIES
+   Loading states and progress indicators
+   ========================================================= */
+
+@utility cs-skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, currentColor 10%, transparent),
+    transparent
+  );
+  background-size: 200% 100%;
+  animation: csSkeletonShimmer 1.5s infinite;
+}
+
+@utility cs-progress-grow {
+  animation-name: csProgressGrow;
+  animation-timing-function: var(--cs-anim-ease-decelerate);
+}
+
+@utility cs-dot-loader {
+  animation-name: csDotLoader;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+/* =========================================================
+   ADVANCED STAGGER SYSTEM
+   Orchestrated animations with extended support
+   ========================================================= */
+
+@utility cs-stagger-50 {
+  > .cs-anim:nth-child(1) {
+    --cs-anim-delay: 0ms;
+  }
+  > .cs-anim:nth-child(2) {
+    --cs-anim-delay: 50ms;
+  }
+  > .cs-anim:nth-child(3) {
+    --cs-anim-delay: 100ms;
+  }
+  > .cs-anim:nth-child(4) {
+    --cs-anim-delay: 150ms;
+  }
+  > .cs-anim:nth-child(5) {
+    --cs-anim-delay: 200ms;
+  }
+  > .cs-anim:nth-child(6) {
+    --cs-anim-delay: 250ms;
+  }
+  > .cs-anim:nth-child(7) {
+    --cs-anim-delay: 300ms;
+  }
+  > .cs-anim:nth-child(8) {
+    --cs-anim-delay: 350ms;
+  }
+  > .cs-anim:nth-child(9) {
+    --cs-anim-delay: 400ms;
+  }
+  > .cs-anim:nth-child(10) {
+    --cs-anim-delay: 450ms;
+  }
+  > .cs-anim:nth-child(11) {
+    --cs-anim-delay: 500ms;
+  }
+  > .cs-anim:nth-child(12) {
+    --cs-anim-delay: 550ms;
+  }
+}
+
+@utility cs-stagger-75 {
+  > .cs-anim:nth-child(1) {
+    --cs-anim-delay: 0ms;
+  }
+  > .cs-anim:nth-child(2) {
+    --cs-anim-delay: 75ms;
+  }
+  > .cs-anim:nth-child(3) {
+    --cs-anim-delay: 150ms;
+  }
+  > .cs-anim:nth-child(4) {
+    --cs-anim-delay: 225ms;
+  }
+  > .cs-anim:nth-child(5) {
+    --cs-anim-delay: 300ms;
+  }
+  > .cs-anim:nth-child(6) {
+    --cs-anim-delay: 375ms;
+  }
+  > .cs-anim:nth-child(7) {
+    --cs-anim-delay: 450ms;
+  }
+  > .cs-anim:nth-child(8) {
+    --cs-anim-delay: 525ms;
+  }
+  > .cs-anim:nth-child(9) {
+    --cs-anim-delay: 600ms;
+  }
+  > .cs-anim:nth-child(10) {
+    --cs-anim-delay: 675ms;
+  }
+  > .cs-anim:nth-child(11) {
+    --cs-anim-delay: 750ms;
+  }
+  > .cs-anim:nth-child(12) {
+    --cs-anim-delay: 825ms;
+  }
+}
+
+@utility cs-stagger-100 {
+  > .cs-anim:nth-child(1) {
+    --cs-anim-delay: 0ms;
+  }
+  > .cs-anim:nth-child(2) {
+    --cs-anim-delay: 100ms;
+  }
+  > .cs-anim:nth-child(3) {
+    --cs-anim-delay: 200ms;
+  }
+  > .cs-anim:nth-child(4) {
+    --cs-anim-delay: 300ms;
+  }
+  > .cs-anim:nth-child(5) {
+    --cs-anim-delay: 400ms;
+  }
+  > .cs-anim:nth-child(6) {
+    --cs-anim-delay: 500ms;
+  }
+  > .cs-anim:nth-child(7) {
+    --cs-anim-delay: 600ms;
+  }
+  > .cs-anim:nth-child(8) {
+    --cs-anim-delay: 700ms;
+  }
+  > .cs-anim:nth-child(9) {
+    --cs-anim-delay: 800ms;
+  }
+  > .cs-anim:nth-child(10) {
+    --cs-anim-delay: 900ms;
+  }
+  > .cs-anim:nth-child(11) {
+    --cs-anim-delay: 1000ms;
+  }
+  > .cs-anim:nth-child(12) {
+    --cs-anim-delay: 1100ms;
+  }
+}
+
+@utility cs-stagger-150 {
+  > .cs-anim:nth-child(1) {
+    --cs-anim-delay: 0ms;
+  }
+  > .cs-anim:nth-child(2) {
+    --cs-anim-delay: 150ms;
+  }
+  > .cs-anim:nth-child(3) {
+    --cs-anim-delay: 300ms;
+  }
+  > .cs-anim:nth-child(4) {
+    --cs-anim-delay: 450ms;
+  }
+  > .cs-anim:nth-child(5) {
+    --cs-anim-delay: 600ms;
+  }
+  > .cs-anim:nth-child(6) {
+    --cs-anim-delay: 750ms;
+  }
+  > .cs-anim:nth-child(7) {
+    --cs-anim-delay: 900ms;
+  }
+  > .cs-anim:nth-child(8) {
+    --cs-anim-delay: 1050ms;
+  }
+  > .cs-anim:nth-child(9) {
+    --cs-anim-delay: 1200ms;
+  }
+  > .cs-anim:nth-child(10) {
+    --cs-anim-delay: 1350ms;
+  }
+  > .cs-anim:nth-child(11) {
+    --cs-anim-delay: 1500ms;
+  }
+  > .cs-anim:nth-child(12) {
+    --cs-anim-delay: 1650ms;
+  }
+}
+
+@utility cs-stagger-200 {
+  > .cs-anim:nth-child(1) {
+    --cs-anim-delay: 0ms;
+  }
+  > .cs-anim:nth-child(2) {
+    --cs-anim-delay: 200ms;
+  }
+  > .cs-anim:nth-child(3) {
+    --cs-anim-delay: 400ms;
+  }
+  > .cs-anim:nth-child(4) {
+    --cs-anim-delay: 600ms;
+  }
+  > .cs-anim:nth-child(5) {
+    --cs-anim-delay: 800ms;
+  }
+  > .cs-anim:nth-child(6) {
+    --cs-anim-delay: 1000ms;
+  }
+  > .cs-anim:nth-child(7) {
+    --cs-anim-delay: 1200ms;
+  }
+  > .cs-anim:nth-child(8) {
+    --cs-anim-delay: 1400ms;
+  }
+  > .cs-anim:nth-child(9) {
+    --cs-anim-delay: 1600ms;
+  }
+  > .cs-anim:nth-child(10) {
+    --cs-anim-delay: 1800ms;
+  }
+  > .cs-anim:nth-child(11) {
+    --cs-anim-delay: 2000ms;
+  }
+  > .cs-anim:nth-child(12) {
+    --cs-anim-delay: 2200ms;
+  }
+}
+
+/* =========================================================
+   PERFORMANCE UTILITIES
+   Optimization hints for better animation performance
+   ========================================================= */
+
+@utility cs-will-transform {
+  will-change: transform;
+}
+@utility cs-will-opacity {
+  will-change: opacity;
+}
+@utility cs-will-filter {
+  will-change: filter;
+}
+@utility cs-will-scroll {
+  will-change: scroll-position;
+}
+@utility cs-will-auto {
+  will-change: auto;
+}
+
+/* Transform origin utilities */
+@utility cs-origin-center {
+  transform-origin: center;
+}
+@utility cs-origin-top {
+  transform-origin: top;
+}
+@utility cs-origin-top-right {
+  transform-origin: top right;
+}
+@utility cs-origin-right {
+  transform-origin: right;
+}
+@utility cs-origin-bottom-right {
+  transform-origin: bottom right;
+}
+@utility cs-origin-bottom {
+  transform-origin: bottom;
+}
+@utility cs-origin-bottom-left {
+  transform-origin: bottom left;
+}
+@utility cs-origin-left {
+  transform-origin: left;
+}
+@utility cs-origin-top-left {
+  transform-origin: top left;
+}
+
+/* v0.8.0-kompatible Aliase für transform-origin */
+@utility cs-t-origin-top {
+  transform-origin: top;
+}
+@utility cs-t-origin-center {
+  transform-origin: center;
+}
+@utility cs-t-origin-bottom {
+  transform-origin: bottom;
+}
+
+/* v0.8.0-kompatible will-change Aliase */
+@utility cs-will-transform {
+  will-change: transform;
+}
+@utility cs-will-opacity {
+  will-change: opacity;
+}
+@utility cs-will-filter {
+  will-change: filter;
+}
+
+/* v0.8.0-kompatible 3D Aliase */
+@utility cs-t-preserve-3d {
+  transform-style: preserve-3d;
+}
+
+/* 3D Perspective utilities */
+@utility cs-preserve-3d {
+  transform-style: preserve-3d;
+}
+@utility cs-perspective-sm {
+  perspective: 500px;
+}
+@utility cs-perspective {
+  perspective: 1000px;
+}
+@utility cs-perspective-lg {
+  perspective: 1500px;
+}
+@utility cs-backface-hidden {
+  backface-visibility: hidden;
+}
+@utility cs-backface-visible {
+  backface-visibility: visible;
+}
+
+/* =========================================================
+   SCROLL-BASED ANIMATIONS
+   Modern scroll-timeline and view-timeline support
+   ========================================================= */
+
+@utility cs-scroll-reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition:
+    opacity 0.6s ease-out,
+    transform 0.6s ease-out;
+
+  @supports (animation-timeline: view()) {
+    animation: csScrollReveal 1s ease-out;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+}
+
+@keyframes csScrollReveal {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@utility cs-scroll-scale {
+  transform: scale(0.8);
+  transition: transform 0.6s ease-out;
+
+  @supports (animation-timeline: view()) {
+    animation: csScrollScale 1s ease-out;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+}
+
+@keyframes csScrollScale {
+  0% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@utility cs-parallax-scroll {
+  @supports (animation-timeline: scroll()) {
+    animation: csParallaxScroll linear;
+    animation-timeline: scroll();
+  }
+}
+
+@keyframes csParallaxScroll {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50px);
+  }
+}
+
+/* =========================================================
+   ACCESSIBILITY & REDUCED MOTION
+   Comprehensive reduced motion support with smart fallbacks
+   ========================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable all animations */
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  /* Override specific animation utilities */
+  .cs-pulse,
+  .cs-bounce,
+  .cs-wiggle,
+  .cs-shake,
+  .cs-heartbeat,
+  .cs-rubber-band,
+  .cs-rotate,
+  .cs-marquee-left,
+  .cs-marquee-right,
+  .cs-parallax-y,
+  .cs-parallax-x,
+  .cs-float,
+  .cs-sway,
+  .cs-skeleton-shimmer,
+  .cs-dot-loader {
+    animation: none !important;
+  }
+
+  /* Keep essential entrance animations but make them instant */
+  .cs-fade-in,
+  .cs-scale-in,
+  .cs-slide-up,
+  .cs-slide-down,
+  .cs-slide-left,
+  .cs-slide-right {
+    animation-duration: 0.01ms !important;
+  }
+
+  /* Remove transforms that could cause motion sickness */
+  .cs-3d-hover,
+  .cs-flip-3d-x,
+  .cs-flip-3d-y {
+    transform: none !important;
+  }
+}
+
+/* High contrast mode adjustments */
+@media (prefers-contrast: high) {
+  .cs-skeleton-shimmer {
+    background: repeating-linear-gradient(
+      90deg,
+      transparent 0%,
+      currentColor 50%,
+      transparent 100%
+    );
+  }
+}
+
+/* =========================================================
+   PRINT MEDIA SUPPORT
+   Disable animations for print media
+   ========================================================= */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* =========================================================
+   TOUCH DEVICE OPTIMIZATIONS
+   Optimizations for touch-based interactions
+   ========================================================= */
+
+@media (hover: none) and (pointer: coarse) {
+  /* Faster animations for touch devices */
+  .cs-btn-press {
+    animation-duration: 50ms;
+  }
+
+  .cs-btn-ripple::after {
+    animation-duration: 300ms;
+  }
+
+  /* Reduce motion intensity */
+  .cs-wiggle,
+  .cs-shake {
+    animation-duration: 150ms;
+  }
+}