@casoon/tailwindcss-animations/index.css

Complete animation system for Tailwind CSS v4 - 80+ animations with tree-shaking and modern features

/*!
 * tailwindcss-animations - Tailwind v4 Package
 * Version: 0.9.0
 * 
 * For use with Tailwind CSS v4
 * Usage: @import "@casoon/tailwindcss-animations/index.css";
 */

/* Note: @import "tailwindcss"; should be added by the consumer */

/*!
 * Casoon Animations - Complete Animation System for Tailwind v4
 * Version: 0.9.0 — COMPLETELY CONSOLIDATED & ENHANCED
 * 
 * SYSTEMATICALLY CONSOLIDATED FROM:
 * - src/index.css (main animation engine)
 * - src/styles/utilities/core.css (core keyframes and utilities)
 * - src/styles/utilities/stagger.css (stagger orchestration)
 * - src/styles/components/button.css (button interactions)
 * - src/styles/components/navigation.css (nav animations)
 * - src/styles/fallbacks.css (accessibility fallbacks)
 * 
 * TOTAL: 6 CSS FILES → Pure Tailwind v4 (80+ animations + advanced features)
 * 
 * New Features Added:
 * ✅ 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
 * 
 * Usage: @import "@casoon/tailwindcss-animations/index.css";
 */

/* 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;
  }
}