////
///
/// Transition Variables
/// ===========================================================================
///
/// Animation and transition timing tokens for the StyleScape design system.
///
/// @group Variables.HeadLayout
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Duration Tokens
// ============================================================================

/// Extra fast transition duration
$transition-duration-xfast: 0.1s !default;

/// Fast transition duration
$transition-duration-fast: 0.15s !default;

/// Base/normal transition duration
$transition-duration-base: 0.2s !default;

/// Slow transition duration
$transition-duration-slow: 0.3s !default;

/// Extra slow transition duration
$transition-duration-xslow: 0.5s !default;

// ============================================================================
// Timing Functions
// ============================================================================

/// Linear timing function
$transition-timing-linear: linear !default;

/// Ease timing function (default)
$transition-timing-ease: ease !default;

/// Ease-in timing function
$transition-timing-ease-in: ease-in !default;

/// Ease-out timing function
$transition-timing-ease-out: ease-out !default;

/// Ease-in-out timing function
$transition-timing-ease-in-out: ease-in-out !default;

/// Custom cubic-bezier for smooth deceleration
$transition-timing-decelerate: cubic-bezier(0, 0, 0.2, 1) !default;

/// Custom cubic-bezier for smooth acceleration
$transition-timing-accelerate: cubic-bezier(0.4, 0, 1, 1) !default;

/// Custom cubic-bezier for standard motion
$transition-timing-standard: cubic-bezier(0.4, 0, 0.2, 1) !default;

// ============================================================================
// CSS Custom Properties
// ============================================================================

:root {
    // Duration tokens
    --transition-duration-xfast: #{$transition-duration-xfast};
    --transition-duration-fast: #{$transition-duration-fast};
    --transition-duration-base: #{$transition-duration-base};
    --transition-duration-slow: #{$transition-duration-slow};
    --transition-duration-xslow: #{$transition-duration-xslow};

    // Timing function tokens
    --transition-timing-linear: #{$transition-timing-linear};
    --transition-timing-ease: #{$transition-timing-ease};
    --transition-timing-ease-in: #{$transition-timing-ease-in};
    --transition-timing-ease-out: #{$transition-timing-ease-out};
    --transition-timing-ease-in-out: #{$transition-timing-ease-in-out};
    --transition-timing-decelerate: #{$transition-timing-decelerate};
    --transition-timing-accelerate: #{$transition-timing-accelerate};
    --transition-timing-standard: #{$transition-timing-standard};
}

// ============================================================================
// Composite Transitions
// ============================================================================

/// Default transition shorthand
$transition-default: all $transition-duration-base
    $transition-timing-ease-in-out !default;

/// Fast transition shorthand
$transition-fast: all $transition-duration-fast $transition-timing-ease-in-out !default;

/// Slow transition shorthand
$transition-slow: all $transition-duration-slow $transition-timing-ease-in-out !default;