// ============================================================================
// move.gl | Screensaver Component Mixins
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Screensaver Component Mixins
/// ===========================================================================
///
/// This module provides mixins for creating screensaver UI components.
///
/// @group Components
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
////


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

@use "../variables" as *;


// ============================================================================
// Screensaver Container Mixins
// ============================================================================

///
/// Main screensaver overlay.
///
@mixin screensaver_container {
    position: fixed;
    inset: 0;
    z-index: var(--screensaver-z-index, $screensaver-z-index);
    background: var(--screensaver-bg, $screensaver-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--screensaver-fade, $screensaver-fade) ease,
                visibility var(--screensaver-fade, $screensaver-fade) ease;
}

///
/// Active screensaver state.
///
@mixin screensaver_active {
    opacity: 1;
    visibility: visible;
}


// ============================================================================
// Screensaver Content Mixins
// ============================================================================

///
/// Screensaver content wrapper.
///
@mixin screensaver_content {
    text-align: center;
    color: var(--screensaver-color, $screensaver-color);
}

///
/// Screensaver icon.
///
@mixin screensaver_icon {
    font-size: var(--screensaver-icon-size, $screensaver-icon-size);
    margin-bottom: 1rem;
    animation: screensaver-float 3s ease-in-out infinite;
}

///
/// Screensaver title.
///
@mixin screensaver_title {
    font-size: var(--screensaver-title-size, $screensaver-title-size);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

///
/// Screensaver hint/subtitle.
///
@mixin screensaver_hint {
    font-size: var(--screensaver-hint-size, $screensaver-hint-size);
    opacity: 0.8;
}


// ============================================================================
// Screensaver Animation Mixins
// ============================================================================

///
/// Float animation for screensaver icon.
///
/// @param {Length} $distance [-20px] - Float distance.
/// @param {Time} $duration [3s] - Animation duration.
///
@mixin keyframes_screensaver_float($distance: -20px, $duration: 3s) {
    @keyframes screensaver-float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY($distance);
        }
    }
}


// ============================================================================
// Screensaver Video Mixins
// ============================================================================

///
/// Video element for screensaver.
///
@mixin screensaver_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

///
/// Video overlay (dark tint).
///
@mixin screensaver_video_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

///
/// Gradient overlay for screensaver.
///
@mixin screensaver_gradient_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--screensaver-gradient-start, #667eea) 0%,
        var(--screensaver-gradient-end, #764ba2) 100%
    );
    opacity: var(--screensaver-overlay-opacity, 1);
}


// ============================================================================
// Screensaver Theme Mixins
// ============================================================================

///
/// Dark theme screensaver.
///
@mixin screensaver_dark {
    --screensaver-bg: #000000;
    --screensaver-color: #ffffff;
}

///
/// Light theme screensaver.
///
@mixin screensaver_light {
    --screensaver-bg: #f0f0f0;
    --screensaver-color: #333333;
}

///
/// Gradient background screensaver.
///
@mixin screensaver_gradient {
    --screensaver-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


// ============================================================================
// Screensaver Bounce Effect
// ============================================================================

///
/// Bouncing element for screensaver (DVD logo style).
///
@mixin screensaver_bounce {
    position: absolute;
    animation: screensaver-bounce-x linear infinite,
               screensaver-bounce-y linear infinite;
}

///
/// Horizontal bounce keyframes.
///
@mixin keyframes_screensaver_bounce_x($duration: 7s) {
    @keyframes screensaver-bounce-x {
        0%, 100% {
            left: 0;
        }
        50% {
            left: calc(100% - 100px);
        }
    }
}

///
/// Vertical bounce keyframes.
///
@mixin keyframes_screensaver_bounce_y($duration: 5s) {
    @keyframes screensaver-bounce-y {
        0%, 100% {
            top: 0;
        }
        50% {
            top: calc(100% - 100px);
        }
    }
}