// ============================================================================
// move.gl | Transition & Hover Effect Classes
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Transition & Hover Classes
/// ===========================================================================
///
/// This module provides ready-to-use CSS classes for transitions and
/// hover effects. Each class uses the corresponding mixin from the
/// mixins/transitions and mixins/effects modules.
///
/// @group Classes
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
////


// ============================================================================
// Use
// ============================================================================

@use "../mixins/transitions" as *;
@use "../mixins/effects" as *;
@use "../mixins/controls" as *;


// ============================================================================
// Basic Transition Classes
// ============================================================================

/// Transition opacity
.transition-opacity {
    @include hover_transition(opacity);
    @include opacity_hover(1, 0.5);
}

/// Transition transform (scale)
.transition-scale {
    @include hover_scale(1.2);
}

/// Transition transform (translate)
.transition-translate {
    @include hover_translate(0, -10px);
}

/// Transition transform (rotate)
.transition-rotate {
    @include hover_rotate(15deg);
}

/// Transition background color
.transition-color {
    @include hover_transition(background-color);
    &:hover { background-color: #ef4444; }
}

/// Transition box-shadow
.transition-shadow {
    @include hover_shadow();
}


// ============================================================================
// Timing Function Classes
// ============================================================================

/// Linear timing
.timing-linear {
    @include transition(transform, 0.6s, linear);
    &.active { transform: translateX(100px); }
}

/// Ease timing
.timing-ease {
    @include transition(transform, 0.6s, ease);
    &.active { transform: translateX(100px); }
}

/// Ease-in timing
.timing-ease-in {
    @include transition(transform, 0.6s, ease-in);
    &.active { transform: translateX(100px); }
}

/// Ease-out timing
.timing-ease-out {
    @include transition(transform, 0.6s, ease-out);
    &.active { transform: translateX(100px); }
}

/// Ease-in-out timing
.timing-ease-in-out {
    @include transition(transform, 0.6s, ease-in-out);
    &.active { transform: translateX(100px); }
}

/// Bounce timing (custom cubic-bezier)
.timing-bounce {
    @include transition(transform, 0.6s, cubic-bezier(0.68, -0.55, 0.265, 1.55));
    &.active { transform: translateX(100px); }
}


// ============================================================================
// Transform Hover Classes
// ============================================================================

/// Translate X on hover
.transform-translate-x {
    @include hover_transition(transform);
    &:hover { transform: translateX(20px); }
}

/// Translate Y on hover
.transform-translate-y {
    @include hover_translate(0, -20px);
}

/// Scale on hover
.transform-scale {
    @include hover_scale(1.3);
}

/// Rotate on hover
.transform-rotate {
    @include hover_rotate(45deg);
}

/// Skew X on hover
.transform-skew-x {
    @include hover_skew(15deg, 0);
}

/// Skew Y on hover
.transform-skew-y {
    @include hover_skew(0, 15deg);
}

/// Rotate X (3D) on hover
.transform-rotate-x {
    @include hover_transition(transform);
    &:hover { transform: rotateX(45deg); }
}

/// Rotate Y (3D) on hover
.transform-rotate-y {
    @include hover_transition(transform);
    &:hover { transform: rotateY(45deg); }
}

/// Rotate Z on hover
.transform-rotate-z {
    @include hover_transition(transform);
    &:hover { transform: rotateZ(45deg); }
}

/// Combined: scale + rotate
.transform-combined-1 {
    @include hover_scale_rotate(1.2, 10deg);
}

/// Combined: translate + scale
.transform-combined-2 {
    @include hover_lift_scale(-10px, 1.1);
}

/// Combined: 3D rotate + scale
.transform-combined-3 {
    @include hover_3d_rotate(30deg, 15deg, 1.1);
}


// ============================================================================
// Hover Effect Classes
// ============================================================================

/// Scale hover effect
.hover--scale {
    @include hover_scale();
}

/// Lift hover effect
.hover--lift {
    @include hover_lift();
}

/// Glow hover effect
.hover--glow {
    @include hover_glow();
}

/// Shadow hover effect
.hover--shadow {
    @include hover_shadow();
}

/// Brighten hover effect
.hover--brighten {
    @include hover_brighten();
}

/// Darken hover effect
.hover--darken {
    @include hover_darken();
}

/// Rotate hover effect
.hover--rotate {
    @include hover_rotate();
}

/// Shake hover effect
.hover--shake {
    @include hover_shake();
}


// ============================================================================
// Cursor Classes
// ============================================================================

.cursor--default { @include cursor_default; }
.cursor--pointer { @include cursor_pointer; }
.cursor--text { @include cursor_text; }
.cursor--move { @include cursor_move; }
.cursor--grab { @include cursor_grab; }
.cursor--grabbing { @include cursor_grabbing; }
.cursor--not-allowed { @include cursor_not_allowed; }
.cursor--wait { @include cursor_wait; }
.cursor--help { @include cursor_help; }
.cursor--crosshair { @include cursor_crosshair; }
.cursor--zoom-in { @include cursor_zoom_in; }
.cursor--zoom-out { @include cursor_zoom_out; }

// Resize cursors
.cursor--n-resize { @include cursor_n_resize; }
.cursor--e-resize { @include cursor_e_resize; }
.cursor--s-resize { @include cursor_s_resize; }
.cursor--w-resize { @include cursor_w_resize; }
.cursor--ne-resize { @include cursor_ne_resize; }
.cursor--se-resize { @include cursor_se_resize; }
.cursor--sw-resize { @include cursor_sw_resize; }
.cursor--nw-resize { @include cursor_nw_resize; }
.cursor--ew-resize { @include cursor_ew_resize; }
.cursor--ns-resize { @include cursor_ns_resize; }
.cursor--col-resize { @include cursor_col_resize; }
.cursor--row-resize { @include cursor_row_resize; }


// ============================================================================
// Perspective Container
// ============================================================================

.perspective-container {
    @include perspective_container;
}