@property --progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
@property --item-box-shadow {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}



.wheel-project {
    --inertiaspeed: 0;
    --item-width: 26vw;
    --item-height: 60vh;
    --wheel-radius: calc(100vw * 2);
    --item-offset-x: calc(var(--item-width) / 2);
    --item-offset-y: var(--item-height);
    --item-max-height: 50vw;
    --wheel-inertia-resistance: 0.5;
    --wheel-throw-resistance: 1000;

    @media (width <= 1280px) {
        --item-width: 40vw;
        --item-max-height: 55vh;
    }

    @media (width <= 500px) {
        --item-width: 90vw;
        --item-height: 50vh;
        --wheel-radius: 1200px;
        --item-offset-x: calc(var(--item-width) / 2);
        --item-offset-y: var(--item-height);
        --item-max-height: 70vh;
    }

    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: var(--color-light);

    .carousel {
        position: absolute;
        left: calc(50% - var(--item-offset-x));
        top: calc((100vh - var(--item-offset-y)) / 2);
        transform-origin: var(--item-offset-x) var(--wheel-radius);
        will-change: transform;
        cursor: grab;
        &:active {
            cursor: grabbing;
        }
        .wrapper {
            position: absolute;
            height: var(--item-height);
            transform-origin: var(--item-offset-x) var(--wheel-radius);
            transform: rotate(calc(var(--i) * 10deg));
            transition: opacity 0.3s ease;
            z-index: 10;
            .wheel-item {
                --item-box-shadow: 0;
                width: var(--item-width);
                height: var(--item-height);
                max-height: var(--item-max-height);
                aspect-ratio: 3/4;
                overflow: hidden;
                position: relative;
                transition: transform 0.9s ease-out, --item-box-shadow 2s ease;
                transform: scale(0.75) rotate( calc(var(--inertiaspeed) / 3 * 1deg) );
                will-change: transform;
            }

            &.actif {
                opacity: 1;
                z-index: 20;
                .wheel-item {
                    transform: scale(1) rotate(0deg);
                    --item-box-shadow: 100%;
                    box-shadow: 0 0 50px color-mix(in srgb, var(--color-accent) var(--item-box-shadow), transparent);
                }
            }
        }
    }

    .wrapper.actif .wheel-item {
        transform: scale(1);
        .wheel-media {
            --progress: 0;
        }
    }

    .wheel-link {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .wheel-media {


        transition: --progress 2s ease;

        width: 100%;
        height: 100%;
        overflow: hidden;

        /*--progress: 0.5;*/
        /*--clipMaskValue: 10%;*/
        /*--clipMaskIn: calc( var(--progress) * var(--clipMaskValue));*/
        /*--clipMaskOut: calc( 100% - (var(--progress) * var(--clipMaskValue)));*/
        /*clip-path: polygon( var(--clipMaskIn) var(--clipMaskIn), var(--clipMaskOut) var(--clipMaskIn), var(--clipMaskOut) var(--clipMaskOut), var(--clipMaskIn) var(--clipMaskOut));*/

        img, video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .wheel-content {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 2;
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: translateY(20px);
    }

    .wrapper.actif .wheel-content {
        opacity: 1;
        transform: translateY(0);
    }

    .wheel-swipe-indicator {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        z-index: 30;
        pointer-events: none;
        color: var(--color-light);

        .indicator-text {
            white-space: nowrap;
        }

        .indicator-line {
            width: 80px;
            height: 1px;
            background: color-mix(in srgb, currentColor 20%, transparent);
            position: relative;
            overflow: hidden;

            .line-dot {
                position: absolute;
                top: 0;
                left: 0;
                width: 30px;
                height: 100%;
                background: var(--color-accent);
                animation: swipeLine 2.5s infinite ease-in-out;
            }
        }
    }
}

@keyframes swipeLine {
    0% { transform: translateX(-100%); }
    40% { transform: translateX(266%); }
    60% { transform: translateX(266%); }
    100% { transform: translateX(-100%); }
}